/* ===================================================
   IRIZAR - Info Faturamento - Design System
   =================================================== */

:root {
    --irizar-primary:     #555358;
    --irizar-dark:        #3d3b3f;
    --irizar-light:       rgba(85, 83, 88, 0.1);
    --navbar-h:           60px;
    --page-bg:            #f5f6fa;
    --card-bg:            #ffffff;
    --border-color:       #e9ecef;
    --text-primary:       #1a1a2e;
    --text-muted:         #6c757d;
    --shadow-sm:          0 2px 8px rgba(0,0,0,0.07);
    --shadow-md:          0 4px 16px rgba(0,0,0,0.10);
    --radius:             8px;
}

/* ===== TEMAS DE COR ===== */
[data-theme="oceano"] {
    --irizar-primary:     #0071e3;
    --irizar-dark:        #005bb5;
    --irizar-light:       rgba(0, 113, 227, 0.1);
}
[data-theme="floresta"] {
    --irizar-primary:     #2d9b4a;
    --irizar-dark:        #1e6e33;
    --irizar-light:       rgba(45, 155, 74, 0.1);
}
[data-theme="violeta"] {
    --irizar-primary:     #5856d6;
    --irizar-dark:        #3634a3;
    --irizar-light:       rgba(88, 86, 214, 0.1);
}
[data-theme="laranja"] {
    --irizar-primary:     #e08600;
    --irizar-dark:        #b56c00;
    --irizar-light:       rgba(224, 134, 0, 0.1);
}
[data-theme="rosa"] {
    --irizar-primary:     #e8264e;
    --irizar-dark:        #b81a39;
    --irizar-light:       rgba(232, 38, 78, 0.1);
}
[data-theme="vermelho"] {
    --irizar-primary:     #d33c43;
    --irizar-dark:        #a82e33;
    --irizar-light:       rgba(211, 60, 67, 0.1);
}
[data-theme="azul"] {
    --irizar-primary:     #0984e3;
    --irizar-dark:        #0671c4;
    --irizar-light:       rgba(9, 132, 227, 0.1);
}
[data-theme="lavanda"] {
    --irizar-primary:     #6c5ce7;
    --irizar-dark:        #5849c2;
    --irizar-light:       rgba(108, 92, 231, 0.1);
}
[data-theme="escuro"] {
    --irizar-primary:     #bb86fc;
    --irizar-dark:        #9965d4;
    --irizar-light:       rgba(187, 134, 252, 0.15);
    --page-bg:            #121212;
    --card-bg:            #1e1e1e;
    --border-color:       #333333;
    --text-primary:       #e1e1e1;
    --text-muted:         #9e9e9e;
    --shadow-sm:          0 2px 8px rgba(0,0,0,0.4);
    --shadow-md:          0 4px 16px rgba(0,0,0,0.5);
}

