/* ===== DOM Sistema — Design System ===== */
/* Cores: Azul predominante, Amarelo destaque, Branco base */

:root {
    --sidebar-width: 260px;
    --topbar-height: 60px;

    /* Cores DOM */
    --dom-blue: #1a3a6b;
    --dom-blue-light: #2a5298;
    --dom-blue-dark: #0f2444;
    --dom-yellow: #f0b429;
    --dom-yellow-light: #f5c842;
    --dom-yellow-dark: #d49e1f;

    /* Light mode */
    --sidebar-bg: var(--dom-blue-dark);
    --sidebar-hover: rgba(255,255,255,.07);
    --sidebar-active: rgba(240,180,41,.15);
    --accent: var(--dom-blue-light);
    --accent-yellow: var(--dom-yellow);
    --body-bg: #f4f6fa;
    --card-bg: #fff;
    --card-border: #e3e8ef;
    --text-primary: #1a2332;
    --text-secondary: #5a6a7e;
    --topbar-bg: #fff;
    --topbar-border: #e3e8ef;
}

[data-bs-theme="dark"] {
    --sidebar-bg: #0c1929;
    --body-bg: #111827;
    --card-bg: #1a2332;
    --card-border: #2a3545;
    --text-primary: #e8ecf1;
    --text-secondary: #8896a8;
    --topbar-bg: #1a2332;
    --topbar-border: #2a3545;
}

/* ===== Base ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--body-bg);
    color: var(--text-primary);
    transition: background .2s, color .2s;
}

/* ===== Sidebar ===== */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    color: #b0bec5;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-offcanvas {
    background: var(--sidebar-bg) !important;
    color: #b0bec5;
    width: var(--sidebar-width) !important;
    overflow-x: hidden;
}

.sidebar-offcanvas .offcanvas-body {
    overflow-x: hidden;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: var(--dom-blue);
    color: #fff;
    flex-shrink: 0;
    border-bottom: 2px solid var(--dom-yellow);
}

.sidebar-logo {
    width: 40px; height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--dom-yellow);
    flex-shrink: 0;
}

.sidebar-brand-text {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.3px;
}

.sidebar-nav {
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.sidebar-nav.nav { flex-wrap: nowrap; }

.sidebar-nav .nav-header {
    padding: 18px 20px 6px;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--dom-yellow-dark);
    font-weight: 700;
    list-style: none;
}

.sidebar-nav .nav-link {
    color: #8899aa;
    padding: 9px 16px 9px 17px;
    font-size: .84rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
}

.sidebar-nav .nav-link:hover {
    color: #fff;
    background: var(--sidebar-hover);
}

.sidebar-nav .nav-link.active {
    color: #fff;
    background: var(--sidebar-active);
    border-left-color: var(--dom-yellow);
}

.sidebar-nav .nav-link i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.2);
    flex-shrink: 0;
}

.sidebar-avatar {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--dom-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .8rem;
    color: #fff;
    flex-shrink: 0;
}

/* ===== Main wrapper ===== */
.main-wrapper {
    min-height: 100vh;
}

@media (min-width: 992px) {
    .main-wrapper {
        margin-left: var(--sidebar-width);
    }
}

/* ===== Topbar ===== */
.topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    height: var(--topbar-height);
    padding: 0 24px;
    z-index: 1030;
    transition: background .2s;
}

.topbar-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.3px;
}

/* ===== Content ===== */
.content-area {
    padding: 24px;
}

@media (max-width: 767.98px) {
    .content-area { padding: 16px; }
}

/* ===== Cards ===== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: background .2s, border-color .2s;
}

/* ===== Tables ===== */
.table > thead > tr > th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom-width: 2px;
}

/* ===== Buttons ===== */
.btn-accent {
    background: var(--dom-blue-light);
    color: #fff;
    border: none;
    font-weight: 500;
}
.btn-accent:hover {
    background: var(--dom-blue);
    color: #fff;
}

