/* =====================================================================
   INCLEN admin theme for Somaarth3 — modern, clean SaaS aesthetic.  v2
   CSS translation of the INCLEN HRMS MUI theme (makeTheme(mode)).

   Loaded AFTER style.css / responsive.css; overrides the "Ultra Admin"
   Bootstrap 3 template. Light and dark are selected with
   <html data-theme="light|dark"> (inclen-theme.js); without the attribute
   the OS preference applies.

   Palette (Tailwind 600 scale): primary #2563eb, secondary #0d9488,
   success #16a34a, warning #d97706, error #dc2626, info #0284c7.

   Two things that look like taste but are ACCESSIBILITY decisions:
   1. Filled teal / green / amber / sky controls use DARK text — the
      equivalent of MUI contrastThreshold: 4.5 (white on those fills fails
      WCAG AA).
   2. --text-secondary is #5b6a82 (not Tailwind's #64748b) so it reaches
      4.5:1 on the #f6f7f9 background; --nav-selected is likewise a darker
      blue than --primary.

   Sections: 1 tokens · 2 base/typography · 3 app shell (top bar, sidebar)
   · 4 page header & cards · 5 buttons · 6 forms · 7 tables · 8 feedback
   · 9 overlays · 10 widgets · 11 stat cards / empty states · 12 login
   · 13 responsive
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                    */
/* ------------------------------------------------------------------ */
:root {
    --primary: #2563eb;  --primary-hover: #1d4ed8;  --primary-active: #1e40af;
    --primary-soft: rgba(37, 99, 235, 0.10);   --primary-contrast: #ffffff;
    --secondary: #0d9488; --secondary-hover: #0f766e; --secondary-contrast: #0b1220; --secondary-soft: rgba(13, 148, 136, 0.12);
    --success: #16a34a;   --success-hover: #15803d;   --success-contrast: #0b1220;   --success-soft: rgba(22, 163, 74, 0.12);
    --warning: #d97706;   --warning-hover: #b45309;   --warning-contrast: #0b1220;   --warning-soft: rgba(217, 119, 6, 0.14);
    --error: #dc2626;     --error-hover: #b91c1c;     --error-contrast: #ffffff;     --error-soft: rgba(220, 38, 38, 0.10);
    --info: #0284c7;      --info-hover: #0369a1;      --info-contrast: #0b1220;      --info-soft: rgba(2, 132, 199, 0.12);

    --bg: #f6f7f9;  --paper: #ffffff;  --paper-2: #f9fafb;  --paper-3: #f3f4f6;
    --border: #e5e7eb;  --border-strong: #d1d5db;
    --text: #0f172a;  --text-secondary: #5b6a82;  --text-disabled: #94a3b8;
    --nav-selected: #1d4ed8;  --nav-selected-bg: rgba(37, 99, 235, 0.10);  --nav-hover-bg: rgba(15, 23, 42, 0.045);
    --link: #1d4ed8;  --focus-ring: rgba(37, 99, 235, 0.25);
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.18);
    --overlay: rgba(15, 23, 42, 0.55);
    --topbar-bg: rgba(255, 255, 255, 0.85);
    --scheme: light;

    --font: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --radius: 12px; --radius-card: 14px; --radius-dialog: 16px; --radius-control: 10px; --radius-sm: 8px; --radius-pill: 999px;

    --sidebar-w: 264px; --sidebar-w-collapsed: 70px; --topbar-h: 60px;
    --content-max: 1440px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0b1220; --paper: #111827; --paper-2: #172033; --paper-3: #1f2937;
        --border: #1f2937; --border-strong: #374151;
        --text: #e5e7eb; --text-secondary: #9ca3af; --text-disabled: #6b7280;
        --primary-soft: rgba(96, 165, 250, 0.16); --nav-selected: #93c5fd; --nav-selected-bg: rgba(96, 165, 250, 0.16);
        --nav-hover-bg: rgba(255, 255, 255, 0.05); --link: #93c5fd; --focus-ring: rgba(96, 165, 250, 0.35);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
        --overlay: rgba(2, 6, 23, 0.7); --topbar-bg: rgba(17, 24, 39, 0.85); --scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #0b1220; --paper: #111827; --paper-2: #172033; --paper-3: #1f2937;
    --border: #1f2937; --border-strong: #374151;
    --text: #e5e7eb; --text-secondary: #9ca3af; --text-disabled: #6b7280;
    --primary-soft: rgba(96, 165, 250, 0.16); --nav-selected: #93c5fd; --nav-selected-bg: rgba(96, 165, 250, 0.16);
    --nav-hover-bg: rgba(255, 255, 255, 0.05); --link: #93c5fd; --focus-ring: rgba(96, 165, 250, 0.35);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
    --overlay: rgba(2, 6, 23, 0.7); --topbar-bg: rgba(17, 24, 39, 0.85); --scheme: dark;
}

/* ------------------------------------------------------------------ */
/* 2. Base & typography                                                */
/* ------------------------------------------------------------------ */
html { color-scheme: var(--scheme); }
body, body.login_page {
    background-color: var(--bg) !important; background-image: none;
    color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.page-title h1, .page-title h1.title, section header .title, section.box header .title,
.profile-info .profile-details h3 a, .modal-title, .panel-title, legend {
    font-family: var(--font) !important; font-weight: 700 !important; letter-spacing: -0.02em;
    color: var(--text); text-transform: none !important; line-height: 1.25;
}
h1, .h1 { font-size: 26px; } h2, .h2 { font-size: 21px; } h3, .h3 { font-size: 17px; } h4, .h4 { font-size: 15px; } h5, .h5 { font-size: 14px; }
p, td, th, label, input, select, textarea, button, .btn { font-family: var(--font); }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--primary-hover); text-decoration: none; }
hr { border-top-color: var(--border); margin: 20px 0; }
legend { border-bottom: 1px solid var(--border); padding-bottom: 8px; font-size: 15px; margin-bottom: 16px; }
.text-muted, .help-block, small, .small { color: var(--text-secondary); }
.text-primary { color: var(--primary) !important; } .text-success { color: var(--success) !important; }
.text-danger { color: var(--error) !important; } .text-warning { color: var(--warning) !important; } .text-info { color: var(--info) !important; }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
code, kbd, pre { font-family: var(--font-mono); }
kbd { background: var(--paper-3); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; box-shadow: none; font-size: 11px; padding: 1px 6px; }

/* ------------------------------------------------------------------ */
/* 3. App shell                                                        */
/* ------------------------------------------------------------------ */
/* widths: template hard-codes 300px; re-base on --sidebar-w */
.page-sidebar { width: var(--sidebar-w); }
#main-content { margin-left: var(--sidebar-w); }
.page-topbar .nav_title, .nav_title { width: var(--sidebar-w); }
.page-sidebar.collapseit, .page-sidebar.chat_shift { width: var(--sidebar-w-collapsed); }
#main-content.sidebar_shift { margin-left: var(--sidebar-w-collapsed); }
.sidebar_shift .nav_title { width: var(--sidebar-w-collapsed); }
#main-content > section.wrapper { padding: 24px 28px 40px 28px !important; margin-top: var(--topbar-h) !important; }
#main-content > section.wrapper > .col-lg-12, #main-content > section.wrapper > .clearfix + .col-lg-12 { padding-left: 0; padding-right: 0; }

