/* =========================================================================
   SPARX — sistema de design partilhado
   Carregar sempre em último lugar (depois do Bootstrap / DataTables).
   Só altera o aspeto: não mexe em ids, nomes, ordem ou visibilidade (display)
   dos elementos, que continuam a ser controlados pelo JavaScript existente.
   ========================================================================= */

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    font-style: normal;
    src: url("../admin/fonts/Roboto-Light-webfont.woff") format("woff");
}
@font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    src: url("../admin/fonts/Roboto-Regular-webfont.woff") format("woff");
}
@font-face {
    font-family: "Roboto";
    font-weight: 700;
    font-style: normal;
    src: url("../admin/fonts/Roboto-Bold-webfont.woff") format("woff");
}

:root {
    --sx-green: #0f7b3f;
    --sx-green-700: #0b5f31;
    --sx-green-800: #084a26;
    --sx-green-100: #c6ddce;
    --sx-green-50: #dcebdf;
    --sx-red: #c8102e;
    --sx-red-700: #a30c25;
    --sx-red-50: #fbe9ec;
    --sx-amber: #9a6700;
    --sx-amber-50: #fff4d6;
    --sx-bg: #dfe6dd;
    --sx-surface: #f0f3ea;
    --sx-surface-2: #e7ece2;
    --sx-ink: #2b3431;
    --sx-ink-2: #515e58;
    --sx-ink-3: #78847e;
    --sx-line: #c8d2c6;
    --sx-line-2: #d8dfd4;
    --sx-focus: rgba(15, 123, 63, 0.25);
    --sx-radius: 8px;
    --sx-radius-sm: 6px;
    --sx-radius-lg: 14px;
    --sx-shadow-sm: 0 1px 2px rgba(27, 38, 33, 0.06), 0 1px 1px rgba(27, 38, 33, 0.04);
    --sx-shadow: 0 6px 18px rgba(27, 38, 33, 0.07), 0 1px 3px rgba(27, 38, 33, 0.05);
    --sx-shadow-lg: 0 18px 44px rgba(27, 38, 33, 0.14);
    --sx-font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --sx-topbar-h: 46px;
    --sx-nav-h: 46px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    background: var(--sx-bg) !important;
    background-image: radial-gradient(1200px 400px at 10% -10%, rgba(15, 123, 63, 0.07), transparent 60%) !important;
    background-attachment: fixed !important;
    color: var(--sx-ink);
    font-family: var(--sx-font);
    font-size: 14px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--sx-green-700); text-decoration: none; }
a:hover { color: var(--sx-green-800); text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--sx-font); color: var(--sx-ink); margin: 0 0 8px; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
b, strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--sx-green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- barra de topo (marca + utilizador) ---------- */
.sx-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--sx-topbar-h);
    padding: 0 20px;
    background: linear-gradient(90deg, var(--sx-green-700), var(--sx-green) 55%, #138a48);
    color: #fff;
    border-bottom: 3px solid var(--sx-red);
    box-shadow: 0 2px 10px rgba(8, 74, 38, 0.25);
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
}
.sx-brand {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fff;
    line-height: 1;
}
/* «SPARX» é ligação para https://index.sparx.pt/ (06/11/2026) */
.sx-brand a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.sx-brand a:hover { color: inherit; text-decoration: none; opacity: .85; }
.sx-brand a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.sx-brand img { height: 24px; width: auto; display: block; }
.sx-brand small {
    display: inline-block;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
    opacity: 0.95;
    vertical-align: 1px;
}
.sx-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
}
.sx-user::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9fe3b8;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* ---------- navbar (barra de navegação / contexto) ----------
   Mantém a distribuição actual (flex, espaçado) para não mudar posições. */
.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    min-height: var(--sx-nav-h);
    padding: 6px 14px;
    margin: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.2) blur(8px);
    -webkit-backdrop-filter: saturate(1.2) blur(8px);
    border-bottom: 1px solid var(--sx-line);
    box-shadow: var(--sx-shadow-sm);
    overflow: visible;
    flex: 0 0 auto;
}
.navbar a,
.navbar h2 {
    float: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--sx-radius);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--sx-ink);
    text-align: center;
    text-decoration: none;
    outline: none;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
