/**
 * Terminal Modal Styles for gdo-api
 *
 * FILE PURPOSE: Chrome for the fullscreen terminal modal that wraps the
 *               /terminal page in an iframe. Loaded by base.html on every
 *               page so the modal can be opened from the topbar button.
 * USED BY:      terminal-modal.js (modal injected into document.body)
 *
 * The /terminal page itself (rendered inside the iframe) is styled by
 * terminal.css — this file only styles the outer modal frame and the
 * page-chrome suppression applied to base.html when request.path == /terminal.
 */

/* ====== Terminal palette tokens ======
   Self-contained — the terminal modal is always dark regardless of the
   active gdo theme. Previously lived in the removed app-tokens.css. */
:root {
    --terminal-bg: #1e1e2e;
    --terminal-bg-dark: #0c0c0c;
    --terminal-header: #313244;
    --terminal-header-hover: #3a3a3a;
    --terminal-tab-bg: #2d2d2d;
    --terminal-text-muted: #cccccc;
    --terminal-border: #333;
}

/* ====== Modal Shell ====== */
.terminal-modal-dialog {
    padding: 20px;
    margin: 0;
    max-width: 100%;
    height: 100vh;
}

.terminal-modal-content {
    background: var(--terminal-bg-dark);
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.terminal-modal-header {
    background: var(--terminal-bg);
    border-bottom: 1px solid var(--terminal-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    height: 40px;
    flex-shrink: 0;
    position: relative;
}

.terminal-modal-header .terminal-header-left {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* ====== Dropdown (menu) Button ====== */
.terminal-dropdown-btn {
    background: transparent;
    border: none;
    color: var(--terminal-text-muted);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.terminal-dropdown-btn:hover {
    background: var(--terminal-header-hover);
    color: #ffffff;
}

.terminal-dropdown-btn i {
    font-size: 14px;
}

/* ====== Tab Strip (modal chrome) ====== */
.terminal-modal-header .terminal-tabs {
    display: flex;
    align-items: center;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 1 auto;
    min-width: 0;
    gap: 2px;
}

.terminal-modal-header .terminal-tabs::-webkit-scrollbar {
    height: 0;
}

.terminal-modal-header .terminal-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 32px;
    background: var(--terminal-tab-bg);
    color: var(--terminal-text-muted);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    margin-top: 4px;
    flex-shrink: 0;
    position: relative;
}

.terminal-modal-header .terminal-tab:hover {
    background: var(--terminal-header-hover);
}

.terminal-modal-header .terminal-tab.active {
    background: var(--terminal-bg-dark);
    color: #ffffff;
}

.terminal-modal-header .terminal-tab i {
    font-size: 14px;
}

.terminal-tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.terminal-tab:hover .terminal-tab-close {
    opacity: 0.7;
}

.terminal-tab-close:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.1);
}

.terminal-tab-close i {
    font-size: 10px;
}

/* ====== New Tab Button ====== */
.terminal-new-tab-btn {
    background: transparent;
    border: none;
    color: var(--terminal-text-muted);
    width: 36px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.terminal-new-tab-btn:hover {
    background: var(--terminal-header-hover);
    color: #ffffff;
}

.terminal-new-tab-btn i {
    font-size: 12px;
}

/* ====== Minimize Button ====== */
.terminal-minimize-btn {
    background: transparent;
    border: none;
    color: var(--terminal-text-muted);
    width: 46px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.terminal-minimize-btn:hover {
    background: var(--terminal-header-hover);
    color: #ffffff;
}

.terminal-minimize-btn i {
    font-size: 14px;
}

/* ====== Dropdown Menu ====== */
.terminal-dropdown-menu {
    position: absolute;
    top: 40px;
    left: 0;
    background: var(--terminal-tab-bg);
    border: 1px solid var(--terminal-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-width: 200px;
    z-index: var(--gdo-z-modal);
    display: none;
}

.terminal-dropdown-menu.show {
    display: block;
}

.terminal-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--terminal-text-muted);
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
}

.terminal-dropdown-item:hover {
    background: var(--terminal-header-hover);
}

.terminal-dropdown-item i {
    font-size: 14px;
}

/* ====== Modal Body / iframe ====== */
.terminal-modal-body {
    padding: 0;
    background: var(--terminal-bg-dark);
    flex: 1;
    overflow: hidden;
}

.terminal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--terminal-bg-dark);
}

/* NOTE: page-chrome suppression and the fullscreen layout-fill chain for the
   /terminal page live in terminal.css — it is loaded only on that page, is
   cache-busted, and owns everything inside the iframe. This file owns only the
   outer modal frame. */

/* ====== Modal backdrop ====== */
#terminalModal .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.85);
}

/* ====== Minimize / Maximize animations ====== */
@keyframes minimizeToIcon {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: scale(0.1) translate(calc(var(--icon-x) - 50vw), calc(var(--icon-y) - 50vh));
    }
}

.terminal-modal-dialog.minimizing {
    animation: minimizeToIcon 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes maximizeFromIcon {
    0% {
        opacity: 0;
        transform: scale(0.1) translate(calc(var(--icon-x) - 50vw), calc(var(--icon-y) - 50vh));
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

.terminal-modal-dialog.maximizing {
    animation: maximizeFromIcon 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}