/* — top bar — */
.page-topbar {
    background: var(--topbar-bg); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border); border-top: 0 !important; box-shadow: none; z-index: 1030; height: var(--topbar-h); min-height: var(--topbar-h);
}
.page-topbar .nav_title, .nav_title { background: transparent !important; border-right: 1px solid var(--border) !important; border-radius: 0; height: var(--topbar-h); display: flex; align-items: center; padding: 0 16px; }
.page-topbar .site_title, .site_title { display: flex; align-items: center; gap: 10px; color: var(--text) !important; font-size: 15px; line-height: 1.15; }
.site_title .logo { display: inline-block; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.site_title .brand-text { display: flex; flex-direction: column; }
.site_title .sitename { color: var(--text); font-weight: 700; letter-spacing: -0.02em; font-size: 15px; }
.site_title .brand-caption { color: var(--text-secondary); font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
.sidebar_shift .site_title .brand-text { display: none; }
.sidebar_shift .nav_title { padding: 0; justify-content: center; }

.page-topbar .quick-area .info-menu { height: var(--topbar-h); line-height: var(--topbar-h); padding: 0 12px; display: flex; align-items: center; gap: 6px; }
.page-topbar .quick-area .info-menu li { line-height: normal; }
.page-topbar .quick-area .info-menu li a { color: var(--text-secondary); }
.page-topbar .quick-area .info-menu li a i { color: inherit; }
.page-topbar .quick-area .info-menu li a.sidebar_toggle,
.page-topbar .quick-area .info-menu li.theme-toggle a {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm);
    color: var(--text-secondary); padding: 0; margin: 0; line-height: 1;
}
.page-topbar .quick-area .info-menu li a.sidebar_toggle:hover, .page-topbar .quick-area .info-menu li.theme-toggle a:hover { background: var(--nav-hover-bg); color: var(--text); }
.page-topbar .quick-area .info-menu li a.sidebar_toggle i, .page-topbar .quick-area .info-menu li.theme-toggle a i { font-size: 16px; }

/* menu search */
.menu-search-box {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; width: 300px; margin: 0 0 0 6px; padding: 0 10px 0 12px;
    background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--text-secondary); font-weight: 400;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.menu-search-box:focus-within { background: var(--paper); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.menu-search-box i { font-size: 13px; }
.menu-search-box input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: 13.5px; outline: 0; height: 100%; }
.menu-search-box input::placeholder { color: var(--text-disabled); }
.menu-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* user menu (template fades it in from opacity 0 via JS; no need) */
.page-topbar li.profile { opacity: 1 !important; }
.page-topbar .quick-area .info-menu li.profile a.toggle { display: inline-flex; align-items: center; gap: 10px; width: auto; height: 40px; padding: 0 8px 0 4px; border-radius: var(--radius-control); }
.page-topbar .quick-area .info-menu li.profile a.toggle:hover, .page-topbar .quick-area .info-menu li.profile.open a.toggle { background: var(--nav-hover-bg); }
.page-topbar .quick-area .info-menu li.profile img { height: 32px; width: 32px; top: 0; background: var(--paper-3); border: 1px solid var(--border); }
.page-topbar .user-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.page-topbar .user-meta .user-name, .dropdown-header .user-name { color: var(--text); font-weight: 600; font-size: 13.5px; }
.page-topbar .user-meta .user-role, .dropdown-header .user-role { color: var(--text-secondary); font-size: 11.5px; font-weight: 500; }
.page-topbar .quick-area .info-menu li.profile a.toggle > i.fa-angle-down { color: var(--text-secondary); font-size: 14px; }
.page-topbar .dropdown-menu, .page-topbar .quick-area .info-menu li .dropdown-menu {
    background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius) !important; box-shadow: var(--shadow-md);
    padding: 6px !important; width: 240px; margin-top: 8px; overflow: hidden;
}
.page-topbar .dropdown-menu .dropdown-header { padding: 10px 12px 8px; display: flex; flex-direction: column; line-height: 1.25; }
.page-topbar .dropdown-menu .divider { margin: 6px 0; background: var(--border); height: 1px; }
.page-topbar li .dropdown-menu.profile li { height: auto; }
.page-topbar li .dropdown-menu li a, .page-topbar li .dropdown-menu.profile li a { color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px; display: flex; align-items: center; gap: 10px; border: 0; font-size: 13.5px; font-weight: 500; }
.page-topbar li .dropdown-menu li a:hover { background: var(--nav-hover-bg); color: var(--text); }
.page-topbar li .dropdown-menu.profile li i { height: auto; width: 18px; color: var(--text-secondary); text-align: center; }
.page-topbar li .dropdown-menu.profile li.last a { color: var(--error); } .page-topbar li .dropdown-menu.profile li.last a i { color: var(--error); }
.page-topbar .dropdown-menu:after, .page-topbar .dropdown-menu:before { display: none; }

/* avatar with initials (inclen-theme.js swaps the default image) */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--paper-3); color: var(--nav-selected); font-weight: 700; letter-spacing: 0; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; }
.avatar.is-initials { background: var(--primary-soft); border: 1px solid transparent; }
.avatar.is-initials img { display: none; }
.avatar-sm { width: 32px; height: 32px; font-size: 12.5px; }
.avatar-md { width: 40px; height: 40px; font-size: 15px; }

.inclen-theme-toggle-floating {
    position: fixed; top: 16px; right: 16px; z-index: 2000; width: 40px; height: 40px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--border);
    color: var(--text-secondary); box-shadow: var(--shadow-sm);
}
.inclen-theme-toggle-floating:hover { color: var(--text); background: var(--paper-2); }