/* ligações reais */
.navbar a[href] { color: var(--sx-green-700); }
.navbar a[href]:hover { background: var(--sx-green-50); border-color: var(--sx-green-100); color: var(--sx-green-800); text-decoration: none; }
/* título da página (âncora sem href) */
.navbar a:not([href]),
.navbar h2 {
    font-weight: 700;
    font-size: 15px;
    color: var(--sx-ink);
    cursor: default;
}
.navbar a:not([href]):hover, .navbar h2:hover { background: transparent; color: var(--sx-ink); }
.navbar a.right { float: none; }

/* menu de topo da página inicial (dropdowns por hover) */
.navbar.sx-nav-menu { display: block; overflow: visible; padding: 0 8px; }
.navbar.sx-nav-menu::after { content: ""; display: table; clear: both; }
.navbar.sx-nav-menu .dropdown { float: left; position: relative; }
.navbar.sx-nav-menu a.right { float: right; margin-top: 6px; }
.navbar.sx-nav-menu .dropbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--sx-nav-h);
    margin: 0;
    padding: 0 16px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--sx-ink);
    cursor: pointer;
    outline: none;
}
.navbar.sx-nav-menu .dropbtn i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    font-style: normal;
}
.navbar.sx-nav-menu .dropbtn i::before { content: none; }
.navbar.sx-nav-menu .dropdown:hover .dropbtn,
.navbar.sx-nav-menu .dropdown:focus-within .dropbtn { color: var(--sx-green-700); border-bottom-color: var(--sx-green); background: var(--sx-green-50); }
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 260px;
    padding: 6px 0;
    background: var(--sx-surface);
    border: 1px solid var(--sx-line);
    border-radius: 0 0 var(--sx-radius-lg) var(--sx-radius-lg);
    box-shadow: 0 10px 24px rgba(27, 38, 33, 0.14);
}
.dropdown-content a {
    display: block;
    float: none;
    padding: 9px 16px;
    border-radius: 0;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: var(--sx-ink);
    text-align: left;
}
.navbar .dropdown-content a[href] { color: var(--sx-ink); border-radius: 0; }
.navbar .dropdown-content a[href]:hover, .dropdown-content a:hover { background: var(--sx-green-50); color: var(--sx-green-800); text-decoration: none; border-color: transparent; }
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content { display: block; }

/* ---------- botões ----------
   A classe .btn vem do Bootstrap; aqui ganha o aspeto SPARX. */
.btn,
button.btn,
label.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
    color: var(--sx-ink);
    font-family: var(--sx-font);
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--sx-shadow-sm);
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sx-shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--sx-shadow-sm); }
.btn b { font-weight: 700; }
.btn:hover { background: var(--sx-green-50); border-color: var(--sx-green-100); color: var(--sx-green-800); text-decoration: none; }
.btn:active { background: var(--sx-green-100); }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sx-focus); }
.btn:disabled, .btn.disabled { opacity: 0.55; cursor: default; }
/* "display:block" definido em linha (mantido pelo JS) — fica em bloco mas com largura do conteúdo */
.btn[style*="display: block"], .btn[style*="display:block"] { display: flex !important; width: fit-content; }

