/* ============================================================
   SGQ Irizar — Design Tokens + Dark / Light Mode
   ============================================================ */

/* ── Tokens — Tema Claro (padrão) ────────────────────────── */
:root,
[data-theme="light"] {
    /* Fundos de página */
    --sgq-bg:             #eaecf0;
    --sgq-bg-doc:         #e8eaed;

    /* Superfícies (cards, tabelas, modais) */
    --sgq-surface:        #ffffff;
    --sgq-surface-alt:    #f4f7fb;
    --sgq-surface-raised: #f2f2f2;

    /* Navegação */
    --sgq-nav:            #1a3a5c;
    --sgq-nav-sub:        #1e4570;
    --sgq-nav-mobile:     #152e4a;

    /* Texto */
    --sgq-text:           #1e2d3d;
    --sgq-text-2:         #4a5568;
    --sgq-text-3:         #7a8fa6;

    /* Bordas */
    --sgq-border:         #bbb;
    --sgq-border-2:       #d1d9e6;

    /* Seções do documento */
    --sgq-section-bg:     #e4e8ef;
    --sgq-section-text:   #1a3a5c;
    --sgq-section-br:     #b0bac8;

    /* Botões (btn-doc) */
    --sgq-btn-bg:         #f7f9fc;
    --sgq-btn-br:         #c0ccd8;
    --sgq-btn-text:       #1e2d3d;
    --sgq-btn-hover-bg:   #e8f0f8;
    --sgq-btn-hover-br:   #1a3a5c;

    /* Campos de formulário */
    --sgq-input-br:       #aaa;
    --sgq-input-focus:    #1a56a0;
    --sgq-input-focus-bg: #f0f6ff;
    --sgq-input-bg:       #ffffff;

    /* Login */
    --sgq-login-card:     #ffffff;
    --sgq-login-h2:       #1a3a5c;
    --sgq-login-p:        #7a8fa6;
    --sgq-login-label:    #4a5568;
    --sgq-login-input-bg: #ffffff;
    --sgq-login-input-br: #d1d9e6;
    --sgq-login-input-c:  #2c3e50;

    /* Preview modal */
    --sgq-modal-bg:       #ffffff;
    --sgq-modal-hd-bg:    #f4f7fb;
    --sgq-modal-hd-br:    #d4dce8;
    --sgq-modal-body-bg:  #eeeeee;
}

/* ── Tokens — Tema Escuro ─────────────────────────────────── */
[data-theme="dark"] {
    /* Fundos de página */
    --sgq-bg:             #111922;
    --sgq-bg-doc:         #0f1820;

    /* Superfícies */
    --sgq-surface:        #1c2a3a;
    --sgq-surface-alt:    #1a2636;
    --sgq-surface-raised: #243446;

    /* Navegação */
    --sgq-nav:            #0d1820;
    --sgq-nav-sub:        #091320;
    --sgq-nav-mobile:     #091320;

    /* Texto */
    --sgq-text:           #d8e4f0;
    --sgq-text-2:         #8aa0b8;
    --sgq-text-3:         #5a7a9a;

    /* Bordas */
    --sgq-border:         #2a3c52;
    --sgq-border-2:       #2a3c52;

    /* Seções do documento */
    --sgq-section-bg:     #243446;
    --sgq-section-text:   #94b8d8;
    --sgq-section-br:     #2a3c52;

    /* Botões */
    --sgq-btn-bg:         #1c2a3a;
    --sgq-btn-br:         #2a3c52;
    --sgq-btn-text:       #d8e4f0;
    --sgq-btn-hover-bg:   #223248;
    --sgq-btn-hover-br:   #4a7ab0;

    /* Campos de formulário */
    --sgq-input-br:       #2a3c52;
    --sgq-input-focus:    #4a7ab0;
    --sgq-input-focus-bg: #1a3048;
    --sgq-input-bg:       #1c2a3a;

    /* Login */
    --sgq-login-card:     #1c2a3a;
    --sgq-login-h2:       #94b8d8;
    --sgq-login-p:        #5a7a9a;
    --sgq-login-label:    #8aa0b8;
    --sgq-login-input-bg: #243446;
    --sgq-login-input-br: #2a3c52;
    --sgq-login-input-c:  #d8e4f0;

    /* Preview modal */
    --sgq-modal-bg:       #1c2a3a;
    --sgq-modal-hd-bg:    #243446;
    --sgq-modal-hd-br:    #2a3c52;
    --sgq-modal-body-bg:  #111922;
}

/* ── Gradiente do fundo no modo escuro ────────────────────── */
[data-theme="dark"] body {
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(26,58,92,0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(10,20,40,0.20) 0%, transparent 60%);
}

/* ── Transição suave (ativada após carregamento) ──────────── */
html.theme-ready body,
html.theme-ready .sidebar,
html.theme-ready .sidebar-user-menu,
html.theme-ready .sidebar-mobile-topbar,
html.theme-ready .doc-header,
html.theme-ready .doc-body,
html.theme-ready .doc-section-title,
html.theme-ready .doc-table th,
html.theme-ready .doc-table td,
html.theme-ready .btn-doc,
html.theme-ready .doc-input,
html.theme-ready select.doc-input,
html.theme-ready .login-card,
html.theme-ready .login-input-wrap input,
html.theme-ready #file-preview-box,
html.theme-ready #file-preview-header,
html.theme-ready #file-preview-content {
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