/* — sidebar — */
.page-sidebar, .page-sidebar.chat_shift .wraplist, .page-sidebar.collapseit .wraplist { background-color: var(--paper); border-right: 1px solid var(--border); }
.page-sidebar { top: 0; bottom: 0; margin-top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); min-height: 0; padding-top: 0 !important; overflow: hidden; }
.page-sidebar-wrapper { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h)); }
#main-menu-wrapper ul.wraplist { padding: 12px 12px 16px; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.nav-section-label { display: block; padding: 6px 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-disabled); }
#main-menu-wrapper li { position: relative; }
#main-menu-wrapper li a {
    display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-weight: 500; font-size: 13.5px;
    line-height: 20px; min-height: 40px; height: auto; padding: 9px 10px 9px 10px; border-radius: var(--radius-sm); margin: 1px 0;
    transition: background-color .15s ease, color .15s ease; text-decoration: none;
}
#main-menu-wrapper li a > span, #main-menu-wrapper li a > span.title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#main-menu-wrapper li a i {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; line-height: 1; flex: 0 0 30px;
    border-radius: 8px; color: var(--text-secondary); font-size: 15px; top: 0; position: relative; background: transparent; transition: background-color .15s, color .15s;
}
#main-menu-wrapper li a:hover, #main-menu-wrapper li a:focus { background-color: var(--nav-hover-bg); color: var(--text); }
#main-menu-wrapper li a:hover i { color: var(--text); }
#main-menu-wrapper > ul > li.open > a, #main-menu-wrapper > ul > li.active > a, #main-menu-wrapper > ul > li.current > a { background-color: var(--nav-selected-bg); color: var(--nav-selected); }
#main-menu-wrapper > ul > li.open > a i, #main-menu-wrapper > ul > li.active > a i, #main-menu-wrapper > ul > li.current > a i { color: var(--nav-selected); background: var(--paper); box-shadow: var(--shadow-xs); }
#main-menu-wrapper > ul > li.active > a::before, #main-menu-wrapper > ul > li.current > a::before {
    content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);
}
#main-menu-wrapper li a .arrow { float: none; margin-left: auto; }
#main-menu-wrapper li a .arrow:before, #main-menu-wrapper li a:hover .arrow:before, #main-menu-wrapper li.open a .arrow:before { color: var(--text-disabled); font-size: 13px; margin: 0; float: none; content: "\f107"; transition: transform .2s ease; display: inline-block; }
#main-menu-wrapper li.open > a .arrow:before { transform: rotate(180deg); }
#main-menu-wrapper li ul.sub-menu { padding: 2px 0 4px 20px; margin: 0 0 4px 0; background: transparent; position: relative; }
#main-menu-wrapper li ul.sub-menu::before { content: ""; position: absolute; left: 24px; top: 4px; bottom: 6px; width: 1px; background: var(--border); }
#main-menu-wrapper li .sub-menu a, #main-menu-wrapper li.open .sub-menu a {
    color: var(--text-secondary); font-weight: 400; font-size: 13px; line-height: 18px; min-height: 34px; padding: 8px 10px 8px 22px; border-left: 0; background: transparent; margin: 0; gap: 8px;
}
#main-menu-wrapper li .sub-menu a i { display: none; }
#main-menu-wrapper li .sub-menu a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); flex: 0 0 5px; margin-right: 6px; transition: background .15s; }
#main-menu-wrapper li .sub-menu a:hover, #main-menu-wrapper li.open .sub-menu a:hover { background-color: var(--nav-hover-bg); color: var(--text); }
#main-menu-wrapper li .sub-menu a:hover::before { background: var(--text-secondary); }
#main-menu-wrapper li .sub-menu li.active > a, #main-menu-wrapper li .sub-menu li.current > a, #main-menu-wrapper li .sub-menu a.active { color: var(--nav-selected); background: var(--nav-selected-bg); font-weight: 500; }
#main-menu-wrapper li .sub-menu li.active > a::before, #main-menu-wrapper li .sub-menu a.active::before { background: var(--primary); }
#main-menu-wrapper li.is-hidden { display: none; }
#main-menu-wrapper li.is-match > ul.sub-menu { display: block !important; }

/* profile card (bottom of sidebar) */
.page-sidebar .profile-info {
    order: 3; margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: auto 0 0 0;
    border-top: 1px solid var(--border); border-bottom: 0; background: var(--paper);
}
.page-sidebar .profile-info .profile-image { padding: 0; width: auto; }
.page-sidebar .profile-info .profile-image img { width: 40px; height: 40px; }
.page-sidebar .profile-info .profile-details { padding: 0; width: auto; flex: 1 1 auto; min-width: 0; }
.profile-info .profile-details h3 { margin: 0; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.profile-info .profile-details h3 a { color: var(--text); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-info .profile-details .profile-title { color: var(--text-secondary); font-size: 12px; margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-info .profile-details .profile-status { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin: 0; position: static; }
.profile-info .profile-details .profile-status.online { background: var(--success); box-shadow: 0 0 0 2px var(--paper); }
.profile-info .profile-logout { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--text-secondary); }
.profile-info .profile-logout:hover { background: var(--error-soft); color: var(--error); }
.collapseit .profile-info .profile-details, .collapseit .profile-info .profile-logout, .collapseit .nav-section-label { display: none; }
.collapseit .profile-info { justify-content: center; }
.collapseit #main-menu-wrapper li a { justify-content: center; padding: 8px 0; line-height: 1; font-size: 11px; text-align: center; }
.collapseit #main-menu-wrapper li a > span { display: none; }
.collapseit #main-menu-wrapper li a .arrow { display: none; }
.collapseit #main-menu-wrapper li ul.sub-menu { padding-left: 0; }
.collapseit #main-menu-wrapper li ul.sub-menu::before { display: none; }
.page-sidebar.collapseit .wraplist li:hover, .page-sidebar.chat_shift .wraplist li:hover { background: transparent; }
/* icon strip: scrolls without a visible scrollbar (perfect-scrollbar rails and native bars hidden) */
.page-sidebar.collapseit #main-menu-wrapper, .page-sidebar.chat_shift #main-menu-wrapper, .page-sidebar.collapseit .wraplist, .page-sidebar.chat_shift .wraplist { scrollbar-width: none; -ms-overflow-style: none; }
.page-sidebar.collapseit #main-menu-wrapper::-webkit-scrollbar, .page-sidebar.collapseit .wraplist::-webkit-scrollbar, .page-sidebar.chat_shift #main-menu-wrapper::-webkit-scrollbar { display: none; }
.page-sidebar.collapseit .ps-scrollbar-y-rail, .page-sidebar.collapseit .ps-scrollbar-x-rail, .page-sidebar.chat_shift .ps-scrollbar-y-rail { display: none !important; }
.page-sidebar.collapseit #main-menu-wrapper li a > i, .page-sidebar.chat_shift #main-menu-wrapper li a > i { font-size: 16px; margin: 0; width: auto; }
.page-sidebar.collapseit #main-menu-wrapper .wraplist > li > a { min-height: 44px; }
.page-topbar .sidebar_toggle:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.page-sidebar .project-info { background-color: var(--paper-2); }
.page-topbar.sidebar_shift .logo-area, .page-topbar.chat_shift .logo-area, .page-topbar .logo-area { background-color: var(--paper); }

/* ------------------------------------------------------------------ */
/* 4. Page header & cards                                              */
/* ------------------------------------------------------------------ */
.page-title { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 0 0 20px; margin: 0; }
.page-title .pull-left { float: none !important; }
.page-title .pull-right { float: none !important; margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-title h1, .page-title h1.title { font-size: 24px; margin: 0; color: var(--text); }
.page-title .pull-right .btn { margin: 0; }
.inclen-breadcrumb { display: flex; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 6px; font-size: 12.5px; color: var(--text-secondary); }
.inclen-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.inclen-breadcrumb li + li::before { content: "/"; color: var(--text-disabled); }
.inclen-breadcrumb a { color: var(--text-secondary); font-weight: 500; }
.inclen-breadcrumb a:hover { color: var(--text); }
.inclen-breadcrumb li.active { color: var(--text); font-weight: 500; }
.breadcrumb { background: transparent; padding: 0; margin: 0 0 6px; font-size: 12.5px; }
.breadcrumb, .breadcrumb a { color: var(--text-secondary); }
.breadcrumb > .active { color: var(--text); }
.breadcrumb > li + li:before { color: var(--text-disabled); content: "/\00a0"; }

section.box, .box, .panel, .well, .ui-grids .panel, .thumbnail, .list-group {
    background-color: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--text);
}
section.box { margin: 0 0 24px; overflow: hidden; border-top: 1px solid var(--border) !important; }
section.box header, section header, header.panel_header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: 14px 20px; min-height: 56px;
}
section header .title, section.box header .title, header.panel_header .title { font-size: 15px; padding: 0; margin: 0; line-height: 24px; color: var(--text); float: none !important; }
section.box header .actions, header.panel_header .actions { float: none !important; display: flex; align-items: center; gap: 8px; margin: 0; }
section.box .actions i { color: var(--text-secondary); font-size: 13px; padding: 6px; border-radius: 6px; }
section.box .actions i:hover { color: var(--text); background: var(--nav-hover-bg); }
section.box .content-body, section .content-body { background: transparent; border: 0 !important; padding: 20px; overflow-x: auto !important; overflow-y: visible; }
section.box .content-body > .row { margin-left: 0; margin-right: 0; }
section.box.transparent, section.box.nobox { background: transparent; border: 0 !important; box-shadow: none; }
section.box.nobox .content-body { padding: 0; }
.panel { margin-bottom: 20px; }
.panel-default > .panel-heading, .panel-group .panel, .panel-heading { background: var(--paper-2); color: var(--text); border-color: var(--border); border-radius: var(--radius-card) var(--radius-card) 0 0; background-image: none; }
.panel-heading .panel-title a { padding: 14px 18px; color: var(--text); display: block; }
.panel-body { color: var(--text); padding: 20px; }
.well { background: var(--paper-2); box-shadow: none; padding: 16px; }
.list-group-item { background: var(--paper); border-color: var(--border); color: var(--text); }
.list-group-item:first-child { border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); }
.list-group-item.active, .list-group-item.active:hover { background: var(--primary-soft); border-color: var(--border); color: var(--nav-selected); }