/* acções principais (confirmam / gravam / enviam) */
.btn.sx-primary,
#envia_divergencia_, #valida_fatura_, #regista_fatura_, #observations_, #enviaemail_,
#disponibilizafatura_, #pedir_nc_fornecedor_, #savemotivoNC, #atualizarnif,
#add_additional_line, #trazerdados, #aply_discount, #anul_qtd_parc, #aply_NC, #Accept_QTD_sup,
label.btn[for="valida_fatura_"], #selecionaetiqueta, .btn-sync {
    background: linear-gradient(180deg, #138a48, var(--sx-green));
    border-color: var(--sx-green-700);
    color: #fff;
    box-shadow: 0 2px 6px rgba(15, 123, 63, 0.28);
}
.btn.sx-primary:hover,
#envia_divergencia_:hover, #valida_fatura_:hover, #regista_fatura_:hover, #observations_:hover, #enviaemail_:hover,
#disponibilizafatura_:hover, #pedir_nc_fornecedor_:hover, #savemotivoNC:hover, #atualizarnif:hover,
#add_additional_line:hover, #trazerdados:hover, #aply_discount:hover, #anul_qtd_parc:hover, #aply_NC:hover, #Accept_QTD_sup:hover,
label.btn[for="valida_fatura_"]:hover, #selecionaetiqueta:hover, .btn-sync:hover {
    background: var(--sx-green-700);
    border-color: var(--sx-green-800);
    color: #fff;
}
.btn-sync { min-height: 34px; padding: 6px 14px; border-radius: var(--sx-radius); border: 1px solid var(--sx-green-700); font-size: 13px; font-weight: 700; }

/* acções destrutivas */
.btn.sx-danger, #eliminar_doc, label.btn[for="elimina_linhas"] {
    background: var(--sx-surface) !important;
    border-color: #e5b3bb !important;
    color: var(--sx-red) !important;
}
.btn.sx-danger:hover, #eliminar_doc:hover, label.btn[for="elimina_linhas"]:hover {
    background: var(--sx-red-50) !important;
    border-color: var(--sx-red) !important;
    color: var(--sx-red-700) !important;
}
.navbar #eliminar_doc {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: var(--sx-radius);
    font-weight: 700;
}

/* Bootstrap outline (mantém-se discreto) */
.btn.btn-outline-secondary { background: var(--sx-surface); border-color: var(--sx-line); color: var(--sx-ink-2); font-weight: 400; }
.btn.btn-outline-secondary:hover { background: var(--sx-surface-2); color: var(--sx-ink); border-color: var(--sx-ink-3); }
.btn.dropdown-toggle { min-height: 28px; padding: 3px 10px; }

/* ---------- campos ---------- */
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], select, textarea {
    font-family: var(--sx-font);
    font-size: 13px;
    color: var(--sx-ink);
    background: var(--sx-surface);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    padding: 6px 9px;
    min-height: 32px;
    line-height: 1.3;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
select { padding-right: 26px; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%234b5953' stroke-width='1.6'/></svg>");
    background-repeat: no-repeat; background-position: right 9px center; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sx-green); box-shadow: 0 0 0 4px var(--sx-focus); background-color: var(--sx-surface); }
input[type="text"]:hover, input[type="date"]:hover, select:hover, textarea:hover { border-color: #b9c6bf; }
input::placeholder, textarea::placeholder { color: var(--sx-ink-3); }
input[readonly], input:disabled { background: var(--sx-surface-2); color: var(--sx-ink-2); }
input:disabled { opacity: 0.8; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sx-green); width: 15px; height: 15px; vertical-align: -2px; margin: 0 4px 0 0; cursor: pointer; }
label { font-weight: 700; color: var(--sx-ink-2); font-size: 12px; margin: 0; }
/* validação já existente (classes valid / invalid / error) */
input.invalid { border: 1px solid var(--sx-red) !important; box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15); }
input.valid { border: 1px solid var(--sx-green) !important; }
.error { display: none; margin-left: 6px; font-size: 12px; color: var(--sx-red); }
.error_show { display: inline; margin-left: 6px; font-size: 12px; color: var(--sx-red); }