/* ── Botão de alternância de tema ─────────────────────────── */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    color: rgba(255,255,255,0.60);
    transition: background .14s, color .14s, transform .18s;
    flex-shrink: 0;
    margin-left: 4px;
    padding: 0;
}
.theme-toggle:hover {
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.92);
}
.theme-toggle:active {
    transform: scale(0.90);
}
.theme-toggle svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Ícone lua → visível no tema claro (clicar vai para escuro) */
/* Ícone sol → visível no tema escuro (clicar vai para claro) */
html:not([data-theme="dark"]) .theme-toggle .icon-sun  { display: none; }
html[data-theme="dark"]       .theme-toggle .icon-moon { display: none; }

/* ── SweetAlert2 no tema escuro ───────────────────────────── */
[data-theme="dark"] .swal2-popup {
    background: #1c2a3a !important;
    border: 1px solid #2a3c52 !important;
}
[data-theme="dark"] .swal2-title {
    color: #d8e4f0 !important;
}
[data-theme="dark"] .swal2-html-container {
    color: #8aa0b8 !important;
}
[data-theme="dark"] .swal2-icon.swal2-warning {
    border-color: #b8902a !important;
    color: #d4aa40 !important;
}
[data-theme="dark"] .swal2-icon.swal2-question {
    border-color: #4a7ab0 !important;
    color: #94b8d8 !important;
}

/* ── Modal de preview de arquivo (tema escuro) ────────────── */
[data-theme="dark"] #file-preview-box {
    background: var(--sgq-modal-bg);
}
[data-theme="dark"] #file-preview-header {
    background: var(--sgq-modal-hd-bg);
    border-bottom-color: var(--sgq-modal-hd-br);
}
[data-theme="dark"] #file-preview-title {
    color: #94b8d8;
}
[data-theme="dark"] #file-preview-content {
    background: var(--sgq-modal-body-bg);
}

/* ── Login — tema escuro ──────────────────────────────────── */
[data-theme="dark"] .login-card {
    background: var(--sgq-login-card);
    box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.30);
}
[data-theme="dark"] .login-card-header h2 {
    color: var(--sgq-login-h2);
}
[data-theme="dark"] .login-card-header p {
    color: var(--sgq-login-p);
}
[data-theme="dark"] .login-field label {
    color: var(--sgq-login-label);
}
[data-theme="dark"] .login-input-wrap input {
    background: var(--sgq-login-input-bg);
    border-color: var(--sgq-login-input-br);
    color: var(--sgq-login-input-c);
}
[data-theme="dark"] .login-input-wrap input:focus {
    border-color: #4a7ab0;
    box-shadow: 0 0 0 3px rgba(74,122,176,0.18);
}
[data-theme="dark"] .login-remember {
    color: var(--sgq-login-label);
}
[data-theme="dark"] .login-forgot {
    color: #6aa0cc;
}
[data-theme="dark"] .login-footer {
    color: rgba(255,255,255,0.22);
}
[data-theme="dark"] .login-input-wrap .pw-toggle {
    color: #5a7a9a;
}
[data-theme="dark"] .login-input-wrap .pw-toggle:hover {
    color: #94b8d8;
}

/* ── doc-meta divisor (tema escuro) ───────────────────────── */
[data-theme="dark"] .doc-meta-admin-sep {
    border-top-color: #2a3c52 !important;
    color: #5a7a9a !important;
}
[data-theme="dark"] .doc-meta-admin-sep a {
    color: #5a7a9a !important;
}
[data-theme="dark"] .doc-meta-admin-sep a:hover {
    color: #8aa0b8 !important;
}

/* ── Responsável table thead (dark) ───────────────────────── */
[data-theme="dark"] .responsible-table thead th {
    background: var(--sgq-surface-raised);
    color: var(--sgq-text);
}

/* ── btn-doc-primary mantém cor da marca em ambos os temas ── */
[data-theme="dark"] .btn-doc-primary {
    background: #1a4a78;
    border-color: #1a4a78;
    color: #fff;
}
[data-theme="dark"] .btn-doc-primary:hover {
    background: #1a3a5c;
}

/* ── btn-doc-danger (dark) ────────────────────────────────── */
[data-theme="dark"] .btn-doc-danger {
    border-color: #6b2020;
    color: #f08080;
}
[data-theme="dark"] .btn-doc-danger:hover {
    background: #2a1a1a;
}

/* ── Manutenção — indicador ATIVA (sem emoji) ─────────────── */
.nav-manut-ativa {
    color: #f6c94e !important;
    font-weight: 700;
}

/* ── Indicador de status na nav (ponto) ──────────────────── */
.nav-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.nav-status-dot.on  { background: #f6c94e; }
.nav-status-dot.off { background: rgba(255,255,255,0.30); }

/* ── Print — forçar claro ─────────────────────────────────── */
@media print {
    [data-theme="dark"] body,
    [data-theme="dark"] .doc-header,
    [data-theme="dark"] .doc-body,
    [data-theme="dark"] .doc-table th,
    [data-theme="dark"] .doc-table td,
    [data-theme="dark"] .doc-section-title {
        background: #fff !important;
        color: #000 !important;
        border-color: #bbb !important;
    }
}