/*
 * FILE:    assets/css/hrms-theme.css
 * PATH:    /home/vtchrms.vt-creations.com/public_html/assets/css/hrms-theme.css
 * UPDATED: 2026-10-21 — NEW: one look for the whole HRMS (brand theme)
 *
 * Loaded on EVERY page by includes/header-section.php (after each page's
 * own styles, so it wins), and by login.php / lock-screen.php.
 *
 * Brand colours come from the company logo (denim navy + gold stitching).
 * To re-brand for another company, change ONLY the variables in :root
 * below — every page follows.
 *
 * Rules are scoped to body.hrms (class added by header-section.php) so
 * they win over page styles without touching page layouts. Only colours,
 * fonts, borders, radius and spacing of shared parts are set here.
 */

:root {
    /* brand */
    --hr-navy-950: #081627;
    --hr-navy-900: #0b1d33;
    --hr-navy-800: #102a4a;
    --hr-navy-700: #163a63;   /* primary */
    --hr-navy-600: #1f4d80;
    --hr-navy-100: #e3eaf4;
    --hr-navy-50:  #f1f5fa;
    --hr-gold-600: #a97a1c;
    --hr-gold-500: #c8962b;   /* accent */
    --hr-gold-400: #ddb04d;
    --hr-gold-50:  #fbf5e6;
    --hr-grad:     linear-gradient(135deg, #0b1d33 0%, #163a63 100%);

    /* surfaces & text */
    --hr-bg:       #f3f5f9;
    --hr-surface:  #ffffff;
    --hr-border:   #e4e8ef;
    --hr-border-2: #d5dbe5;
    --hr-text:     #1b2433;
    --hr-text-2:   #3c4759;
    --hr-muted:    #6b7689;
    --hr-radius:   12px;
    --hr-radius-sm: 8px;
    --hr-shadow:   0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --hr-shadow-lg: 0 10px 30px rgba(11, 29, 51, .12);

    /* status */
    --hr-success: #16834a;  --hr-success-50: #e8f6ee;
    --hr-warning: #c27a0e;  --hr-warning-50: #fdf3e1;
    --hr-danger:  #c62f2f;  --hr-danger-50:  #fdecec;
    --hr-info:    #0e6f9e;  --hr-info-50:    #e6f2f9;

    --hr-font: 'CircularStd', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

    /* ---- page-level variables used by some pages: point them at the brand ---- */
    --accent:      var(--hr-navy-700);
    --accent-dark: var(--hr-navy-900);
    --accent-soft: var(--hr-navy-50);
    --font:        var(--hr-font);
    --dp-primary:  var(--hr-navy-700);
    --dp-dark:     var(--hr-navy-900);
    --dv-primary:  var(--hr-navy-700);
}

/* =====================================================================
   BASE
===================================================================== */
body.hrms {
    background: var(--hr-bg) !important;
    font-family: var(--hr-font) !important;
    color: var(--hr-text);
    -webkit-font-smoothing: antialiased;
}
body.hrms .main-wrapper,
body.hrms .page-wrapper,
body.hrms .page-wrapper > .content { background: transparent; }
/* :where() = zero priority: a page's own colour (e.g. white text on a banner) always wins */
:where(body.hrms) a { color: var(--hr-navy-600); }
:where(body.hrms) a:hover { color: var(--hr-navy-800); }
:where(body.hrms) :is(h1, h2, h3, h4, h5, h6) { color: var(--hr-text); }
body.hrms :is(h1, h2, h3, h4, h5, h6) { font-family: var(--hr-font); }
body.hrms .text-muted { color: var(--hr-muted) !important; }
body.hrms .text-primary { color: var(--hr-navy-700) !important; }
body.hrms .bg-primary { background-color: var(--hr-navy-700) !important; }

/* content area always lines up with the sidebar (some pages used 250px) */
@media (min-width: 992px) {
    body.hrms:not(.mini-sidebar) .page-wrapper { margin-left: 230px !important; }
    body.hrms.mini-sidebar .page-wrapper { margin-left: 60px !important; }
}
@media (max-width: 991.98px) {
    body.hrms .page-wrapper { margin-left: 0 !important; }
}

/* =====================================================================
   TOP BAR
===================================================================== */
body.hrms .header {
    background: var(--hr-surface) !important;
    border-bottom: 1px solid var(--hr-border) !important;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02), 0 4px 14px rgba(16, 24, 40, .04) !important;
}
body.hrms .header .header-left {
    background: var(--hr-surface);
    border-right: 1px solid var(--hr-border);
    display: flex; align-items: center; justify-content: center;
}
body.hrms .header .header-left .logo { line-height: 1; display: flex; align-items: center; }
body.hrms .header .header-left .logo img { width: 42px; height: 42px; object-fit: contain; }
body.hrms #toggle_btn, body.hrms .mobile_btn { color: var(--hr-navy-800) !important; }
body.hrms .bar-icon span { background-color: var(--hr-navy-800) !important; }
body.hrms .page-title-box { padding: 0 16px; align-items: center; }
@media (min-width: 992px) { body.hrms .page-title-box { display: flex; } }
body.hrms .page-title-box h3 {
    color: var(--hr-navy-900) !important;
    font-size: 17px; font-weight: 600; letter-spacing: .01em;
    display: flex; align-items: center; gap: 10px;
}
body.hrms .page-title-box h3::after {
    content: 'HRMS';
    font-size: 10px; font-weight: 700; letter-spacing: .12em;
    color: var(--hr-gold-600); background: var(--hr-gold-50);
    border: 1px solid #efdcae; border-radius: 6px; padding: 2px 6px;
}
body.hrms .user-menu.nav > li > a { color: var(--hr-text) !important; }
body.hrms .user-menu.nav > li > a:hover,
body.hrms .user-menu.nav > li > a:focus { background-color: var(--hr-navy-50) !important; }
body.hrms .header .has-arrow .dropdown-toggle::after { border-color: var(--hr-navy-700) !important; }
body.hrms .user-menu .user-img img { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hr-gold-400); }
body.hrms .header .dropdown-menu {
    border: 1px solid var(--hr-border); border-radius: var(--hr-radius-sm);
    box-shadow: var(--hr-shadow-lg); padding: 6px; min-width: 220px;
}
body.hrms .header .dropdown-header { color: var(--hr-text); }
body.hrms .header .dropdown-item { border-radius: 6px; padding: 8px 12px; font-size: 14px; color: var(--hr-text-2); }
body.hrms .header .dropdown-item:hover { background: var(--hr-navy-50); color: var(--hr-navy-800); }
body.hrms .header .dropdown-item.text-danger { color: var(--hr-danger) !important; }
body.hrms .header .dropdown-item.text-danger:hover { background: var(--hr-danger-50); }
@media (max-width: 991.98px) {
    body.hrms .header .header-left { border-right: 0; background: transparent; }
    body.hrms .page-title-box { display: none !important; }
    body.hrms a.mobile_btn { color: var(--hr-navy-800) !important; }
}
@media (max-width: 575.98px) {
    body.hrms .page-title-box h3::after { display: none; }
}