/* ---------- tabelas ---------- */
.table, table.table {
    width: 100%;
    margin: 0 0 10px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--sx-line);
    background: var(--sx-surface);
    color: var(--sx-ink);
    font-size: 13px;
}
.table > :not(caption) > * > * { background: transparent; box-shadow: none; }
.table th, .table td,
.table-bordered th, .table-bordered td {
    padding: 8px 12px !important;
    border: none;
    border-bottom: 1px solid var(--sx-line-2);
    vertical-align: middle;
    font-size: 13px !important;
    text-align: left;
}
.table thead th, .table tr.header th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f4f7f5;
    border-bottom: 2px solid var(--sx-line);
    color: var(--sx-ink-2);
    font-weight: 700;
    font-size: 12px !important;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.table tbody tr:nth-child(even) { background: #fafcfb; }
.table tbody tr { transition: background-color 0.1s ease; }
.table tbody tr:hover, .table-hover tbody tr:hover { background: var(--sx-green-50); color: var(--sx-ink); box-shadow: inset 3px 0 0 var(--sx-green); }
.table tfoot th { background: var(--sx-surface-2); border-top: 2px solid var(--sx-line); color: var(--sx-ink); font-weight: 700; }
.table td a { font-weight: 700; }
td[contenteditable="true"] { cursor: text; }
td[contenteditable="true"]:focus { outline: 2px solid var(--sx-green); outline-offset: -2px; background: var(--sx-surface); }
.table td input[type="checkbox"], .table th input[type="checkbox"] { margin-right: 5px; }

/* DataTables */
.dataTables_wrapper { font-size: 13px; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { padding: 6px 0; color: var(--sx-ink-2); }
.dataTables_wrapper .dataTables_length select { min-height: 30px; padding: 3px 24px 3px 8px; width: auto; display: inline-block; }
.dataTables_wrapper .dataTables_filter input { min-height: 30px; margin-left: 6px; width: 220px; display: inline-block; }
.dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_length label { font-weight: 400; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.dataTables_wrapper .pagination { margin: 0; }
.dataTables_wrapper .pagination { gap: 4px; }
.dataTables_wrapper .pagination .page-item .page-link {
    color: var(--sx-green-700);
    border: 1px solid var(--sx-line);
    border-radius: 999px !important;
    margin: 0;
    background: var(--sx-surface);
    min-width: 32px;
    padding: 4px 10px;
    font-size: 13px;
    text-align: center;
    box-shadow: none;
}
.dataTables_wrapper .pagination .page-item.active .page-link { background: var(--sx-green); border-color: var(--sx-green-700); color: #fff; }
.dataTables_wrapper .pagination .page-item.disabled .page-link { color: var(--sx-ink-3); }
.dataTables_wrapper .pagination .page-link:hover { background: var(--sx-green-50); }
table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled { padding-right: 26px !important; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { bottom: 7px; right: 6px; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before { right: 11px; }
.sx-check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sx-check label { font-weight: 400; font-size: 13px !important; color: var(--sx-ink-2); cursor: pointer; }

/* ligação "Exportar para Excel" (Faturas Ativas) */
#export_excel_allfat, #export_excel_ {
    display: inline-flex !important;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 6px 12px;
    border-radius: var(--sx-radius);
    border: 1px solid var(--sx-green-100);
    background: var(--sx-surface);
    color: var(--sx-green-800);
    font-size: 13px;
    font-weight: 700;
}
#export_excel_allfat::before, #export_excel_::before {
    content: "";
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b5f31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M7 10l5 5 5-5'/><path d='M4 19h16'/></svg>") no-repeat center;
}
#export_excel_allfat:hover, #export_excel_:hover { background: var(--sx-green-50); text-decoration: none; }


/* ---------- mensagens do Django ---------- */
ul.messages {
    list-style: none;
    margin: 12px 20px 0;
    padding: 0;
}
ul.messages li {
    margin: 0 0 8px;
    padding: 10px 14px;
    border: 1px solid var(--sx-line);
    border-left: 4px solid var(--sx-green);
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
    font-size: 13px;
}
ul.messages li.error { border-left-color: var(--sx-red); display: block; margin-left: 0; color: var(--sx-ink); }
ul.messages li.warning { border-left-color: var(--sx-amber); }
ul.messages li.info { border-left-color: var(--sx-green); }

/* ---------- painéis genéricos ---------- */
.sx-panel {
    background: var(--sx-surface);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-lg);
    padding: 16px 20px;
    box-shadow: var(--sx-shadow);
}
.sx-muted { color: var(--sx-ink-2); }

/* ---------- ecrã de sessão não iniciada / login ---------- */
.sx-center {
    min-height: calc(100vh - var(--sx-topbar-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}
.sx-card {
    width: 100%;
    max-width: 400px;
    background: var(--sx-surface);
    border: 1px solid var(--sx-line);
    border-top: 4px solid var(--sx-green);
    border-radius: var(--sx-radius-lg);
    padding: 28px 28px 24px;
    box-shadow: var(--sx-shadow-lg);
}
.sx-card h2 { font-size: 20px; margin-bottom: 4px; }
.sx-card p { margin: 0 0 18px; color: var(--sx-ink-2); font-size: 13px; }
.sx-card .sx-field { margin-bottom: 14px; }
.sx-card .sx-field label { display: block; margin-bottom: 5px; }
.sx-card .sx-field input { width: 100%; font-size: 14px; min-height: 38px; }
.sx-card .btn { width: 100%; min-height: 40px; font-size: 14px !important; margin-top: 4px; }
.sx-login-brand { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.sx-login-brand .sx-brand { color: var(--sx-green); font-size: 24px; }
.sx-login-brand small { color: var(--sx-ink-3); font-size: 12px; font-weight: 300; letter-spacing: 0.02em; }
.sx-login-brand::after { content: ""; flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--sx-green) 0 70%, var(--sx-red) 70%); margin-left: 6px; }
.sx-card .errorlist { list-style: none; margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--sx-red); background: var(--sx-red-50); color: var(--sx-red-700); font-size: 13px; }

/* ---------- modo escuro ----------
   Ativado por <html data-theme="dark"> (botão na barra de topo; guardado em localStorage)
   ou pelo sistema quando não há preferência guardada. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] {
    --sx-green: #1f9a55;
    --sx-green-700: #178446;
    --sx-green-800: #8fd6a9;
    --sx-green-100: #2a5238;
    --sx-green-50: #243b2d;
    --sx-red: #e4435c;
    --sx-red-700: #ff7b8d;
    --sx-red-50: #45262b;
    --sx-amber: #e3b341;
    --sx-amber-50: #45391a;
    --sx-bg: #252b29;
    --sx-surface: #303733;
    --sx-surface-2: #39413d;
    --sx-ink: #d0d6d2;
    --sx-ink-2: #a9b3ad;
    --sx-ink-3: #828d87;
    --sx-line: #454f4a;
    --sx-line-2: #3e4743;
    --sx-focus: rgba(63, 185, 110, 0.35);
    --sx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sx-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --sx-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] body {
    background-image: radial-gradient(1200px 400px at 10% -10%, rgba(31, 154, 85, 0.12), transparent 60%) !important;
}
:root[data-theme="dark"] .sx-topbar { background: linear-gradient(90deg, #0b4a27, #0e6b37 55%, #138a48); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .navbar { background: rgba(48, 55, 51, 0.94); }
:root[data-theme="dark"] .navbar a:not([href]), :root[data-theme="dark"] .navbar h2 { color: var(--sx-ink); }
:root[data-theme="dark"] .btn { background: var(--sx-surface-2); color: var(--sx-ink); border-color: var(--sx-line); }
:root[data-theme="dark"] .btn:hover { background: var(--sx-green-50); border-color: var(--sx-green-100); color: var(--sx-green-800); }
:root[data-theme="dark"] .btn.sx-primary, :root[data-theme="dark"] #envia_divergencia_, :root[data-theme="dark"] #valida_fatura_, :root[data-theme="dark"] #regista_fatura_,
:root[data-theme="dark"] #observations_, :root[data-theme="dark"] #enviaemail_, :root[data-theme="dark"] #disponibilizafatura_, :root[data-theme="dark"] #pedir_nc_fornecedor_,
:root[data-theme="dark"] #savemotivoNC, :root[data-theme="dark"] #atualizarnif, :root[data-theme="dark"] #add_additional_line, :root[data-theme="dark"] #trazerdados,
:root[data-theme="dark"] #aply_discount, :root[data-theme="dark"] #anul_qtd_parc, :root[data-theme="dark"] #aply_NC, :root[data-theme="dark"] #Accept_QTD_sup,
:root[data-theme="dark"] label.btn[for="valida_fatura_"], :root[data-theme="dark"] #selecionaetiqueta, :root[data-theme="dark"] .btn-sync {
    background: linear-gradient(180deg, #23a85e, var(--sx-green)); color: #fff; border-color: var(--sx-green-700);
}
:root[data-theme="dark"] .btn.sx-danger, :root[data-theme="dark"] #eliminar_doc, :root[data-theme="dark"] label.btn[for="elimina_linhas"] {
    background: var(--sx-surface-2) !important; border-color: #5a2a33 !important; color: var(--sx-red-700) !important;
}
:root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
    background-color: var(--sx-surface-2); color: var(--sx-ink); border-color: var(--sx-line);
}
:root[data-theme="dark"] select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23b5bfba' stroke-width='1.6'/></svg>"); }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { background-color: var(--sx-surface-2); }
:root[data-theme="dark"] input[readonly], :root[data-theme="dark"] input:disabled { background: var(--sx-surface); color: var(--sx-ink-2); }
:root[data-theme="dark"] .table thead th, :root[data-theme="dark"] .table tr.header th { background: var(--sx-surface-2); color: var(--sx-ink-2); }
:root[data-theme="dark"] .table tbody tr:nth-child(even) { background: #1d2521; }
:root[data-theme="dark"] .table tfoot th { background: var(--sx-surface-2); }
:root[data-theme="dark"] td[contenteditable="true"]:focus { background: var(--sx-surface-2); }
:root[data-theme="dark"] .dataTables_wrapper .pagination .page-item .page-link { background: var(--sx-surface-2); color: var(--sx-green-800); border-color: var(--sx-line); }
:root[data-theme="dark"] .dataTables_wrapper .pagination .page-item.active .page-link { background: var(--sx-green); color: #fff; }
:root[data-theme="dark"] ul.messages li { background: var(--sx-surface); }
:root[data-theme="dark"] .dropdown-content, :root[data-theme="dark"] .dropdown-menu { background: var(--sx-surface-2); border-color: var(--sx-line); color: var(--sx-ink); }
:root[data-theme="dark"] .dropdown-menu .dropdown-item { color: var(--sx-ink); }
:root[data-theme="dark"] .dropdown-menu .dropdown-item:hover, :root[data-theme="dark"] .dropdown-content a[href]:hover { background: var(--sx-green-50); color: var(--sx-green-800); }
:root[data-theme="dark"] .sx-card .errorlist { background: var(--sx-red-50); }
:root[data-theme="dark"] .sx-login-brand .sx-brand { color: var(--sx-green-800); }
:root[data-theme="dark"] a { color: var(--sx-green-800); }
:root[data-theme="dark"] ::placeholder { color: var(--sx-ink-3); }

/* botão de alternar tema (barra de topo) */
.sx-topbar-acoes { display: inline-flex; align-items: center; gap: 10px; }
.sx-tema {
    width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer;
    transition: background-color 0.12s ease;
}
.sx-tema:hover { background: rgba(255, 255, 255, 0.26); }
.sx-tema:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sx-tema::before {
    content: ""; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>") no-repeat center / contain;
}
:root[data-theme="dark"] .sx-tema::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>") no-repeat center / contain;
}
/* no login não há barra verde: o botão fica discreto no canto */
.sx-tema-solto { position: fixed; top: 14px; right: 14px; z-index: 30; background: var(--sx-surface); color: var(--sx-ink-2); border-color: var(--sx-line); box-shadow: var(--sx-shadow-sm); }
.sx-tema-solto:hover { background: var(--sx-green-50); color: var(--sx-green-800); }