/* OS-2045 Editor polish — find/replace dialog, read-only banner.
 * Plus settings-app extra tabs (shortcuts, about-grid).
 * Plus SSH terminal themed status bar.
 * Scoped under [data-theme-mode="os2045"] so the win3.11 theme stays clean.
 */

[data-theme-mode="os2045"] {
    .os-ssh-frame { display: flex; flex-direction: column; width: 100%; height: 100%; background: #050810; }
    .os-ssh-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 6px 14px;
        background: linear-gradient(180deg, rgba(18,26,38,0.95), rgba(10,15,24,0.95));
        border-bottom: 1px solid rgba(255,255,255,0.06);
        color: #e9edf3;
        font-size: 12px;
        font-family: 'Inter', system-ui, sans-serif;
    }
    .os-ssh-bar-left { display: flex; align-items: center; gap: 10px; flex: 1; }
    .os-ssh-bar-right { display: flex; align-items: center; gap: 6px; }
    .os-ssh-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #ffc66b;
        box-shadow: 0 0 8px currentColor;
        flex: 0 0 8px;
        transition: background 200ms ease;
    }
    .os-ssh-dot[data-state="ok"]  { background: #6ce69b; }
    .os-ssh-dot[data-state="err"] { background: #ff8a8a; }
    .os-ssh-dot[data-state="off"] { background: #6e7686; box-shadow: none; }
    .os-ssh-dot[data-state="connecting"] { animation: os-pulse 1s ease-in-out infinite; }
    @keyframes os-pulse { 50% { opacity: 0.4; } }
    .os-ssh-title { font-weight: 500; }
    .os-ssh-num { color: #99a2af; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
    .os-ssh-status { color: #99a2af; font-size: 11.5px; }
    .os-ssh-rename, .os-ssh-reconnect {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        color: #c8cdd6;
        border-radius: 6px;
        padding: 4px 10px;
        cursor: pointer;
        font-size: 12px;
        transition: background 100ms ease, border-color 100ms ease;
    }
    .os-ssh-rename:hover, .os-ssh-reconnect:hover {
        background: rgba(255,255,255,0.10);
        border-color: color-mix(in srgb, var(--theme-accent, #5fd1ff) 35%, transparent);
        color: #fff;
    }
    .os-ssh-frame iframe {
        flex: 1; border: 0;
        background: #050810;
    }
}


[data-theme-mode="os2045"] {
    .os-settings-shortcuts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 24px;
    }
    @media (max-width: 720px) { [data-theme-mode="os2045"] .os-settings-shortcuts { grid-template-columns: 1fr; } }
    .os-settings-shortcuts-sec h4 {
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--theme-accent, #5fd1ff);
        margin: 4px 0 6px;
        font-weight: 700;
    }
    .os-settings-shortcuts-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .os-settings-shortcuts-table td { padding: 4px 6px; border-bottom: 1px dashed rgba(255,255,255,0.06); }
    .os-settings-key { width: 40%; }
    .os-settings-key kbd {
        display: inline-block;
        padding: 2px 7px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.10);
        border-bottom-width: 2px;
        border-radius: 5px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        color: #e9edf3;
    }
    .os-settings-desc { color: #c8cdd6; }

    .os-settings-about-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
    .os-settings-about-row {
        display: flex; gap: 12px;
        padding: 8px 12px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 8px;
    }
    .os-settings-about-label {
        flex: 0 0 160px;
        color: #99a2af;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .os-settings-about-value {
        flex: 1;
        color: #e9edf3;
        font-size: 13px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }
    .os-settings-about-actions {
        display: flex; flex-wrap: wrap; gap: 6px;
        background: transparent;
        border: 0;
        padding: 8px 0 0;
    }
    .os-settings-about-actions button {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        color: #c8cdd6;
        padding: 8px 14px;
        border-radius: 7px;
        cursor: pointer;
        font-size: 12px;
        transition: background 100ms ease, border-color 100ms ease;
    }
    .os-settings-about-actions button:hover {
        background: rgba(255,255,255,0.10);
        border-color: color-mix(in srgb, var(--theme-accent, #5fd1ff) 35%, transparent);
        color: #fff;
    }
}

#codeEditor .editor-readonly-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 198, 90, 0.10);
    border-bottom: 1px solid rgba(255, 198, 90, 0.30);
    color: #ffc66b;
    font-size: 12px;
}
#codeEditor .editor-readonly-banner svg {
    width: 16px; height: 16px;
    flex: 0 0 16px;
}
#codeEditor #editorTextarea.readonly {
    opacity: 0.92;
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="os2045"] {
    .editor-find-dialog {
        position: absolute;
        top: 12px; right: 12px;
        z-index: 50;
        background: linear-gradient(180deg, rgba(18,26,38,0.96), rgba(10,15,24,0.96));
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 10px;
        padding: 8px 10px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.5);
        color: #e9edf3;
        display: none;
        min-width: 360px;
    }
    .editor-find-dialog.open { display: block; animation: os-fadein 100ms ease; }
    .efd-row {
        display: flex; align-items: center; gap: 6px;
        margin-bottom: 6px;
    }
    .efd-row:last-child { margin-bottom: 0; }
    .efd-find, .efd-replace {
        flex: 1;
        padding: 6px 9px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 6px;
        color: #f1f4f9;
        font-size: 12px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        outline: none;
    }
    .efd-find:focus, .efd-replace:focus {
        border-color: color-mix(in srgb, var(--theme-accent, #5fd1ff) 60%, transparent);
        background: rgba(255,255,255,0.06);
    }
    .efd-prev, .efd-next, .efd-close, .efd-replace-one, .efd-replace-all {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        color: #c8cdd6;
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 11px;
        cursor: pointer;
        transition: background 100ms ease, border-color 100ms ease;
    }
    .efd-prev:hover, .efd-next:hover, .efd-close:hover,
    .efd-replace-one:hover, .efd-replace-all:hover {
        background: rgba(255,255,255,0.10);
        color: #fff;
    }
    .efd-replace-all { color: var(--theme-accent, #5fd1ff); }
    .efd-count {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        color: #99a2af;
        min-width: 56px; text-align: center;
    }
    .efd-flag {
        display: flex; align-items: center; gap: 4px;
        font-size: 11px;
        color: #99a2af;
        cursor: pointer;
    }
    .efd-flag input { margin: 0; }
    .efd-flag:has(input:checked) { color: var(--theme-accent, #5fd1ff); }
}