/* === Global UI scale (2026-05-29 rewrite) ===
    Previous clamp shrank the root font to ~9.5px on wide monitors, which made
    every `rem`-based padding, gap, and headline collapse — content ended up
    floating in a narrow column with huge empty margins.

    New approach: keep root font-size NORMAL across all viewport sizes so
    `rem` units behave predictably. Mobile gets 14px (compact), desktop 16px,
    ultrawide 17px (slightly larger for readability on big monitors). */
html { font-size: clamp(14px, 0.45vw + 13px, 17px); }
/* Sidebar width only. The content left-offset (.main-content / #appWrapper
   margin-left) is now owned by the single shared rule in responsive.css so the
   250px offset and its 1200px breakpoint can't drift out of sync per-page.
   (.navbar-main is dead markup — the injected navbar is #mainNavbar.) */
.sidenav {
    width: 250px;
}


.btn-custom {
    background-color: #ffcc00;
    /* Custom background color */
    color: #ffffff;
    /* Text color */
    border: none;
    /* Remove border */
    padding: 10px 20px;
    /* Padding */
    font-size: 14px;
    /* Font size */
    border-radius: 4px;
    /* Rounded corners */
    cursor: pointer;
    /* Pointer cursor on hover */
}

.btn-custom:hover {
    background-color: #ff9900;
    /* Darker shade on hover */
}

#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    /* Ensure it appears above everything else */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Card Identifier extracted inline styles */
.hidden-input { display: none; }
.auto-width { width: auto; }
.initially-hidden { display: none; }
.failed-cards-container { display: none; margin-top: 2rem; }
.logout-container { display: none; }

/* Profile header background extracted from inline style */
.profile-header-bg {
    background-image: url('../img/office-dark.jpg');
    background-size: cover;
    background-position: center;
    min-height: 180px;
    position: relative;
}

/* Small icon utility (replaces inline font-size on material icons) */
.icon-xs { font-size: 16px !important; line-height: 1; }

/* Generic attribute-driven hidden initial state */
[data-initial="hidden"].d-none { display: none !important; }

/* Card Identifier Results Toolbar */
.toolbar-search { max-width: 340px; }
.results-grid .result-card { width: 260px; }
.results-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.result-card.draggable { cursor: grab; }
.result-card.dragging { opacity: 0.6; outline: 2px dashed var(--bs-primary); }

