/* Magent SaaS Light Theme */
:root {
    /* Color Palette — Light Theme */
    --primary: #2563eb;
    /* Blue 600 */
    --primary-dark: #1d4ed8;
    /* Blue 700 */
    --primary-light: rgba(37, 99, 235, 0.10);
    /* Blue soft */

    --sidebar-bg: #0f172a;
    /* Deep Slate 900 sidebar */
    --sidebar-hover: #1e293b;
    /* Slate 800 hover */

    --bg-body: #f0f4f8;
    /* Cool gray-blue background */
    --bg-secondary: #e8edf3;
    /* Slightly darker gray */
    --surface: #ffffff;
    /* Pure white cards */

    --text-main: #0f172a;
    /* Slate 900 — near-black */
    --text-secondary: #334155;
    /* Slate 700 */
    --text-muted: #64748b;
    /* Slate 500 */

    --border: rgba(15, 23, 42, 0.10);
    /* Subtle light border */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.05);
    --shadow: 0 4px 12px rgb(0 0 0 / 0.10);
    --radius: 8px;

    /* Topbar & footer extras */
    --topbar-bg: rgba(255, 255, 255, 0.92);
    --sidebar-footer-bg: rgba(0, 0, 0, 0.15);
    --sidebar-divider: rgba(255, 255, 255, 0.12);

    /* Status Colors */
    --success: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.10);
    --warning: #d97706;
    --warning-bg: rgba(217, 119, 6, 0.10);
    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.10);
    --info: #0284c7;
    --info-bg: rgba(2, 132, 199, 0.10);

    /* Typography Scale - Standardized to 5 sizes */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Z-Index Layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1090;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-main);
    font-weight: 600;
}

a {
    color: var(--primary);
    transition: color 0.2s;
}

a:hover {
    color: #93c5fd;
    text-decoration: none;
}

/* Typography Utilities */
.text-xs {
    font-size: var(--text-xs) !important;
}

.text-sm {
    font-size: var(--text-sm) !important;
}

.text-base {
    font-size: var(--text-base) !important;
}

.text-md {
    font-size: var(--text-md) !important;
}

.text-lg {
    font-size: var(--text-lg) !important;
}

.leading-tight {
    line-height: var(--leading-tight) !important;
}

.leading-normal {
    line-height: var(--leading-normal) !important;
}

.leading-relaxed {
    line-height: var(--leading-relaxed) !important;
}

/* a tag styles already defined above */

/* Utilities */
.fw-bold {
    font-weight: 700 !important;
    color: var(--text-main);
}

.new-document-row>td {
    background-color: rgba(59, 130, 246, 0.1) !important;
    /* Blue glow highlight */
}

/* Flexbox Utilities */
.flex-align-center {
    display: flex;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

/* Spacing Utilities */
.mt-1 {
    margin-top: 5px !important;
}

.mt-2 {
    margin-top: 10px !important;
}

.mb-1 {
    margin-bottom: 5px !important;
}

.mb-2 {
    margin-bottom: 10px !important;
}

.mt-3 {
    margin-top: 15px !important;
}

.mt-4 {
    margin-top: 20px !important;
}

.mb-3 {
    margin-bottom: 15px !important;
}

.mb-4 {
    margin-bottom: 20px !important;
}

.mr-1 {
    margin-right: 5px !important;
}

.mr-2 {
    margin-right: 10px !important;
}

.ml-1 {
    margin-left: 5px !important;
}

.ml-2 {
    margin-left: 10px !important;
}

/* Component Specific Utilities */
.toolbar-row {
    margin-bottom: 15px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.search-input {
    padding-right: 40px;
    font-size: var(--text-base);
    border-radius: 6px;
}

.refresh-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    border: none;
    background: none;
    color: #999;
}

.refresh-btn:hover {
    color: var(--primary);
}

/* Bulk Actions */
.bulk-count-area {
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    margin-right: 15px;
    padding-right: 15px;
}

.text-success-light {
    color: #2ecc71 !important;
}

.text-orange {
    color: #d35400 !important;
}

.text-dark {
    color: #333 !important;
}

.btn-purple {
    background-color: #8e44ad !important;
    color: white !important;
}

.btn-purple:hover {
    background-color: #7d3c98 !important;
    color: white !important;
}



/* ============ Buttons ============ */
.btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
    border: none;
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    color: #fff;
}

.btn-success {
    background-color: var(--success);
    color: #fff;
}

.btn-success:hover {
    background-color: #16a34a;
    /* Green 600 */
}

.btn-danger {
    background-color: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background-color: #dc2626;
    /* Red 600 */
}

.btn-warning {
    background-color: var(--warning);
    color: #fff;
}

.btn-warning:hover {
    background-color: #ca8a04;
    /* Yellow 600 */
}

.btn-info {
    background-color: var(--info);
    color: #fff;
}

.btn-info:hover {
    background-color: #0284c7;
    /* Sky 600 */
}

.btn-default {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}



/* ============ Tables ============ */
.table {
    margin-bottom: 0;
    color: var(--text-main);
}

.table>thead>tr>th {
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    background-color: var(--bg-secondary);
    padding: 12px 15px;
}

.table>tbody>tr>td {
    padding: 12px 15px;
    vertical-align: middle;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(30, 41, 59, 0.4);
}

.table-hover>tbody>tr:hover {
    background-color: rgba(59, 130, 246, 0.06);
}

.table-hover>tbody>tr.new-document-row:hover>td {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

/* --- Layout & Sidebar --- */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 260px;
    background: var(--sidebar-bg);
    color: #94a3b8;
    /* Slate 400 */
    padding-top: 0;
    overflow-y: auto;
    transition: all 0.3s ease-in-out;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
}

.sidebar .logo-area {
    text-align: center;
    padding: 24px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
}

.sidebar .logo-area img {
    max-width: 50px;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.sidebar .logo-area h4 {
    margin: 0;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    font-weight: 600;
}

.sidebar .logo-area h3 {
    margin: 4px 0 0 0;
    font-size: var(--text-md);
    font-weight: 700;
    color: #f8fafc;
}

.sidebar .nav {
    padding: 10px 12px;
}

.sidebar .nav>li>a {
    color: #cbd5e1;
    padding: 12px 16px;
    border-radius: var(--radius);
    border-left: none;
    margin-bottom: 2px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.sidebar .nav>li>a i {
    width: 24px;
    text-align: center;
    margin-right: 12px;
    font-size: var(--text-md);
    opacity: 0.8;
}

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

.sidebar .nav>li.active>a {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.sidebar .nav>li.divider {
    height: 1px;
    margin: 16px 16px;
    background-color: var(--sidebar-divider);
}

.sidebar-footer {
    background: var(--sidebar-footer-bg);
    border-top: 1px solid var(--sidebar-divider);
    padding: 16px 20px;
}

.sidebar-footer .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: #e2e8f0;
}

.sidebar-footer .user-info strong {
    font-weight: 600;
}

/* --- Main Content Area --- */

.main-content {
    margin-left: 260px;
    padding: 20px 30px 30px 30px;
    background-color: var(--bg-body);
    min-height: 100vh;
}

.top-bar {
    position: fixed;
    top: 0;
    right: 0;
    left: 260px;
    height: 64px;
    background: var(--topbar-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 30px;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.top-bar .user-info a {
    color: var(--text-muted);
    font-size: var(--text-md);
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    background: transparent;
}

.top-bar .user-info a:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* --- Components --- */

/* Panels / Cards */
.panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    background: var(--surface);
    margin-bottom: 24px;
}

.panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
}

.panel-heading h4 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-main);
}