.btn-dom-yellow {
    background: var(--dom-yellow);
    color: var(--dom-blue-dark);
    border: none;
    font-weight: 600;
}
.btn-dom-yellow:hover {
    background: var(--dom-yellow-dark);
    color: var(--dom-blue-dark);
}

/* ===== Login ===== */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dom-blue-dark) 0%, var(--dom-blue) 50%, var(--dom-blue-light) 100%);
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 440px;
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.login-logo {
    width: 100px; height: 100px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(26,58,107,.4);
    border: 3px solid var(--dom-yellow);
}

/* ===== Dark mode toggle ===== */
.theme-toggle {
    background: none;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.1rem;
    transition: all .2s;
}
.theme-toggle:hover {
    color: var(--dom-yellow);
    border-color: var(--dom-yellow);
}

/* ===== Badges refinados ===== */
.badge { font-weight: 500; letter-spacing: .2px; }
.badge.bg-primary-subtle,
.badge.bg-info-subtle,
.badge.bg-warning-subtle,
.badge.bg-success-subtle,
.badge.bg-danger-subtle,
.badge.bg-secondary-subtle { color: #1a2332 !important; }

/* ===== Sidebar footer nivel visivel ===== */
.sidebar-footer .text-muted { color: #8899aa !important; }

/* ===== Menu colapsavel ===== */
.nav-group-toggle {
    cursor: pointer;
    color: var(--dom-yellow-dark) !important;
    font-weight: 700 !important;
    font-size: .65rem !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.nav-group-toggle:hover { color: var(--dom-yellow-light) !important; }
.nav-group-toggle .nav-arrow {
    font-size: .7rem;
    transition: transform .2s;
    flex-shrink: 0;
}
.nav-group-toggle.open .nav-arrow { transform: rotate(180deg); }

.nav-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}
.nav-submenu.show { max-height: 500px; }

.nav-submenu .nav-link {
    padding-left: 46px !important;
    font-size: .8rem !important;
    font-weight: 400 !important;
    color: #7a8ea0 !important;
    border-left: none !important;
}
.nav-submenu .nav-link:hover { color: #fff !important; background: var(--sidebar-hover); }
.nav-submenu .nav-link.active {
    color: #fff !important;
    background: var(--sidebar-active) !important;
    border-left: 3px solid var(--dom-yellow) !important;
    padding-left: 43px !important;
}

/* ===== Scrollbar global (dark mode) ===== */
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #1a2332;
    border-color: #2a3545;
    color: #e8ecf1;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--dom-blue-light);
    box-shadow: 0 0 0 3px rgba(42,82,152,.2);
}


/* ===== Sidebar Collapsed ===== */
@media (min-width: 992px) {
    .sidebar.collapsed {
        width: 64px;
    }
    .sidebar.collapsed .sidebar-brand-text,
    .sidebar.collapsed .sidebar-nav .nav-group-toggle span,
    .sidebar.collapsed .sidebar-nav .nav-arrow,
    .sidebar.collapsed .sidebar-nav .nav-submenu,
    .sidebar.collapsed .sidebar-nav .nav-link span,
    .sidebar.collapsed .sidebar-footer .footer-info,
    .sidebar.collapsed .sidebar-footer .btn { display: none; }

    .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 18px 12px; }
    .sidebar.collapsed .sidebar-nav .nav-link {
        justify-content: center;
        padding: 10px 0;
        border-left: none;
    }
    .sidebar.collapsed .sidebar-nav .nav-link i { font-size: 1.2rem; margin: 0; }
    .sidebar.collapsed .sidebar-footer { padding: 10px; text-align: center; }
    .sidebar.collapsed .sidebar-footer .footer-icons { justify-content: center; }

    body.sidebar-collapsed .main-wrapper { margin-left: 64px; }
}

/* Sortable table headers */
table.table thead th { position: relative; user-select: none; }
table.table thead th::after { content: ' ⇅'; opacity: 0.3; font-size: 0.7em; }
table.table thead th[data-sort-dir="asc"]::after { content: ' ↑'; opacity: 1; }
table.table thead th[data-sort-dir="desc"]::after { content: ' ↓'; opacity: 1; }