/* --- Global Dark Theme Shared Overrides (site-wide) --- */
body[data-theme='dark'] { --gs-bg:#0b1014; --gs-panel:#141a20; --gs-panel-border:#1f262c; --gs-text:#d5dbe1; --gs-accent:#215a9f; background:var(--gs-bg); color:var(--gs-text); }
body[data-theme='dark'] .panel, body[data-theme='dark'] .card:not(.glass-tile) { background:var(--gs-panel); border:1px solid var(--gs-panel-border); }
body[data-theme='dark'] a { color:#7fb4ff; }
body[data-theme='dark'] a:hover { color:#b0d2ff; }
body[data-theme='dark'] .btn-primary { background:var(--gs-accent); border-color:var(--gs-accent); }
body[data-theme='dark'] .btn-primary:hover { background:#2b6dbd; border-color:#2b6dbd; }
body[data-theme='dark'] .text-muted { color:#8a949c !important; }
/* Initial modal dark baseline (will be refined below) */
body[data-theme='dark'] .modal-content { background:#182128; border:1px solid #27323b; }
body[data-theme='dark'] .dropdown-menu { background:#1b2229; }
body[data-theme='dark'] .dropdown-item { color:#d5dbe1; }
body[data-theme='dark'] .dropdown-item:hover { background:#22303a; color:#fff; }
/* Shared tables/cards for pages not yet fully themed */
body[data-theme='dark'] table { background:#141a20; color:var(--gs-text); }
body[data-theme='dark'] table th { background:#1d252b; border-color:#27323b; color:var(--gs-text); }
body[data-theme='dark'] table td { border-color:#27323b; }
body[data-theme='dark'] .table-striped>tbody>tr:nth-of-type(odd)>* { --bs-table-accent-bg:#182026; color:var(--gs-text); }
body[data-theme='dark'] .table-hover tbody tr:hover { background:#202a32; }
body[data-theme='dark'] .list-group-item { background:#1e242a; border-color:#27323b; color:var(--gs-text); }
body[data-theme='dark'] .form-control, body[data-theme='dark'] .form-select { background:#1b2229; border-color:#2d3943; color:var(--gs-text); }
body[data-theme='dark'] .form-control:focus, body[data-theme='dark'] .form-select:focus { box-shadow:0 0 0 1px #0d6efd; }
body[data-theme='dark'] .page-header.bg-auth { background:#0e1418; }
body[data-theme='dark'] .mask.bg-gradient-dark { background:linear-gradient(145deg,#10161c,#181f27)!important; }
body[data-theme='dark'] .card-header.bg-gradient-primary { background:linear-gradient(145deg,#0d6efd,#184b8f)!important; }
body[data-theme='dark'] .card { color:var(--gs-text); }
body[data-theme='dark'] .card .text-secondary { color:#90a4ae !important; }
body[data-theme='dark'] .nav-link.text-body { color:var(--gs-text)!important; }
body[data-theme='dark'] .nav-link.text-body:hover { color:#fff!important; }
/* Additional background neutralizations */
body[data-theme='dark'] .bg-white, body[data-theme='dark'] .bg-gray-100, body[data-theme='dark'] .bg-gray-200 { background:var(--gs-bg)!important; }
body[data-theme='dark'].bg-gray-100, body[data-theme='dark'].bg-gray-200 { background:var(--gs-bg)!important; }
body[data-theme='dark'] .card-header { background:#1d252b; border-bottom:1px solid #27323b; }
body[data-theme='dark'] .list-group { background:#1e242a; }
body[data-theme='dark'] hr { border-color:#27323b; }
body[data-theme='dark'] .wizard-step, body[data-theme='dark'] .step { background:#141a20; border:1px solid #1f262c; color:var(--gs-text); }
body[data-theme='dark'] .wizard-step.active, body[data-theme='dark'] .step.active { box-shadow:0 0 0 1px #0d6efd; }
body[data-theme='dark'] .btn-outline-primary { color:#7fb4ff; border-color:#2d3c47; }
body[data-theme='dark'] .btn-outline-primary:hover { background:#2d3c47; color:#fff; }
body[data-theme='dark'] .btn-outline-secondary { color:#cfd6dc; border-color:#35424d; }
body[data-theme='dark'] .btn-outline-secondary:hover { background:#35424d; color:#fff; }
/* Profile specific adjustments */
body[data-theme='dark'] .profile-header-bg { filter:brightness(.55) saturate(.9); }
body[data-theme='dark'] .profile-card .list-group-item { background:transparent; }
/* Inventory / submissions table scrollbars */
body[data-theme='dark'] ::-webkit-scrollbar { width:10px; height:10px; }
body[data-theme='dark'] ::-webkit-scrollbar-track { background:#141a20; }
body[data-theme='dark'] ::-webkit-scrollbar-thumb { background:#27323b; border-radius:6px; }
body[data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background:#32404b; }
/* Modal overrides */
/* Refined modal contrast & readability */
body[data-theme='dark'] .modal-content { background:#1f2931; color:#dde3e8; border:1px solid #33404a; box-shadow:0 8px 24px -4px rgba(0,0,0,.6); }
body[data-theme='dark'] .modal-body p,body[data-theme='dark'] .modal-body td,body[data-theme='dark'] .modal-body th { color:#d2d8dd; }
body[data-theme='dark'] .modal-header, body[data-theme='dark'] .modal-footer { border-color:#33404a; }
body[data-theme='dark'] .modal .btn-close { filter:invert(.8); opacity:.85; }
body[data-theme='dark'] .modal-header, body[data-theme='dark'] .modal-footer { border-color:#2a343c; }
body[data-theme='dark'] .modal-title { color:#fff; }
/* Link-style buttons in tables */
body[data-theme='dark'] .btn.btn-link { color:#8ab4ff; }
body[data-theme='dark'] .btn.btn-link:hover { color:#b5d1ff; }

/* Live log box styling (replaces inline styles) */
.live-log-box { max-height:220px; overflow:auto; font-size:11px; line-height:1.25; }

/* Visibility utilities to replace direct style.display mutations in JS */
.is-hidden { display: none !important; }
.is-flex { display: flex !important; }
.is-block { display: block !important; }

/* Transition helper (optional future use) */
.fade-hide { opacity:0; pointer-events:none; transition:opacity .18s ease; }
.fade-show { opacity:1; pointer-events:auto; }

/* Toast system (admin) extracted from inline styles */
.toast-stack { position:fixed; top:1rem; right:1rem; z-index:2000; display:flex; flex-direction:column; gap:.5rem; }
.toast-msg { padding:.65rem .9rem; border-radius:8px; font-size:.8rem; box-shadow:0 2px 6px rgba(0,0,0,.25); color:#fff; opacity:0; transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease; }
.toast-msg.show { opacity:1; transform:translateY(0); }
.toast-info { background:#424242; }
.toast-success { background:#2e7d32; }
.toast-error { background:#c62828; }

/* Sidebar / Navbar extracted styles for CSP compliance */
.notif-menu { min-width:320px; max-height:360px; overflow:auto; }
.avatar-initials { width:28px; height:28px; font-size:.75rem; }

/* === Compact Density Mode (simulates browser zoom-out while preserving layout fidelity) === */
body[data-density='compact'] { font-size:0.875rem; line-height:1.35; }
body[data-density='compact'] h1 { font-size:calc(1.4rem + .9vw); }
body[data-density='compact'] h2 { font-size:calc(1.2rem + .6vw); }
body[data-density='compact'] h3 { font-size:1.15rem; }
body[data-density='compact'] h4 { font-size:1rem; }
body[data-density='compact'] h5 { font-size:.95rem; }
body[data-density='compact'] h6 { font-size:.85rem; }
body[data-density='compact'] .btn { padding:.3rem .6rem; font-size:.72rem; line-height:1.1; }
body[data-density='compact'] .btn.btn-sm { padding:.25rem .5rem; font-size:.65rem; }
body[data-density='compact'] .card-header { padding:.55rem .85rem; }
body[data-density='compact'] .card-body, body[data-density='compact'] .card .card-body { padding:.85rem .95rem; }
body[data-density='compact'] .table td, body[data-density='compact'] .table th { padding:.35rem .5rem; }
body[data-density='compact'] nav.navbar-admin, body[data-density='compact'] .navbar-admin { padding-top:.35rem; padding-bottom:.35rem; }
body[data-density='compact'] .navbar-admin .nav-link { padding:.25rem .4rem; }
body[data-density='compact'] .sidenav { width:210px; }
/* Compact density (the default) narrows the sidebar to 210px; point the shared
   offset variable at the same width so .main-content/#appWrapper offset matches. */
body[data-density='compact'] { --gsp-sidebar-w: 210px; }
body[data-density='compact'] .global-footer { padding:.75rem 0; font-size:.7rem; }
body[data-density='compact'] .form-control, body[data-density='compact'] .form-select { padding:.35rem .5rem; font-size:.75rem; }
body[data-density='compact'] .dropdown-menu { font-size:.75rem; }
body[data-density='compact'] .avatar-initials { width:24px; height:24px; font-size:.65rem; }

/* Inventory mobile stacked rows already compact; avoid over-tightening */
@media (max-width: 720px){
    body[data-density='compact'] .table.inventory-table tbody tr td { font-size:.7rem; }
}

@media (max-width:1200px){
    body[data-density='compact'] .main-content, body[data-density='compact'] #navbar, body[data-density='compact'] .navbar-main { margin-left:0; }
}