.panel-body {
    padding: 20px;
}

/* Buttons */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 8px 16px;
    border: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-default {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.btn-default:hover {
    background: rgba(59, 130, 246, 0.08);
    color: var(--text-main);
}

/* Forms */
.form-control {
    border-radius: 6px;
    border: 1px solid var(--border);
    background-color: var(--bg-secondary);
    color: var(--text-main);
    box-shadow: none;
    padding: 8px 12px;
    height: 40px;
}

.form-control:focus {
    border-color: var(--primary);
    background-color: rgba(30, 41, 59, 1);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    color: var(--text-main);
}

/* Tables (dark overrides) */
.table {
    margin-bottom: 0;
    color: var(--text-main);
}

.table>thead>tr>th {
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px;
    background-color: var(--bg-secondary);
}

.table>tbody>tr>td {
    padding: 16px;
    vertical-align: middle;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
}

.table>tbody>tr:hover {
    background-color: rgba(59, 130, 246, 0.06);
}

/* Compact Table Mode */
.table-condensed>thead>tr>th {
    padding: 10px 8px;
    font-size: var(--text-sm);
}

.table-condensed>tbody>tr>td {
    padding: 8px;
    font-size: var(--text-sm);
}


/* Document Row Styling */
tr.doc-row {
    cursor: pointer;
}

tr.doc-row h4 {
    font-size: var(--text-base);
    margin: 0 0 4px 0;
}

tr.doc-row h4 a {
    color: var(--text-main);
    text-decoration: none;
}

tr.doc-row:hover h4 a {
    color: var(--primary);
}

/* Badges & Labels — Dark Theme */
.badge {
    background-color: var(--primary);
    font-weight: 600;
}

.label {
    border-radius: 4px;
    padding: 4px 8px;
    font-weight: 500;
    font-size: var(--text-xs);
}

.label-success {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.label-warning {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

.label-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.label-info {
    background-color: rgba(14, 165, 233, 0.15);
    color: #7dd3fc;
}

.label-primary {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

/* Search Box */
#searchInput {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-main);
    transition: all 0.2s;
}

#searchInput:focus {
    background: rgba(30, 41, 59, 1);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Pagination */
.pagination>li>a {
    border: 1px solid var(--border);
    color: var(--text-secondary);
    margin: 0 3px;
    border-radius: 6px;
}

.pagination>.active>a {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ============ Global Bootstrap Dark Theme Overrides ============ */

/* Panels — all variants */
.panel-primary,
.panel-info,
.panel-default,
.panel-success,
.panel-warning,
.panel-danger {
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

.panel-primary > .panel-heading,
.panel-info > .panel-heading,
.panel-default > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

.panel-heading h4,
.panel-heading .panel-title {
    color: var(--text-main) !important;
}

.panel-body {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.panel-footer {
    background: rgba(30, 41, 59, 0.85) !important;
    border-top-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

/* List Group */
.list-group-item {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
}
.list-group-item:hover,
.list-group-item:focus {
    background: rgba(59, 130, 246, 0.08);
    color: var(--text-main);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Alerts */
.alert-info {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.2);
    color: #7dd3fc;
}
.alert-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}
.alert-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}
.alert-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* Modals */
.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.modal-header {
    border-bottom-color: var(--border) !important;
}
.modal-footer {
    border-top-color: var(--border) !important;
}
.modal-title {
    color: var(--text-main) !important;
}
.close {
    color: var(--text-muted) !important;
    opacity: 0.8;
}
.close:hover {
    color: var(--text-main) !important;
    opacity: 1;
}

/* Form Labels */
label {
    color: var(--text-secondary);
}
.checkbox label,
.radio label {
    color: var(--text-secondary);
}
.help-block {
    color: var(--text-muted);
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-secondary);
}
.pagination > li > a:hover {
    background: rgba(59, 130, 246, 0.08);
    color: var(--text-main);
}

/* Select / Input */
select.form-control option {
    background: var(--bg-secondary);
    color: var(--text-main);
}

/* Tab content */
.tab-content {
    color: var(--text-secondary);
}

/* Settings tab nav */
.settings-tab-nav .list-group-item {
    transition: all 0.2s;
}

/* Scroll container */
.scroll-box {
    max-height: 400px;
    overflow-y: auto;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* --- Global Navigation & Header Fixes (Header Removed) --- */

/* Hide top bar header globally */
.top-bar {
    background: transparent !important;
    border: none !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: static !important;
    box-shadow: none !important;
}

/* Hide user info/notifications in header */
.top-bar .user-info {
    display: none !important;
}

/* Sidebar Collapse Toggle — compact chevron at sidebar edge */
.sidebar-collapse-toggle {
    position: fixed;
    top: 28px;
    left: 248px; /* 260px sidebar - 12px to sit at edge */
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bg-secondary);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: left 0.3s ease, background 0.2s, color 0.2s;
    padding: 0;
}

.sidebar-collapse-toggle:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.sidebar-collapse-toggle.collapsed {
    left: 58px; /* 70px collapsed sidebar - 12px */
}

/* Adjust sidebar when collapsed to account for no header */
.sidebar.collapsed {
    /* Standard collapsed sidebar styles usually handle this, 
       but ensured here just in case */
}

/* Hide the redundant toggle in documents toolbar globally */
.floating-toolbar .btn-link[onclick="toggleSidebarGlobal()"] {
    display: none !important;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-content {
    animation: fadeIn 0.4s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        left: -260px;
    }

    .sidebar.active {
        left: 0;
    }

    .main-content {
        margin-left: 0;
        padding: 70px 15px 15px 15px;
    }

    .top-bar {
        left: 0;
    }

    .sidebar-overlay.active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }
}

/* Sidebar Toggle & Collapse (Desktop) */
/* Mobile: show as hamburger button at top-left */
@media (max-width: 768px) {
    .sidebar-collapse-toggle {
        left: 12px !important;
        top: 12px;
        width: 32px;
        height: 32px;
        font-size: 14px;
        border-radius: 8px;
    }
    .sidebar-collapse-toggle i::before {
        content: "\f0c9"; /* fa-bars */
    }
}

@media (min-width: 769px) {

    /* Collapsed State */
    .sidebar.collapsed {
        width: 70px;
        overflow: visible;
    }

    .sidebar.collapsed .logo-area {
        padding: 16px 10px;
    }

    .sidebar.collapsed .logo-area img {
        width: 40px;
        margin: 0 auto;
        display: block;
    }

    .sidebar.collapsed .logo-area h3,
    .sidebar.collapsed .logo-area h4 {
        display: none;
    }

    .sidebar.collapsed .nav>li>a {
        text-align: center;
        padding: 15px 5px;
        font-size: 0;
        /* Hide text */
        justify-content: center;
    }

    .sidebar.collapsed .nav>li>a i {
        font-size: var(--text-lg);
        margin-right: 0;
        display: block;
    }

    .sidebar.collapsed .nav>li>a .badge {
        position: absolute;
        top: 5px;
        right: 10px;
        font-size: var(--text-xs);
        padding: 2px 5px;
    }

    .sidebar.collapsed .sidebar-footer {
        padding: 10px 5px;
        text-align: center;
    }

    .sidebar.collapsed .sidebar-footer .user-info {
        font-size: 0;
        justify-content: center;
    }

    .sidebar.collapsed .sidebar-footer .user-info i {
        font-size: var(--text-lg);
        margin: 0;
    }

    .sidebar.collapsed .sidebar-footer .user-info strong,
    .sidebar.collapsed .sidebar-footer .user-info a {
        display: none;
    }

    /* Content Adjustment */
    .main-content.collapsed {
        margin-left: 70px;
    }

    .top-bar.collapsed {
        left: 70px;
    }
}

/* Special Nav Item (AI Report) */
.sidebar .nav>li.nav-item-special {
    background: linear-gradient(90deg, #1e293b, #0f172a);
    border-radius: var(--radius);
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar .nav>li.nav-item-special>a {
    color: #60a5fa !important;
    font-weight: 600;
}

.sidebar .nav>li.nav-item-special>a:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Notification Panel */
#notificationPanel {
    display: none;
    position: fixed;
    top: 70px;
    right: 15px;
    z-index: var(--z-dropdown);
    width: 350px;
    max-height: 80vh;
    overflow-y: auto;
    filter: drop-shadow(var(--shadow));
}

/* ============ Documents Page Styles ============ */

/* Floating Toolbar */
.floating-toolbar {
    position: sticky;
    top: 10px;
    z-index: 950;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 25px;
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.floating-toolbar .form-control {
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #f8f9fa;
    box-shadow: none;
}

.floating-toolbar .form-control:focus {
    background: #fff;
    border-color: var(--primary);
}

.floating-bulk-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    background: var(--sidebar-bg);
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.floating-bulk-bar .btn {
    border-radius: 20px;
    padding: 6px 15px;
}

/* Gradient Buttons */
.btn-gradient-purple {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    border: none;
    color: white;
}

.btn-gradient-purple:hover {
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    color: white;
}

/* Responsive Mobile Styles - Premium Smart Cards */
@media (max-width: 767px) {

    /* --- Toolbar Fixes --- */
    .floating-toolbar {
        padding: 10px;
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 0 0 15px 15px;
        top: 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .floating-toolbar .row:nth-child(1) {
        display: flex;
        flex-direction: column;
    }

    .floating-toolbar .text-right {
        text-align: left;
        margin-top: 10px;
        white-space: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    /* Hide secondary filters initially to save space */
    .floating-toolbar .row:nth-child(2) {
        display: none;
    }

    /* --- DATA TABLE as CARDS --- */
    #documentsTable,
    #documentsTable tbody {
        display: block;
        width: 100%;
    }

    #documentsTable thead {
        display: none;
    }

    #documentsTable thead {
        display: none;
    }

    /* Compact Mobile Card */
    #documentsTable tr {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        margin-bottom: 8px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #eee;
        padding: 5px 5px 5px 40px;
        /* Left padding for checkbox */
        position: relative;
    }

    #documentsTable td {
        display: block;
        border: none;
        padding: 0;
        margin: 0;
    }

    /* Hide data-label pseudo-element */
    #documentsTable td:before {
        display: none !important;
    }

    /* Checkbox - Absolute Left */
    #documentsTable td.col-check {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8fafc;
        border-right: 1px solid #eee;
        border-radius: 8px 0 0 8px;
    }

    /* Star - Absolute Top Right */
    #documentsTable td.col-star {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
    }

    #documentsTable td.col-star .star-btn {
        font-size: var(--text-md);
    }

    /* Symbol - Bold, Blue */
    #documentsTable td.col-symbol {
        font-weight: 700;
        font-size: var(--text-base);
        color: var(--primary);
        margin-right: 5px;
        order: 1;
        width: auto;
    }

    #documentsTable td.col-symbol a {
        color: inherit;
        text-decoration: none;
    }

    /* Date - Grey, Right (after symbol) */
    #documentsTable td.col-date {
        font-size: var(--text-xs);
        color: #999;
        margin-top: 2px;
        margin-left: auto;
        /* Push to right */
        margin-right: 30px;
        /* Space for star */
        order: 2;
    }

    #documentsTable td.col-date:before {
        content: none;
    }

    /* Abstract - Full width */
    #documentsTable td.trich-yeu-cell {
        order: 3;
        width: 100%;
        margin-top: 4px;
        margin-bottom: 4px;
        font-size: var(--text-sm);
        color: #333;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Footer Meta: Issuing, Dept, Status */
    #documentsTable td.col-issuing,
    #documentsTable td.col-dept,
    #documentsTable td.col-status,
    #documentsTable td[data-label="Phân loại"] {
        order: 4;
        display: inline-block;
        margin-right: 8px;
        font-size: var(--text-xs);
    }

    /* Badges size adjust */
    #documentsTable .label {
        font-size: var(--text-xs);
        padding: 2px 6px;
        font-weight: normal;
    }

    /* Hide others explicitly if needed */
    #documentsTable td.col-stt,
    #documentsTable td.hidden-xs {
        display: none !important;
    }


    /* Bulk Bar */
    .floating-bulk-bar {
        width: 95%;
        padding: 10px;
        bottom: 10px;
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(5px);
    }
}