/* ---- Dark mode: component overrides ---- */
[data-theme="escuro"] body                              { color: var(--text-primary); }
[data-theme="escuro"] .main-footer                     { background: #1a1a1a; border-top-color: var(--border-color); }
[data-theme="escuro"] .content                         { background: #1e1e1e !important; border-color: var(--border-color) !important; color: var(--text-primary); }

/* Dropdowns */
[data-theme="escuro"] .user-menu-dropdown,
[data-theme="escuro"] .nav-dropdown-menu               { background: #1e1e1e; border-color: var(--border-color); }
[data-theme="escuro"] .user-menu-item                  { color: var(--text-muted); }
[data-theme="escuro"] .user-menu-item:hover            { background: #252525; color: var(--text-primary); }
[data-theme="escuro"] .user-menu-divider,
[data-theme="escuro"] .nav-dropdown-divider            { background: var(--border-color); }
[data-theme="escuro"] .nav-dropdown-item               { color: var(--text-muted); }
[data-theme="escuro"] .nav-dropdown-item:hover         { background: #252525; color: var(--irizar-primary); }

/* Theme picker */
[data-theme="escuro"] .theme-picker-panel              { background: #1e1e1e; }
[data-theme="escuro"] .theme-picker-title              { color: #666; }
[data-theme="escuro"] .theme-swatch                    { color: var(--text-primary); }
[data-theme="escuro"] .theme-swatch:hover              { background: #252525; }
[data-theme="escuro"] .theme-swatch.active             { background: #2a2a2a; }

/* Tables */
[data-theme="escuro"] .fat-table-wrap,
[data-theme="escuro"] .sp-table-wrap                   { border-color: var(--border-color); }
[data-theme="escuro"] .fat-table th,
[data-theme="escuro"] .sp-table th                     { background: #252525; color: #9aa; border-bottom-color: var(--border-color); }
[data-theme="escuro"] .fat-table td,
[data-theme="escuro"] .sp-table td                     { color: var(--text-primary); border-bottom-color: #2a2a2a; }
[data-theme="escuro"] .fat-table .col-sticky           { background: #1e1e1e; border-right-color: var(--border-color); }
[data-theme="escuro"] .fat-table tbody tr:hover td     { background: #252525; }
[data-theme="escuro"] .fat-table tbody tr:hover .col-sticky { background: #2a2a2a; }
[data-theme="escuro"] .sp-table tbody tr:hover td      { background: #252525; }

/* Filter bar */
[data-theme="escuro"] .fat-filters                     { background: #1e1e1e; border-color: var(--border-color); }
[data-theme="escuro"] .fat-filters label               { color: var(--text-muted); }
[data-theme="escuro"] .fat-filters input[type=text],
[data-theme="escuro"] .fat-filters select              { background: #252525; border-color: #444; color: var(--text-primary); }

/* Paginator */
[data-theme="escuro"] .fat-paginator .pagination li a,
[data-theme="escuro"] .fat-paginator .pagination li span { background: #1e1e1e; border-color: var(--border-color); color: var(--text-muted); }
[data-theme="escuro"] .fat-paginator .pagination li a:hover { background: #252525; color: var(--irizar-primary); }

/* SharePoint page */
[data-theme="escuro"] .sp-stat-card                    { background: #1e1e1e; border-color: var(--border-color); }
[data-theme="escuro"] .sp-stat-value                   { color: var(--text-primary); }
[data-theme="escuro"] .sp-stat-label,
[data-theme="escuro"] .sp-stat-sub                     { color: var(--text-muted); }
[data-theme="escuro"] .sp-actions-panel                { background: #1e1e1e; border-color: var(--border-color); }
[data-theme="escuro"] .sp-section-title                { color: var(--text-muted); }
[data-theme="escuro"] .sp-alert-warn                   { background: #2a2000; border-color: #4a3800; color: #e8c97a; }
[data-theme="escuro"] .sp-alert-ok                     { background: #0a2a10; border-color: #1a5a28; color: #7ae8a0; }
[data-theme="escuro"] .sp-empty                        { color: #555; }

/* Forms (add/edit) */
[data-theme="escuro"] body.logged-in input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]),
[data-theme="escuro"] body.logged-in select,
[data-theme="escuro"] body.logged-in textarea          { background: #252525 !important; border-color: #444 !important; color: var(--text-primary) !important; }
[data-theme="escuro"] body.logged-in label             { color: var(--text-muted); }
[data-theme="escuro"] .form-tab-btn                    { color: var(--text-muted); }
[data-theme="escuro"] .fsec                            { color: var(--text-muted); border-bottom-color: var(--border-color); }
[data-theme="escuro"] .delivery-badge                  { background: #1a2a3a !important; color: #6a9abf !important; border-color: #2a4a6a !important; }
[data-theme="escuro"] .incoterm-desc                   { background: #1e2a3a !important; border-color: #2a3a5a !important; color: #8aabcf !important; }

/* Buttons outline */
[data-theme="escuro"] .button-outline                  { color: var(--irizar-primary); border-color: var(--irizar-primary); background: transparent; }
[data-theme="escuro"] .button-outline:hover            { background: var(--irizar-light); }

/* Page headers */
[data-theme="escuro"] .fat-page-hd-sub,
[data-theme="escuro"] .back-link                       { color: var(--text-muted); }

/* =====================
   BASE
   ===================== */
body {
    font-family: 'Encode Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--page-bg);
}

body.logged-in {
    padding-top: var(--navbar-h);
}

/* =====================
   TOP NAVBAR
   ===================== */
.top-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--navbar-h);
    background: linear-gradient(135deg, var(--irizar-primary) 0%, var(--irizar-dark) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    z-index: 1030;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
    margin-right: 16px;
    flex-shrink: 0;
}

.navbar-brand:hover { text-decoration: none; color: white; }

.navbar-logo-img {
    height: 34px;
    width: auto;
    object-fit: contain;
    /* Se o logo for escuro, descomente a linha abaixo: */
    /* filter: brightness(0) invert(1); */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}

.brand-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Nav links */
.navbar-nav-main {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0; padding: 0;
    flex: 1;
}

.nav-link-main {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

.nav-link-main:hover,
.nav-link-main.active {
    background: rgba(255,255,255,0.16);
    color: white !important;
    text-decoration: none;
}

.nav-link-main i { font-size: 14px; width: 16px; text-align: center; }

/* Admin dropdown */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 4px;
    font-size: 11px;
    transition: transform 0.2s;
    display: inline-block;
}

.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown.show   .nav-dropdown-toggle::after { transform: rotate(180deg); }

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,0,0,0.05);
    min-width: 185px;
    padding: 5px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    z-index: 1050;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.show   .nav-dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.14s;
}

.nav-dropdown-item:hover { background: var(--page-bg); color: var(--irizar-primary); text-decoration: none; }
.nav-dropdown-item i { width: 16px; text-align: center; color: #888; }
.nav-dropdown-item:hover i { color: var(--irizar-primary); }
.nav-dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }

/* User menu */
.navbar-user { margin-left: auto; flex-shrink: 0; }
.user-menu { position: relative; }

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 24px;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.user-menu-toggle:hover { background: rgba(255,255,255,0.22); color: white !important; }

.user-avatar {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.22);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}

.user-info { display: none; flex-direction: column; line-height: 1.2; text-align: left; }

.user-name { font-size: 13px; font-weight: 600; }
.user-role-text { font-size: 11px; opacity: 0.72; }

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,0,0,0.05);
    min-width: 175px; padding: 5px 0;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    z-index: 1050;
}

.user-menu:hover .user-menu-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.user-menu-item {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 15px; color: #333; text-decoration: none;
    font-size: 14px; transition: background 0.14s;
}

.user-menu-item:hover { background: var(--page-bg); text-decoration: none; }
.user-menu-item.logout { color: #dc3545; }
.user-menu-item.logout:hover { background: #fff5f5; }
.user-menu-item i { width: 15px; text-align: center; }
.user-menu-divider { height: 1px; background: var(--border-color); margin: 4px 0; }

/* Mobile toggle */
.navbar-toggler {
    display: none;
    background: none; border: none; color: white;
    font-size: 1.2rem; padding: 7px; cursor: pointer; flex-shrink: 0;
}

@media (min-width: 768px) { .user-info { display: flex; } }

@media (max-width: 991px) {
    .navbar-toggler { display: flex; }
    .brand-subtitle { display: none; }

    .navbar-nav-main {
        position: fixed;
        top: var(--navbar-h); left: 0; right: 0;
        background: var(--irizar-dark);
        flex-direction: column; align-items: stretch;
        padding: 10px; gap: 2px;
        max-height: calc(100vh - var(--navbar-h)); overflow-y: auto;
        transform: translateY(-105%);
        transition: transform 0.28s ease;
        z-index: 1020;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .navbar-nav-main.show { transform: translateY(0); }

    .nav-dropdown-menu {
        position: static;
        background: rgba(0,0,0,0.15);
        box-shadow: none; opacity: 0; visibility: hidden;
        max-height: 0; overflow: hidden; transform: none;
        border-radius: 5px; margin-top: 2px;
    }

    .nav-dropdown.show .nav-dropdown-menu { opacity: 1; visibility: visible; max-height: 300px; }

    .nav-dropdown-item { color: rgba(255,255,255,0.85); padding-left: 28px; }
    .nav-dropdown-item:hover { background: rgba(255,255,255,0.08); color: white; }
    .nav-dropdown-item i { color: rgba(255,255,255,0.55); }
    .nav-dropdown-divider { background: rgba(255,255,255,0.12); }
}

/* =====================
   LAYOUT
   ===================== */
.main-wrapper {
    min-height: calc(100vh - var(--navbar-h));
    display: flex; flex-direction: column;
}

.main-content {
    flex: 1;
    padding: 22px 28px;
    width: 100%;
    box-sizing: border-box;
}

.main-footer {
    background: white;
    padding: 10px 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    border-top: 1px solid var(--border-color);
}

/* =====================
   CONTENT CARD
   ===================== */
.content {
    background: white !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 2rem !important;
    border: 1px solid var(--border-color) !important;
}

/* =====================
   SIDE NAV
   ===================== */
.side-nav {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
}

.side-nav .heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.side-nav-item {
    display: block;
    padding: 0.45rem 0.75rem;
    margin-bottom: 2px;
    border-radius: 5px;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}

.side-nav-item:hover {
    background: var(--irizar-light);
    color: var(--irizar-primary);
    text-decoration: none;
}

/* =====================
   FLASH BALLOONS
   ===================== */
#flash-balloon-container {
    position: fixed;
    top: calc(var(--navbar-h) + 14px);
    right: 20px;
    z-index: 9500;
    width: 360px;
    max-width: calc(100vw - 28px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.balloon {
    pointer-events: all;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px 17px 16px;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07);
    position: relative;
    overflow: hidden;
    background: white;
    border: 1px solid #e9ecef;
    border-left-width: 4px;
    animation: balloonSlideIn 0.32s cubic-bezier(0.34,1.4,0.64,1);
}

.balloon-icon {
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}
.balloon-body { flex: 1; min-width: 0; }
.balloon-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}
.balloon-msg {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    word-break: break-word;
}
.balloon-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
    margin: -2px -4px -2px 0;
    font-size: 11px;
    opacity: 0.4;
    color: inherit;
    line-height: 1;
    border-radius: 5px;
    transition: opacity 0.15s, background 0.15s;
}
.balloon-close:hover { opacity: 0.85; background: rgba(0,0,0,0.07); }

/* Progress bar */
.balloon-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    transform-origin: left center;
    transform: scaleX(1);
}

/* Per-type */
.balloon-success { border-left-color: #28a745; }
.balloon-success .balloon-icon  { color: #28a745; }
.balloon-success .balloon-title { color: #155724; }
.balloon-success .balloon-msg   { color: #2a6040; }
.balloon-success .balloon-bar   { background: #28a745; animation: balloonBar 5s linear forwards; }

.balloon-error { border-left-color: #dc3545; }
.balloon-error .balloon-icon  { color: #dc3545; }
.balloon-error .balloon-title { color: #721c24; }
.balloon-error .balloon-msg   { color: #9a2530; }
.balloon-error .balloon-bar   { background: #dc3545; animation: balloonBar 8s linear forwards; }

.balloon-warning { border-left-color: #e0a800; }
.balloon-warning .balloon-icon  { color: #d39e00; }
.balloon-warning .balloon-title { color: #856404; }
.balloon-warning .balloon-msg   { color: #7a5b00; }
.balloon-warning .balloon-bar   { background: #e0a800; animation: balloonBar 6s linear forwards; }

.balloon-info { border-left-color: #17a2b8; }
.balloon-info .balloon-icon  { color: #17a2b8; }
.balloon-info .balloon-title { color: #0c5460; }
.balloon-info .balloon-msg   { color: #1a6a78; }
.balloon-info .balloon-bar   { background: #17a2b8; animation: balloonBar 5s linear forwards; }

/* Animations */
@keyframes balloonSlideIn {
    from { opacity: 0; transform: translateX(50px) scale(0.94); }
    to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes balloonBar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
@keyframes balloonOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(50px); }
}
.balloon.is-dismissing {
    animation: balloonOut 0.26s ease forwards;
    pointer-events: none;
}

/* Dark mode */
[data-theme="escuro"] .balloon               { background: #2a2a2a; border-color: #3a3a3a; }
[data-theme="escuro"] .balloon-close         { color: #aaa; }
[data-theme="escuro"] .balloon-success .balloon-title { color: #7ae8a0; }
[data-theme="escuro"] .balloon-success .balloon-msg   { color: #a0c8b0; }
[data-theme="escuro"] .balloon-error .balloon-title   { color: #f48a93; }
[data-theme="escuro"] .balloon-error .balloon-msg     { color: #d4a0a4; }
[data-theme="escuro"] .balloon-warning .balloon-title { color: #ffd866; }
[data-theme="escuro"] .balloon-warning .balloon-msg   { color: #d4b84a; }
[data-theme="escuro"] .balloon-info .balloon-title    { color: #7ad8e8; }
[data-theme="escuro"] .balloon-info .balloon-msg      { color: #90c0cc; }

/* =====================
   TABLES
   ===================== */
table { border-collapse: collapse; width: 100%; }

table th {
    background: #f8f9fa;
    color: #555;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 11px 14px;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    vertical-align: middle;
}

table tbody tr:hover { background: #fbfbfd; }

/* =====================
   BUTTONS
   ===================== */
.button,
button[type="submit"],
input[type="submit"] {
    background-color: var(--irizar-primary) !important;
    border-color: var(--irizar-primary) !important;
    color: white !important;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}

.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--irizar-dark) !important;
    border-color: var(--irizar-dark) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important;
}

.button:focus,
button[type="submit"]:focus,
input[type="submit"]:focus {
    color: white !important;
}

/* Prevent Milligram's dark hover background on plain type="button" elements */
button[type="button"]:not(.user-menu-toggle):not(.theme-picker-btn):not(.navbar-toggler):hover,
button[type="button"]:not(.user-menu-toggle):not(.theme-picker-btn):not(.navbar-toggler):focus {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.button.float-right { float: right; font-size: 0.85rem; padding: 0.6rem 1.4rem; }

/* =====================
   HEADINGS
   ===================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Encode Sans', 'Helvetica Neue', sans-serif;
}

/* =====================
   HIDE OLD TOP-NAV
   ===================== */
.top-nav { display: none !important; }

/* =====================
   LOGIN PAGE
   ===================== */
body.logged-out {
    background: #f5f6fa;
}

/* =====================
   LOADING OVERLAY
   ===================== */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 9800;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s;
    backdrop-filter: blur(2px);
}
.page-loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
}
.page-loading-card {
    background: white;
    border-radius: 16px;
    padding: 1.8rem 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.1);
    max-width: 400px;
    width: calc(100vw - 40px);
    animation: loadingCardIn 0.3s cubic-bezier(0.34,1.4,0.64,1);
}
.page-loading-icon {
    font-size: 26px;
    color: var(--irizar-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.page-loading-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 5px;
}
.page-loading-sub {
    display: block;
    font-size: 13px;
    color: #6c757d;
    line-height: 1.5;
}
.page-loading-dots::after {
    content: '';
    animation: loadingDots 1.4s infinite;
}
@keyframes loadingDots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}
@keyframes loadingCardIn {
    from { opacity: 0; transform: scale(0.88) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
[data-theme="escuro"] .page-loading-card  { background: #2a2a2a; }
[data-theme="escuro"] .page-loading-title { color: var(--text-primary); }
[data-theme="escuro"] .page-loading-sub   { color: var(--text-muted); }

/* =====================
   LOGIN
   ===================== */
.login-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left side — brand */
.login-brand {
    flex: 1;
    background:
        linear-gradient(145deg, rgba(85, 83, 88, 0.48) 0%, rgba(40, 38, 44, 0.62) 100%),
        url('/img/login-bg.jpg') center / cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 50px;
    color: white;
    position: relative;
    overflow: hidden;
}

.login-brand .brand-content {
    text-align: center;
    max-width: 360px;
    position: relative; z-index: 1;
}

.login-logo-box {
    width: 110px;
    height: 110px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
}

.login-logo-img {
    width: 80px;
    height: auto;
    object-fit: contain;
    /* Se o logo for escuro, descomente a linha abaixo para torná-lo branco: */
    /* filter: brightness(0) invert(1); */
}

.login-brand .lb-title {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    letter-spacing: 2px;
    margin-bottom: 8px;
    display: block;
}

.login-brand .lb-tagline {
    font-size: 0.95rem;
    opacity: 0.82;
    font-weight: 300;
    margin-bottom: 40px;
    display: block;
}

.login-features { text-align: left; }

.login-feature {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 0; font-size: 0.875rem; opacity: 0.9;
}

.login-feature i { color: #4ade80; font-size: 0.9rem; }

.login-brand-foot {
    position: absolute;
    bottom: 20px; left: 0; right: 0;
    text-align: center;
    font-size: 0.72rem; opacity: 0.45; margin: 0;
}

/* Right side — form */
.login-form-side {
    flex: 1;
    background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 50px;
    min-height: 100vh;
}

.login-form-box { width: 100%; max-width: 400px; }

.login-form-header { margin-bottom: 34px; }

.login-form-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 6px;
}

.login-form-header p { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

.login-field { margin-bottom: 20px; }

.login-field label {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.82rem; font-weight: 600; color: #374151;
    margin-bottom: 7px;
}

.login-field label i { color: var(--irizar-primary); font-size: 0.82rem; }

.login-field input[type="text"],
.login-field input[type="email"],
.login-field input[type="password"] {
    width: 100% !important;
    padding: 13px 15px !important;
    font-size: 0.95rem !important;
    color: #1f2937 !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    transition: border-color 0.18s, box-shadow 0.18s;
    font-family: inherit !important;
    box-sizing: border-box !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.login-field input:focus {
    outline: none !important;
    border-color: var(--irizar-primary) !important;
    box-shadow: 0 0 0 3px rgba(85,83,88,0.1) !important;
}

.login-field input::placeholder { color: #9ca3af; }

/* Neutraliza o fundo azul/amarelo do autofill do browser */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #1f2937 !important;
    transition: background-color 5000s ease-in-out 0s;
    border: 2px solid #e5e7eb !important;
}

.pw-wrapper { position: relative; }
.pw-wrapper input { padding-right: 46px !important; }

.pw-toggle {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; color: #9ca3af;
    cursor: pointer; padding: 3px; font-size: 0.875rem;
    transition: color 0.18s;
}

.pw-toggle:hover { color: var(--irizar-primary); }

.login-submit-btn {
    width: 100%;
    padding: 13px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    background: var(--irizar-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.22s, transform 0.15s, box-shadow 0.22s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 3px 10px rgba(85,83,88,0.25);
    font-family: inherit;
    margin-top: 8px;
}

.login-submit-btn:hover {
    background: var(--irizar-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(85,83,88,0.3);
}

.login-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 0.84rem;
}
.remember-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.remember-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--irizar-primary);
    cursor: pointer;
    margin: 0;
}
.forgot-link {
    color: var(--irizar-primary);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
}
.forgot-link:hover { text-decoration: underline; }

.login-extra-links {
    margin-top: 22px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.login-extra-links a {
    color: var(--irizar-primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 5px;
}
.login-extra-links a:hover { text-decoration: underline; }

.login-form-box .message {
    padding: 11px 14px;
    margin-bottom: 18px;
    border-radius: 7px;
    font-size: 0.85rem;
    border-left: 4px solid;
}

.login-form-box .message.error   { background: #fef2f2; color: #991b1b; border-color: #dc3545; }
.login-form-box .message.success { background: #f0fdf4; color: #166534; border-color: #28a745; }

/* Responsive login */
@media (max-width: 991px) {
    .login-wrapper { flex-direction: column; }
    .login-brand { padding: 36px 28px; min-height: auto; flex: none; }
    .login-features { display: none; }
    .login-brand-foot { display: none; }
    .login-brand .lb-title { font-size: 1.5rem; }
    .login-form-side { min-height: auto; padding: 36px 22px; flex: none; }
}

@media (max-width: 575px) { .login-form-side { padding: 28px 16px; } }

/* =====================
   FORM GLOBAL OVERRIDES
   (Milligram usa 62.5% root — forçar px para tamanhos legíveis)
   ===================== */
body.logged-in label,
body.logged-in .label {
    font-size: 13px !important;
    font-weight: 600;
}

body.logged-in input[type="text"],
body.logged-in input[type="email"],
body.logged-in input[type="password"],
body.logged-in input[type="number"],
body.logged-in input[type="date"],
body.logged-in input[type="search"],
body.logged-in select,
body.logged-in textarea {
    font-size: 14px !important;
    font-family: inherit !important;
    height: auto !important;
    padding: 9px 11px !important;
    line-height: 1.4 !important;
}

body.logged-in select {
    padding: 9px 11px !important;
}

body.logged-in p,
body.logged-in span,
body.logged-in li,
body.logged-in a {
    font-size: 14px;
}

body.logged-in h1 { font-size: 24px !important; }
body.logged-in h2 { font-size: 20px !important; }
body.logged-in h3 { font-size: 17px !important; }
body.logged-in h4 { font-size: 15px !important; }

/* Paginador */
body.logged-in .pagination li a,
body.logged-in .pagination li span { font-size: 13px; }

/* Tags e badges inline */
body.logged-in .tag { font-size: 12px !important; }

/* =====================
   THEME PICKER
   ===================== */
.theme-picker-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--irizar-primary);
    color: white !important;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    z-index: 2000;
    transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
    padding: 0;
}
.theme-picker-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 22px rgba(0,0,0,0.32);
    color: white !important;
    background: var(--irizar-dark);
}

.theme-picker-panel {
    position: fixed;
    bottom: 78px;
    right: 20px;
    background: white;
    border-radius: 16px;
    padding: 16px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.06);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    min-width: 280px;
}
.theme-picker-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.theme-picker-title {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding: 0 4px;
}

.theme-swatches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.theme-swatch {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
.theme-swatch:hover { background: #f5f6fa; }
.theme-swatch.active { background: #f0f0f8; font-weight: 700; }

.swatch-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    position: relative;
}
.theme-swatch.active .swatch-dot::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
}