/* ------------------------------------------------------------------ */
/* 5. Buttons                                                          */
/* ------------------------------------------------------------------ */
.btn, .btn.btn-default, .btn-default, .dataTables_wrapper .dt-button, .DTTT_button, a.DTTT_button, button.DTTT_button, div.DTTT_button {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; vertical-align: middle;
    font-family: var(--font); font-weight: 600; font-size: 13.5px; text-transform: none !important; letter-spacing: 0;
    border-radius: var(--radius-control) !important; padding: 0 14px; height: 38px; line-height: 1;
    border: 1px solid var(--border-strong); background: var(--paper); color: var(--text);
    background-image: none; box-shadow: var(--shadow-xs); text-shadow: none; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn i { font-size: 13px; line-height: 1; }
.btn:hover, .btn:focus, .btn.btn-default:hover, .btn.btn-default:focus, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { background: var(--paper-2); border-color: var(--border-strong); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:active:focus, .btn.active:focus { outline: 0; box-shadow: 0 0 0 3px var(--focus-ring); }
.btn.btn-lg, .btn-lg, .btn-group-lg > .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.btn.btn-sm, .btn-sm, .btn-group-sm > .btn { height: 32px; padding: 0 11px; font-size: 13px; }
.btn.btn-xs, .btn-xs, .btn-group-xs > .btn { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 7px !important; }
.btn.btn-block, .btn-block { display: flex; width: 100%; height: 44px; font-size: 15px; }
.btn.btn-round { border-radius: var(--radius-pill) !important; }
.btn.btn-corner { border-radius: var(--radius-control) !important; }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: .5; box-shadow: none; }

.btn.btn-primary, .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.btn-primary:hover, .btn-primary:focus, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-contrast); }
.btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); }
.btn-primary:disabled, .btn-primary[disabled], .btn-primary.disabled { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
/* teal / green / amber / sky: dark text on the fill (contrastThreshold 4.5) */
.btn.btn-secondary, .btn-secondary { background: var(--secondary); border-color: var(--secondary); color: var(--secondary-contrast); }
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { background: var(--secondary-hover); border-color: var(--secondary-hover); color: #fff; }
.btn.btn-success, .btn-success { background: var(--success); border-color: var(--success); color: var(--success-contrast); }
.btn-success:hover, .btn-success:active, .btn-success:focus { background: var(--success-hover); border-color: var(--success-hover); color: #fff; }
.btn.btn-warning, .btn-warning, .btn.btn-orange, .btn-orange { background: var(--warning); border-color: var(--warning); color: var(--warning-contrast); }
.btn-warning:hover, .btn-warning:active, .btn-warning:focus, .btn-orange:hover, .btn-orange:active, .btn-orange:focus { background: var(--warning-hover); border-color: var(--warning-hover); color: #fff; }
.btn.btn-info, .btn-info, .btn.btn-purple, .btn-purple { background: var(--info); border-color: var(--info); color: var(--info-contrast); }
.btn-info:hover, .btn-info:active, .btn-info:focus, .btn-purple:hover, .btn-purple:active, .btn-purple:focus { background: var(--info-hover); border-color: var(--info-hover); color: #fff; }
.btn.btn-danger, .btn-danger { background: var(--error); border-color: var(--error); color: var(--error-contrast); }
.btn-danger:hover, .btn-danger:active, .btn-danger:focus { background: var(--error-hover); border-color: var(--error-hover); color: #fff; }
.btn.btn-link, .btn-link { background: transparent; border-color: transparent; color: var(--link); box-shadow: none; }
.btn.btn-link:hover, .btn.btn-link:focus { color: var(--primary-hover); background: var(--nav-hover-bg); }
.btn.btn-border, .btn.btn-border.btn-default { background: transparent; color: var(--text); border-color: var(--border-strong); box-shadow: none; }
.btn.btn-border.btn-primary { color: var(--primary); border-color: var(--primary); background: transparent; }
.btn.btn-border.btn-secondary { color: var(--secondary); border-color: var(--secondary); background: transparent; }
.btn.btn-border.btn-success { color: var(--success); border-color: var(--success); background: transparent; }
.btn.btn-border.btn-warning, .btn.btn-border.btn-orange { color: var(--warning); border-color: var(--warning); background: transparent; }
.btn.btn-border.btn-danger { color: var(--error); border-color: var(--error); background: transparent; }
.btn.btn-border.btn-info, .btn.btn-border.btn-purple { color: var(--info); border-color: var(--info); background: transparent; }
.btn.btn-border:hover { background: var(--nav-hover-bg); }
.btn-group { display: inline-flex; }
.btn-group > .btn { box-shadow: none; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.btn-group > .btn + .btn { margin-left: -1px; }
/* icon-only action buttons inside tables */
.table .btn-xs i, .table a > i.fa { font-size: 13px; }
.table td > a > i.fa, .table td > i.fa { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--text-secondary); transition: background .15s, color .15s; }
.table td > a:hover > i.fa { background: var(--primary-soft); color: var(--nav-selected); }
.table td > a[title*="elete" i]:hover > i.fa, .table td > a.delete:hover > i.fa { background: var(--error-soft); color: var(--error); }

/* ------------------------------------------------------------------ */
/* 6. Forms                                                            */
/* ------------------------------------------------------------------ */
label, .control-label { color: var(--text); font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.form-control, .loginpage form .input, .loginpage input[type=text], .loginpage input[type=password], select.form-control, textarea.form-control,
.page_error_search input[type='text'], .lockscreen_search input[type='password'] {
    background: var(--paper) !important; color: var(--text); border: 1px solid var(--border-strong) !important; border-radius: var(--radius-control) !important;
    box-shadow: var(--shadow-xs); height: 40px; padding: 8px 12px; font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { height: auto; min-height: 96px; }
select.form-control:not([multiple]) {
    -webkit-appearance: none; appearance: none; padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b6a82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px !important;
}
.form-control:focus, .has-focus .form-control, .loginpage input:focus { background: var(--paper) !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }
.form-control::placeholder { color: var(--text-disabled); opacity: 1; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background: var(--paper-2) !important; color: var(--text-secondary); box-shadow: none; }
.form-control.error, .has-error .form-control, .has-error .form-control:focus { border-color: var(--error) !important; }
.has-error .form-control:focus { box-shadow: 0 0 0 3px var(--error-soft); }
.has-error .control-label, .has-error .help-block, label.error, .error-msg, .form-group .error { color: var(--error); font-weight: 500; font-size: 12.5px; margin-top: 4px; }
.has-success .form-control, .has-success .form-control:focus { border-color: var(--success) !important; }
.has-warning .form-control, .has-warning .form-control:focus { border-color: var(--warning) !important; }
.input-group-addon { background: var(--paper-2); border-color: var(--border-strong); color: var(--text-secondary); border-radius: var(--radius-control); }
.input-group .form-control:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group .form-control:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-btn .btn { height: 40px; box-shadow: none; }
input[type="file"] { color: var(--text-secondary); font-size: 13px; }
input[type="file"].form-control { padding: 7px 10px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 15px; height: 15px; }
.checkbox label, .radio label { font-weight: 400; }
.form-group { margin-bottom: 18px; }
.help-block { font-size: 12.5px; margin-top: 5px; }
.form-horizontal .control-label { padding-top: 10px; }
.form-actions, .form-footer { display: flex; gap: 8px; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--border); }

/* select2 v3 */
.select2-container .select2-choice, .select2-container-multi .select2-choices {
    background: var(--paper) !important; background-image: none !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius-control) !important;
    color: var(--text); height: 40px; line-height: 38px; box-shadow: var(--shadow-xs); padding-left: 12px;
}
.select2-container-multi .select2-choices { height: auto; min-height: 40px; line-height: normal; padding: 3px 6px; }
.select2-container .select2-choice .select2-arrow { background: transparent; border-left: 0; width: 30px; }
.select2-container .select2-choice .select2-arrow b { background: none !important; }
.select2-container .select2-choice .select2-arrow b::before { content: "\f107"; font-family: FontAwesome; color: var(--text-secondary); display: block; text-align: center; line-height: 38px; }
.select2-container-active .select2-choice, .select2-dropdown-open .select2-choice { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; }
.select2-drop, .select2-drop-active { background: var(--paper); border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md); color: var(--text); margin-top: 6px; padding: 6px; }
.select2-results { background: var(--paper); padding: 0; margin: 0; }
.select2-results .select2-result-label { padding: 8px 10px; border-radius: var(--radius-sm); }
.select2-results .select2-highlighted { background: var(--primary-soft); color: var(--nav-selected); border-radius: var(--radius-sm); }
.select2-search { padding: 4px 4px 8px; }
.select2-search input { background: var(--paper) !important; color: var(--text); border: 1px solid var(--border-strong) !important; border-radius: var(--radius-sm); height: 34px; }
.select2-container-multi .select2-choices .select2-search-choice { background: var(--primary-soft); color: var(--nav-selected); border: 0; border-radius: var(--radius-pill); box-shadow: none; padding: 4px 8px 4px 22px; margin: 4px 0 0 4px; }
.select2-container .select2-choice > .select2-chosen { color: var(--text); }
.select2-container-multi .select2-choices .select2-search-field input { color: var(--text); }

/* ------------------------------------------------------------------ */
/* 7. Tables & DataTables                                              */
/* ------------------------------------------------------------------ */
.table { color: var(--text); background: transparent; margin-bottom: 0; }
.table > thead > tr > th {
    background: var(--paper-2); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--border); border-top: 0; padding: 11px 14px; vertical-align: middle; white-space: nowrap;
}
.table > thead > tr > th:first-child { border-top-left-radius: var(--radius-sm); } .table > thead > tr > th:last-child { border-top-right-radius: var(--radius-sm); }
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td { border-top: 1px solid var(--border); padding: 12px 14px; vertical-align: middle; font-size: 13.5px; }
.table > tbody > tr:first-child > td { border-top: 0; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; }
.table-striped > tbody > tr:nth-of-type(even) { background-color: var(--paper-2); }
.table-hover > tbody > tr:hover, table.dataTable tbody tr:hover, .table > tbody > tr:hover { background-color: var(--nav-hover-bg); }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: var(--border); }
.table-bordered { border-radius: var(--radius-sm); overflow: hidden; }
table.dataTable, table.dataTable.no-footer { border-bottom: 1px solid var(--border); background: transparent; }
table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid var(--border); }
table.dataTable tbody tr, table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: transparent; }
table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even { background: var(--paper-2); }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column tbody tr > .sorting_1 { background: transparent; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { color: var(--text-secondary); opacity: .55; }
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { color: var(--text); }
.dataTables_wrapper { padding-top: 0; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(--text-secondary); font-size: 13px; padding-top: 12px; }
.dataTables_wrapper .dataTables_length { padding-top: 0; padding-bottom: 12px; }
.dataTables_wrapper .dataTables_filter { padding-top: 0; padding-bottom: 12px; }
.dataTables_wrapper .dataTables_filter label { font-weight: 500; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 8px; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
    background: var(--paper); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 6px 12px; margin-left: 0; height: 36px; font-size: 13.5px; box-shadow: var(--shadow-xs);
}
.dataTables_wrapper .dataTables_filter input { width: 240px; }
.dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-secondary) !important; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 11px; margin: 0 2px; font-weight: 500; min-width: 34px; text-align: center; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--nav-hover-bg); border-color: transparent; color: var(--text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--primary); border-color: var(--primary); color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--text-disabled) !important; background: transparent; }
.dataTables_wrapper .dataTables_processing { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); color: var(--text); }
.table.invoice-table > thead > tr { background-color: var(--primary); color: #fff; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before { background: var(--primary); border: 0; box-shadow: none; line-height: 16px; }
.pagination > li > a, .pagination > li > span { color: var(--text-secondary); background: var(--paper); border: 1px solid var(--border); font-weight: 500; }
.pagination > li > a:hover, .pagination > li > span:hover { background: var(--paper-2); color: var(--text); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination > li:first-child > a, .pagination > li:first-child > span { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 var(--radius-control) var(--radius-control) 0; }

/* ------------------------------------------------------------------ */
/* 8. Feedback: alerts, labels, badges, tooltips                       */
/* ------------------------------------------------------------------ */
.alert { border-radius: var(--radius) !important; border: 1px solid transparent; border-left-width: 4px; padding: 12px 40px 12px 16px; font-weight: 500; box-shadow: none; }
.alert, .alert *, .alert a { color: var(--text); }
.alert-success { background: var(--success-soft); border-color: rgba(22, 163, 74, 0.3); border-left-color: var(--success); }
.alert-success, .alert-success * { color: #14532d; }
.alert-info { background: var(--info-soft); border-color: rgba(2, 132, 199, 0.3); border-left-color: var(--info); }
.alert-info, .alert-info * { color: #0c4a6e; }
.alert-warning { background: var(--warning-soft); border-color: rgba(217, 119, 6, 0.35); border-left-color: var(--warning); }
.alert-warning, .alert-warning * { color: #78350f; }
.alert-danger, .alert-error { background: var(--error-soft); border-color: rgba(220, 38, 38, 0.3); border-left-color: var(--error); }
.alert-danger, .alert-danger *, .alert-error, .alert-error * { color: #7f1d1d; }
.alert-primary { background: var(--primary-soft); border-color: rgba(37, 99, 235, 0.3); border-left-color: var(--primary); }
.alert-primary, .alert-primary * { color: #1e3a8a; }
.alert-default, .alert-default *, .alert-default a { background: var(--paper-2); color: var(--text); }
.alert button.close, .alert button.close span { color: inherit; opacity: .6; font-size: 20px; text-shadow: none; }
:root[data-theme="dark"] .alert-success, :root[data-theme="dark"] .alert-success * { color: #86efac; }
:root[data-theme="dark"] .alert-info, :root[data-theme="dark"] .alert-info * { color: #7dd3fc; }
:root[data-theme="dark"] .alert-warning, :root[data-theme="dark"] .alert-warning * { color: #fcd34d; }
:root[data-theme="dark"] .alert-danger, :root[data-theme="dark"] .alert-danger *, :root[data-theme="dark"] .alert-error, :root[data-theme="dark"] .alert-error * { color: #fca5a5; }
:root[data-theme="dark"] .alert-primary, :root[data-theme="dark"] .alert-primary * { color: #bfdbfe; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-success, :root:not([data-theme="light"]) .alert-success * { color: #86efac; }
    :root:not([data-theme="light"]) .alert-info, :root:not([data-theme="light"]) .alert-info * { color: #7dd3fc; }
    :root:not([data-theme="light"]) .alert-warning, :root:not([data-theme="light"]) .alert-warning * { color: #fcd34d; }
    :root:not([data-theme="light"]) .alert-danger, :root:not([data-theme="light"]) .alert-danger *, :root:not([data-theme="light"]) .alert-error, :root:not([data-theme="light"]) .alert-error * { color: #fca5a5; }
    :root:not([data-theme="light"]) .alert-primary, :root:not([data-theme="light"]) .alert-primary * { color: #bfdbfe; }
}
.label { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-pill); font-weight: 600; padding: 3px 9px; font-size: 11.5px; letter-spacing: .01em; line-height: 1.4; }
.badge { border-radius: var(--radius-pill); font-weight: 600; background: var(--text-secondary); padding: 3px 8px; }
.label-default, .badge-default { background: var(--paper-3); color: var(--text-secondary); }
.label-primary, .badge-primary { background: var(--primary-soft); color: var(--nav-selected); }
.label-secondary, .badge-secondary { background: var(--secondary-soft); color: #0f766e; }
.label-success, .badge-success { background: var(--success-soft); color: #15803d; }
.label-warning, .badge-warning, .label-orange, .badge-orange { background: var(--warning-soft); color: #b45309; }
.label-info, .badge-info, .label-purple, .badge-purple { background: var(--info-soft); color: #0369a1; }
.label-danger, .badge-danger { background: var(--error-soft); color: #b91c1c; }
:root[data-theme="dark"] .label-secondary, :root[data-theme="dark"] .badge-secondary { color: #5eead4; }
:root[data-theme="dark"] .label-success, :root[data-theme="dark"] .badge-success { color: #86efac; }
:root[data-theme="dark"] .label-warning, :root[data-theme="dark"] .badge-warning, :root[data-theme="dark"] .label-orange { color: #fcd34d; }
:root[data-theme="dark"] .label-info, :root[data-theme="dark"] .badge-info, :root[data-theme="dark"] .label-purple { color: #7dd3fc; }
:root[data-theme="dark"] .label-danger, :root[data-theme="dark"] .badge-danger { color: #fca5a5; }
.tooltip-inner { background: #0f172a; color: #fff; border-radius: var(--radius-sm); padding: 6px 10px; font-family: var(--font); font-size: 12.5px; }
.tooltip.top .tooltip-arrow { border-top-color: #0f172a; } .tooltip.bottom .tooltip-arrow { border-bottom-color: #0f172a; }
.tooltip.left .tooltip-arrow { border-left-color: #0f172a; } .tooltip.right .tooltip-arrow { border-right-color: #0f172a; }
.popover { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); color: var(--text); font-family: var(--font); }
.popover-title { background: var(--paper-2); border-bottom-color: var(--border); color: var(--text); border-radius: var(--radius) var(--radius) 0 0; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* 9. Overlays: modals, alertify, dropdowns                            */
/* ------------------------------------------------------------------ */
.modal-content { background: var(--paper); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-dialog) !important; box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--border); padding: 18px 24px; display: flex; align-items: center; }
.modal-header .close { order: 2; margin: 0 0 0 auto; }
.modal-title { font-size: 17px; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--border); padding: 16px 24px; display: flex; justify-content: flex-end; gap: 8px; }
.modal-footer .btn + .btn { margin: 0; }
.modal-backdrop, .modal-backdrop.in { background: var(--overlay); opacity: 1; }
.modal .close { color: var(--text-secondary); opacity: 1; text-shadow: none; font-weight: 400; width: 32px; height: 32px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
.modal .close:hover { color: var(--text); background: var(--nav-hover-bg); }
.alertify { background: var(--paper); color: var(--text); border-radius: var(--radius-dialog); box-shadow: var(--shadow-lg); border: 1px solid var(--border); font-family: var(--font); }
.alertify-inner, .alertify-message { color: var(--text); }
.alertify-text { background: var(--paper); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-control); }
.alertify-button { border-radius: var(--radius-control); font-family: var(--font); font-weight: 600; text-transform: none; background-image: none; box-shadow: none; text-shadow: none; }
.alertify-button-ok { background-color: var(--primary); color: #fff; border: 1px solid var(--primary); }
.alertify-button-cancel { background-color: var(--paper); color: var(--text); border: 1px solid var(--border-strong); }
.alertify-log { background: #0f172a; color: #fff; border-radius: var(--radius); font-family: var(--font); box-shadow: var(--shadow-md); }
.alertify-log-success { background: var(--success); color: var(--success-contrast); }
.alertify-log-error { background: var(--error); color: #fff; }
.alertify-cover { background: var(--overlay); }
.dropdown-menu { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; }
.dropdown-menu > li > a { color: var(--text); border-radius: var(--radius-sm); padding: 8px 12px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--nav-hover-bg); color: var(--text); }
.dropdown-menu .divider { background: var(--border); }

/* ------------------------------------------------------------------ */
/* 10. Widgets: tabs, progress, pickers, editor                         */
/* ------------------------------------------------------------------ */
.nav-tabs, .nav-tabs.nav-justified, .nav-tabs.primary { border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.nav-tabs > li > a, .nav-tabs.nav-justified > li > a, .nav-tabs.primary > li > a { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 500; border-radius: 0; margin-bottom: -1px; padding: 10px 14px; }
.nav-tabs > li > a:hover { background: transparent; border-color: transparent; border-bottom-color: var(--border-strong); color: var(--text); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: transparent; border: 0; border-bottom: 2px solid var(--primary); color: var(--nav-selected); }
.nav-tabs > li > a i { color: inherit; }
.nav-pills > li > a { border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background: var(--primary-soft); color: var(--nav-selected); }
.tab-content { color: var(--text); }
.progress { background: var(--paper-3); border-radius: var(--radius-pill); box-shadow: none; height: 8px; }
.progress-bar { background: var(--primary); box-shadow: none; }
.progress-bar-success { background: var(--success); } .progress-bar-warning { background: var(--warning); } .progress-bar-danger { background: var(--error); } .progress-bar-info { background: var(--info); }
.pace .pace-progress { background: var(--primary); height: 2px; }
.pace .pace-activity { display: none; }
pre { background: var(--paper-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); }
code { background: var(--paper-3); color: var(--error); border-radius: 5px; padding: 1px 5px; }
blockquote { border-left-color: var(--primary); color: var(--text-secondary); }
.datepicker, .datetimepicker, .bootstrap-timepicker-widget, .daterangepicker, .colorpicker, .ui-datepicker, .ui-widget-content, .ui-autocomplete {
    background: var(--paper) !important; color: var(--text); border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md); font-family: var(--font); padding: 6px;
}
.datepicker table tr td, .datepicker table tr th, .datetimepicker table tr td, .datetimepicker table tr th, .daterangepicker td, .daterangepicker th, .ui-datepicker td a, .ui-datepicker th { color: var(--text); border-radius: var(--radius-sm); }
.datepicker table tr td.day:hover, .datetimepicker table tr td.day:hover, .daterangepicker td.available:hover, .ui-datepicker td a:hover { background: var(--nav-hover-bg); }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active, .datetimepicker table tr td.active, .datetimepicker table tr td.active:hover, .daterangepicker td.active, .daterangepicker td.active:hover, .ui-datepicker .ui-state-active { background: var(--primary) !important; background-image: none !important; color: #fff !important; text-shadow: none; }
.datepicker table tr td.old, .datepicker table tr td.new, .datetimepicker table tr td.old, .datetimepicker table tr td.new { color: var(--text-disabled); }
.ui-widget-header { background: var(--paper-2) !important; border-color: var(--border) !important; color: var(--text) !important; border-radius: var(--radius-sm); }
.ui-state-default, .ui-widget-content .ui-state-default { background: var(--paper) !important; border-color: var(--border) !important; color: var(--text) !important; }
.ui-state-hover, .ui-widget-content .ui-state-hover { background: var(--nav-hover-bg) !important; color: var(--text) !important; }
.ui-sortable tr:hover { background: var(--primary-soft); }
.cke_chrome { border-color: var(--border) !important; border-radius: var(--radius-control) !important; overflow: hidden; box-shadow: var(--shadow-xs); }
.cke_top, .cke_bottom { background: var(--paper-2) !important; border-color: var(--border) !important; }
.icheckbox_square-orange.checked, .iradio_square-orange.checked { filter: hue-rotate(190deg); }
.uk-nestable-item .uk-nestable-handle { background: var(--paper-2); border-radius: var(--radius-sm); }
.uk-nestable-item { border-color: var(--border); border-radius: var(--radius-sm); }
.img-thumbnail { background: var(--paper); border-color: var(--border); border-radius: var(--radius-sm); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { background: var(--border-strong); }

/* ------------------------------------------------------------------ */
/* 11. Stat cards & empty states (available to any view)               */
/* ------------------------------------------------------------------ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; }
.stat-card .stat-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--nav-selected); font-size: 17px; flex: 0 0 42px; }
.stat-card.success .stat-icon { background: var(--success-soft); color: #15803d; } .stat-card.warning .stat-icon { background: var(--warning-soft); color: #b45309; }
.stat-card.danger .stat-icon { background: var(--error-soft); color: #b91c1c; } .stat-card.info .stat-icon { background: var(--info-soft); color: #0369a1; }
.stat-card .stat-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin: 0 0 4px; }
.stat-card .stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; margin: 0; }
.stat-card .stat-delta { font-size: 12px; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.stat-card .stat-delta.up { color: var(--success); } .stat-card .stat-delta.down { color: var(--error); }
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.empty-state .empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--paper-3); color: var(--text-disabled); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.empty-state h4 { color: var(--text); margin: 0 0 6px; }
.empty-state p { margin: 0 0 16px; }
.dataTables_empty { color: var(--text-secondary) !important; padding: 40px 16px !important; text-align: center; }

/* ------------------------------------------------------------------ */
/* 12. Login (split layout)                                            */
/* ------------------------------------------------------------------ */
body.login_page { background: var(--bg) !important; }
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-shell { display: grid; grid-template-columns: 1.05fr 1fr; width: 100%; max-width: 1040px; min-height: 620px; background: var(--paper); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.login-brand {
    position: relative; color: #fff; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center;
    background: radial-gradient(900px 500px at -10% -10%, rgba(13, 148, 136, 0.55), transparent 60%),
                radial-gradient(700px 500px at 110% 110%, rgba(96, 165, 250, 0.45), transparent 60%),
                linear-gradient(160deg, #1e3a8a 0%, #2563eb 55%, #1d4ed8 100%);
}
.login-brand::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; pointer-events: none; }
.login-brand-inner { position: relative; z-index: 1; }
.login-brand-mark { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.95); border-radius: 16px; padding: 12px 16px; margin-bottom: 28px; box-shadow: var(--shadow-md); }
.login-brand-mark img { height: 84px; width: auto; display: block; }
.login-brand h2 { color: #fff; font-size: 28px; margin: 0 0 12px; line-height: 1.2; }
.login-brand p { color: rgba(255, 255, 255, 0.82); font-size: 14.5px; line-height: 1.6; margin: 0 0 24px; max-width: 380px; }
.login-brand-points { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; }
.login-brand-points li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.92); font-size: 13.5px; font-weight: 500; }
.login-brand-points i { color: #a7f3d0; font-size: 15px; }
.login-brand-foot { font-size: 12px; color: rgba(255, 255, 255, 0.6); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.login.loginpage, #login.login {
    background: var(--paper) !important; border: 0; border-radius: 0; box-shadow: none; padding: 48px 48px 40px !important;
    width: auto; max-width: none; margin: 0 !important; position: static; display: flex; flex-direction: column; justify-content: center;
}
.loginpage h1 a { display: none; }
.login-head { margin-bottom: 26px; }
.login-title { font-size: 26px; margin: 0 0 6px; text-align: left; }
.login-head { text-align: left; }
.login-subtitle { color: var(--text-secondary); margin: 0; font-size: 14px; }
.loginpage label, .loginpage, .loginpage form label { color: var(--text); text-transform: none; font-weight: 600; font-size: 13px; letter-spacing: 0; }
.loginpage form .input, .loginpage input[type=text], .loginpage input[type=password] { font-size: 14.5px; width: 100%; padding: 9px 12px; height: 44px; margin-top: 6px; }
.loginpage form p.submit .btn, .loginpage .btn-block, .loginpage input[type=submit] { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; font-weight: 600; font-size: 15px; height: 46px; border-radius: var(--radius-control) !important; margin-top: 6px; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25); }
.loginpage input[type=submit]:hover { background: var(--primary-hover) !important; }
.loginpage #nav a, .loginpage a { color: var(--link); font-size: 13.5px; font-weight: 500; text-transform: none; }
.loginpage #nav { margin-top: 18px; }
.loginpage #login_error, .loginpage .message { background: var(--error-soft); color: #7f1d1d; border-radius: var(--radius); border: 1px solid rgba(220, 38, 38, 0.35); }
.loginpage #im { display: flex; align-items: center; gap: 10px; }
.loginpage #im img { border-radius: var(--radius-control); border: 1px solid var(--border); background: #fff; }
.login-site-name, .login-site-slogan { display: none; }
:root[data-theme="dark"] .login-shell { border-color: var(--border-strong); }

/* ------------------------------------------------------------------ */
/* 13. Responsive                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1199px) { .menu-search-box { width: 220px; } }
@media (max-width: 991px) {
    .login-shell { grid-template-columns: 1fr; min-height: 0; max-width: 480px; }
    .login-brand { padding: 32px 28px; }
    .login-brand h2 { font-size: 22px; } .login-brand-points, .login-brand p { display: none; } .login-brand-mark { margin-bottom: 16px; } .login-brand-mark img { height: 60px; }
    .login.loginpage, #login.login { padding: 32px 28px !important; }
}
@media (max-width: 767px) {
    #main-content > section.wrapper { padding: 16px !important; }
    section.box .content-body, section .content-body { padding: 16px; }
    .page-title h1, .page-title h1.title { font-size: 20px; }
    .page-topbar .nav_title, .nav_title { width: auto; border-right: 0 !important; padding: 0 12px; }
    .site_title .brand-caption { display: none; }
    .menu-search { display: none; }

    /* the menu is a drawer (assets/js/inclen-theme.js › phoneNav): content takes the full width */
    #main-content, #main-content.sidebar_shift, #main-content.chat_shift { margin-left: 0 !important; }
    .page-sidebar, .page-sidebar.collapseit, .page-sidebar.chat_shift, .page-sidebar.expandit {
        width: min(86vw, 300px) !important; left: 0 !important; z-index: 1045; transform: translateX(-102%); transition: transform .22s ease, box-shadow .22s ease; box-shadow: none; visibility: hidden;
    }
    html.inclen-nav-open .page-sidebar { transform: none; box-shadow: var(--shadow-lg); visibility: visible; }
    html.inclen-nav-open, html.inclen-nav-open body { overflow: hidden; }
    .inclen-nav-backdrop { position: fixed; left: 0; right: 0; bottom: 0; top: var(--topbar-h); z-index: 1040; background: rgba(15, 23, 42, 0.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    html.inclen-nav-open .inclen-nav-backdrop { opacity: 1; pointer-events: auto; }
    .page-sidebar #main-menu-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .page-topbar .nav_title, .page-topbar.sidebar_shift .nav_title { width: auto !important; }
    .page-topbar { display: flex; align-items: center; }
    .page-topbar .quick-area { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; float: none; width: auto; }
    .page-topbar .quick-area > .pull-left, .page-topbar .quick-area > .pull-right { float: none !important; }
    .page-topbar .nav_title { flex: 0 0 auto; }
    .page-topbar .quick-area .info-menu { padding: 0 6px; }
    .page-topbar li.profile .toggle > span:not(.avatar) { display: none; }
    .page-topbar .quick-area .info-menu li.sidebar-toggle-wrap { display: flex !important; } /* style.css hides it below 450px */
    .page-topbar .quick-area .info-menu li.profile .toggle > span.avatar { display: inline-flex !important; }
    .page-topbar .quick-area .info-menu li.profile a.toggle { min-width: 0; gap: 4px; }
    .page-topbar .site_title .brand-text { justify-content: center; }
    .page-topbar .quick-area .info-menu li.profile .dropdown-menu { left: auto !important; right: 0 !important; width: min(290px, calc(100vw - 24px)); }
    .page-topbar .quick-area .info-menu li.profile .dropdown-menu:before, .page-topbar .quick-area .info-menu li.profile .dropdown-menu:after { right: 18px; left: auto; }

    /* page content: nothing wider than the screen; wide tables scroll inside their box */
    .page-title .pull-left, .page-title .pull-right { float: none !important; width: 100%; }
    .page-title .pull-right { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
    .page-title h1, .page-title h1.title { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
    .inclen-breadcrumb { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
    #main-content img, #main-content video, #main-content canvas, #main-content iframe { max-width: 100%; }
    #main-content select, #main-content input:not([type=checkbox]):not([type=radio]), #main-content textarea { max-width: 100%; }
    #main-content .table-responsive, #main-content .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    section.box .content-body, section .content-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #main-content .nav-tabs, #main-content .pd-tabs, #main-content .stg-tabs, #main-content .fi-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #main-content .nav-tabs > li { float: none; display: inline-block; }
    .modal-dialog { width: auto; margin: 10px; }
    .inclen-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    #main-content .form-group[class*="col-xs-"] { width: 100%; }
    #main-content .lk-inline { flex-wrap: wrap; min-width: 0; }
    #main-content .lk-inline > input[type=text] { flex: 1 1 100%; }
    #main-content .btn-toolbar, #main-content .dq-actions, #main-content .dq-bar { flex-wrap: wrap; }
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .dash-kpi-value { font-size: 24px; }
    .content-body > .row > [class*="col-xs-"]:has([class^="dashboard-menu-"]) { width: 100%; }
    [class^="dashboard-menu-"] { height: 64px; }
}

/* captcha refresh (login) */
.loginpage #image1 { display: flex; align-items: center; gap: 10px; text-align: left; }
.captcha-refresh { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-control); border: 1px solid var(--border-strong); color: var(--text-secondary) !important; background: var(--paper); }
.captcha-refresh:hover { color: var(--text) !important; background: var(--paper-2); }

/* ------------------------------------------------------------------ */
/* 14. Dashboard tile menus (project / facility / location dashboards) */
/* ------------------------------------------------------------------ */
.dashboard-menu-1, .dashboard-menu-2, .dashboard-menu-3, .dashboard-menu-4, .dashboard-menu-5, .dashboard-menu-6 {
    display: flex; align-items: center; justify-content: center; text-align: center;
    height: 88px; max-width: none; margin: 0 0 16px; padding: 0 14px;
    background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
    font-size: 14px; font-weight: 600; line-height: 1.3; position: relative; overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dashboard-menu-1::before, .dashboard-menu-2::before, .dashboard-menu-3::before, .dashboard-menu-4::before, .dashboard-menu-5::before, .dashboard-menu-6::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary);
}
.dashboard-menu-2::before { background: var(--secondary); } .dashboard-menu-3::before { background: var(--success); }
.dashboard-menu-4::before { background: var(--warning); }   .dashboard-menu-5::before { background: var(--error); }
.dashboard-menu-6::before { background: var(--info); }
.dashboard-menu-1:hover, .dashboard-menu-2:hover, .dashboard-menu-3:hover, .dashboard-menu-4:hover, .dashboard-menu-5:hover, .dashboard-menu-6:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong);
}
.dashboard-menu-1 a, .dashboard-menu-2 a, .dashboard-menu-3 a, .dashboard-menu-4 a, .dashboard-menu-5 a, .dashboard-menu-6 a {
    color: var(--text); font-weight: 600; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
}
.dashboard-menu-1 a:hover, .dashboard-menu-2 a:hover, .dashboard-menu-3 a:hover, .dashboard-menu-4 a:hover, .dashboard-menu-5 a:hover, .dashboard-menu-6 a:hover { color: var(--nav-selected); }
.content-body > .row > [class*="col-"] > [class^="dashboard-menu-"] { margin-left: 0; margin-right: 0; }
@media (max-width: 991px) { .content-body > .row > .col-xs-3:has([class^="dashboard-menu-"]) { width: 50%; } }

/* Printing (Oct 2026): only the page content — no side menu, top bar, page buttons or link addresses
 * (Bootstrap 3 prints " (http://…)" after every link). Applies to every page; record screens add their own rules. */
@media print {
    .page-sidebar, .page-topbar, #main-menu-wrapper, .pace, .rv-toast, .notify-wrap, .page-title .pull-right, .page-title .rv-head-actions, .btn { display: none !important; }
    #main-content, #main-content.sidebar_shift { margin-left: 0 !important; transition: none !important; }
    #main-content > section.wrapper { margin-top: 0 !important; padding: 0 2px !important; width: 100% !important; }
    @page { margin: 12mm; }
    a[href]:after, abbr[title]:after { content: none !important; }
    a { text-decoration: none !important; color: inherit !important; }
    body { background: #fff !important; }
}