/* =====================================================================
   SIDEBAR
===================================================================== */
body.hrms .sidebar {
    background: var(--hr-navy-900) !important;
    background-image: linear-gradient(180deg, var(--hr-navy-900) 0%, var(--hr-navy-950) 100%) !important;
    border-right: 0 !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, .03);
}
body.hrms .sidebar-menu { padding: 12px 0 24px; }
body.hrms .sidebar-menu ul { font-size: 14px; }
body.hrms .sidebar-menu li a {
    color: #b9c5d6 !important;
    font-size: 14px !important;
    background: transparent !important;
}
body.hrms .sidebar-menu > ul > li > a {
    margin: 2px 10px; padding: 9px 12px !important;
    border-radius: 8px; position: relative;
}
body.hrms .sidebar-menu > ul > li > a:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
body.hrms .sidebar-menu ul li a i {
    font-size: 19px !important; width: 26px !important; line-height: 20px;
    color: #8fa1ba; text-align: left;
}
body.hrms .sidebar-menu > ul > li > a:hover i { color: #fff; }
body.hrms .sidebar-menu .menu-arrow { right: 12px; top: 10px; color: #7f91aa; font-size: 16px; }

/* active top level */
body.hrms .sidebar-menu > ul > li.active > a {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
}
body.hrms .sidebar-menu > ul > li.active > a i { color: var(--hr-gold-400) !important; }
body.hrms .sidebar-menu > ul > li.active > a::before {
    content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--hr-gold-500);
}

/* sub menu */
body.hrms .sidebar-menu ul ul { padding: 2px 0 6px; }
body.hrms .sidebar-menu ul ul a {
    font-size: 13.5px !important; padding: 7px 12px 7px 50px !important;
    margin: 1px 10px; border-radius: 6px;
    color: #a3b2c7 !important;
}
body.hrms .sidebar-menu ul ul a i { font-size: 15px !important; width: 20px !important; color: #7f91aa; }
body.hrms .sidebar-menu ul ul a::before {
    content: ''; position: absolute; left: 30px; top: 50%; width: 5px; height: 5px; margin-top: -2px;
    border-radius: 50%; background: #4b5f7c;
}
body.hrms .sidebar-menu ul ul a:has(i)::before { display: none; }
body.hrms .sidebar-menu ul ul a:has(i) { padding-left: 34px !important; }
body.hrms .sidebar-menu ul ul a:hover { color: #fff !important; background: rgba(255, 255, 255, .05) !important; }
body.hrms .sidebar-menu ul ul li.active > a,
body.hrms .sidebar-menu ul ul a.active {
    color: var(--hr-gold-400) !important; background: rgba(200, 150, 43, .10) !important; font-weight: 600;
}
body.hrms .sidebar-menu ul ul li.active > a i { color: var(--hr-gold-400) !important; }
body.hrms .sidebar-menu ul ul li.active > a::before { background: var(--hr-gold-400); }

/* slim scrollbars */
body.hrms .sidebar .slimScrollBar { background: rgba(255, 255, 255, .25) !important; }
body.hrms .sidebar .slimScrollRail { display: none !important; }
body.hrms .sidebar-inner { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }

/* collapsed (mini) sidebar */
@media (min-width: 992px) {
    body.hrms.mini-sidebar:not(.expand-menu) .sidebar-menu > ul > li > a { margin: 2px 6px; justify-content: center; padding: 10px 0 !important; }
    body.hrms.mini-sidebar:not(.expand-menu) .sidebar-menu > ul > li > a i { font-size: 21px !important; width: auto !important; }
    body.hrms.mini-sidebar:not(.expand-menu) .sidebar-menu .menu-arrow { display: none; }
    body.hrms.mini-sidebar .header .header-left { padding: 0; }
    body.hrms.mini-sidebar .header .header-left .logo img { width: 36px; height: 36px; max-height: none; }
}

/* =====================================================================
   PAGE HEADER
===================================================================== */
body.hrms .page-header { margin-bottom: 22px; }
body.hrms .page-title,
body.hrms .page-header h3 {
    color: var(--hr-navy-900) !important;
    font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.01em;
    margin-bottom: 4px;
}
body.hrms .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 13px; }
body.hrms .breadcrumb .breadcrumb-item,
body.hrms .breadcrumb .breadcrumb-item a { color: var(--hr-muted) !important; }
body.hrms .breadcrumb .breadcrumb-item a:hover { color: var(--hr-navy-700) !important; }
body.hrms .breadcrumb .breadcrumb-item.active { color: var(--hr-navy-700) !important; font-weight: 500; }

/* =====================================================================
   CARDS
===================================================================== */
body.hrms .card {
    border: 1px solid var(--hr-border) !important;
    border-radius: var(--hr-radius) !important;
    box-shadow: var(--hr-shadow) !important;
    background: var(--hr-surface);
}
body.hrms .card-header {
    background: var(--hr-surface);
    border-bottom: 1px solid var(--hr-border);
    border-radius: var(--hr-radius) var(--hr-radius) 0 0 !important;
}
body.hrms .card-title, body.hrms .card-header h4, body.hrms .card-header h5 { color: var(--hr-navy-900); font-weight: 600; }
body.hrms .card-footer { background: #fafbfd; border-top: 1px solid var(--hr-border); }

/* dark headers / banners used on some pages → brand navy */
body.hrms .page-card-header,
body.hrms .form-card-header,
body.hrms .modal-header-dark,
body.hrms .device-card,
body.hrms .org-node-root,
body.hrms .welcome-banner,
body.hrms .md-banner,
body.hrms .hr-banner,
body.hrms .emp-banner { background: var(--hr-grad) !important; }
body.hrms .welcome-banner, body.hrms .md-banner, body.hrms .hr-banner, body.hrms .emp-banner { border-bottom: 3px solid var(--hr-gold-500); }

/* =====================================================================
   TABLES
===================================================================== */
:where(body.hrms) .table { color: var(--hr-text-2); }
body.hrms .table thead th,
body.hrms table.dataTable thead th {
    background: #f7f9fc !important;
    color: #56627a !important;
    font-size: 11.5px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .05em;
    border-top: 0 !important;
    border-bottom: 1px solid var(--hr-border) !important;
    white-space: nowrap;
}
body.hrms .table td { border-color: #eef1f6; vertical-align: middle; }
body.hrms .table-hover tbody tr:hover,
body.hrms .table tbody tr:hover { background-color: #f8fafd; }
body.hrms .table-striped tbody tr:nth-of-type(odd) { background-color: #fbfcfe; }

/* =====================================================================
   BUTTONS
===================================================================== */
body.hrms .btn { border-radius: var(--hr-radius-sm); font-weight: 500; }
body.hrms .btn-primary,
body.hrms .add-btn,
body.hrms .btn-login,
body.hrms .submit-btn {
    background: var(--hr-navy-700) !important;
    border-color: var(--hr-navy-700) !important;
    color: #fff !important;
}
body.hrms .btn-primary:hover, body.hrms .btn-primary:focus, body.hrms .btn-primary:active,
body.hrms .add-btn:hover, body.hrms .add-btn:focus,
body.hrms .submit-btn:hover {
    background: var(--hr-navy-800) !important;
    border-color: var(--hr-navy-800) !important;
    box-shadow: 0 0 0 3px rgba(22, 58, 99, .15) !important;
}
body.hrms .add-btn { border-radius: var(--hr-radius-sm) !important; }
body.hrms .btn-outline-primary { color: var(--hr-navy-700) !important; border-color: var(--hr-navy-700) !important; background: transparent; }
body.hrms .btn-outline-primary:hover { background: var(--hr-navy-700) !important; color: #fff !important; }
body.hrms .btn-success { background: var(--hr-success) !important; border-color: var(--hr-success) !important; color: #fff !important; }
body.hrms .btn-danger  { background: var(--hr-danger)  !important; border-color: var(--hr-danger)  !important; color: #fff !important; }
body.hrms .btn-warning { background: var(--hr-gold-500) !important; border-color: var(--hr-gold-500) !important; color: #fff !important; }
body.hrms .btn-info    { background: var(--hr-info)    !important; border-color: var(--hr-info)    !important; color: #fff !important; }
body.hrms .btn-success:hover { background: #126b3c !important; }
body.hrms .btn-danger:hover  { background: #a72525 !important; }
body.hrms .btn-warning:hover { background: var(--hr-gold-600) !important; }
body.hrms .btn-info:hover    { background: #0b5a80 !important; }
body.hrms .btn-light, body.hrms .btn-white {
    background: #fff !important; border: 1px solid var(--hr-border-2) !important; color: var(--hr-text-2) !important;
}
body.hrms .btn-light:hover, body.hrms .btn-white:hover { background: var(--hr-navy-50) !important; color: var(--hr-navy-800) !important; }
body.hrms .btn-secondary { background: #64708a !important; border-color: #64708a !important; color: #fff !important; }

/* =====================================================================
   FORMS
===================================================================== */
body.hrms .form-control,
body.hrms .custom-select,
body.hrms .select2-container--default .select2-selection--single,
body.hrms .select2-container--default .select2-selection--multiple {
    border-color: var(--hr-border-2) !important;
    border-radius: var(--hr-radius-sm) !important;
    color: var(--hr-text);
}
body.hrms .form-control:focus,
body.hrms .custom-select:focus,
body.hrms .select2-container--focus .select2-selection,
body.hrms .select2-container--open .select2-selection {
    border-color: var(--hr-navy-600) !important;
    box-shadow: 0 0 0 3px rgba(31, 77, 128, .12) !important;
}
:where(body.hrms) :is(label, .col-form-label) { color: var(--hr-text-2); font-weight: 500; }
body.hrms .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--hr-navy-700) !important; }
body.hrms .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--hr-navy-700); border-color: var(--hr-navy-700); }
body.hrms input[type=checkbox], body.hrms input[type=radio] { accent-color: var(--hr-navy-700); }

/* =====================================================================
   TABS, PAGINATION, BADGES, ALERTS
===================================================================== */
body.hrms .nav-tabs .nav-link.active,
body.hrms .nav-tabs .nav-item.show .nav-link {
    color: var(--hr-navy-800) !important; border-bottom-color: var(--hr-gold-500) !important;
}
body.hrms .nav-tabs.nav-tabs-bottom .nav-link.active { border-bottom: 2px solid var(--hr-gold-500) !important; }
body.hrms .nav-pills .nav-link.active { background: var(--hr-navy-700) !important; }
body.hrms .page-item.active .page-link,
body.hrms .dataTables_paginate .paginate_button.current {
    background: var(--hr-navy-700) !important; border-color: var(--hr-navy-700) !important; color: #fff !important;
}
body.hrms .page-link { color: var(--hr-navy-700); border-color: var(--hr-border); }
body.hrms .badge-primary { background: var(--hr-navy-700) !important; }
body.hrms .badge-success, body.hrms .bg-success { background-color: var(--hr-success) !important; }
body.hrms .badge-danger,  body.hrms .bg-danger  { background-color: var(--hr-danger) !important; }
body.hrms .badge-warning, body.hrms .bg-warning { background-color: var(--hr-gold-500) !important; color: #fff !important; }
body.hrms .badge-info,    body.hrms .bg-info    { background-color: var(--hr-info) !important; }
body.hrms .alert { border-radius: var(--hr-radius-sm); border-width: 1px; }
body.hrms .alert-success { background: var(--hr-success-50); border-color: #bfe5cf; color: #105a33; }
body.hrms .alert-danger  { background: var(--hr-danger-50);  border-color: #f4c4c4; color: #8f1f1f; }
body.hrms .alert-warning { background: var(--hr-warning-50); border-color: #f1d9a8; color: #7a4d06; }
body.hrms .alert-info    { background: var(--hr-info-50);    border-color: #bcdcee; color: #0a4f72; }

/* =====================================================================
   MODALS & DROPDOWNS
===================================================================== */
body.hrms .modal-content { border: 0; border-radius: var(--hr-radius) !important; box-shadow: 0 24px 60px rgba(11, 29, 51, .25); overflow: hidden; }
body.hrms .modal-header { border-bottom: 1px solid var(--hr-border); }
body.hrms .modal-title { color: var(--hr-navy-900); font-weight: 600; }
body.hrms .modal-header[style*="gradient"] { background: var(--hr-grad) !important; }
body.hrms .modal-header[style*="gradient"] .modal-title,
body.hrms .modal-header[style*="gradient"] .close { color: #fff !important; }
body.hrms .modal-footer { border-top: 1px solid var(--hr-border); background: #fafbfd; }
body.hrms .dropdown-menu { border-color: var(--hr-border); border-radius: var(--hr-radius-sm); box-shadow: var(--hr-shadow-lg); }
body.hrms .dropdown-item.active, body.hrms .dropdown-item:active { background: var(--hr-navy-700); color: #fff; }

/* =====================================================================
   SMALL THINGS
===================================================================== */
body.hrms ::selection { background: rgba(200, 150, 43, .25); }
body.hrms .sidebar-overlay { background: rgba(8, 22, 39, .55); }
@media print {
    body.hrms { background: #fff !important; }
    body.hrms .header, body.hrms .sidebar { display: none !important; }
    body.hrms .page-wrapper { margin-left: 0 !important; padding-top: 0 !important; }
}

/* =====================================================================
   LOGIN / FORGOT / RESET / LOCK SCREEN  (pages without the side bar)
===================================================================== */
body.account-page.hrms-auth {
    background: radial-gradient(1200px 600px at 15% 10%, rgba(200, 150, 43, .14), transparent 60%),
                linear-gradient(135deg, #081627 0%, #0b1d33 45%, #163a63 100%) !important;
    font-family: var(--hr-font) !important;
}
body.hrms-auth .login-card { border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
body.hrms-auth .login-card-bar { height: 4px; background: linear-gradient(90deg, var(--hr-gold-600), var(--hr-gold-400), var(--hr-gold-600)) !important; }
body.hrms-auth .login-logo img { width: 76px !important; height: 76px !important; border-radius: 50% !important; box-shadow: 0 6px 18px rgba(11, 29, 51, .25) !important; background: #fff; }
body.hrms-auth .login-title, body.hrms-auth .form-section-title { color: var(--hr-navy-900) !important; }
body.hrms-auth .btn-login { background: var(--hr-navy-700) !important; }
body.hrms-auth .btn-login:hover:not(:disabled) { background: var(--hr-navy-800) !important; box-shadow: 0 6px 16px rgba(11, 29, 51, .3) !important; }
body.hrms-auth .forgot-link { color: var(--hr-navy-600) !important; }
body.hrms-auth .input-wrap .form-control:focus { border-color: var(--hr-navy-600) !important; box-shadow: 0 0 0 3px rgba(31, 77, 128, .14) !important; }
body.hrms-auth .input-wrap .pwd-toggle:hover { color: var(--hr-navy-700) !important; }

/* screen-lock overlay (assets/js/screen-lock.js) */
body.hrms #hrmsLockOverlay { background: rgba(8, 22, 39, .62) !important; }
body.hrms #hrmsLockOverlay .hl-card { border-top: 4px solid var(--hr-gold-500); }
body.hrms #hrmsLockOverlay .hl-ini { background: var(--hr-navy-700) !important; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hr-gold-500); }
body.hrms #hrmsLockOverlay button { background: var(--hr-navy-700) !important; }
body.hrms #hrmsLockOverlay button:hover { background: var(--hr-navy-800) !important; }

/* list groups (e.g. Roles & Permissions) */
body.hrms .list-group-item.active { background: var(--hr-navy-700) !important; border-color: var(--hr-navy-700) !important; color: #fff !important; }
body.hrms .list-group-item-action:hover { background: var(--hr-navy-50); }
/* FullCalendar buttons */
body.hrms .fc-state-active, body.hrms .fc-state-down, body.hrms .fc-today-button { background: var(--hr-navy-700) !important; color: #fff !important; border-color: var(--hr-navy-700) !important; text-shadow: none !important; }

/* =====================================================================
   SMALL SCREENS — nothing may push the page wider than the screen
   (found by testing every page at 360 / 390 / 768 / 1024 / 1366 / 1920 px)
===================================================================== */
body.hrms .flex-grow-1,
body.hrms .media-body,
body.hrms [class*="col-"] { min-width: 0; }                    /* flex items may shrink */
body.hrms .select2-container { max-width: 100% !important; }   /* select2 had a fixed px width */
body.hrms .page-wrapper small.text-muted,
body.hrms .card-box h3, body.hrms .card-box h4 { overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
    body.hrms .card-box h3 { font-size: 19px; }                /* money totals in small boxes */
}
/* six-across summary boxes (e.g. Payroll Process): 3 per row on tablets */
@media (min-width: 768px) and (max-width: 1199.98px) {
    body.hrms .row > .col-md-2.col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (max-width: 575.98px) {
    body.hrms .page-wrapper > .content { padding: 18px 14px; }
    body.hrms .page-title, body.hrms .page-header h3 { font-size: 19px !important; }
    body.hrms .card-body { padding: 14px; }
    body.hrms .modal-dialog { margin: 10px; }
}
/* dashboard cards that hide overflow: let their tables swipe sideways on phones */
@media (max-width: 767.98px) {
    body.hrms .section-card:has(table),
    body.hrms .card:has(> table),
    body.hrms .card-body:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}