/* ============================================================
   Ops console theme tokens (sidebar layout — same charcoal/red tokens as the portal) — ONE base colour (--theme-base, charcoal) and ONE accent (--brand-red); every other
   shade is derived with color-mix(). custom.css is hr's compiled Bootstrap (NOT recompiled) — it emits
   --theme-base: #10b981 at its end, so this file loads AFTER it and overrides the Bootstrap primary
   variables here instead. One --font-size drives the whole type scale (globalFunction/css/general.css).
   ============================================================ */
:root {
    --theme-base: #23262B;                 /* charcoal: nav bar, primary buttons, headings */
    --theme-base-rgb: 35, 38, 43;
    --brand-red: #D2232A;                  /* the namecard red: active states, focus rings, brand accents */
    --brand-red-rgb: 210, 35, 42;
    --font-size: 13px;

    /* Accent shades */
    --accent-color:  var(--brand-red);
    --accent-hover:  color-mix(in srgb, var(--brand-red), #000 12%);
    --accent-active: color-mix(in srgb, var(--brand-red), #000 22%);

    /* Top bar / sidebar surfaces — the charcoal itself, lifted or deepened */
    --sidebar-bg-color:           var(--theme-base);
    --sidebar-active-bg-color:    color-mix(in srgb, var(--theme-base), #fff 9%);
    --sidebar-submenu-bg-color:   color-mix(in srgb, var(--theme-base), #000 20%);
    --sidebar-border-color:       var(--brand-red);
    --sidebar-text-color:         color-mix(in srgb, #fff 74%, var(--theme-base));
    --sidebar-submenu-text-color: color-mix(in srgb, #fff 64%, var(--theme-base));

    --primary-bg-color:   var(--theme-base);
    --primary-text-color: #d5d7db;

    /* Page background — a whisper of the charcoal on white */
    --page-bg: color-mix(in srgb, var(--theme-base) 4%, #fff);

    --topbar-height: 60.8px;
    --sidebar-nocollapse-width: 210px;
    --sidebar-collapse-width: 70px;
    --primary-border-radius: 12px;

    /* Shared design tokens (globalFunction/css/general.css derives -d1/-d2/-tint from --primary) */
    --primary: var(--theme-base);
    --on-primary: #ffffff;

    /* ---- Bootstrap 5.3 primary → charcoal (compiled CSS still says emerald; these win by load order) ---- */
    --bs-primary: #23262B;
    --bs-primary-rgb: 35, 38, 43;
    --bs-primary-text-emphasis: #17191c;
    --bs-primary-bg-subtle: color-mix(in srgb, #23262B 8%, #fff);
    --bs-primary-border-subtle: color-mix(in srgb, #23262B 22%, #fff);
    --bs-link-color: #b11e24;
    --bs-link-color-rgb: 177, 30, 36;
    --bs-link-hover-color: #8f181d;
    --bs-link-hover-color-rgb: 143, 24, 29;
    --bs-body-bg: var(--page-bg);
    --bs-body-color: #1b1c1f;
    --bs-font-sans-serif: "IBM Plex Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-focus-ring-color: rgba(210, 35, 42, .25);
}

html { background-color: var(--page-bg); min-height: 100%; }
body {
    background-color: var(--page-bg) !important;
    font-size: var(--font-size) !important;
    font-family: var(--bs-body-font-family);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title, .modal-title, .offcanvas-title {
    font-family: "Jost", "Noto Sans SC", var(--bs-font-sans-serif);
    font-weight: 600;
    letter-spacing: .005em;
}
/* The Chinese company name (明衡咨询) — only place the calligraphic face is used. */
.mh-cn { font-family: "Ma Shan Zheng", "Noto Sans SC", serif; font-weight: 400; }

/* ---- Bootstrap component overrides (primary = charcoal, focus = red) ---- */
.btn-primary {
    --bs-btn-bg: var(--theme-base); --bs-btn-border-color: var(--theme-base); --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--theme-base), #fff 12%); --bs-btn-hover-border-color: color-mix(in srgb, var(--theme-base), #fff 12%); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--theme-base), #000 15%); --bs-btn-active-border-color: color-mix(in srgb, var(--theme-base), #000 15%); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: color-mix(in srgb, var(--theme-base) 55%, #fff); --bs-btn-disabled-border-color: color-mix(in srgb, var(--theme-base) 55%, #fff); --bs-btn-disabled-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--brand-red-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--theme-base); --bs-btn-border-color: var(--theme-base);
    --bs-btn-hover-bg: var(--theme-base); --bs-btn-hover-border-color: var(--theme-base); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--theme-base); --bs-btn-active-border-color: var(--theme-base); --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--theme-base); --bs-btn-disabled-border-color: var(--theme-base);
    --bs-btn-focus-shadow-rgb: var(--brand-red-rgb);
}
.btn-danger { --bs-btn-bg: var(--brand-red); --bs-btn-border-color: var(--brand-red); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active); --bs-btn-disabled-bg: var(--brand-red); --bs-btn-disabled-border-color: var(--brand-red); }
.btn-outline-danger { --bs-btn-color: var(--brand-red); --bs-btn-border-color: var(--brand-red); --bs-btn-hover-bg: var(--brand-red); --bs-btn-hover-border-color: var(--brand-red); --bs-btn-active-bg: var(--brand-red); --bs-btn-active-border-color: var(--brand-red); }
.text-primary { color: var(--theme-base) !important; }
.bg-primary { background-color: var(--theme-base) !important; }
.bg-primary-subtle { background-color: var(--bs-primary-bg-subtle) !important; }
.border-primary { border-color: var(--theme-base) !important; }
.text-danger { color: var(--brand-red) !important; }
.bg-danger { background-color: var(--brand-red) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: color-mix(in srgb, var(--brand-red) 60%, #fff);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-red-rgb), .15);
}
.form-check-input:checked { background-color: var(--theme-base); border-color: var(--theme-base); }
.form-switch .form-check-input:checked { background-color: var(--brand-red); border-color: var(--brand-red); }
.page-link { color: var(--theme-base); }
.page-item.active .page-link { background-color: var(--theme-base); border-color: var(--theme-base); }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(var(--brand-red-rgb), .15); }
.spinner-border.text-primary { color: var(--brand-red) !important; }
.nav-pills .nav-link.active { background-color: var(--theme-base); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--theme-base); }
.list-group-item.active { background-color: var(--theme-base); border-color: var(--theme-base); }
.progress-bar { background-color: var(--theme-base); }
a { color: var(--bs-link-color); }

#current-date-time {
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size);
}

.transition { transition: all 0.2s ease-in-out; }
.form-check-input { cursor: pointer; }
.form-check { display: flex; align-items: center; }

.container-fluid {
    border-radius: var(--primary-border-radius);
    background-color: transparent !important;
}

/* ---- SweetAlert2 — match the app theme (charcoal + rounded). Inline confirmButtonColor still wins. ---- */
.swal2-popup { border-radius: var(--primary-border-radius, 12px); box-shadow: 0 24px 50px -24px rgba(20,22,26,.35), 0 6px 18px rgba(0,0,0,.06); font-family: var(--bs-body-font-family); }
.swal2-title { font-weight: 600; font-family: "Jost", "Noto Sans SC", sans-serif; }
.swal2-styled.swal2-confirm { background-color: var(--theme-base, #23262B); border-radius: 10px; box-shadow: none; font-weight: 600; }
.swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(var(--brand-red-rgb), .25); }
.swal2-styled.swal2-cancel { border-radius: 10px; box-shadow: none; font-weight: 600; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, #2e9e5b 30%, transparent); }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #2e9e5b; }

/* Mobile topbar: keep the title tidy — truncate instead of shoving the bell/avatar. */
@media (max-width: 767.98px) {
    .topbar { padding-left: 12px; padding-right: 12px; }
    .topbar > .d-flex:first-child { min-width: 0; flex: 1 1 auto; }
    .topbar h5 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Sidebar brand: mark + name; active item carries the red rule. */
.sidebar-brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-family: "Jost", "Noto Sans SC", sans-serif; letter-spacing: .08em; text-transform: uppercase; font-size: calc(var(--font-size) + 3px); }
.sidebar-brand .mh-mark { color: #fff; flex-shrink: 0; }
.sidebar a:hover, .sidebar a.active { border-left-color: var(--brand-red); }
.topbar { border-bottom: 2px solid var(--brand-red); }
.avatar-circle.bg-success { background-color: var(--theme-base) !important; }