/* ============ Panels ============ */
.panel {
    border: none;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    margin-bottom: 20px;
    background-color: var(--surface);
}

.panel-heading {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border);
    padding: 15px 20px;
    border-top-left-radius: var(--radius) !important;
    border-top-right-radius: var(--radius) !important;
}

.panel-title,
.panel-heading h4 {
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    font-size: var(--text-md);
}

.panel-body {
    padding: 20px;
}

.panel-footer {
    background-color: transparent;
    border-top: 1px solid var(--border);
    padding: 15px 20px;
    border-bottom-left-radius: var(--radius) !important;
    border-bottom-right-radius: var(--radius) !important;
}

/* ============ Chat Widget ============ */
.chat-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    height: 450px;
    z-index: 1000;
    display: none;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.chat-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: var(--shadow);
    z-index: 999;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    transition: transform 0.2s;
    border: none;
}

.chat-toggle-btn:hover {
    transform: scale(1.1);
    background: var(--primary-dark);
    color: white;
}

.chat-body-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: #f8fafc;
}

.ai-message-content {
    background: #eff6ff;
    padding: 10px 15px;
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    display: inline-block;
    max-width: 85%;
    color: var(--text-main);
}

.user-message-content {
    background: var(--primary);
    color: white;
    padding: 10px 15px;
    border-radius: 12px;
    border-bottom-right-radius: 2px;
    max-width: 85%;
    float: right;
}

/* Resize Handle */
.chat-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    cursor: nw-resize;
    z-index: 1001;
}

.chat-resize-icon {
    position: absolute;
    top: 2px;
    left: 2px;
    color: #ccc;
    font-size: var(--text-xs);
    transform: rotate(45deg);
}

.ai-chat-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    font-family: 'Inter', sans-serif;
}

.chat-toggle-btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--text-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-toggle-btn:hover {
    transform: scale(1.1);
}

.chat-toggle-btn.active {
    transform: rotate(90deg) scale(0);
    opacity: 0;
}

.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 380px;
    height: 550px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.9);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-origin: bottom right;
}

.chat-window.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

.chat-window.fullscreen {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    z-index: 10000;
    transform: none !important;
}

.chat-header {
    background: linear-gradient(90deg, #1e293b, #0f172a);
    padding: 16px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-header .header-controls {
    display: flex;
    gap: 10px;
}

.chat-header .header-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Markdown Styles in Chat */
.chat-message table {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: white;
}

.chat-message th,
.chat-message td {
    padding: 8px;
    border: 1px solid #cbd5e1;
}

.chat-message th {
    background-color: #f1f5f9;
    font-weight: 600;
    color: #1e293b;
}

.chat-message p {
    margin: 0 0 8px 0;
}

.chat-message ul,
.chat-message ol {
    margin: 0 0 8px 0;
    padding-left: 20px;
}

.chat-message pre {
    background: #f8fafc;
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: var(--text-sm);
}

.chat-header .header-title i {
    color: #60a5fa;
}

.chat-header .btn-icon {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.2s;
}

.chat-header .btn-icon:hover {
    color: white;
}

.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-message {
    max-width: 85%;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.chat-message.ai-message {
    align-self: flex-start;
}

.chat-message.user-message {
    align-self: flex-end;
}

.chat-message .message-content {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: var(--text-base);
    line-height: 1.5;
    word-wrap: break-word;
}

.chat-message.ai-message .message-content {
    background: white;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Document Preview */
.preview-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: none;
    padding: 20px;
}

.pdf-viewer-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: none;
}

.loading-container {
    padding-top: 200px;
    text-align: center;
}

.scroll-box {
    padding: 0;
    height: calc(100vh - 320px);
    overflow-y: auto;
}

.config-box {
    background: #f8fafc;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 15px;
}

.chat-message.user-message .message-content {
    background: #2563eb;
    color: white;
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.message-sources {
    margin-top: 8px;
    font-size: var(--text-sm);
    background: #f1f5f9;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.message-sources small {
    font-weight: 600;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
}

.message-sources ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.message-sources li {
    margin-bottom: 2px;
}

.message-sources a {
    color: #2563eb;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-sources a:hover {
    text-decoration: underline;
}

/* --- AI Command Center: Plan, Actions, Confirmation --- */
.ai-plan-section {
    margin-top: 10px;
    font-size: 0.85rem;
}

.ai-plan-section details {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 6px 10px;
}

.ai-plan-section summary {
    cursor: pointer;
    font-weight: 600;
    color: #0369a1;
    font-size: 0.82rem;
}

.ai-plan-section summary:hover {
    color: #0284c7;
}

.ai-plan-steps {
    margin: 6px 0 2px 0;
    padding-left: 20px;
    list-style: none;
}

.ai-plan-steps li {
    margin-bottom: 3px;
    font-size: 0.82rem;
    color: #475569;
}

.ai-plan-steps code {
    font-size: 0.78rem;
    background: #e0f2fe;
    padding: 1px 4px;
    border-radius: 3px;
    color: #0c4a6e;
}

.ai-actions {
    margin-top: 8px;
}

.ai-action-btn {
    font-size: 0.82rem !important;
    padding: 3px 10px !important;
    border-radius: 14px !important;
}

.ai-confirm-area {
    margin-top: 10px;
    padding: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
}

.chat-input-area {
    padding: 12px;
    background: white;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.chat-input-area textarea {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 10px 14px;
    font-family: inherit;
    resize: none;
    font-size: var(--text-base);
    max-height: 100px;
    transition: border-color 0.2s;
}

.chat-input-area textarea:focus {
    outline: none;
    border-color: #2563eb;
}

.chat-input-area .btn-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.chat-input-area .btn-send:hover {
    background: #1d4ed8;
}

/* Loading Dots */
/* Loading Dots */
.loading .message-content {
    display: flex;
    gap: 4px;
    padding: 14px 16px;
}

.loading .dot {
    width: 6px;
    height: 6px;
    background: #94a3b8;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.loading .dot:nth-child(2) {
    animation-delay: -0.16s;
}


/* --- Mobile Optimizations --- */
@media (max-width: 768px) {

    /* Adjust main content padding */
    .main-content {
        padding: 20px 10px 80px 10px !important;
        /* Reduced top padding (70px -> 20px) */
        /* Bottom padding for fixed bulk actions */
    }

    /* Floating Toolbar adjustments */
    .floating-toolbar {
        padding: 10px;
    }

    .toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-row>div {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Stack buttons on mobile */
    .btn-group {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .btn-group .btn {
        flex: 1;
        margin-bottom: 5px;
    }

    .mobile-action-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
        background: #f8f9fa;
        padding: 15px;
        border-radius: 12px;
        border: 1px solid #eee;
    }

    .mobile-action-group .btn-group {
        margin-left: 0 !important;
        width: 100%;
        display: flex;
    }

    .mobile-action-group .btn-group .btn {
        flex: 1;
    }

    /* Collapse animation */
    #toolbarActions.collapse {
        display: none;
    }

    #toolbarActions.collapse.in {
        display: block;
    }

    /* Ensure search input takes available space */
    .search-input {
        width: 100% !important;
    }

    /* Floating Bulk Bar - Fixed Bottom Sheet style on Mobile */
    #bulkFloatingBar {
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        border-radius: 12px 12px 0 0;
        padding: 15px;
        flex-wrap: wrap;
        justify-content: center;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        z-index: 2000;
        display: none;
        /* JS toggles flex/none */
    }

    #bulkFloatingBar.active {
        display: flex !important;
    }

    .bulk-count-area {
        width: 100%;
        text-align: center;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        margin-right: 0;
        padding-right: 0;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    /* Table Responsive Enhancements */
    .table-responsive {
        border: none;
    }

    .table>thead>tr>th,
    .table>tbody>tr>td {
        white-space: nowrap;
        /* Prevent wrapping in cells, allow scroll */
        padding: 10px 8px;
        font-size: var(--text-sm);
    }

    /* Hide less important columns on mobile */
    .table .hidden-xs-custom {
        display: none;
    }

    /* Pagination */
    .pagination>li>a {
        padding: 5px 10px;
        font-size: var(--text-sm);
    }

    /* Modal adjustments */
    .modal-dialog {
        margin: 10px;
        width: auto !important;
    }

    /* Search Box in Top Bar */
    .top-bar .search-input {
        width: 150px;
        /* Smaller width on mobile header if present */
    }

    /* Document Detail View (if any sidebar) */
    .col-md-3,
    .col-md-9 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Tablet Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-content {
        padding: 20px 20px 20px 20px;
        /* Reduced top padding */
    }

    .table>thead>tr>th,
    .table>tbody>tr>td {
        padding: 10px;
    }
}

/* Helper for Collapse on Mobile but Visible on Desktop */
@media (min-width: 768px) {
    .collapse.in-desktop {
        display: block !important;
        height: auto !important;
        visibility: visible;
    }

    /* Hide mobile toggle on desktop */
    .visible-xs {
        display: none !important;
    }
}

/* ============ Shared Stat Cards (Dashboard + Tasks) ============ */

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-top: 10px;
}

.stat-card {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(148, 163, 184, 0.18);
    margin-bottom: 24px;
    height: 110px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(59, 130, 246, 0.35);
}

.stat-card .icon-bg {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 80px;
    opacity: 0.08;
    transform: rotate(-15deg);
}

.stat-info h3 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    color: #f1f5f9;
    line-height: 1.2;
}

.stat-info p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.stat-primary .stat-icon-wrapper {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-primary .stat-info h3 {
    color: #3b82f6;
}

.stat-danger .stat-icon-wrapper {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stat-danger .stat-info h3 {
    color: #ef4444;
}

.stat-warning .stat-icon-wrapper {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-warning .stat-info h3 {
    color: #f59e0b;
}

.stat-success .stat-icon-wrapper {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.stat-success .stat-info h3 {
    color: #10b981;
}
/* ============ Dashboard Page Widgets ============ */

/* Dashboard stat cards grid */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dash-stat-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    border-color: rgba(59, 130, 246, 0.35);
}
.dash-stat-card .stat-icon { font-size: 24px; margin-bottom: 8px; }
.dash-stat-card .stat-num {
    font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 4px;
}
.dash-stat-card .stat-num.blue { color: var(--primary); }
.dash-stat-card .stat-num.green { color: var(--success); }
.dash-stat-card .stat-num.orange { color: var(--warning); }
.dash-stat-card .stat-num.purple { color: #a78bfa; }
.dash-stat-card .stat-num.pink { color: #e879f9; }
.dash-stat-card .stat-label {
    font-size: var(--text-sm); color: var(--text-muted); font-weight: 500;
}
.dash-stat-card::after {
    content: ''; position: absolute; top: -10px; right: -10px;
    width: 80px; height: 80px; border-radius: 50%; opacity: 0.08;
}
.dash-stat-card.card-blue::after { background: var(--primary); }
.dash-stat-card.card-green::after { background: var(--success); }
.dash-stat-card.card-orange::after { background: var(--warning); }
.dash-stat-card.card-purple::after { background: #a78bfa; }
.dash-stat-card.card-pink::after { background: #e879f9; }

/* Dashboard panels */
.dash-panel {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}
.dash-panel:hover { border-color: rgba(148, 163, 184, 0.3); }
.dash-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    display: flex; align-items: center; justify-content: space-between;
}
.dash-panel-title {
    font-size: var(--text-base); font-weight: 600;
    color: var(--text-main);
    display: flex; align-items: center; gap: 8px;
}
.dash-panel-body { padding: 16px 20px; }

/* Chart wrapper */
.chart-wrap { height: 260px; position: relative; }

/* Activity list */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.activity-icon.sync { background: rgba(59,130,246,0.15); }
.activity-icon.ai { background: rgba(168,85,247,0.15); }
.activity-icon.task { background: rgba(34,197,94,0.15); }
.activity-icon.ocr { background: rgba(245,158,11,0.15); }
.activity-text { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.activity-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Dashboard task list */
.dash-task-list { display: flex; flex-direction: column; }
.dash-task-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.dash-task-item:last-child { border-bottom: none; }
.dash-task-priority { width: 6px; height: 28px; border-radius: 3px; flex-shrink: 0; }
.dash-task-priority.high { background: var(--danger); }
.dash-task-priority.medium { background: var(--warning); }
.dash-task-priority.low { background: var(--success); }
.dash-task-info { flex: 1; min-width: 0; }
.dash-task-title {
    font-size: 13px; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-task-meta { font-size: var(--text-xs); color: var(--text-muted); }
.dash-task-deadline {
    font-size: var(--text-xs); padding: 3px 8px; border-radius: 4px;
    white-space: nowrap; font-weight: 500;
}
.dash-task-deadline.overdue { background: var(--danger-bg); color: #fca5a5; }
.dash-task-deadline.soon { background: var(--warning-bg); color: #fcd34d; }
.dash-task-deadline.ok { background: rgba(148,163,184,0.08); color: var(--text-muted); }

/* AI status rows */
.ai-stat-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.ai-stat-row:last-child { border-bottom: none; }
.ai-stat-label { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.ai-stat-value { font-size: var(--text-lg); font-weight: 700; }

/* Meeting list */
.meeting-item { padding: 10px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.08); }
.meeting-item:last-child { border-bottom: none; }
.meeting-time { font-size: var(--text-sm); font-weight: 600; color: var(--primary); margin-bottom: 2px; }
.meeting-title { font-size: 13px; color: var(--text-main); }
.meeting-loc { font-size: var(--text-xs); color: var(--text-muted); }

/* Dashboard utilities */
.dash-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 24px; }
.dash-loading { color: var(--text-muted); font-size: 13px; text-align: center; padding: 24px; }

@media (max-width: 900px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dash-stat-card .stat-num { font-size: 24px; }
}

/* VB Status Grid — 4 cols desktop, 2x2 mobile */
.vb-status-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    margin-bottom: 0;
}
@media (max-width: 900px) {
    .vb-status-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .vb-status-grid .dash-stat-card {
        padding: 14px 12px;
    }
    .vb-status-grid .stat-num {
        font-size: 22px !important;
    }
    .vb-status-grid .stat-label {
        font-size: 11px;
    }
}
@media (max-width: 480px) {
    .vb-status-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }
    .vb-status-grid .dash-stat-card {
        padding: 12px 10px;
    }
    .vb-status-grid .stat-num {
        font-size: 20px !important;
    }
    .vb-status-grid .stat-icon {
        font-size: 16px !important;
        margin-bottom: 4px;
    }
}

/* ============ Tasks Page Components ============ */

/* Filter bar */
.filter-bar {
    background: var(--surface);
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    border: 1px solid var(--border);
}

.filter-bar .form-control {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-main);
    font-size: var(--text-base);
    height: 42px;
}
.filter-bar .form-control:focus {
    background-color: rgba(30, 41, 59, 1);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.filter-bar .input-group-addon {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--text-muted);
}

/* Tasks table container */
.tasks-table-container {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Task content */
.task-title {
    font-size: 15px; font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px; line-height: 1.5;
}
.task-meta {
    color: var(--text-muted); font-size: var(--text-sm);
    display: flex; align-items: center; gap: 6px;
}
.task-doc-link {
    font-weight: 500; color: #93c5fd;
    text-decoration: none; transition: color 0.2s;
}
.task-doc-link:hover { color: var(--primary); text-decoration: underline; }

/* Status badges */
.status-badge {
    padding: 6px 12px; border-radius: 6px;
    font-size: var(--text-sm); font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
}
.badge-completed { background: var(--success-bg); color: #86efac; }
.badge-processing { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.badge-pending { background: rgba(148, 163, 184, 0.1); color: var(--text-secondary); }
.badge-overdue { background: var(--danger-bg); color: #fca5a5; }

/* Action buttons */
.btn-action-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-muted); border: none;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.btn-action-icon:hover { background: var(--primary); color: #fff; }

/* Priority dots */
.priority-dot {
    width: 8px; height: 8px; border-radius: 50%;
    margin-right: 8px; flex-shrink: 0; margin-top: 6px;
}

/* Panel chart container (tasks overview) */
.panel-chart-container {
    background: var(--surface);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
    height: 110px;
    display: flex; flex-direction: column; justify-content: center;
    border: 1px solid var(--border);
}

/* ========== Chat Sidebar (Phase 2) ========== */

.chat-main-area {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.chat-content-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chat-sidebar {
    width: 0;
    overflow: hidden;
    background: #f8fafc;
    border-right: 1px solid var(--border);
    transition: width 0.25s ease;
    display: flex;
    flex-direction: column;
}

.chat-sidebar.open {
    width: 220px;
    min-width: 220px;
}

.chat-sidebar .sidebar-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.chat-sidebar .session-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.chat-sidebar .session-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.chat-sidebar .session-item:hover {
    background: #e2e8f0;
}

.chat-sidebar .session-item.active {
    background: var(--primary-light);
    border-left: 3px solid var(--primary);
}

.chat-sidebar .session-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.chat-sidebar .session-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3px;
}

.chat-sidebar .session-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.chat-sidebar .session-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.chat-sidebar .session-item:hover .session-delete {
    opacity: 1;
}

.chat-sidebar .session-delete:hover {
    color: #ef4444;
}

.chat-sidebar .session-empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Fix chat-window layout to accommodate sidebar */
.chat-window {
    display: flex;
    flex-direction: column;
}

/* ========== Toast Notifications (Phase 2: SSE) ========== */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.notification-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    padding: 12px 14px;
    min-width: 280px;
    max-width: 380px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.notification-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-icon {
    font-size: 1.2rem;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
    margin-bottom: 2px;
}

.toast-message {
    font-size: 0.8rem;
    color: var(--text-secondary);
    word-break: break-word;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.toast-close:hover {
    color: var(--text-main);
}

/* ============ Cmd+K Global Search ============ */

.cmdk-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.cmdk-modal {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    animation: cmdkSlideIn 0.15s ease-out;
}

@keyframes cmdkSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cmdk-input-wrap {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    gap: 10px;
}

.cmdk-input-icon {
    color: #94a3b8;
    font-size: 16px;
    flex-shrink: 0;
}

.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: inherit;
    color: #0f172a;
    background: transparent;
}

.cmdk-input::placeholder {
    color: #94a3b8;
}

.cmdk-kbd-esc {
    font-size: 11px;
    padding: 2px 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #64748b;
    font-family: monospace;
    flex-shrink: 0;
}

.cmdk-results {
    max-height: 400px;
    overflow-y: auto;
}

.cmdk-group-header {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
}

.cmdk-result-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.cmdk-result-item:hover,
.cmdk-result-item.active {
    background: #f1f5f9;
}

.cmdk-result-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.cmdk-result-body {
    flex: 1;
    min-width: 0;
}

.cmdk-result-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-result-desc {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.cmdk-result-date {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

.cmdk-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.cmdk-badge-vbden {
    background: #dbeafe;
    color: #1d4ed8;
}

.cmdk-badge-vbdi {
    background: #ede9fe;
    color: #6d28d9;
}

.cmdk-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.cmdk-empty i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.cmdk-empty p {
    margin: 0;
    font-size: 13px;
}

.cmdk-footer {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 11px;
    color: #94a3b8;
}

.cmdk-kbd {
    display: inline-block;
    font-size: 10px;
    padding: 1px 5px;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    color: #475569;
    font-family: monospace;
    margin: 0 2px;
    line-height: 1.4;
}

.cmdk-hint-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #64748b;
    font-family: monospace;
    margin-left: 8px;
    cursor: pointer;
    vertical-align: middle;
}

.cmdk-hint-badge:hover {
    background: #e2e8f0;
    color: #334155;
}

/* ============ AI Streaming Cursor ============ */

.ai-streaming-cursor::after {
    content: '\25CB';
    animation: aiCursorBlink 1s infinite;
    color: #3b82f6;
    font-weight: bold;
}

@keyframes aiCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ============ Dashboard v2 Widgets ============ */

.widget-delta {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.widget-delta-up {
    background: #dcfce7;
    color: #15803d;
}

.widget-delta-down {
    background: #fee2e2;
    color: #b91c1c;
}

.widget-delta-neutral {
    background: #f1f5f9;
    color: #64748b;
}

.sla-bar-container {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}

.sla-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.sla-bar-fill.sla-good { background: #22c55e; }
.sla-bar-fill.sla-warn { background: #f59e0b; }
.sla-bar-fill.sla-bad  { background: #ef4444; }

.sla-dept-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
}

.sla-dept-row:last-child {
    border-bottom: none;
}

.sla-dept-name {
    color: #334155;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sla-dept-pct {
    font-weight: 700;
    margin-left: 8px;
    flex-shrink: 0;
}

.kcn-mini-stat {
    text-align: center;
    padding: 12px 8px;
}

.kcn-mini-stat h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.kcn-mini-stat p {
    margin: 4px 0 0;
    font-size: 11px;
    color: #64748b;
}

.ai-processing-widget {
    padding: 16px;
}

.ai-processing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.ai-processing-label {
    color: #64748b;
}

.ai-processing-value {
    font-weight: 700;
    color: #1e293b;
}

.dashboard-tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-tabs li {
    margin: 0;
}

.dashboard-tabs li a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.dashboard-tabs li a:hover {
    color: #334155;
}

.dashboard-tabs li.active a {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.tab-content-panel {
    display: none;
}

.tab-content-panel.active {
    display: block;
}

/* ============ PRINT STYLES ============ */
@media print {
    /* Hide non-content elements */
    .sidebar,
    .top-bar,
    .floating-toolbar,
    .navbar,
    .breadcrumb,
    .btn,
    .no-print,
    .toast-container,
    #loadingOverlay,
    .skip-to-content,
    .box-tools,
    .pagination,
    .modal-backdrop,
    footer {
        display: none !important;
    }

    /* Reset layout */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
        margin: 0;
        padding: 0;
    }

    .content-wrapper,
    .main-content,
    .col-md-12 {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Typography */
    a { color: #000 !important; text-decoration: none !important; }
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
    table, img, pre { page-break-inside: avoid; }

    /* Tables */
    .table { border-collapse: collapse; width: 100%; }
    .table th, .table td {
        border: 1px solid #ccc !important;
        padding: 6px 8px !important;
        background: #fff !important;
        color: #000 !important;
    }
    .table th { background: #f0f0f0 !important; font-weight: 700; }

    /* Boxes/panels */
    .box, .panel, .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        margin-bottom: 12pt;
    }
    .box-header, .panel-heading {
        background: #f0f0f0 !important;
        border-bottom: 1px solid #ccc !important;
    }

    /* Labels/badges */
    .label, .badge {
        border: 1px solid #999 !important;
        background: #fff !important;
        color: #000 !important;
    }

    /* Diff table (compare page) */
    .diff-container table { font-size: 9pt; }
    .diff_add { background: #e8f5e9 !important; }
    .diff_sub { background: #ffebee !important; }
    .diff_chg { background: #fff8e1 !important; }

    /* Page margins */
    @page {
        margin: 1.5cm;
        size: A4;
    }
}

/* =========================================
   ADMIN PAGE
   ========================================= */
.admin-content { max-width: 1100px; margin: 0 auto; padding: 24px 32px; }
.admin-nav { display: flex; gap: 4px; margin-bottom: 20px; }
.nav-btn {
    background: transparent; border: 1px solid transparent;
    color: var(--text-secondary); padding: 8px 16px;
    border-radius: 8px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 500;
    transition: all 0.2s;
}
.nav-btn:hover { background: rgba(59,130,246,0.08); color: var(--text-main); }
.nav-btn.active {
    background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.3);
    color: #93c5fd;
}
.admin-section { display: none; }
.admin-section.active { display: block; }
.section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}
.section-title { font-size: 16px; font-weight: 600; color: var(--text-main); }

/* Admin Data Table */
.data-table {
    width: 100%; border-collapse: collapse;
    background: var(--surface); border-radius: 12px;
    overflow: hidden; border: 1px solid var(--border);
}
.data-table th {
    text-align: left; padding: 12px 16px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-secondary);
    background: rgba(15,23,42,0.5); border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 12px 16px; font-size: 13px;
    border-bottom: 1px solid rgba(148,163,184,0.08);
    color: var(--text-secondary);
}
.data-table tr:hover td { background: rgba(59,130,246,0.04); }
.data-table tr:last-child td { border-bottom: none; }

/* Admin Stat Box */
.stats-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-bottom: 24px;
}
.stat-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px; text-align: center;
}
.stat-box .num { font-size: 28px; font-weight: 700; }
.stat-box .num.blue { color: var(--primary); }
.stat-box .num.green { color: #22c55e; }
.stat-box .num.orange { color: #f59e0b; }
.stat-box .label { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* Admin Badges */
.badge-parent {
    background: rgba(59,130,246,0.12); color: #93c5fd;
    border: 1px solid rgba(59,130,246,0.2);
}
.badge-child {
    background: rgba(34,197,94,0.12); color: #86efac;
    border: 1px solid rgba(34,197,94,0.2);
}

/* Admin Modal */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
    z-index: 100;
}
.modal-overlay.show { display: block; }
.admin-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--bg-card, #1e293b); border: 1px solid var(--border);
    border-radius: 12px; padding: 24px; width: 440px;
    max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    z-index: 101;
}
.admin-modal h3 { font-size: 16px; margin-bottom: 20px; color: var(--text-main); }
.form-group { margin-bottom: 16px; }
.form-label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 6px;
}
.form-input {
    width: 100%; padding: 10px 14px;
    background: var(--bg-body, #0f172a); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-main);
    font-family: inherit; font-size: 13px; outline: none;
    transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--primary); }
.form-select {
    width: 100%; padding: 10px 14px;
    background: var(--bg-body, #0f172a); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-main);
    font-family: inherit; font-size: 13px; outline: none;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* Admin Button Variants */
.btn-danger-admin {
    background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3);
    color: #fca5a5; padding: 4px 10px; border-radius: 8px;
    font-size: 11px; cursor: pointer; transition: all 0.2s;
}
.btn-danger-admin:hover { background: rgba(239,68,68,0.25); }
.btn-ghost-admin {
    background: rgba(148,163,184,0.08); border: 1px solid var(--border);
    color: var(--text-secondary); padding: 8px 16px; border-radius: 8px;
    font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.btn-ghost-admin:hover { background: rgba(148,163,184,0.15); color: var(--text-main); }

.indent { padding-left: 24px; color: var(--text-secondary); }
.dept-code { font-family: monospace; font-size: 11px; color: var(--text-secondary); }

/* Admin Toast */
.admin-toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 20px;
    font-size: 13px; z-index: 200; display: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    color: var(--text-main);
    animation: adminSlideUp 0.3s ease;
}
.admin-toast.success { border-left: 3px solid #22c55e; }
.admin-toast.error { border-left: 3px solid #ef4444; }
@keyframes adminSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Extraction */
.extraction-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.extraction-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px;
}
.extraction-title { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 8px; }
.extraction-meta { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.extraction-status {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 600;
}
.extraction-status.pending { background: rgba(245,158,11,0.12); color: #fcd34d; }
.extraction-status.processing { background: rgba(59,130,246,0.12); color: #93c5fd; }
.extraction-status.done { background: rgba(34,197,94,0.12); color: #86efac; }
.extraction-status.failed { background: rgba(239,68,68,0.12); color: #fca5a5; }

/* =========================================
   DOCUMENTS PAGE
   ========================================= */

/* Layout: flex container for table + sidebar */
.doc-layout {
    display: flex;
    height: calc(100vh - 64px); /* subtract top bar */
    overflow: hidden;
}

.doc-main-area {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.doc-content { max-width: 1200px; margin: 0 auto; padding: 24px 32px; }

/* Inline Detail Sidebar */
.doc-detail-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border-left: 1px solid transparent;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s ease;
    box-shadow: none;
}

.doc-layout.sidebar-open .doc-detail-sidebar {
    width: 480px;
    min-width: 480px;
    border-left-color: var(--border);
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}

/* Active row highlight */
.doc-row.row-active td {
    background: rgba(59,130,246,0.1) !important;
    border-left: 3px solid var(--primary, #3b82f6);
}
.doc-row.row-active td:first-child {
    padding-left: 13px;
}

/* Doc Filter Tabs */
.filter-tabs { display: flex; gap: 2px; }
.tab-btn {
    padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; color: var(--text-secondary); font-family: inherit;
    font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.tab-btn:hover { background: rgba(59,130,246,0.08); }
.tab-btn.active { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.3); color: #93c5fd; }
.search-input {
    flex: 1; min-width: 200px; padding: 8px 14px;
    background: var(--bg-body, #0f172a); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-main);
    font-family: inherit; font-size: 13px; outline: none;
}
.search-input:focus { border-color: var(--primary); }
.filter-select-doc {
    padding: 8px 12px; background: var(--bg-body, #0f172a); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-main);
    font-family: inherit; font-size: 12px;
}

/* Doc Badges */
.badge-cv { background: rgba(34,197,94,0.12); color: #86efac; border: 1px solid rgba(34,197,94,0.2); }
.badge-gm { background: rgba(245,158,11,0.12); color: #fcd34d; border: 1px solid rgba(245,158,11,0.2); }
.badge-qd { background: rgba(59,130,246,0.12); color: #93c5fd; border: 1px solid rgba(59,130,246,0.2); }
.badge-tb { background: rgba(168,85,247,0.12); color: #c4b5fd; border: 1px solid rgba(168,85,247,0.2); }
.badge-pending { background: rgba(148,163,184,0.08); color: var(--text-secondary); }
.truncate { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Doc Pagination */
.doc-pagination {
    display: flex; gap: 4px; justify-content: center;
    margin-top: 20px; align-items: center;
}
.page-btn {
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text-secondary); font-family: inherit;
    font-size: 12px; cursor: pointer; transition: all 0.2s;
}
.page-btn:hover { background: rgba(59,130,246,0.1); }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.page-info { font-size: 12px; color: var(--text-secondary); margin: 0 8px; }

/* Doc Detail Sidebar inner parts */
.detail-header {
    padding: 20px 24px; border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0; background: #ffffff;
}
.detail-header h3 { font-size: 16px; color: #0f172a; margin: 0; font-weight: 600; }
.detail-close {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e2e8f0;
    background: #f8fafc; color: #64748b; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.detail-close:hover { background: rgba(239,68,68,0.1); color: #dc2626; border-color: rgba(239,68,68,0.3); }
.detail-body { padding: 20px 24px; overflow-y: auto; flex: 1; background: #f8fafc; }
.detail-grid {
    display: grid; grid-template-columns: 110px 1fr;
    gap: 8px 12px; font-size: 13px;
}
.detail-label { color: #64748b; font-weight: 500; text-align: right; padding: 4px 0; }
.detail-value { color: #1e293b; padding: 4px 0; word-break: break-word; }
.detail-divider { grid-column: 1 / -1; height: 1px; background: #e2e8f0; margin: 8px 0; }
.detail-section {
    grid-column: 1 / -1; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px; color: #3b82f6; margin-top: 12px;
}
.ai-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn-ai {
    padding: 8px 16px; border-radius: 8px; font-family: inherit;
    font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid transparent;
    transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px;
}
.btn-ai-classify { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: #2563eb; }
.btn-ai-classify:hover { background: rgba(59,130,246,0.2); }
.btn-ai-summarize { background: rgba(168,85,247,0.1); border-color: rgba(168,85,247,0.3); color: #7c3aed; }
.btn-ai-summarize:hover { background: rgba(168,85,247,0.2); }
.btn-ai-extract { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #16a34a; }
.btn-ai-extract:hover { background: rgba(34,197,94,0.2); }
.ai-result {
    grid-column: 1 / -1; margin-top: 8px; padding: 12px 16px;
    background: #f0f9ff; border: 1px solid #bae6fd;
    border-radius: 8px; font-size: 13px; line-height: 1.6;
    white-space: pre-wrap; display: none; color: #0c4a6e;
}
.ai-result.show { display: block; animation: fadeIn 0.3s ease; }

.empty-state { color: var(--text-secondary); font-size: 13px; text-align: center; padding: 40px; }

/* Attachment Cards */
.attach-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.attach-card:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59,130,246,0.12);
}
.attach-card-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: #dbeafe;
    border-radius: 8px;
}
.attach-card-info { flex: 1; min-width: 0; }
.attach-card-name {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attach-card-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}
.attach-card-action {
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
    flex-shrink: 0;
    padding: 4px 10px;
    background: #dbeafe;
    border-radius: 6px;
    border: 1px solid #93c5fd;
}
.attach-card:hover .attach-card-action {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Attachment Viewer Modal */
.attach-viewer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.attach-viewer-overlay.show { display: flex; }

.attach-viewer {
    width: 90vw;
    height: 90vh;
    max-width: 1400px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: attachViewerIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: auto;
}

@keyframes attachViewerIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.attach-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.attach-viewer-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attach-viewer-tabs {
    display: flex;
    gap: 2px;
    padding: 12px 24px 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.attach-tab {
    padding: 10px 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
}
.attach-tab:hover { color: #1e293b; }
.attach-tab.active {
    color: #2563eb;
    border-bottom-color: #3b82f6;
}

.attach-viewer-body { flex: 1; overflow: hidden; position: relative; }

.attach-tab-content {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.attach-tab-content.active { display: block; }

.attach-pdf-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #525659;
}

.attach-ocr-text {
    margin: 0;
    padding: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #1e293b;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    height: 100%;
    background: #f8fafc;
}
.attach-ocr-text.ocr-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 15px;
    white-space: normal;
    text-align: center;
}

/* Responsive: on small screens, sidebar overlays */
@media (max-width: 1024px) {
    .doc-layout.sidebar-open .doc-detail-sidebar {
        position: fixed;
        top: 0; right: 0;
        width: 100vw; min-width: 100vw;
        height: 100vh;
        z-index: 101;
        box-shadow: -8px 0 40px rgba(0,0,0,0.4);
    }
    .attach-viewer { width: 98vw; height: 95vh; }
}

/* =========================================
   DARK THEME OVERRIDES — Tailwind pages
   (org_info, report_editor)
   ========================================= */

/* Organization page — force dark backgrounds on Tailwind bg-white/bg-slate-50 */
.modern-ui-scope.bg-slate-50\/50,
.modern-ui-scope .bg-white,
.modern-ui-scope .bg-slate-50,
.modern-ui-scope .bg-slate-50\/50 {
    background-color: transparent !important;
}
.modern-ui-scope .bg-white.rounded-xl,
.modern-ui-scope .bg-white.rounded-xl.border {
    background-color: var(--surface, rgba(30,41,59,0.6)) !important;
    border-color: var(--border, rgba(148,163,184,0.12)) !important;
}
.modern-ui-scope .text-slate-800,
.modern-ui-scope .text-3xl.font-black,
.modern-ui-scope .text-sm.font-bold,
.modern-ui-scope .font-bold.text-slate-700,
.modern-ui-scope .font-bold.text-slate-800 {
    color: var(--text-main, #e2e8f0) !important;
}
.modern-ui-scope .text-slate-500,
.modern-ui-scope .text-slate-400,
.modern-ui-scope .text-xs.text-slate-500,
.modern-ui-scope .text-xs.text-slate-400 {
    color: var(--text-secondary, #94a3b8) !important;
}
.modern-ui-scope .border-slate-200,
.modern-ui-scope .border-slate-100 {
    border-color: var(--border, rgba(148,163,184,0.12)) !important;
}
.modern-ui-scope .bg-slate-50.sticky {
    background-color: rgba(15,23,42,0.6) !important;
}
.modern-ui-scope input.bg-white,
.modern-ui-scope input[type="text"] {
    background-color: var(--bg-body, #0f172a) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}
.modern-ui-scope button.bg-white {
    background-color: var(--surface, rgba(30,41,59,0.6)) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}
.modern-ui-scope .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border, rgba(148,163,184,0.12)) !important;
}
/* Keep colored chips visible */
.modern-ui-scope .text-green-600 { color: #22c55e !important; }
.modern-ui-scope .text-blue-600 { color: #3b82f6 !important; }
.modern-ui-scope .text-amber-600 { color: #f59e0b !important; }

/* Report Editor page — force dark backgrounds */
.gov-app-container {
    background: var(--bg-body, #0f172a) !important;
    color: var(--text-main, #e2e8f0) !important;
}
.gov-app-container .bg-slate-50,
.gov-app-container .bg-slate-50\/50,
.gov-app-container .bg-white {
    background-color: transparent !important;
}
.gov-app-container .glass-header {
    background: var(--surface, rgba(30,41,59,0.6)) !important;
    border-color: var(--border) !important;
}
.gov-app-container .text-slate-500,
.gov-app-container .text-slate-400 {
    color: var(--text-secondary) !important;
}
.gov-app-container .text-slate-800,
.gov-app-container .text-slate-700 {
    color: var(--text-main) !important;
}
.gov-app-container .template-grid {
    background: transparent !important;
}
.gov-app-container .overflow-auto.bg-slate-50 {
    background: transparent !important;
}