/*
 * SUMAS ERP modern interface layer.
 * Tailwind utilities are available in the page; these rules provide a resilient
 * design-system bridge for the application's legacy Bootstrap components.
 */
/* Jost + Montserrat - the actual pairing sumas.edu.ng itself uses, not a generic template-serif choice. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');
:root {
    --erp-ink: #0f172a;
    --erp-muted: #64748b;
    --erp-line: #e2e8f0;
    --erp-canvas: #f4f7fb;
    --erp-surface: #ffffff;
    --erp-primary: #57442d;
    --erp-primary-dark: #3f3223;
    --erp-primary-soft: #f1eadb;
    --erp-accent: #997b3d;
    --erp-olive: #3f5a36;
    --erp-info: #997b3d;
    --erp-success: #3f5a36;
    --erp-warning: #b7791f;
    --erp-danger: #b5473c;
    --erp-radius: 16px;
    --erp-shadow: 0 10px 30px rgba(15, 23, 42, .07);
}

html { background: var(--erp-canvas); }
body { color: var(--erp-ink); background: var(--erp-canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--erp-primary); transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
a:hover, a:focus { color: var(--erp-primary-dark); text-decoration: none; }

/* Enterprise shell */
.erp-shell .topnavbar-wrapper { position: fixed; inset: 0 0 auto 0; z-index: 1200; }
.erp-shell .topnavbar { height: 68px; min-height: 68px; border: 0; background: #57442d !important; box-shadow: 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(47,39,28,.12); backdrop-filter: blur(16px); }
.erp-shell .topnavbar .navbar-header { width: 220px; height: 68px; background: #57442d !important; }
.erp-shell .topnavbar .navbar-header .navbar-brand { width: 100%; height: 68px; padding: 11px 22px; }
.erp-shell .topnavbar .brand-logo img { width: auto; height: auto; max-width: var(--erp-logo-width, 180px); max-height: var(--erp-logo-height, 44px); object-fit: contain; }
.erp-shell .topnavbar .brand-logo-collapsed img { width: 34px !important; height: 34px !important; max-width: 34px; max-height: 34px; border-radius: 7px !important; object-fit: contain; }
.erp-shell .topnavbar .erp-mobile-brand-image { display: none; }
.erp-shell .topnavbar .nav-wrapper { margin-left: 220px; height: 68px; background: transparent; }
.erp-shell .topnavbar .navbar-nav > li > a { height: 68px; padding: 23px 16px; color: rgba(255,255,255,.9); }
.erp-shell .topnavbar .navbar-nav > li > a:hover,
.erp-shell .topnavbar .navbar-nav > li > a:focus { color: #fff; background: rgba(255,255,255,.09); }
.erp-shell .topnavbar .navbar-nav > li > a .fa-plus-circle { color: #d9c79e; }
.erp-shell .topnavbar .erp-view-site-link { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.erp-shell .topnavbar .erp-view-site-link > .fa { color: #eadbb5; font-size: 13px; }
.erp-shell .topnavbar .user-image { width: 32px; height: 32px; margin-top: -6px; border: 2px solid #d9c79e; object-fit: cover; }
.erp-shell .erp-workspace-title { max-width: min(36vw, 460px); overflow: hidden; color: #fff !important; font-size: 17px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.erp-shell .erp-todo-count { position: absolute; top: 8px; right: 5px; min-width: 18px; padding: 3px 5px; }
.erp-shell .topnavbar .dropdown-menu { margin-top: 8px; }
.erp-shell .topnavbar .user-menu > .dropdown-menu { width: 320px; padding: 0; overflow: hidden; }
.erp-shell .topnavbar .user-menu .user-header { min-height: 150px; padding: 20px; color: #fff; text-align: center; background: linear-gradient(135deg,#57442d,#3f3223); }
.erp-shell .topnavbar .user-menu .user-header img { width: 74px; height: 74px; border: 3px solid #d9c79e; object-fit: cover; }
.erp-shell .topnavbar .user-menu .user-header p { margin: 8px 0 0; font-weight: 700; }
.erp-shell .topnavbar .user-menu .user-header small { display: block; margin-top: 4px; color: #eadfca; font-size: 11px; font-weight: 500; }
.erp-shell .topnavbar .user-menu .user-body { padding: 13px 8px; border-bottom: 1px solid var(--erp-line); background: #fff; }
.erp-shell .topnavbar .user-menu .user-footer { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 12px; background: #f8fafc; }
.erp-shell .topnavbar .user-menu .user-footer form { margin: 0; }
.erp-shell .topnavbar .user-menu .user-footer .pull-left,
.erp-shell .topnavbar .user-menu .user-footer .pull-right { float: none !important; }

.erp-shell .aside { position: fixed; top: 68px; bottom: 0; width: 220px; background: #57442d !important; box-shadow: 7px 0 22px rgba(63,50,35,.12); }
.erp-shell .aside .aside-inner { top: 0; bottom: 0; width: 220px; padding-top: 0; background: #57442d; }
.erp-shell .sidebar { display: flex; flex-direction: column; height: 100%; padding: 10px 9px 0; overflow: hidden; background: #57442d; }
.erp-shell .sidebar::-webkit-scrollbar { width: 8px; }
.erp-shell .sidebar::-webkit-scrollbar-track { background: rgba(47,39,28,.35); }
.erp-shell .sidebar::-webkit-scrollbar-thumb { border: 2px solid rgba(47,39,28,.35); border-radius: 999px; background: #b69f70; }
.erp-shell #s-menu { height: 36px; width: 100%; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 8px; color: #fff; background: rgba(47,39,28,.25) !important; box-shadow: none; font-size: 12px; }
.erp-shell #s-menu::placeholder { color: #94a3b8; }
.erp-shell .sidebar .inner-addon { width: 100% !important; }
.erp-shell .erp-sidebar-menu-scroll { flex: 1 1 auto; min-height: 0; padding-right: 2px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b69f70 rgba(47,39,28,.35); }
.erp-shell .erp-sidebar-menu-scroll::-webkit-scrollbar { width: 7px; }
.erp-shell .erp-sidebar-menu-scroll::-webkit-scrollbar-track { background: rgba(47,39,28,.3); }
.erp-shell .erp-sidebar-menu-scroll::-webkit-scrollbar-thumb { border: 2px solid rgba(47,39,28,.3); border-radius: 999px; background: #b69f70; }
.erp-shell .erp-sidebar-menu-scroll > .erp-menu-search { position: sticky; z-index: 8; top: 0; display: block !important; width: 100% !important; margin: 0 0 8px; padding: 2px 0 8px; background: #57442d; }
.erp-shell .erp-menu-search .fa { top: 0; color: #d9c79e; }
.erp-shell .erp-menu-search #s-menu { display: block !important; width: 100% !important; height: 36px; padding-right: 10px; padding-left: 34px; border-color: rgba(217,199,158,.5) !important; color: #fff; background: rgba(47,39,28,.58) !important; font-size: 13px; }
.erp-shell .erp-menu-search #s-menu::placeholder { color: rgba(255,255,255,.72); }
.erp-shell .erp-menu-search #s-menu:focus { border-color: #b69f70 !important; background: rgba(47,39,28,.62) !important; box-shadow: 0 0 0 2px rgba(217,199,158,.14); }
.erp-shell .erp-sidebar-footer { flex: 0 0 auto; margin: 8px -9px 0; padding: 11px 10px 13px; border-top: 1px solid rgba(255,255,255,.11); background: #2f271c; box-shadow: 0 -10px 24px rgba(47,39,28,.22); }
.erp-shell .erp-sidebar-profile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 3px 2px 10px; color: #fff; }
.erp-shell .erp-sidebar-profile:hover { color: #fff; }
.erp-shell .erp-sidebar-avatar { position: relative; flex: 0 0 40px; width: 40px; height: 40px; }
.erp-shell .erp-sidebar-avatar img { display: block; width: 40px; height: 40px; border: 2px solid #b69f70; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 0 0 3px rgba(153,123,61,.2); }
.erp-shell .erp-sidebar-online { position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border: 2px solid #2f271c; border-radius: 50%; background: #22c55e; }
.erp-shell .erp-sidebar-user-info { display: block; min-width: 0; line-height: 1.25; }
.erp-shell .erp-sidebar-user-info strong,
.erp-shell .erp-sidebar-user-info small,
.erp-shell .erp-sidebar-user-info > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-shell .erp-sidebar-user-info strong { color: #fff; font-size: 11px; font-weight: 800; text-transform: capitalize; }
.erp-shell .erp-sidebar-user-info small { margin-top: 2px; color: #d9c79e; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.erp-shell .erp-sidebar-user-info > span { margin-top: 2px; color: rgba(255,255,255,.62); font-size: 9px; }
.erp-shell .erp-sidebar-logout-form { margin: 0; }
.erp-shell .erp-sidebar-logout { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.07); font-size: 11px; font-weight: 700; text-align: left; transition: color .15s ease, background .15s ease; }
.erp-shell .erp-sidebar-logout:hover,
.erp-shell .erp-sidebar-logout:focus { color: #fff; background: rgba(181,71,60,.34); }
.erp-shell .erp-sidebar-logout .fa { width: 17px; color: #d9c79e; font-size: 13px; text-align: center; }
.erp-shell .sidebar .nav > li { margin: 2px 0; }
.erp-shell .sidebar .nav > li > a,
.erp-shell .sidebar .nav > li > .nav-item { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 6px 9px; border-radius: 7px; color: rgba(255,255,255,.9); font-size: var(--erp-sidebar-font-size, 13px) !important; font-weight: 650; line-height: 1.25; }
.erp-shell .sidebar .nav > li > a > em { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; border-radius: 6px; color: #f2e6c8; background: rgba(182,159,112,.16); font-size: 13px; line-height: 24px; text-align: center; }
.erp-shell .sidebar .nav > li > a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-shell .sidebar li.sub-menu > a.menu-toggle:after { flex: 0 0 auto; margin: 0 1px 0 auto; color: rgba(255,255,255,.7); font-family: "simple-line-icons"; font-size: 8px; line-height: 1; content: "\e606"; transition: transform .18s ease; }
.erp-shell .sidebar li.sub-menu > a[aria-expanded="true"]:after { transform: rotate(90deg); }
.erp-shell .sidebar .nav > li > a:hover,
.erp-shell .sidebar .nav > li.open > a { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 2px 0 0 #b69f70; }
.erp-shell .sidebar .nav > li.active > a { color: #fff; background: rgba(153,123,61,.34); box-shadow: inset 2px 0 0 #d9c79e; }
.erp-shell .sidebar .sidebar-subnav { position: static !important; width: auto !important; transition: none !important; }
.erp-shell .sidebar .sidebar-subnav.collapse,
.erp-shell .sidebar .sidebar-subnav.collapsing { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 0 0 13px !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; opacity: 0 !important; }
.erp-shell .sidebar li.sub-menu.open > .sidebar-subnav.collapse.in,
.erp-shell .sidebar .sidebar-subnav.collapse.in { display: block !important; visibility: visible !important; height: auto !important; margin: 3px 0 6px 13px !important; padding: 3px 0 3px 8px !important; overflow: visible !important; border: 0 !important; border-left: 1px solid rgba(217,199,158,.5) !important; border-radius: 0; opacity: 1 !important; background: transparent !important; box-shadow: none; }
.erp-shell .sidebar .sidebar-subnav.collapse.in > li { position: relative !important; display: block !important; visibility: visible !important; height: auto !important; opacity: 1 !important; }
.erp-shell .sidebar .sidebar-subnav.collapse.in > li > a,
.erp-shell .sidebar .sidebar-subnav.collapse.in > li > .nav-item { display: flex !important; visibility: visible !important; opacity: 1 !important; }
.erp-shell .sidebar .sidebar-subnav-header { display: none !important; }
.erp-shell .sidebar .nav .nav > li { float: none; margin: 1px 0; }
.erp-shell .sidebar .nav .nav > li > a { display: flex; align-items: center; gap: 6px; min-height: 31px; padding: 4px 6px; color: rgba(255,255,255,.9); border-radius: 5px; font-size: calc(var(--erp-sidebar-font-size, 13px) - 1px) !important; font-weight: 600; line-height: 1.3; white-space: normal; }
.erp-shell .sidebar .nav .nav > li > a > em { display: inline-flex; flex: 0 0 21px; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 5px; color: #f2e6c8; background: rgba(182,159,112,.14); font-size: 11px; text-align: center; }
.erp-shell .sidebar .nav .nav > li > a:hover,
.erp-shell .sidebar .nav .nav > li > a:focus { color: #2f271c; background: #c5ad7b; box-shadow: inset 3px 0 0 #f0dfb5; }
.erp-shell .sidebar .nav .nav > li > a:hover > em,
.erp-shell .sidebar .nav .nav > li > a:focus > em { color: #fff; background: #6f5838; }
.erp-shell .sidebar .nav .nav > li.active > a { color: #fff; background: rgba(255,255,255,.13); box-shadow: inset 2px 0 0 #d9c79e; }
.erp-shell .sidebar .nav .nav > li.active > a > em { color: #fff; background: rgba(153,123,61,.52); }
.erp-shell .sidebar a:focus-visible { outline: 2px solid #d9c79e; outline-offset: -2px; }

.document-envelope-filebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0 6px; padding: 11px 12px; border: 1px solid var(--erp-line); border-radius: 8px; background: #f8fafc; }
.document-envelope-filebar > span:first-child { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.document-envelope-filebar__actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.document-envelope-field-note { margin: 0 2px 14px; line-height: 1.55; }

.erp-shell .wrapper > section { margin-top: 68px !important; margin-left: 220px; padding-top: 0; background: var(--erp-canvas); }
.erp-shell .content-wrapper { min-height: calc(100vh - 68px); padding: 28px 30px 48px; border: 0; background: var(--erp-canvas); }
.erp-shell .content-wrapper > .row { margin-right: -10px; margin-left: -10px; }
.erp-shell .content-wrapper > .row > [class*="col-"] { padding-right: 10px; padding-left: 10px; }
.erp-shell .content-wrapper .form-group { margin-bottom: 18px; }
.erp-shell .content-wrapper .panel + .panel,
.erp-shell .content-wrapper .tab-content + .panel { margin-top: 22px; }
.erp-shell .content-wrapper hr { margin-top: 22px; margin-bottom: 22px; border-color: var(--erp-line); }
.erp-shell .content-heading { display: flex; align-items: center; justify-content: space-between; min-height: 60px; margin: -28px -30px 28px; padding: 14px 30px; border: 0; border-bottom: 1px solid var(--erp-line); color: var(--erp-ink); background: #fff; font-size: 22px; font-weight: 700; }
.erp-shell .content-heading .pull-right { display: flex; align-items: center; gap: 12px; }
.erp-shell .content-heading small { color: var(--erp-muted); font-size: 12px; font-weight: 500; }
.erp-shell footer { margin-left: 220px; padding: 18px 30px; border-top: 1px solid var(--erp-line); color: var(--erp-muted); background: #fff; }

/* Shared component modernization */
.panel, .well, .box { border: 1px solid var(--erp-line); border-radius: var(--erp-radius); background: var(--erp-surface); box-shadow: var(--erp-shadow); }
.panel { overflow: hidden; }
.panel-heading { min-height: 52px; padding: 15px 20px; border: 0; border-bottom: 1px solid var(--erp-line); color: var(--erp-ink) !important; background: #fff !important; }
.panel-title { font-size: 15px; font-weight: 700; }
.panel-body { padding: 20px; }
.panel-footer { padding: 14px 20px; border-top: 1px solid var(--erp-line); background: #f8fafc; }
.panel-custom > .panel-heading { box-shadow: inset 4px 0 0 var(--erp-primary); }
.dashboard .panel { margin-bottom: 22px; }
.dashboard .report_menu { border-top: 0 !important; }
.dashboard .row-table > [class*=col-] { padding-top: 15px; padding-bottom: 15px; }
.dashboard h3, .dashboard h4 { color: var(--erp-ink); font-weight: 750; }

.btn {
    min-height: 32px;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 650;
    line-height: 20px;
    box-shadow: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active, .btn.active { transform: none; }
.btn .fa, .btn .glyphicon { margin-right: 4px; }
.btn-xs { min-height: 25px; padding: 2px 7px; border-radius: 5px; font-size: 10px; line-height: 19px; }
.btn-sm { min-height: 28px; padding: 3px 9px; border-radius: 6px; font-size: 11px; line-height: 20px; }
.btn-lg { min-height: 36px; padding: 6px 13px; border-radius: 8px; font-size: 13px; line-height: 22px; }
.btn-primary { border-color: var(--erp-primary); color: #fff; background: var(--erp-primary); }
.btn-info { border-color: var(--erp-info); color: #fff; background: var(--erp-info); }
.btn-success, .btn-green { border-color: var(--erp-success); color: #fff; background: var(--erp-success); }
.btn-warning { border-color: var(--erp-warning); color: #fff; background: var(--erp-warning); }
.btn-danger { border-color: var(--erp-danger); color: #fff; background: var(--erp-danger); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--erp-primary-dark); color: #fff; background: var(--erp-primary-dark); }
.btn-info:hover, .btn-info:focus { border-color: #765e2f; color: #fff; background: #765e2f; }
.btn-success:hover, .btn-success:focus, .btn-green:hover, .btn-green:focus { border-color: #30462a; color: #fff; background: #30462a; }
.btn-warning:hover, .btn-warning:focus { border-color: #925f18; color: #fff; background: #925f18; }
.btn-danger:hover, .btn-danger:focus { border-color: #91392f; color: #fff; background: #91392f; }
.btn-default, .btn-white { border-color: #cbd5e1; color: #334155; background: #fff; }
.btn-default:hover, .btn-default:focus, .btn-white:hover, .btn-white:focus { border-color: #94a3b8; color: var(--erp-ink); background: #f8fafc; }
.btn[disabled], .btn.disabled { transform: none; opacity: .58; }
.erp-shell .content-heading .btn { flex: 0 0 auto; margin-left: 8px; }
.erp-shell .content-heading .erp-clock-action { min-width: 0; }

.form-control, .select2-container .select2-selection--single, .select2-container .select2-selection--multiple { min-height: 42px; border: 1px solid #cbd5e1; border-radius: 10px; color: var(--erp-ink); background: #fff; box-shadow: none; }
.form-control:focus { border-color: var(--erp-accent); box-shadow: 0 0 0 3px rgba(153,123,61,.16); }
label { margin-bottom: 7px; color: #334155; font-weight: 650; }
.input-group-addon { border-color: #cbd5e1; background: #f8fafc; }
.nav-tabs { border-bottom: 1px solid var(--erp-line); }
.nav-tabs > li > a { margin-right: 4px; border: 0; border-radius: 9px 9px 0 0; color: var(--erp-muted); font-weight: 650; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover { border: 0; border-bottom: 3px solid var(--erp-primary); color: var(--erp-primary); background: transparent; }
.table { margin-bottom: 0; }
.table > thead > tr > th { padding: 13px 14px; border-bottom: 1px solid var(--erp-line); color: #475569; background: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.table > tbody > tr > td { padding: 13px 14px; border-top-color: #edf2f7; vertical-align: middle; }
.table-hover > tbody > tr:hover { background: #f8fafc; }
.dataTables_wrapper .dataTables_filter input { border: 1px solid #cbd5e1; border-radius: 9px; }
.pagination > li > a, .pagination > li > span { margin: 0 2px; border-radius: 8px !important; border-color: var(--erp-line); color: #475569; }
.pagination > .active > a { border-color: var(--erp-primary); background: var(--erp-primary); }
.modal-content { overflow: hidden; border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.24); }
.modal-header { padding: 18px 22px; border-bottom-color: var(--erp-line); }
.modal-body { padding: 22px; }
.modal-footer { padding: 15px 22px; border-top: 1px solid var(--erp-line); background: #f8fafc; }
.erp-modal .modal-dialog { margin-top: 7vh; }
.erp-modal .modal-header .close { margin-top: 1px; font-size: 24px; }
.dropdown-menu { padding: 8px; border: 1px solid var(--erp-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,.14); }
.dropdown-menu > li > a { padding: 9px 11px; border-radius: 8px; }
.dropdown-menu > li > a:hover { background: var(--erp-primary-soft); }
.alert, .alert-css { padding: 14px 16px; border: 1px solid; border-radius: 12px; }
.alert-info, .alert-css.alert-info { border-color: #bae6fd; color: #075985; background: #f0f9ff; }
.label { padding: 5px 9px; border-radius: 999px; font-weight: 650; }
.label-info, .label-success { background: var(--erp-primary); }

/* Shared adapters used throughout HR, finance, CRM and installed modules. */
.erp-shell .content-wrapper .well { padding: 20px; }
.erp-shell .content-wrapper .tab-content { padding: 20px; border: 1px solid var(--erp-line); border-top: 0; border-radius: 0 0 14px 14px; background: #fff; }
.erp-shell .content-wrapper .list-group { margin-bottom: 20px; }
.erp-shell .content-wrapper .list-group-item { padding: 13px 16px; border-color: var(--erp-line); }
.erp-shell .content-wrapper .list-group-item:first-child { border-radius: 12px 12px 0 0; }
.erp-shell .content-wrapper .list-group-item:last-child { border-radius: 0 0 12px 12px; }
.erp-shell .content-wrapper .media { padding: 4px 0; }
.erp-shell .content-wrapper .media + .media { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--erp-line); }
.erp-shell .content-wrapper .thumbnail { padding: 8px; border-color: var(--erp-line); border-radius: 13px; }
.erp-shell .content-wrapper .progress {
    height: 10px;
    margin: 0 0 16px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf3;
    box-shadow: none;
}
.erp-shell .content-wrapper .progress-bar {
    min-width: 0;
    border-radius: 999px;
    background: var(--erp-primary);
    box-shadow: none;
    transition: width .25s ease;
}
.erp-shell .content-wrapper .progress-bar-primary { background-color: var(--erp-primary); }
.erp-shell .content-wrapper .progress-bar-success { background-color: #3f7d4a; }
.erp-shell .content-wrapper .progress-bar-info { background-color: #2f7ea8; }
.erp-shell .content-wrapper .progress-bar-warning { background-color: #b7842d; }
.erp-shell .content-wrapper .progress-bar-danger { background-color: #bf4b40; }

/* Shared profile completion meter used by staff and administrator profile views. */
.erp-shell .profile-summary-actions { padding-top: 2px; }
.erp-shell .profile-completion {
    width: 100%;
    max-width: 360px;
    margin: 0 0 12px auto;
    text-align: left;
}
.erp-shell .profile-completion__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: var(--erp-muted);
    font-size: 13px;
    line-height: 1.4;
}
.erp-shell .profile-completion__heading strong {
    flex: 0 0 auto;
    color: var(--erp-ink);
    font-size: 13px;
    font-weight: 700;
}
.erp-shell .profile-completion .progress { margin-bottom: 0; }
@media (max-width: 767px) {
    .portal-public { --portal-mobile-gutter: 16px; }
    .erp-shell .profile-summary-actions {
        margin-top: 18px;
        text-align: left;
    }
    .erp-shell .profile-completion {
        max-width: none;
        margin-left: 0;
    }
}
.erp-shell .content-wrapper .breadcrumb { margin-bottom: 20px; padding: 10px 14px; border: 1px solid var(--erp-line); border-radius: 10px; background: #fff; }
.erp-shell .content-wrapper .page-header { margin: 0 0 22px; padding-bottom: 13px; border-color: var(--erp-line); }
.erp-shell .content-wrapper .btn-group { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.erp-shell .content-wrapper .btn-group > .btn { margin-left: 0; border-radius: 7px !important; }
.erp-shell .content-wrapper .table-responsive { margin-bottom: 20px; border: 0; border-radius: 12px; }
.erp-shell .content-wrapper .dataTables_wrapper { padding-top: 4px; }
.erp-shell .content-wrapper .dataTables_length,
.erp-shell .content-wrapper .dataTables_filter { margin-bottom: 14px; }
.erp-shell .content-wrapper .select2-container { max-width: 100%; }
.erp-shell .content-wrapper .note-editor,
.erp-shell .content-wrapper .panel-group .panel { border-color: var(--erp-line); border-radius: 13px; box-shadow: none; }
.erp-shell .content-wrapper .fc-toolbar { margin-bottom: 20px; }
.erp-shell .content-wrapper .fc-button { border-radius: 8px; }
.erp-shell .content-wrapper pre { padding: 16px; border-color: var(--erp-line); border-radius: 12px; background: #f8fafc; }
.erp-shell .control-label { padding-top: 10px; }
.erp-shell .help-block { margin-top: 7px; color: var(--erp-muted); }
.erp-shell fieldset { margin-bottom: 24px; }
.erp-shell legend { margin-bottom: 20px; padding-bottom: 10px; border-color: var(--erp-line); color: var(--erp-ink); font-size: 18px; font-weight: 700; }
.erp-shell .nav-pills > li > a { margin-bottom: 5px; padding: 10px 13px; border-radius: 9px; color: #475569; }
.erp-shell .nav-pills > li.active > a,
.erp-shell .nav-pills > li.active > a:hover,
.erp-shell .nav-pills > li > a:hover { color: var(--erp-primary); background: var(--erp-primary-soft); }
.erp-shell .widget { margin-bottom: 20px; }
.erp-shell .widget .row-table { margin: 0; }
.erp-shell .widget .row-table > [class*="col-"] { padding: 16px; }
.erp-shell .box { margin-bottom: 20px; overflow: hidden; }
.erp-shell .box-header { padding: 16px 20px; border-bottom: 1px solid var(--erp-line); }
.erp-shell .box-body { padding: 20px; }
.erp-shell .timeline { padding-top: 8px; }
.erp-shell .timeline > li > .timeline-panel { border-color: var(--erp-line); border-radius: 13px; box-shadow: var(--erp-shadow); }
.erp-shell .mailbox-attachments { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 14px; margin: 20px 0; padding: 0; }
.erp-shell .mailbox-attachments > li,
.portal-public .mailbox-attachments > li { width: auto; margin: 0; overflow: hidden; border: 1px solid var(--erp-line); border-radius: 12px; background: #fff; }
.erp-shell .mailbox-attachment-icon,
.portal-public .mailbox-attachment-icon { display: flex; align-items: center; justify-content: center; height: 130px; color: var(--erp-accent); background: #f8fafc; }
.erp-shell .mailbox-attachment-icon img,
.portal-public .mailbox-attachment-icon img { width: 100%; height: 100%; object-fit: cover; }
.erp-shell .mailbox-attachment-info,
.portal-public .mailbox-attachment-info { padding: 12px; border-top: 1px solid var(--erp-line); }
.erp-shell .btn-bottom-toolbar { right: 0; bottom: 0; width: calc(100% - 220px); margin: 0; padding: 14px 30px; border-top: 1px solid var(--erp-line); background: rgba(255,255,255,.96); box-shadow: 0 -8px 24px rgba(15,23,42,.06); backdrop-filter: blur(12px); }
.erp-shell.aside-collapsed .btn-bottom-toolbar { width: calc(100% - 68px); }
.erp-shell .filter_by,
.erp-shell ._filter_data { margin-bottom: 18px; }
.erp-shell .bootstrap-select > .dropdown-toggle { min-height: 42px; border-color: #cbd5e1; border-radius: 10px; background: #fff; }
.erp-shell .input-group .form-control:first-child,
.erp-shell .input-group-addon:first-child { border-radius: 10px 0 0 10px; }
.erp-shell .input-group .form-control:last-child,
.erp-shell .input-group-addon:last-child { border-radius: 0 10px 10px 0; }
.erp-shell .panel-group .panel + .panel { margin-top: 10px; }
.erp-shell .panel-group .panel-heading { min-height: 46px; padding: 13px 17px; }
.erp-shell .text-muted { color: var(--erp-muted); }
.erp-shell .required { color: var(--erp-danger); }
.erp-shell .nav-tabs-custom { margin-bottom: 22px; overflow: hidden; border: 1px solid var(--erp-line); border-radius: 15px; background: #fff; box-shadow: var(--erp-shadow); }
.erp-shell .nav-tabs-custom > .nav-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 0; background: #fbfaf7; }
.erp-shell .nav-tabs-custom > .nav-tabs > li { float: none; margin: 0; }
.erp-shell .nav-tabs-custom > .nav-tabs > li > a { padding: 11px 14px; }
.erp-shell .nav-tabs-custom > .tab-content { border: 0; border-radius: 0; }
.erp-shell .dataTables_wrapper .row { margin-right: -5px; margin-left: -5px; }
.erp-shell .dataTables_wrapper .row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.erp-shell .dataTables_wrapper .dataTables_info { padding-top: 12px; color: var(--erp-muted); font-size: 12px; }
.erp-shell .dataTables_wrapper .dataTables_paginate { padding-top: 8px; }
.erp-shell .dataTables_wrapper select { min-height: 36px; border: 1px solid #cbd5e1; border-radius: 8px; }
.erp-shell .panel-title .pull-right { display: inline-flex; align-items: center; gap: 6px; }
.erp-shell .attendance_report { color: var(--erp-primary); font-weight: 750; background: var(--erp-primary-soft); }
.erp-shell .doc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.erp-shell .doc-toolbar .btn { margin: 0; }
.erp-shell .doc-stat-grid { display: flex; flex-wrap: wrap; }
.erp-shell .doc-stat-grid > [class*="col-"] { display: flex; }
.erp-shell .doc-stat-card { width: 100%; min-height: 150px; margin-bottom: 18px; border-color: #e8dfd0; }
.erp-shell .doc-stat-card .panel-body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 22px; }
.erp-shell .doc-stat-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 11px; color: var(--erp-primary); background: var(--erp-primary-soft); font-size: 18px; }
.erp-shell .doc-stat-card h3 { margin: 4px 0; color: var(--erp-ink); font-size: 27px; font-weight: 800; }
.erp-shell .doc-stat-card p { margin: 0; font-size: 12px; }
.erp-shell .step-block { border-color: #e8dfd0; box-shadow: none; }
.erp-shell .step-block > .panel-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fbfaf7 !important; }
.erp-shell .step-block > .panel-heading .form-control { display: inline-block; width: auto !important; min-width: 145px; flex: 1 1 145px; }
.erp-shell .recipient-row { margin: 0 0 12px; padding-top: 14px !important; border-top-color: var(--erp-line) !important; }
.career-application .panel-body { padding: 24px; }
.career-application .margin.pull-right { margin: 12px 0 0; }

/* Dashboard staff identity */
.erp-staff-profile { display: grid; grid-template-columns: 210px minmax(0,1fr); margin-bottom: 24px; overflow: hidden; border: 1px solid #e8dfd0; border-radius: 16px; background: #fff; box-shadow: var(--erp-shadow); }
.erp-staff-profile__identity { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 23px 18px; color: #fff; background: linear-gradient(145deg,#57442d,#3f3223); }
.erp-staff-profile__photo { position: relative; width: 124px; height: 124px; }
.erp-staff-profile__photo img { display: block; width: 124px; height: 124px; padding: 4px; border: 1px solid #d9c79e; border-radius: 13px; background: #fff; object-fit: cover; box-shadow: 0 10px 24px rgba(47,39,28,.28); }
.erp-staff-profile__presence { position: absolute; right: 4px; bottom: 5px; width: 14px; height: 14px; border: 3px solid #3f3223; border-radius: 50%; background: #22c55e; }
.erp-staff-profile__id { margin-top: 13px; padding: 5px 10px; border-radius: 5px; color: #fff; background: rgba(255,255,255,.12); font-size: 12px; letter-spacing: .025em; }
.erp-staff-profile__complete { margin-top: 8px; color: #d9c79e; font-size: 10px; font-weight: 700; }
.erp-staff-profile__complete .fa { margin-right: 3px; }
.erp-staff-profile__content { min-width: 0; padding: 21px 24px 18px; }
.erp-staff-profile__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.erp-staff-profile__heading > div > span { display: block; margin-bottom: 3px; color: var(--erp-accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.erp-staff-profile__heading h2 { margin: 0; color: var(--erp-ink); font-size: 20px; font-weight: 800; line-height: 1.25; }
.erp-staff-profile__heading p { margin: 4px 0 0; color: var(--erp-muted); font-size: 11px; }
.erp-status-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.erp-status-pill .fa { font-size: 7px; }
.erp-status-pill.is-active { color: #276749; background: #e4f4e8; }
.erp-status-pill.is-inactive { color: #9b2c2c; background: #fde8e7; }
.erp-staff-profile__details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; border-top: 1px solid var(--erp-line); border-left: 1px solid var(--erp-line); }
.erp-staff-profile__details > div { display: grid; grid-template-columns: 105px minmax(0,1fr); min-height: 38px; border-right: 1px solid var(--erp-line); border-bottom: 1px solid var(--erp-line); }
.erp-staff-profile__details > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.erp-staff-profile__details dt,
.erp-staff-profile__details dd { display: flex; align-items: center; min-width: 0; margin: 0; padding: 7px 9px; font-size: 10px; line-height: 1.35; }
.erp-staff-profile__details dt { justify-content: flex-end; color: #765e2f; background: #f7f3ea; font-weight: 750; text-align: right; }
.erp-staff-profile__details dd { overflow-wrap: anywhere; color: #263244; background: #fff; font-weight: 600; }
.erp-staff-profile__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.erp-staff-profile__actions .btn { margin: 0; }

/* ACE-inspired theme preset: kept explicit so the existing theme customizer can select it. */
.erp-theme-bg-sumas-ace { --erp-primary: #57442d; --erp-primary-dark: #3f3223; --erp-accent: #997b3d; --erp-olive: #3f5a36; }
.erp-theme-bg-sumas-ace .topnavbar .navbar-header,
.erp-theme-bg-sumas-ace .aside,
.erp-theme-bg-sumas-ace .aside .aside-inner,
.erp-theme-bg-sumas-ace .sidebar { background: #57442d !important; }

/* ==========================================================================
   Public portal - scoped design tokens (maroon/gold), independent of the
   --erp-* tokens above which also drive the internal admin theme. Keeping
   these separate means redesigning the public site can never accidentally
   restyle the logged-in admin panel.
   ========================================================================== */
:root {
    --portal-primary: #6B2737;
    --portal-primary-dark: #4A1A25;
    --portal-primary-light: #8B3547;
    --portal-accent: #C9A84C;
    --portal-accent-light: #E8C96A;
    --portal-text-dark: #1A1A2E;
    --portal-text-body: #374151;
    --portal-text-muted: #6B7280;
    --portal-bg: #F8F7F5;
    --portal-border: #E5E7EB;
}

.portal-public { background: var(--portal-bg); font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
/* The base admin theme caps .layout-h > section at 1240px and centers it (sensible
   for the boxed admin dashboard), but the public nav bar is a fixed, full-width
   bar - on any viewport wider than 1240px that mismatch left a blank strip down
   the right edge below the nav. Public pages should run edge-to-edge; each
   section (hero/filters/body) centers its own content via max-width instead. */
.portal-public.layout-h .wrapper > section { max-width: none; margin: 0; }
.portal-public .content-wrapper > .row { margin: 0; }
.portal-public .content-wrapper > .row > .col-lg-12 { padding: 0; float: none; width: 100%; }
.portal-public h1, .portal-public h2, .portal-public h3 { font-family: 'Jost', 'Montserrat', sans-serif; font-weight: 600; }
.portal-public .wrapper > section { margin: 0; padding-top: 74px; }
.portal-public .content-wrapper { min-height: calc(100vh - 150px); padding: 0; background: var(--portal-bg); }

/* Nav - a plain rule under the bar instead of a decorative gradient stripe;
   squared-off (not pill) login button; no glow/shadow on hover states. */
.portal-nav { position: fixed; inset: 0 0 auto; z-index: 1200; height: 76px; border: 0; border-bottom: 3px solid var(--portal-primary); background: #fff; }
.portal-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1280px; margin: auto; padding: 0 22px; }
.portal-nav__brand { display: flex; align-items: center; gap: 12px; color: var(--portal-text-dark); font-weight: 800; }
.portal-nav__brand img { height: 52px; width: auto; object-fit: contain; }
.portal-nav__links { display: flex; align-items: center; gap: 4px; position: relative; }
.portal-nav__links > a, .portal-nav__links > .portal-nav__dd > a { padding: 10px 13px; color: var(--portal-text-body); font-weight: 600; font-size: 13.5px; letter-spacing: .01em; cursor: pointer; border-bottom: 2px solid transparent; }
.portal-nav__links > a:hover, .portal-nav__links > .portal-nav__dd > a:hover { color: var(--portal-primary); border-bottom-color: var(--portal-accent); }
.portal-nav__links .portal-nav__login { margin-left: 14px; display: inline-flex; align-items: center; gap: 7px; color: #fff !important; font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 10px 20px; border: 1px solid var(--portal-primary); background: var(--portal-primary); border-bottom: 2px solid transparent !important; }
.portal-nav__links .portal-nav__login:hover { background: var(--portal-primary-dark); border-color: var(--portal-primary-dark); }
.portal-nav__account .portal-nav__login { white-space: nowrap; }
.portal-nav__account-caret { margin-left: 2px; font-size: 9px; transition: transform .16s ease; }
.portal-nav__account.open .portal-nav__account-caret { transform: rotate(180deg); }
.portal-nav__account .portal-nav__account-menu { right: 0; left: auto; min-width: 205px; margin-top: 6px; padding: 6px 0; border-color: var(--portal-border); box-shadow: 0 12px 28px rgba(26,18,10,.14); }
.portal-nav__account-menu a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 15px; }
.portal-nav__account-menu a > i { flex: 0 0 18px; color: var(--portal-primary); text-align: center; }
.portal-nav__account-menu .portal-nav__account-logout { margin-top: 5px; border-top: 1px solid var(--portal-border); color: #9f2f2f; }
.portal-nav__account-menu .portal-nav__account-logout > i { color: #9f2f2f; }

.portal-nav__dd { position: relative; }
.portal-nav__dd-panel { display: none; position: absolute; top: 100%; left: 0; margin-top: 3px; min-width: 230px; padding: 4px 0; border: 1px solid var(--portal-text-dark); background: #fff; z-index: 40; }
.portal-nav__dd.open .portal-nav__dd-panel { display: block; }
.portal-nav__dd-panel a { display: block; padding: 9px 16px; color: var(--portal-text-body); font-size: 13px; font-weight: 600; border-left: 3px solid transparent; }
.portal-nav__dd-panel a:hover { background: #FAF8F5; color: var(--portal-primary); border-left-color: var(--portal-accent); }

.fac-mega { min-width: 560px; max-width: 680px; padding: 0; border-color: var(--portal-text-dark); }
.fac-mega-body { display: flex; min-height: 260px; }
.fac-mega-left { width: 240px; min-width: 240px; border-right: 1px solid #EAE3D6; padding: 4px 0; overflow-y: auto; max-height: 380px; }
.fac-mega-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 16px; cursor: pointer; font-size: 13px; color: var(--portal-text-body); font-weight: 500; border-left: 3px solid transparent; }
.fac-mega-row:hover, .fac-mega-row.active { background: #FAF8F5; color: var(--portal-primary); font-weight: 700; border-left-color: var(--portal-accent); }
.fac-mega-row i.fa-university { color: var(--portal-primary); opacity: .8; margin-right: 8px; }
.fac-mega-right { flex: 1; padding: 12px 16px; overflow-y: auto; max-height: 380px; }
.fac-mega-right .fac-mega-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--portal-text-muted); font-size: 12px; text-align: center; padding: 30px 10px; }
.fac-mega-right .fac-mega-placeholder i { font-size: 26px; margin-bottom: 8px; opacity: .5; }
.portal-nav__dd-panel .fac-dept-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 14px 9px 18px; font-size: 13px; color: var(--portal-text-body); border-left: 2px solid transparent; }
.portal-nav__dd-panel .fac-dept-link > i { flex: 0 0 16px; width: 16px; margin: 0; line-height: 1; text-align: center; }
.portal-nav__dd-panel .fac-dept-link > span { min-width: 0; line-height: 1.35; }
.portal-nav__dd-panel .fac-dept-link:hover { background: #FAF8F5; color: var(--portal-primary); border-left-color: var(--portal-accent); }
.fac-mega-footer { border-top: 1px solid #EAE3D6; background: #FAF8F5; padding: 10px 16px; }
.fac-mega-footer a { font-size: 12px; font-weight: 700; color: var(--portal-primary); }

/* Hero - the real SUMAS campus gate photo (downloaded from the institution's
   own site, not a stock/gradient placeholder), a solid dark scrim for text
   legibility rather than a decorative gradient blend, centered content. */
.portal-hero { position: relative; overflow: hidden; padding: 64px 22px 52px; color: #fff; text-align: center;
    background: linear-gradient(rgba(26,18,10,.72), rgba(26,18,10,.82)), url('../images/portal/hero-campus-gate.png') center 65% / cover no-repeat;
    border-bottom: 3px solid var(--portal-accent); }
.portal-hero__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.portal-hero__crest { display: block; width: 56px; height: 56px; object-fit: contain; margin: 0 auto 14px; }
.portal-hero__eyebrow { display: inline-block; color: var(--portal-accent-light); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid var(--portal-accent); }
.portal-hero h1 { margin: 14px 0 8px; color: #fff; font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.2; }
.portal-hero p { margin: 0 auto 24px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; }
.portal-hero__search { max-width: 520px; margin: 0 auto; }
.portal-hero__search .input-group { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
.portal-hero__search input { border: 0; height: 48px; font-size: 14px; border-radius: 0; }
.portal-hero__search button { border: 0; border-radius: 0; padding: 0 26px; font-weight: 700; font-size: 13px; letter-spacing: .02em; color: #fff; background: var(--portal-primary); }
.portal-hero__search button:hover { background: var(--portal-primary-light); }

.portal-filters { display: flex; flex-wrap: wrap; gap: 0; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--portal-border); }
.portal-filters-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 1280px; margin: auto; width: 100%; }
.portal-filters .dir-pill { display: inline-flex; align-items: center; gap: 6px; padding: 13px 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--portal-text-muted); border-bottom: 2px solid transparent; }
.portal-filters .dir-pill:hover { color: var(--portal-text-dark); }
.portal-filters .dir-pill.active { color: var(--portal-primary); border-bottom-color: var(--portal-primary); }

.portal-body { max-width: 1280px; margin: 26px auto 0; padding: 0 22px; }
.portal-body-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }

/* Sidebar faculty filter - flat, rule-divided, no card shadow */
.dir-sidebar-card { background: #fff; border: 1px solid var(--portal-border); border-top: 3px solid var(--portal-primary); }
.dir-sidebar-head { padding: 11px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--portal-text-muted); border-bottom: 1px solid var(--portal-border); }
.dir-fac-link { display: flex; align-items: center; padding: 10px 16px; font-size: 13px; color: var(--portal-text-body); border-bottom: 1px solid #F3F1EC; border-left: 3px solid transparent; cursor: pointer; }
.dir-fac-link:hover { background: #FAF8F5; color: var(--portal-text-dark); }
.dir-fac-link.on { background: #FAF8F5; color: var(--portal-primary); font-weight: 700; border-left-color: var(--portal-primary); }
.dir-fac-link i.fa-fw { margin-right: 8px; }
.dir-chev { opacity: .4; transition: transform .2s; margin-left: auto; }
.dir-chev.open { transform: rotate(90deg); }
.dir-dept-panel { background: #FAFAF8; display: none; }
.dir-dept-panel.open { display: block; }
.dir-dept-link { display: block; padding: 8px 16px 8px 38px; font-size: 12px; color: var(--portal-text-muted); border-bottom: 1px solid #F0EEE8; }
.dir-dept-link:hover { color: var(--portal-primary); }
.dir-dept-link.on { color: var(--portal-primary); font-weight: 700; }
.dir-badge { display: inline-block; padding: 1px 7px; color: var(--portal-text-muted); font-size: 11px; font-weight: 700; margin-left: auto; border: 1px solid var(--portal-border); }

/* Staff directory cards: measured spacing and short, compositor-friendly motion. */
.staff-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; align-items: stretch; background: transparent; border: 0; }
.staff-card { height: 100%; padding: 24px 18px; text-align: center; background: #fff; border: 1px solid var(--portal-border); border-top: 2px solid transparent; }
.staff-card > a { display: flex; height: 100%; flex-direction: column; align-items: center; color: inherit; }
.staff-card:hover,
.staff-card:focus-within { border-color: #c8b585; border-top-color: var(--portal-primary); background: #fefdfb; }
.staff-card img { width: 66px; height: 66px; margin: 0 auto 14px; border: 2px solid var(--portal-accent); border-radius: 50%; object-fit: cover; display: block; }
.staff-card h3 { margin: 0 0 4px; font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 700; }
.staff-card p { min-height: 36px; margin: 0 0 14px; color: var(--portal-text-muted); font-size: 11.5px; line-height: 1.5; }
.staff-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--portal-primary); }
.staff-card__link .fa { transition: transform .16s ease; }
.staff-card:hover .staff-card__link .fa,
.staff-card:focus-within .staff-card__link .fa { transform: translateX(3px); }
.staff-card a:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 5px; }

/* Individual public profile */
.profile-hero { position: relative; padding: 30px 22px 52px; color: #fff; background: var(--portal-primary-dark); border-bottom: 1px solid rgba(255,255,255,.08); }
.profile-hero a.back-link { color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; }
.profile-hero a.back-link:hover { color: #fff; }
.profile-shell-wrap { max-width: 1100px; margin: -30px auto 0; padding: 0 22px 40px; }
.profile-shell { display: grid; grid-template-columns: 340px 1fr; gap: 1px; align-items: start; background: var(--portal-border); border: 1px solid var(--portal-border); }
.profile-aside { position: sticky; top: 94px; padding: 26px 22px; background: #fff; border-top: 3px solid var(--portal-primary); text-align: center; }
.profile-aside > img { width: 170px; height: 190px; border: 3px solid var(--portal-accent); border-radius: 5px; object-fit: cover; object-position: center top; }
.profile-aside h1 { margin: 16px 0 4px; font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 700; }
.profile-aside p { color: var(--portal-text-muted); font-size: 13px; line-height: 1.6; margin-bottom: 4px; }
.profile-aside .profile-faculty { color: var(--portal-primary); font-weight: 700; font-size: 12px; }
.profile-status-row { display:flex; justify-content:center; gap:6px; margin:15px 0 18px; padding-bottom:16px; border-bottom:1px solid var(--portal-border); }
.profile-contact-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:-2px 0 18px; }
.profile-contact-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:7px 12px; border:1px solid var(--portal-border); border-radius:4px; color:var(--portal-primary); background:#fff; font-size:11.5px; font-weight:700; line-height:1.2; }
.profile-contact-btn:hover,
.profile-contact-btn:focus { border-color:var(--portal-primary); color:var(--portal-primary-dark); background:#faf7f1; }
.profile-contact-btn--primary { border-color:var(--portal-primary); color:#fff; background:var(--portal-primary); }
.profile-contact-btn--primary:hover,
.profile-contact-btn--primary:focus { color:#fff; background:var(--portal-primary-dark); }
.profile-main { display: flex; flex-direction: column; gap: 1px; margin-top: 40px; }
.profile-main .card-block { padding: 24px; background: #fff; }
.profile-main .card-block h2 { margin: 0 0 16px; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--portal-primary); padding-bottom: 10px; border-bottom: 2px solid var(--portal-accent); display: inline-block; }
.profile-main .card-block h2 i { margin-right: 8px; }
.profile-detail { padding: 12px 0; border-bottom: 1px solid #F0EEE8; line-height: 1.7; }
.profile-detail:last-child { border-bottom: 0; }
.profile-detail strong { display: block; margin-bottom: 3px; color: var(--portal-text-body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.profile-richtext { color: inherit; line-height: 1.75; overflow-wrap: anywhere; }
.profile-richtext > :first-child { margin-top: 0; }
.profile-richtext > :last-child { margin-bottom: 0; }
.profile-richtext p { margin: 0 0 10px; }
.profile-richtext ul,
.profile-richtext ol { margin: 7px 0 12px; padding-left: 24px; }
.profile-richtext li + li { margin-top: 4px; }
.profile-richtext blockquote { margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--portal-accent); color: var(--portal-text-muted); }
.erp-shell .profile-richtext + .note-editor,
.erp-shell .note-editor.profile-richtext { max-width: 100%; }
.empty-state { grid-column: 1/-1; padding: 50px 24px; border: 1px dashed var(--portal-border); color: var(--portal-text-muted); text-align: center; background: #fff; }

/* Public staff ID verification: document-like, privacy-safe and printable. */
.id-verify-page { max-width: 1160px; margin: 0 auto; padding: 46px 22px 64px; }
.id-verify-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--portal-border); }
.id-verify-heading__mark { display: inline-flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--portal-primary); font-size: 20px; }
.id-verify-heading span,
.id-verify-kicker { display: block; margin: 0 0 4px; color: var(--portal-primary); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.id-verify-heading h1 { margin: 0 0 4px; color: var(--portal-text-dark); font-size: 27px; font-weight: 750; }
.id-verify-heading p { margin: 0; color: var(--portal-text-muted); font-size: 13px; }
.id-verify-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(340px,.92fr); gap: 28px; align-items: start; }
.digital-id-wrap { min-width: 0; }
.digital-id-card { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1.586/1; border: 1px solid #3f301f; border-radius: 15px; color: #fff; background: #57442d; box-shadow: 0 18px 42px rgba(36,25,13,.18); }
.digital-id-card:after { position: absolute; right: -60px; bottom: -100px; width: 250px; height: 250px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; content: ''; }
.digital-id-card__header { display: flex; position: relative; z-index: 1; align-items: center; gap: 11px; height: 24%; padding: 13px 20px; border-bottom: 2px solid #d6a82e; background: #fff; color: #302419; }
.digital-id-card__header img { width: 96px; max-height: 48px; object-fit: contain; object-position: left center; }
.digital-id-card__header div { min-width: 0; padding-left: 11px; border-left: 1px solid #d8d0c5; }
.digital-id-card__header strong { display: block; font-size: 15px; letter-spacing: .06em; }
.digital-id-card__header span { display: block; color: #6f6254; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.digital-id-card__body { display: grid; position: relative; z-index: 1; grid-template-columns: 26% minmax(0,1fr) 19%; gap: 15px; align-items: center; height: 61%; padding: 17px 20px; }
.digital-id-card__photo { width: 100%; aspect-ratio: .86/1; border: 2px solid #e3b947; border-radius: 5px; background: #fff; object-fit: cover; object-position: center top; }
.digital-id-card__identity { min-width: 0; }
.digital-id-card__label { display: block; margin-bottom: 3px; color: #e8cd86; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.digital-id-card__identity h2 { overflow: hidden; margin: 0 0 4px; color: #fff; font-size: clamp(15px,2vw,21px); font-weight: 750; line-height: 1.12; text-overflow: ellipsis; }
.digital-id-card__identity p { margin: 0 0 2px; color: rgba(255,255,255,.88); font-size: 10px; line-height: 1.3; }
.digital-id-card__identity .digital-id-card__unit { color: #e8cd86; font-size: 9px; }
.digital-id-card__numbers { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 10px; }
.digital-id-card__numbers small { display: block; color: rgba(255,255,255,.55); font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.digital-id-card__numbers strong { display: block; color: #fff; font-size: 9px; letter-spacing: .02em; }
.digital-id-card__qr { align-self: end; padding: 6px; border-radius: 4px; background: #fff; color: #3a2d20; text-align: center; }
.digital-id-card__qr img { display: block; width: 100%; height: auto; }
.digital-id-card__qr span { display: block; margin-top: 2px; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.digital-id-card__footer { display: flex; position: relative; z-index: 1; align-items: center; justify-content: space-between; gap: 15px; height: 15%; padding: 8px 20px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.65); font-size: 7px; }
.digital-id-card__footer strong { flex: 0 0 auto; color: #fff; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.digital-id-caption { margin: 13px 0 0; color: var(--portal-text-muted); font-size: 11px; text-align: center; }
.digital-id-caption i { margin-right: 5px; }
.id-verify-result { overflow: hidden; border: 1px solid var(--portal-border); border-top: 4px solid #a64038; background: #fff; }
.id-verify-result.is-valid { border-top-color: #3f7d4a; }
.id-verify-result__status { display: flex; gap: 13px; padding: 20px; border-bottom: 1px solid var(--portal-border); background: #fcfbf9; }
.id-verify-result__status > span { display: inline-flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: #a64038; }
.id-verify-result.is-valid .id-verify-result__status > span { background: #3f7d4a; }
.id-verify-result__status h2 { margin: 0 0 5px; color: var(--portal-text-dark); font-size: 19px; font-weight: 750; }
.id-verify-result__status p:last-child { margin: 0; color: var(--portal-text-muted); font-size: 12px; line-height: 1.55; }
.id-verify-details { margin: 0; padding: 6px 20px; }
.id-verify-details > div { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0ede8; }
.id-verify-details > div:last-child { border-bottom: 0; }
.id-verify-details dt { color: var(--portal-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.id-verify-details dd { margin: 0; color: var(--portal-text-dark); font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.id-verify-result__note { display: flex; gap: 9px; margin: 8px 20px 18px; padding: 11px 12px; color: #665a49; background: #f6f2e9; font-size: 10.5px; line-height: 1.5; }
.id-verify-result__note i { margin-top: 2px; color: var(--portal-primary); }
.id-verify-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
.id-verify-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 9px 14px; border: 1px solid var(--portal-primary); border-radius: 4px; color: #fff; background: var(--portal-primary); font-size: 11.5px; font-weight: 700; }
.id-verify-button:hover,
.id-verify-button:focus { color: #fff; background: var(--portal-primary-dark); }
.id-verify-button--secondary { color: var(--portal-primary); background: #fff; }
.id-verify-button--secondary:hover,
.id-verify-button--secondary:focus { color: var(--portal-primary-dark); background: #faf7f1; }
.id-verify-invalid { display: flex; max-width: 720px; gap: 18px; margin: 0 auto; padding: 32px; border: 1px solid #e6d3d0; border-top: 4px solid #a64038; background: #fff; }
.id-verify-invalid__icon { display: inline-flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: #a64038; font-size: 18px; }
.id-verify-invalid h2 { margin: 0 0 8px; color: var(--portal-text-dark); font-size: 22px; }
.id-verify-invalid p:not(.id-verify-kicker) { margin: 0 0 18px; color: var(--portal-text-muted); font-size: 13px; line-height: 1.65; }
@media (max-width: 900px) {
    .id-verify-layout { grid-template-columns: 1fr; }
    .digital-id-wrap { max-width: 620px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .id-verify-page { padding: 28px 14px 42px; }
    .id-verify-heading { align-items: flex-start; }
    .id-verify-heading__mark { flex-basis: 40px; width: 40px; height: 40px; font-size: 16px; }
    .id-verify-heading h1 { font-size: 22px; }
    .digital-id-card { border-radius: 10px; }
    .digital-id-card__header { gap: 6px; padding: 8px 12px; }
    .digital-id-card__header img { width: 68px; max-height: 34px; }
    .digital-id-card__header div { padding-left: 7px; }
    .digital-id-card__header strong { font-size: 11px; }
    .digital-id-card__header span { font-size: 6px; }
    .digital-id-card__body { gap: 8px; padding: 10px 12px; }
    .digital-id-card__identity h2 { font-size: 12px; }
    .digital-id-card__identity p { font-size: 7px; }
    .digital-id-card__numbers { gap: 4px 8px; margin-top: 5px; }
    .digital-id-card__numbers strong { font-size: 6px; }
    .digital-id-card__footer { padding: 5px 12px; font-size: 5px; }
    .digital-id-card__footer strong { font-size: 6px; }
    .id-verify-details > div { grid-template-columns: 1fr; gap: 3px; }
    .id-verify-actions .id-verify-button { width: 100%; }
    .id-verify-invalid { padding: 24px 18px; }
}
@media print {
    .portal-public .portal-nav,
    .portal-public .portal-footer,
    .id-verify-heading,
    .id-verify-actions,
    .digital-id-caption { display: none !important; }
    .portal-public .content-wrapper { padding: 0 !important; background: #fff !important; }
    .id-verify-page { max-width: none; padding: 12mm; }
    .id-verify-layout { grid-template-columns: 1.08fr .92fr; gap: 8mm; }
    .digital-id-card { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .id-verify-result { break-inside: avoid; }
}

/* Public portal footer - deliberately separate from the admin <footer> (which
   keeps its version-number/license line); the public site should never show
   build/version info to anonymous visitors. */
/* Override the admin shell's ".wrapper > footer" rule (a slim, absolutely-
   positioned 40px bottom bar meant for the old one-line version/copyright
   text) - this footer is real, multi-column, in-flow content. */
.portal-public .wrapper > footer.portal-footer { position: static; height: auto; border-top: 0; padding: 48px 22px 0; }
.portal-footer { background: var(--portal-primary-dark); color: rgba(255,255,255,.7); padding: 48px 22px 0; }
.portal-footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; }
.portal-footer__brand-name { font-family: 'Jost', sans-serif; font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.portal-footer__desc { font-size: 13px; line-height: 1.7; max-width: 280px; color: rgba(255,255,255,.55); }
.portal-footer__social { display: flex; gap: 14px; margin-top: 16px; }
.portal-footer__social a { color: rgba(255,255,255,.45); font-size: 15px; }
.portal-footer__social a:hover { color: var(--portal-accent-light); }
.portal-footer h6 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--portal-accent-light); margin: 0 0 14px; }
.portal-footer__col ul { list-style: none; margin: 0; padding: 0; }
.portal-footer__col ul li { margin-bottom: 9px; }
.portal-footer__col ul li a { color: rgba(255,255,255,.62); font-size: 13px; }
.portal-footer__col ul li a:hover { color: var(--portal-accent-light); }
.portal-footer__contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 13px; color: rgba(255,255,255,.62); }
.portal-footer__contact-item i { color: var(--portal-accent); margin-top: 2px; width: 14px; }
.portal-footer__bottom { max-width: 1200px; margin: 34px auto 0; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.45); text-align: center; }

@media (max-width: 900px) {
    .portal-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .portal-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .portal-body-grid { grid-template-columns: 1fr; }
    .profile-shell { grid-template-columns: 1fr; }
    .profile-aside { position: static; }
    .staff-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .fac-mega { min-width: 280px; }
    .fac-mega-body { flex-direction: column; }
    .fac-mega-left { width: 100%; border-right: 0; border-bottom: 1px solid #F0ECE6; }
}

/* Careers and knowledge base */
.portal-section-hero { margin-bottom: 28px; padding: 30px 32px; border: 1px solid #e8dfd0; border-radius: 20px; background: linear-gradient(135deg,#fff,#f7f3ea); }
.portal-section-hero__eyebrow { margin: 0 0 7px; color: var(--erp-accent); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.portal-section-hero h1 { margin: 0 0 8px; color: var(--erp-ink); font-size: clamp(27px,4vw,40px); font-weight: 800; letter-spacing: -.025em; }
.portal-section-hero p { max-width: 700px; margin: 0; color: var(--erp-muted); font-size: 15px; line-height: 1.7; }
.career-hero { position: relative; display: grid; min-height: 390px; margin: -25px -30px 0; overflow: hidden; place-items: center; color: #fff; background: #2f271c; }
.career-hero__image,
.career-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.career-hero__image { object-fit: cover; object-position: center 48%; }
.career-hero__shade { background: linear-gradient(90deg,rgba(31,24,16,.82),rgba(31,24,16,.6) 48%,rgba(31,24,16,.74)); }
.career-hero__content { position: relative; z-index: 1; max-width: 790px; padding: 56px 24px 88px; text-align: center; }
.career-hero__eyebrow { margin: 0 0 12px; color: #f0d991; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.career-hero h1 { margin: 0 0 15px; color: #fff; font-size: clamp(34px,5vw,56px); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; text-shadow: 0 2px 16px rgba(0,0,0,.24); }
.career-hero__content > p:last-child { max-width: 680px; margin: 0 auto; color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.65; }
.career-search { position: relative; z-index: 2; max-width: 1180px; margin: -54px auto 38px; padding: 22px; border: 1px solid #ded7ca; border-top: 3px solid var(--portal-accent); border-radius: 6px; background: #fff; box-shadow: 0 10px 28px rgba(32,25,17,.12); }
.career-search__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.career-search__heading span { color: var(--portal-primary); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.career-search__heading h2 { margin: 3px 0 0; color: var(--portal-text); font-size: 20px; font-weight: 750; }
.career-search__heading p { margin: 0; color: var(--portal-text-muted); font-size: 12px; }
.career-search__fields { display: grid; grid-template-columns: minmax(240px,1.6fr) repeat(3,minmax(150px,1fr)) auto; gap: 10px; }
.career-search__fields label { position: relative; min-width: 0; margin: 0; }
.career-search__fields input,
.career-search__fields select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #d6dce4; border-radius: 4px; color: #273449; background: #fff; font-size: 13px; font-weight: 500; }
.career-search__fields input:focus,
.career-search__fields select:focus { outline: 0; border-color: var(--portal-accent); box-shadow: 0 0 0 3px rgba(153,123,61,.13); }
.career-search__keyword i { position: absolute; z-index: 1; top: 14px; left: 13px; color: #8a93a0; }
.career-search__keyword input { padding-left: 36px; }
.career-search__submit { height: 43px; padding: 0 18px; border: 1px solid var(--portal-primary); border-radius: 4px; color: #fff; background: var(--portal-primary); font-size: 12px; font-weight: 750; white-space: nowrap; }
.career-search__submit:hover,
.career-search__submit:focus { color: #fff; background: var(--portal-primary-dark); }
.career-search__clear { display: inline-block; margin-top: 13px; color: #8b1f35; font-size: 12px; font-weight: 700; }
.career-results-heading { display: flex; align-items: flex-end; justify-content: space-between; max-width: 1180px; margin: 0 auto 18px; }
.career-results-heading h2 { margin: 0; color: var(--portal-text); font-size: 24px; }
.career-results-heading > span { color: var(--portal-text-muted); font-size: 12px; }
.career-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.career-grid > [class*="col-"] { width: auto; padding: 0; float: none; }
.career-grid { max-width: 1180px; margin: 0 auto; }
.career-card { position: relative; height: 100%; margin: 0; overflow: hidden; border: 1px solid #dedfe3; border-radius: 6px; box-shadow: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.career-card:hover,
.career-card:focus-within { border-color: #bba46e; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(32,25,17,.08); }
.career-card .panel-body { display: flex; flex-direction: column; height: 100%; padding: 24px; }
.career-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.career-card__status { align-self: flex-start; margin: 0; }
.career-card__category { overflow: hidden; color: #7c6640; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.career-card__title { margin: 0 0 12px; font-size: 18px; font-weight: 750; line-height: 1.35; }
.career-card__title a { color: #18263b; }
.career-card__title a:hover { color: var(--portal-primary); }
.career-card__designation { min-height: 34px; margin: 0 0 13px; color: var(--portal-text-muted); font-size: 12px; }
.career-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0 0 16px; color: #475569; font-size: 12px; }
.career-card__meta span { min-width: 0; }
.career-card__meta .fa { width: 15px; margin-right: 3px; color: #9a7d3d; text-align: center; }
.career-card__description { flex: 1; color: var(--erp-muted); font-size: 13px; line-height: 1.65; }
.career-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--erp-line); color: var(--portal-text-muted); font-size: 11px; }
.career-card__footer a { color: var(--portal-primary); font-weight: 750; white-space: nowrap; }
.career-card__footer a .fa { margin-left: 4px; transition: transform .16s ease; }
.career-card:hover .career-card__footer a .fa { transform: translateX(3px); }
.career-empty { grid-column: 1 / -1; padding: 54px 24px; border: 1px dashed #cfc7b9; border-radius: 6px; text-align: center; background: #fff; }
.career-empty > .fa { color: #a88945; font-size: 30px; }
.career-empty h2 { margin: 13px 0 7px; font-size: 20px; }
.career-empty p { margin: 0 0 18px; color: var(--portal-text-muted); }
.career-admin-form__intro { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border-left: 3px solid #997b3d; background: #f8f5ee; }
.career-admin-form__intro > .fa { width: 34px; color: #765e2f; font-size: 22px; text-align: center; }
.career-admin-form__intro strong,
.career-admin-form__intro span { display: block; }
.career-admin-form__intro strong { color: #253247; font-size: 14px; }
.career-admin-form__intro span { margin-top: 2px; color: #6b7280; font-size: 11px; }
.career-admin-form .form-group { margin-right: 0; margin-left: 0; padding: 4px 0 13px; }
.career-detail { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start; }
.career-detail__main, .career-detail__aside { padding: 26px; border: 1px solid var(--erp-line); border-radius: 17px; background: #fff; box-shadow: var(--erp-shadow); }
.career-detail__main blockquote { margin: 24px 0 0; padding: 20px; border-left: 4px solid var(--erp-accent); border-radius: 0 12px 12px 0; color: #475569; background: #f8fafc; font-size: 14px; line-height: 1.75; }
.career-summary { display: grid; gap: 12px; margin: 0; }
.career-summary div { padding-bottom: 11px; border-bottom: 1px solid var(--erp-line); }
.career-summary dt { margin-bottom: 3px; color: var(--erp-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.career-summary dd { margin: 0; color: var(--erp-ink); font-weight: 650; }
.kb-hero { max-width: 880px; margin: 0 auto 32px; padding: 38px; border-radius: 22px; text-align: center; color: #fff; background: linear-gradient(130deg,#2f271c,#57442d 65%,#3f5a36); }
.kb-hero h2 { margin: 0 0 18px; color: #fff; font-size: clamp(27px,4vw,40px); font-weight: 800; }
.kb-hero .search-box { max-width: 680px; margin: 0 auto; }
.kb-hero #kb-search { height: 50px; padding-left: 44px; border: 0; border-radius: 13px; }
.kb-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.kb-grid > [class*="col-"] { width: auto; padding: 0; float: none; }
.kb-card { height: 100%; margin: 0; text-align: left; }
.kb-card .panel-body { padding: 24px; }
.kb-card h4 { margin: 0 0 9px; color: var(--erp-ink); font-size: 17px; font-weight: 750; }
.kb-card p { color: var(--erp-muted); line-height: 1.6; }
.kb-shell { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 24px; }
.kb-shell__nav, .kb-shell__content { padding: 20px; border: 1px solid var(--erp-line); border-radius: 16px; background: #fff; box-shadow: var(--erp-shadow); }
.kb-shell__nav .nav-pills > li > a { margin-bottom: 5px; padding: 10px 12px; border-radius: 9px; color: #475569; }
.kb-shell__nav .nav-pills > li.sub-active > a,
.kb-shell__nav .nav-pills > li > a:hover { color: var(--erp-primary); background: var(--erp-primary-soft); }
.kb-article-toggle { margin: 8px 0; border: 1px solid var(--erp-line); border-radius: 12px; background: #fff; }
.kb-article-toggle__head { padding: 14px 16px; }
.kb-article-toggle__content { padding: 0 16px 16px; color: #475569; line-height: 1.7; }

/* Knowledge base help centre */
.kb-home,.kb-article-page{max-width:1180px;margin:0 auto;padding:6px 0 44px;color:#1d2a3c}
.kb-hero--wide{max-width:none;margin:0 0 38px;padding:52px 48px 30px;border:1px solid #3e3428;border-radius:8px;background:#4b3a26;text-align:left;box-shadow:0 10px 26px rgba(39,29,18,.12)}
.kb-hero__eyebrow,.kb-section-label{margin:0 0 7px;color:#a8853f;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.kb-hero--wide .kb-hero__eyebrow{color:#e0ca91}.kb-hero--wide h1{margin:0 0 9px;color:#fff;font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-.025em}
.kb-hero__intro{max-width:690px;margin:0 0 24px;color:#e6dfd5;font-size:15px;line-height:1.65}
.kb-search-form{position:relative;display:flex;max-width:820px;min-height:52px;border:1px solid #d8d2c8;border-radius:6px;background:#fff;box-shadow:0 5px 14px rgba(25,19,12,.14)}
.kb-search-form__icon{position:absolute;top:0;left:0;width:48px;height:50px;color:#8a7655;line-height:50px;text-align:center}
.kb-search-form input{min-width:0;flex:1;height:50px;padding:0 14px 0 46px;border:0;border-radius:6px 0 0 6px;color:#1d2a3c;background:transparent;font-size:14px}
.kb-search-form input:focus{outline:0;box-shadow:inset 0 0 0 2px #a8853f}
.kb-search-form button{min-width:108px;margin:5px;padding:0 18px;border:0;border-radius:4px;color:#fff;background:#6b512f;font-size:12px;font-weight:750}.kb-search-form button:hover{background:#3e3020}
.kb-hero__stats{display:flex;flex-wrap:wrap;gap:22px;margin-top:19px;color:#d8cfc2;font-size:11px}.kb-hero__stats strong{color:#fff}.kb-hero__stats .fa{margin-right:5px;color:#7fbe8a}
.kb-section-heading,.kb-results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 18px}.kb-section-heading h2,.kb-results-head h2{margin:0;color:#1d2a3c;font-size:23px;font-weight:780}.kb-section-heading>p{max-width:380px;margin:0;color:#6c7786;font-size:12px}.kb-results-head>a{color:#7c2437;font-size:12px;font-weight:700}
.kb-module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.kb-module-card{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto 14px;gap:15px;align-items:center;min-height:116px;padding:22px;border:1px solid #dfe3e8;border-left:3px solid #a8853f;border-radius:6px;color:#1d2a3c;background:#fff;box-shadow:0 2px 7px rgba(24,33,46,.04);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.kb-module-card:hover,.kb-module-card:focus{color:#1d2a3c;border-color:#bca878;box-shadow:0 8px 18px rgba(24,33,46,.08);transform:translateY(-2px)}
.kb-module-card__icon{width:48px;height:48px;border-radius:5px;color:#6a512f;background:#f2ead9;font-size:20px;line-height:48px;text-align:center}.kb-module-card__content strong,.kb-module-card__content small{display:block}.kb-module-card__content strong{margin-bottom:5px;font-size:16px}.kb-module-card__content small{color:#6c7786;font-size:12px;line-height:1.5}.kb-module-card__count{color:#74654f;font-size:11px;font-weight:700;white-space:nowrap}.kb-module-card__arrow{color:#a58d66}
.kb-section-heading--featured{margin-top:38px}.kb-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.kb-featured-card{display:flex;flex-direction:column;min-height:208px;padding:22px;border:1px solid #e0e3e7;border-radius:6px;background:#fff}.kb-featured-card__category,.kb-result-row__category{color:#8a6b36;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.kb-featured-card h3{margin:9px 0 8px;font-size:16px;line-height:1.4}.kb-featured-card h3 a{color:#1d2a3c}.kb-featured-card p{flex:1;margin:0 0 15px;color:#697586;font-size:12px;line-height:1.6}.kb-featured-card>a{color:#6b512f;font-size:11px;font-weight:750}.kb-featured-card>a .fa{margin-left:4px}
.kb-results-list{display:grid;gap:9px}.kb-result-row{display:grid;grid-template-columns:42px minmax(0,1fr) 32px;gap:15px;align-items:center;padding:18px 20px;border:1px solid #dfe3e8;border-radius:6px;background:#fff}.kb-result-row__icon{width:42px;height:42px;border-radius:5px;color:#6b512f;background:#f2ead9;line-height:42px;text-align:center}.kb-result-row h3{margin:3px 0 4px;font-size:15px}.kb-result-row h3 a{color:#1d2a3c}.kb-result-row p{margin:0;color:#6c7786;font-size:12px}.kb-result-row__arrow{color:#9a835b;text-align:center}.kb-result-row:hover{border-color:#bca878}.kb-empty{padding:54px 24px;border:1px dashed #cfc7b9;border-radius:6px;background:#fff;text-align:center}.kb-empty>.fa{color:#a8853f;font-size:28px}.kb-empty h3{margin:12px 0 6px}.kb-empty p{margin:0 0 16px;color:#6c7786}
.kb-article-search{display:grid;grid-template-columns:180px minmax(0,680px);gap:22px;align-items:center;margin-bottom:24px;padding:18px 0;border-bottom:1px solid #e1e4e8}.kb-back-link{color:#5d4930;font-size:12px;font-weight:750}.kb-back-link .fa{margin-right:6px}.kb-article-search .kb-search-form{min-height:44px;box-shadow:none}.kb-article-search .kb-search-form input{height:42px}.kb-article-search .kb-search-form__icon{height:42px;line-height:42px}.kb-article-search .kb-search-form button{min-width:88px}
.kb-article-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:28px;align-items:start}.kb-article-nav{position:sticky;top:20px;padding:19px;border:1px solid #dfe3e8;border-radius:6px;background:#fff}.kb-article-nav nav{display:grid;gap:4px}.kb-article-nav nav a{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border-radius:4px;color:#556171;font-size:12px}.kb-article-nav nav a:hover,.kb-article-nav nav a.is-active{color:#46351f;background:#f1eadc}.kb-article-nav nav a small{color:#8b95a2}.kb-breadcrumbs{display:flex;align-items:center;gap:8px;margin:0 0 13px;color:#7a8491;font-size:11px}.kb-breadcrumbs a{color:#725a35}
.kb-article-card{overflow:hidden;border:1px solid #dfe3e8;border-radius:6px;background:#fff}.kb-article-card>header{padding:34px 38px 28px;border-bottom:1px solid #e4e7eb;background:#faf9f6}.kb-article-card__category{color:#886a38;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.kb-article-card__category .fa{margin-right:5px}.kb-article-card h1{max-width:760px;margin:10px 0 10px;color:#182538;font-size:clamp(27px,4vw,40px);font-weight:800;line-height:1.18;letter-spacing:-.02em}.kb-article-card__summary{max-width:740px;margin:0;color:#606d7d;font-size:15px;line-height:1.65}.kb-article-card__meta{display:flex;flex-wrap:wrap;gap:17px;margin-top:18px;color:#7b8592;font-size:10px}.kb-article-card__meta .fa{margin-right:4px;color:#9c814d}
.kb-article-body{padding:34px 38px;color:#344257;font-size:14px;line-height:1.8}.kb-article-body h2,.kb-article-body h3{color:#1d2a3c;font-weight:760}.kb-article-body h2{margin:28px 0 10px;font-size:21px}.kb-article-body h3{margin:24px 0 8px;font-size:17px}.kb-article-body p{margin:0 0 15px}.kb-article-body ul,.kb-article-body ol{margin:0 0 18px;padding-left:22px}.kb-article-body li{margin-bottom:7px}.kb-article-body strong{color:#243247}
.kb-source-note{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;margin:0 38px 34px;padding:15px;border:1px solid #d7e5da;border-radius:5px;background:#f3f8f4;color:#46604c;font-size:11px}.kb-source-note>.fa{color:#4d8a5c;font-size:22px}.kb-source-note strong{display:block;color:#315139}.kb-source-note a{color:#315e3c;font-weight:750;white-space:nowrap}.kb-attachments{margin:0 38px 28px;padding-top:20px;border-top:1px solid #e5e7eb}.kb-attachments h2{font-size:17px}.kb-attachments>a{display:grid;grid-template-columns:25px minmax(0,1fr) 20px;gap:10px;align-items:center;margin-top:8px;padding:11px;border:1px solid #e1e4e8;border-radius:4px;color:#344257}.kb-attachments small{display:block;color:#7b8592}
.kb-related{margin-top:24px}.kb-related h2{font-size:18px}.kb-related>a{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:10px;align-items:center;margin-top:8px;padding:16px 18px;border:1px solid #dfe3e8;border-radius:5px;color:#27364a;background:#fff}.kb-related strong,.kb-related small{display:block}.kb-related small{margin-top:3px;color:#748090;font-size:11px}
@media(max-width:900px){.kb-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kb-article-layout{grid-template-columns:1fr}.kb-article-nav{position:static}.kb-article-nav nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.kb-home,.kb-article-page{padding-right:4px;padding-left:4px}.kb-hero--wide{padding:34px 20px 22px}.kb-search-form button{min-width:auto;padding:0 13px}.kb-hero__stats{gap:10px 16px}.kb-module-grid,.kb-featured-grid{grid-template-columns:1fr}.kb-module-card{grid-template-columns:42px minmax(0,1fr) 12px;padding:17px}.kb-module-card__icon{width:42px;height:42px;line-height:42px}.kb-module-card__count{display:none}.kb-section-heading{align-items:flex-start;flex-direction:column;gap:5px}.kb-article-search{grid-template-columns:1fr}.kb-article-nav nav{grid-template-columns:1fr}.kb-article-card>header,.kb-article-body{padding:25px 21px}.kb-source-note{grid-template-columns:28px 1fr;margin:0 21px 24px}.kb-source-note a{grid-column:2}.kb-attachments{margin:0 21px 24px}}

/* Admin knowledge base */
.kb-admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding:16px 18px;border:1px solid #dfe3e8;border-left:3px solid #8e713b;border-radius:5px;background:#fff}.kb-admin-toolbar h2{margin:0 0 3px;font-size:18px}.kb-admin-toolbar p{margin:0;color:#718093;font-size:11px}.kb-admin-toolbar__actions{display:flex;flex-wrap:wrap;gap:7px}.kb-admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:17px}.kb-admin-stat{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid #dfe3e8;border-radius:5px;background:#fff}.kb-admin-stat>.fa{width:40px;height:40px;border-radius:4px;color:#6a512f;background:#f1eadc;font-size:17px;line-height:40px;text-align:center}.kb-admin-stat strong,.kb-admin-stat small{display:block}.kb-admin-stat strong{font-size:20px}.kb-admin-stat small{color:#748090}.kb-admin-form-intro{margin-bottom:19px;padding:13px 15px;border-left:3px solid #9a7d3d;background:#f8f5ee;color:#526074;font-size:12px}.kb-admin-form .form-group{margin-right:0;margin-left:0;padding:3px 0 11px}.kb-admin-form .control-label{padding-top:9px}.kb-admin-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.kb-admin-module{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:17px;border:1px solid #dfe3e8;border-radius:5px;color:#27364a;background:#fff}.kb-admin-module>.fa{width:40px;height:40px;border-radius:4px;color:#6b512f;background:#f1eadc;line-height:40px;text-align:center}.kb-admin-module strong,.kb-admin-module small{display:block}.kb-admin-module small{margin-top:3px;color:#748090}.kb-admin-module>span:last-child{font-size:11px;font-weight:700}@media(max-width:720px){.kb-admin-stats,.kb-admin-dashboard-grid{grid-template-columns:1fr}.kb-admin-toolbar{align-items:flex-start;flex-direction:column}}

/* Login / landing */
.erp-login { min-height: 100vh; color: var(--erp-ink); background: #f3efe7; }
.erp-login-shell { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(430px,.9fr); min-height: 100vh; }
.erp-login-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 48px clamp(36px,6vw,86px); color: #fff; background: linear-gradient(145deg,#2f271c 0%,#57442d 65%,#3f5a36 100%); }
.erp-login-story:before, .erp-login-story:after { position: absolute; border: 1px solid rgba(217,199,158,.18); border-radius: 50%; content: ""; }
.erp-login-story:before { right: -160px; top: -140px; width: 500px; height: 500px; }
.erp-login-story:after { left: -170px; bottom: -260px; width: 600px; height: 600px; }
.erp-login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; color: #fff; font-weight: 800; }
.erp-login-brand img { width: 54px; height: 54px; padding: 4px; border-radius: 13px; background: #fff; object-fit: contain; }
.erp-login-copy { position: relative; z-index: 1; max-width: 680px; margin: 70px 0; }
.erp-login-copy .eyebrow { margin-bottom: 12px; color: #d9c79e; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.erp-login-copy h1 { margin: 0 0 18px; color: #fff; font-size: clamp(38px,5vw,68px); font-weight: 820; line-height: 1.02; letter-spacing: -.035em; }
.erp-login-copy p { max-width: 590px; margin: 0; color: #cbd5e1; font-size: 17px; line-height: 1.72; }
.erp-login-links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.erp-login-links a { padding: 11px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: #fff; font-weight: 650; background: rgba(255,255,255,.07); }
.erp-login-links a:hover { border-color: #d9c79e; background: rgba(217,199,158,.13); }
.erp-login-foot { position: relative; z-index: 1; color: #94a3b8; font-size: 12px; }
.erp-login-panel { display: flex; align-items: center; justify-content: center; padding: 42px; background: #f8fafc; }
.erp-login-card { width: 100%; max-width: 430px; padding: 34px; border: 1px solid var(--erp-line); border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(15,23,42,.1); }
.erp-login-card__mobile-brand { display: none; }
.erp-login-card h2 { margin: 0 0 7px; font-size: 27px; font-weight: 800; }
.erp-login-card__intro { margin-bottom: 25px; color: var(--erp-muted); }
.erp-login-card .panel { margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.erp-login-card .panel-heading { display: none; }
.erp-login-card .panel-body { padding: 0; }
.erp-login-card .form-control { height: 48px; padding-left: 14px; }
.erp-login-card .has-feedback .form-control { padding-right: 42px; }
.erp-login-card .form-control-feedback { height: 48px; line-height: 48px; }
.erp-login-card .btn-primary { width: 100%; min-height: 48px; margin-top: 14px; }
.erp-login-card .pv { display: none; }
.erp-login-card .checkbox { font-size: 13px; }
.erp-login-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.erp-login-actions--attendance { grid-template-columns: minmax(0, 1fr) auto; }
.erp-login-card .erp-login-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0;
    padding: 9px 16px;
    line-height: 1.25;
}
.erp-login-card .erp-login-actions .btn-primary { margin-top: 0; }
.erp-login-attendance {
    gap: 7px;
    min-width: 156px;
    border-color: #d7c9b3;
    color: #4f3c25;
    background: #f4f0e8;
    font-weight: 700;
    white-space: nowrap;
}
.erp-login-attendance:hover,
.erp-login-attendance:focus {
    border-color: #9a7a3f;
    color: #3f2e1c;
    background: #ebe2d3;
}
.erp-login-tools { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--erp-line); font-size: 13px; }

/* Restrained enterprise finish: flat, dense and conventional. */
:root {
    --erp-radius: 6px;
    --erp-shadow: 0 1px 2px rgba(15,23,42,.06);
    --erp-canvas: #f3f4f6;
}
.erp-shell .topnavbar { box-shadow: 0 1px 3px rgba(47,39,28,.18); backdrop-filter: none; }
.erp-shell .topnavbar .user-menu .user-header { background: #57442d; }
.panel, .well, .box { border-radius: 6px; box-shadow: var(--erp-shadow); }
.panel-heading { min-height: 46px; padding: 12px 16px; }
.panel-body { padding: 16px; }
.panel-footer { padding: 11px 16px; }
.erp-shell .content-wrapper { padding: 20px 22px 36px; }
.erp-shell .content-heading { min-height: 52px; margin: -20px -22px 20px; padding: 12px 22px; font-size: 20px; }
.erp-shell .content-wrapper .form-group { margin-bottom: 14px; }
.erp-shell .content-wrapper .panel + .panel,
.erp-shell .content-wrapper .tab-content + .panel { margin-top: 16px; }
.btn:hover { transform: none; }
.form-control,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple { min-height: 36px; border-radius: 4px; }
.form-control:focus { box-shadow: 0 0 0 2px rgba(153,123,61,.12); }
.nav-tabs > li > a { border-radius: 4px 4px 0 0; }
.table > thead > tr > th { padding: 10px 12px; }
.table > tbody > tr > td { padding: 10px 12px; }
.pagination > li > a,
.pagination > li > span { border-radius: 3px !important; }
.modal-content { border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 8px 24px rgba(15,23,42,.18); }
.modal-header { padding: 14px 16px; }
.modal-body { padding: 16px; }
.modal-footer { padding: 11px 16px; }
.dropdown-menu { padding: 5px; border-radius: 4px; box-shadow: 0 4px 12px rgba(15,23,42,.12); }
.dropdown-menu > li > a { border-radius: 3px; }
.alert, .alert-css { padding: 11px 13px; border-radius: 4px; }
.erp-shell .content-wrapper .list-group-item:first-child { border-radius: 5px 5px 0 0; }
.erp-shell .content-wrapper .thumbnail,
.erp-shell .content-wrapper pre,
.erp-shell .content-wrapper .panel-group .panel,
.erp-shell .content-wrapper .table-responsive { border-radius: 5px; }
.erp-shell .content-wrapper .timeline > li > .timeline-panel { border-radius: 5px; box-shadow: none; }
.erp-shell .btn-bottom-toolbar { background: #fff; box-shadow: 0 -1px 4px rgba(15,23,42,.06); backdrop-filter: none; }
.erp-shell .nav-tabs-custom { border-radius: 6px; box-shadow: none; }

.erp-staff-profile { border-radius: 6px; box-shadow: none; }
.erp-staff-profile__identity { background: #57442d; }
.erp-staff-profile__photo img { border-radius: 4px; box-shadow: none; }
.erp-staff-profile__id { border-radius: 3px; }
.erp-status-pill { border-radius: 3px; }

.portal-nav { background: #fff; backdrop-filter: none; }
.kb-hero { border-radius: 6px; background: #57442d; }
.portal-section-hero { border-radius: 6px; background: #f7f3ea; }
.staff-card,
.profile-aside,
.profile-main,
.career-detail__main,
.career-detail__aside,
.kb-shell__nav,
.kb-shell__content { border-radius: 6px; box-shadow: none; }
.staff-card { padding: 24px 18px; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.staff-card:hover,
.staff-card:focus-within { border-color: #b69f70; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(48,37,23,.09); }
.staff-card img { border-width: 2px; border-radius: 4px; }
.profile-aside > img { border-width: 3px; border-radius: 4px; }
.empty-state { border-radius: 6px; }
.kb-article-toggle { border-radius: 4px; }
.kb-hero #kb-search { height: 42px; border-radius: 4px; }

.erp-login-story { background: #57442d; }
.erp-login-brand img { border-radius: 4px; }
.erp-login-panel { background: #f4f5f7; }
.erp-login-card { padding: 28px; border-radius: 6px; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.erp-login-card .form-control,
.erp-login-card .form-control-feedback { height: 40px; }
.erp-login-card .form-control-feedback { line-height: 40px; }
.erp-login-card .btn-primary { min-height: 36px; }
.erp-login-card .erp-login-actions .btn { min-height: 40px; }

@media (max-width: 1100px) {
    .erp-shell .topnavbar .erp-view-site-link { width: 48px; justify-content: center; padding-right: 14px; padding-left: 14px; }
    .erp-shell .topnavbar .erp-view-site-link > span { display: none; }
    .staff-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .erp-login-shell { grid-template-columns: 1fr 480px; }
    .erp-login-story { padding: 42px; }
    .career-grid, .kb-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .career-search__fields { grid-template-columns: minmax(220px,1.5fr) repeat(2,minmax(150px,1fr)); }
    .career-search__submit { width: 100%; }
}
@media (max-width: 991px) {
    .erp-shell .topnavbar .navbar-header { width: 220px; }
    .erp-shell .topnavbar .nav-wrapper { margin-left: 220px; }
    .erp-shell .aside, .erp-shell .aside .aside-inner { width: 220px; }
    .erp-shell .wrapper > section, .erp-shell footer { margin-left: 220px; }
    .staff-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .profile-shell { grid-template-columns: 230px 1fr; }
    .erp-staff-profile { grid-template-columns: 180px minmax(0,1fr); }
    .erp-staff-profile__content { padding-right: 18px; padding-left: 18px; }
    .erp-staff-profile__details { grid-template-columns: 1fr; }
    .erp-login-shell { grid-template-columns: 1fr; }
    .erp-login-story { min-height: 410px; }
    .erp-login-copy { margin: 52px 0; }
    .erp-login-panel { padding: 50px 24px; }
    .career-detail { grid-template-columns: 1fr; }
    .kb-shell { grid-template-columns: 220px minmax(0,1fr); }
}
@media (min-width: 768px) {
    .erp-shell.aside-collapsed .topnavbar .navbar-header { width: 68px; }
    .erp-shell.aside-collapsed .topnavbar .nav-wrapper { margin-left: 68px; }
    .erp-shell.aside-collapsed .aside,
    .erp-shell.aside-collapsed .aside .aside-inner { width: 68px; }
    .erp-shell.aside-collapsed .sidebar { width: 68px; padding-right: 6px; padding-left: 6px; overflow: visible; }
    .erp-shell.aside-collapsed .sidebar .has-user-block { padding: 6px; }
    .erp-shell.aside-collapsed .sidebar .erp-menu-search { display: flex !important; align-items: center; justify-content: center; width: 42px !important; height: 38px; margin-right: auto; margin-left: auto; padding: 0; border: 1px solid rgba(217,199,158,.22); border-radius: 7px; background: #493923; }
    .erp-shell.aside-collapsed .sidebar .erp-menu-search .fa { position: static; width: auto; padding: 0; font-size: 14px; }
    .erp-shell.aside-collapsed .sidebar .erp-menu-search #s-menu { display: none !important; }
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li { width: 56px; }
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > a,
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > .nav-item { justify-content: center; min-height: 42px; padding: 8px 4px; text-align: center; }
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > a > em,
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > .nav-item > em { flex-basis: 28px; width: 28px; height: 28px; font-size: 14px; line-height: 28px; }
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > a > span,
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > .nav-item > span,
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > .nav-heading,
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > .sidebar-subnav { display: none !important; }
    .erp-shell.aside-collapsed .erp-sidebar-footer { margin-right: -6px; margin-left: -6px; padding-right: 8px; padding-left: 8px; }
    .erp-shell.aside-collapsed .erp-sidebar-profile { justify-content: center; }
    .erp-shell.aside-collapsed .erp-sidebar-user-info,
    .erp-shell.aside-collapsed .erp-sidebar-logout span { display: none; }
    .erp-shell.aside-collapsed .erp-sidebar-logout { justify-content: center; padding-right: 4px; padding-left: 4px; }
    .erp-shell.aside-collapsed .sidebar li.sub-menu > a.menu-toggle:after { display: none; }
    .erp-shell.aside-collapsed .wrapper > section,
    .erp-shell.aside-collapsed footer { margin-left: 68px; }

    /* app.js places this clone outside the scrolling rail, so it stays visible. */
    .erp-shell > .wrapper > .aside > .sidebar-subnav.nav-floating {
        z-index: 1300;
        width: 230px;
        max-height: calc(100vh - 84px);
        margin: 0 0 0 -1px;
        padding: 5px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid rgba(47,39,28,.22);
        border-radius: 0 7px 7px 0;
        background: #57442d;
        box-shadow: 10px 12px 28px rgba(47,39,28,.24);
    }
    .erp-shell > .wrapper > .aside > .sidebar-subnav.nav-floating > .sidebar-subnav-header {
        display: block;
        margin: -5px -5px 5px;
        padding: 10px 13px;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
        color: #f2e6c8;
        background: #493923;
        font-size: 12px;
        font-weight: 800;
    }
    .erp-shell > .wrapper > .aside > .sidebar-subnav.nav-floating > li { margin: 1px 0; }
    .erp-shell > .wrapper > .aside > .sidebar-subnav.nav-floating li > a {
        display: flex;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        padding: 6px 9px;
        border-radius: 5px;
        color: rgba(255,255,255,.9);
        font-size: 12px;
        font-weight: 650;
        white-space: normal;
    }
    .erp-shell > .wrapper > .aside > .sidebar-subnav.nav-floating li > a:hover,
    .erp-shell > .wrapper > .aside > .sidebar-subnav.nav-floating li > a:focus {
        color: #2f271c;
        background: #c5ad7b;
        box-shadow: inset 3px 0 0 #f0dfb5;
    }
    .erp-shell > .wrapper > .aside > .sidebar-subnav.nav-floating li.active > a {
        color: #fff;
        background: rgba(255,255,255,.13);
        box-shadow: inset 2px 0 0 #d9c79e;
    }
    .erp-shell > .wrapper > .aside > .sidebar-subnav.nav-floating li > a > em {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        margin: 0;
        border-radius: 5px;
        color: #f2e6c8;
        background: rgba(182,159,112,.16);
        font-size: 11px;
        line-height: 22px;
        text-align: center;
    }
}
@media (max-width: 767px) {
    .document-envelope-filebar { align-items: flex-start; flex-direction: column; }
    .document-envelope-filebar__actions { flex-wrap: wrap; width: 100%; }
    .portal-filters { padding-right: 10px; padding-left: 10px; }
    .portal-filters-inner { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .portal-filters-inner::-webkit-scrollbar { display: none; }
    .portal-filters .dir-pill { flex: 0 0 auto; }
    .erp-shell .topnavbar .navbar-header { width: 74px; }
    .erp-shell .topnavbar .nav-wrapper { margin-left: 74px; }
    .erp-shell .topnavbar .erp-view-site-nav { display: none; }
    .erp-shell .aside { z-index: 1210; top: 68px; bottom: 0; width: min(86vw, 300px); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 18px 0 45px rgba(47,39,28,.28); }
    .erp-shell.aside-toggled .aside { transform: translateX(0); }
    .erp-aside-backdrop { position: fixed; z-index: 1205; inset: 68px 0 0; width: 100%; padding: 0; border: 0; background: rgba(23,32,51,.54); backdrop-filter: none; }
    .erp-shell .aside .aside-inner { width: 100%; }
    .erp-shell .sidebar { width: 100%; padding: 12px 10px 0; }
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav .nav,
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > .nav-heading,
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > a > span { display: block !important; }
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li { width: 100%; }
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > a,
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > .nav-item { padding: 8px 10px; text-align: left; text-indent: 0; }
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > a > em,
    .erp-shell.aside-collapsed .erp-sidebar-menu-scroll > .nav > li > .nav-item > em { width: 24px; font-size: 13px; }
    .erp-shell.aside-collapsed .erp-sidebar-user-info,
    .erp-shell.aside-collapsed .erp-sidebar-logout span { display: block; }
    .erp-shell.aside-collapsed .sidebar .erp-menu-search { display: block; }
    .erp-shell.aside-collapsed .erp-sidebar-profile { justify-content: flex-start; }
    .erp-shell.aside-collapsed .erp-sidebar-logout { justify-content: flex-start; padding: 6px 10px; }
    .erp-shell.aside-collapsed .sidebar li.sub-menu > a.menu-toggle:after { display: block; }
    .erp-shell .sidebar .nav > li > a,
    .erp-shell .sidebar .nav > li > .nav-item { min-height: 41px; padding: 8px 10px; font-size: var(--erp-sidebar-font-size, 13px) !important; }
    .erp-shell .sidebar .nav .nav > li > a { min-height: 35px; padding: 7px 8px; font-size: calc(var(--erp-sidebar-font-size, 13px) - 1px) !important; }
    .erp-shell .sidebar .sidebar-subnav.collapse,
    .erp-shell .sidebar .sidebar-subnav.collapsing { margin-left: 29px !important; }
    .erp-shell .sidebar .sidebar-subnav.collapse.in { margin: 4px 0 7px 29px !important; }
    .erp-shell .wrapper > section, .erp-shell footer { margin-left: 0; }
    .erp-shell .content-wrapper { padding: 20px 15px 36px; }
    .erp-shell .content-wrapper .panel-body,
    .erp-shell .content-wrapper .well,
    .erp-shell .content-wrapper .tab-content { padding: 16px; }
    .erp-shell .content-wrapper .form-horizontal .control-label { padding-top: 0; text-align: left; }
    .erp-shell .content-wrapper .table > thead > tr > th,
    .erp-shell .content-wrapper .table > tbody > tr > td { padding: 11px 10px; }
    .erp-shell .mailbox-attachments { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .erp-shell .btn-bottom-toolbar,
    .erp-shell.aside-collapsed .btn-bottom-toolbar { width: 100%; padding: 12px 15px; }
    .erp-shell .content-heading { align-items: flex-start; flex-direction: column; margin: -20px -15px 20px; padding: 15px; font-size: 19px; }
    .erp-shell .content-heading .pull-right { width: 100%; justify-content: space-between; }
    .erp-shell .content-heading small { display: none; }
    .erp-staff-profile { grid-template-columns: 1fr; }
    .erp-staff-profile__identity { padding: 18px; }
    .erp-staff-profile__photo,
    .erp-staff-profile__photo img { width: 96px; height: 96px; }
    .erp-staff-profile__content { padding: 18px 15px; }
    .erp-staff-profile__heading { align-items: flex-start; flex-direction: column; }
    .erp-staff-profile__details { grid-template-columns: 1fr; }
    .erp-staff-profile__details > div { grid-template-columns: 92px minmax(0,1fr); }
    .erp-staff-profile__actions { display: grid; grid-template-columns: 1fr; }
    .erp-staff-profile__actions .btn { width: 100%; text-align: left; }
    .portal-public .content-wrapper { padding-top: 25px; }
    .portal-nav__brand span { display: none; }
    .portal-nav__links a { display: none; }
    .portal-nav__links .portal-nav__login { display: block; }
    .portal-nav__links .portal-nav__account .portal-nav__login { display: inline-flex; margin-left: 0; padding: 9px 13px; }
    .portal-nav__account.open .portal-nav__account-menu { display: block; right: 0; left: auto; }
    .portal-nav__links .portal-nav__account-menu a { display: flex; }
    .portal-hero { padding: 28px 23px; }
    .staff-grid { grid-template-columns: 1fr; gap: 12px; }
    .staff-card { padding: 21px 16px; }
    .profile-shell { grid-template-columns: 1fr; }
    .erp-login-story { min-height: 360px; padding: 28px 24px; }
    .erp-login-copy { margin: 42px 0; }
    .erp-login-copy h1 { font-size: 39px; }
    .erp-login-copy p { font-size: 15px; }
    .erp-login-panel { padding: 28px 15px; }
    .erp-login-card { padding: 25px 21px; }
    .erp-login-actions--attendance { grid-template-columns: 1fr; }
    .erp-login-attendance { width: 100%; }
    .career-hero { min-height: 340px; margin: -25px -15px 0; }
    .career-hero__content { padding: 45px 20px 76px; }
    .career-search { margin: -42px 0 30px; padding: 18px 15px; }
    .career-search__heading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .career-search__fields { grid-template-columns: 1fr; }
    .career-results-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .career-grid, .kb-grid, .kb-shell { grid-template-columns: 1fr; }
    .portal-section-hero, .kb-hero { padding: 24px 20px; }
    .career-card__meta { grid-template-columns: 1fr; }
    .kb-shell__nav, .kb-shell__content { padding: 16px; }
    .erp-shell .mailbox-attachments { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .staff-card,
    .staff-card__link .fa,
    .career-card,
    .career-card__footer a .fa { transition: none; }
    .staff-card:hover,
    .staff-card:focus-within,
    .staff-card:hover .staff-card__link .fa,
    .staff-card:focus-within .staff-card__link .fa,
    .career-card:hover,
    .career-card:focus-within,
    .career-card:hover .career-card__footer a .fa { transform: none; }
}
@media print {
    .topnavbar-wrapper, .aside, footer, .content-heading { display: none !important; }
    .erp-shell .wrapper > section { margin: 0; padding: 0; }
    .erp-shell .content-wrapper { padding: 0; background: #fff; }
    .panel { box-shadow: none; }
}

/* Dashboard birthday corner */
.birthday-hub { margin: 22px 0 26px; overflow: hidden; border: 1px solid #e1d8c8; border-radius: 7px; background: #fff; box-shadow: 0 5px 18px rgba(49,38,22,.07); }
.birthday-hub__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; color: #fff; background: #57442d; }
.birthday-hub__eyebrow { display: block; margin-bottom: 5px; color: #e8cf92; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.birthday-hub__eyebrow .fa { margin-right: 5px; }
.birthday-hub__header h2 { margin: 0 0 5px; color: #fff; font-size: 24px; font-weight: 800; }
.birthday-hub__header p { margin: 0; color: #e8e0d5; font-size: 12px; }
.birthday-hub__spark { font-size: 34px; }
.birthday-today, .birthday-upcoming, .birthday-bucket { padding: 24px 26px; }
.birthday-upcoming, .birthday-bucket { border-top: 1px solid #e6e8eb; }
.birthday-section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.birthday-section-title span { color: #9a7838; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.birthday-section-title h3 { margin: 3px 0 0; color: #263244; font-size: 18px; font-weight: 800; }
.birthday-section-title .birthday-live { padding: 5px 9px; border: 1px solid #d9ead7; border-radius: 99px; color: #3e6b3d; background: #f2f8f1; font-size: 9px; letter-spacing: .05em; }
.birthday-live .fa { margin-right: 4px; color: #69a45f; font-size: 7px; }
.birthday-today__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.birthday-person { padding: 18px; border: 1px solid #dfd6c8; border-left: 3px solid #b58a38; border-radius: 5px; background: #fffdfa; }
.birthday-person__profile { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 13px; position: relative; align-items: center; }
.birthday-person__profile > img { width: 62px; height: 62px; border: 3px solid #f0e5ce; border-radius: 50%; object-fit: cover; }
.birthday-person__cake { position: absolute; top: -4px; left: 44px; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #997b3d; font-size: 10px; line-height: 24px; text-align: center; box-shadow: 0 2px 6px rgba(49,38,22,.18); }
.birthday-person h4 { margin: 0 0 3px; color: #263244; font-size: 15px; font-weight: 800; }
.birthday-person__profile p { margin: 0 0 5px; color: #6d7888; font-size: 11px; }
.birthday-person__profile small { color: #8b6732; font-size: 10px; font-weight: 700; }
.birthday-person__profile small .fa { color: #a94b59; }
.birthday-wish-form { margin-top: 15px; padding-top: 14px; border-top: 1px solid #e9e2d7; }
.birthday-wish-form label { display: block; margin-bottom: 6px; color: #4a5565; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.birthday-wish-form__row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.birthday-wish-form textarea { width: 100%; min-height: 42px; max-height: 90px; padding: 10px 11px; resize: vertical; border: 1px solid #d7dce3; border-radius: 4px; color: #344257; background: #fff; font-size: 11px; line-height: 1.45; }
.birthday-wish-form textarea:focus { outline: 0; border-color: #997b3d; box-shadow: 0 0 0 2px rgba(153,123,61,.12); }
.birthday-wish-form .btn { min-height: 42px; margin: 0; padding: 8px 13px; border-color: #57442d; background: #57442d; font-size: 10px; }
.birthday-wish-form > small { display: block; margin-top: 6px; color: #8a929e; font-size: 9px; }
.birthday-person__self { display: grid; gap: 3px; margin-top: 15px; padding: 12px 13px; border-radius: 4px; color: #5b492e; background: #f5edda; font-size: 11px; }
.birthday-upcoming__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.birthday-upcoming-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid #e0e4e9; border-radius: 5px; background: #fff; }
.birthday-upcoming-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.birthday-upcoming-card strong, .birthday-upcoming-card span { display: block; }
.birthday-upcoming-card > div strong { overflow: hidden; color: #344257; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.birthday-upcoming-card > div span { overflow: hidden; margin-top: 3px; color: #7b8593; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.birthday-upcoming-card time { padding-left: 9px; border-left: 1px solid #e3e6ea; text-align: right; }
.birthday-upcoming-card time strong { color: #745a2f; font-size: 10px; }
.birthday-upcoming-card time span { margin-top: 2px; color: #9299a3; font-size: 8px; }
.birthday-bucket { background: #faf8f3; }
.birthday-bucket__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.birthday-bucket__icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 5px; color: #fff; background: #997b3d; font-size: 19px; line-height: 46px; text-align: center; }
.birthday-bucket__top span { color: #8f7137; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.birthday-bucket__top h3 { margin: 2px 0 2px; font-size: 18px; font-weight: 800; }
.birthday-bucket__top p { margin: 0; color: #758092; font-size: 11px; }
.birthday-bucket__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.birthday-bucket__empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 5px; padding: 25px; border: 1px dashed #d7cbb7; border-radius: 5px; color: #7c6950; background: rgba(255,255,255,.7); text-align: center; }
.birthday-bucket__empty .fa { margin-bottom: 4px; color: #a98643; font-size: 25px; }
.birthday-bucket__empty strong { color: #4e402d; font-size: 12px; }
.birthday-bucket__empty span { font-size: 10px; }
.birthday-wish-note { position: relative; min-height: 150px; padding: 15px; overflow: hidden; border: 1px solid #e0d6c4; border-radius: 5px; background: #fff; box-shadow: 0 3px 8px rgba(49,38,22,.04); }
.birthday-wish-note__sender { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.birthday-wish-note__sender img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.birthday-wish-note__sender strong, .birthday-wish-note__sender span { display: block; }
.birthday-wish-note__sender strong { color: #3d4858; font-size: 10px; }
.birthday-wish-note__sender span { margin-top: 2px; color: #969da7; font-size: 8px; }
.birthday-wish-note p { position: relative; z-index: 1; margin: 0; color: #596577; font-size: 11px; font-style: italic; line-height: 1.6; }
.birthday-wish-note__heart { position: absolute; right: 10px; bottom: 6px; color: #f1e4e6; font-size: 25px; }
.birthday-celebration-modal .modal-dialog { max-width: 510px; margin-top: 10vh; }
.birthday-celebration-modal .modal-content { overflow: hidden; border: 0; border-radius: 7px; box-shadow: 0 24px 60px rgba(28,21,14,.3); }
.birthday-celebration-modal .modal-body { padding: 40px 42px 35px; text-align: center; }
.birthday-modal-close { position: absolute; z-index: 4; top: 11px; right: 14px; color: #59452d; opacity: .65; }
.birthday-modal-cake { display: inline-block; width: 62px; height: 62px; margin-bottom: 15px; border-radius: 50%; color: #fff; background: #997b3d; font-size: 25px; line-height: 62px; box-shadow: 0 7px 18px rgba(118,83,36,.2); }
.birthday-celebration-modal h2 { margin: 4px 0 10px; color: #2a3443; font-size: 27px; font-weight: 800; }
.birthday-celebration-modal p { max-width: 400px; margin: 0 auto 21px; color: #6d7785; font-size: 13px; line-height: 1.65; }
.birthday-celebration-modal .btn-primary { min-height: 41px; border-color: #57442d; background: #57442d; font-size: 11px; font-weight: 750; }
.birthday-celebration-modal .btn-link { display: block; margin: 5px auto 0; color: #7f8791; font-size: 10px; }
.birthday-modal-confetti span { position: absolute; width: 7px; height: 16px; border-radius: 2px; background: #d6a73f; transform: rotate(25deg); }
.birthday-modal-confetti span:nth-child(1) { top: 28px; left: 42px; }
.birthday-modal-confetti span:nth-child(2) { top: 75px; left: 78px; height: 9px; background: #7da66e; transform: rotate(-34deg); }
.birthday-modal-confetti span:nth-child(3) { top: 34px; right: 48px; background: #9a5360; transform: rotate(45deg); }
.birthday-modal-confetti span:nth-child(4) { top: 92px; right: 84px; height: 9px; background: #588c9e; transform: rotate(-20deg); }
.birthday-modal-confetti span:nth-child(5) { top: 23px; left: 50%; height: 8px; background: #729357; transform: rotate(70deg); }
@media (max-width: 1100px) {
    .birthday-upcoming__grid, .birthday-bucket__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .birthday-hub__header, .birthday-today, .birthday-upcoming, .birthday-bucket { padding-right: 17px; padding-left: 17px; }
    .birthday-today__grid, .birthday-upcoming__grid, .birthday-bucket__grid { grid-template-columns: 1fr; }
    .birthday-wish-form__row { grid-template-columns: 1fr; }
    .birthday-wish-form .btn { width: 100%; }
    .birthday-celebration-modal .modal-dialog { margin: 18px 12px; }
    .birthday-celebration-modal .modal-body { padding: 36px 22px 28px; }
}

/* Give the first (Dashboard) menu item breathing room below the menu search. */
.erp-shell .erp-sidebar-menu-scroll > .nav:first-of-type {
    padding-top: 6px;
}

/* Public staff directory design switch */
.staff-grid--showcase { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 18px; }
.staff-card--showcase { padding: 0; overflow: hidden; border: 0; border-bottom: 2px solid transparent; border-radius: 2px; background: #fff; box-shadow: none; }
.staff-card--showcase:hover,
.staff-card--showcase:focus-within { border-color: var(--portal-accent); background: #fff; box-shadow: 0 10px 22px rgba(49,38,22,.1); transform: translateY(-4px); }
.staff-card--showcase > a { align-items: stretch; }
.staff-card--showcase .staff-card__portrait { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 4.6; background: #f1f1ef; }
.staff-card--showcase .staff-card__portrait img { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: cover; object-position: center top; transition: transform .22s ease; }
.staff-card--showcase:hover .staff-card__portrait img,
.staff-card--showcase:focus-within .staff-card__portrait img { transform: scale(1.025); }
.staff-card--showcase .staff-card__body { display: flex; flex: 1; flex-direction: column; align-items: center; min-height: 142px; padding: 18px 12px 16px; text-align: center; }
.staff-card--showcase h3 { margin: 0 0 9px; color: #4d3d2a; font-size: 17px; font-weight: 800; line-height: 1.32; }
.staff-card__designation-tag { display: inline-block; margin: 0 0 8px; padding: 5px 9px; border-radius: 3px; color: #17210e; background: #8fcf38; font-size: 11px; font-weight: 800; line-height: 1.2; }
.staff-card--academic:nth-child(3n+2) .staff-card__designation-tag { background: #d3a33e; }
.staff-card--academic:nth-child(3n) .staff-card__designation-tag { color: #fff; background: #b24c22; }
.staff-card--showcase .staff-card__department,
.staff-card--showcase .staff-card__role { min-height: 0; margin: 0 0 5px; color: #222; font-size: 12px; font-weight: 700; line-height: 1.45; }
.staff-card--showcase .staff-card__role { color: var(--portal-text-muted); font-weight: 600; }
.staff-card--showcase .staff-card__link { margin-top: 12px; padding-top: 0; color: #9a7d3d; text-decoration: underline; text-underline-offset: 2px; }
.staff-grid--classic .staff-card__portrait img { width: 66px; height: 66px; }
.staff-grid--classic .staff-card__body { display: flex; flex: 1; flex-direction: column; align-items: center; }
.staff-grid--classic .staff-card__department { margin: 0 0 12px; color: var(--portal-text-muted); font-size: 11.5px; }

/* Theme setting preview control */
.directory-style-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.directory-style-option { position: relative; min-height: 116px; margin: 0; padding: 14px 14px 12px 92px; border: 1px solid #d9dee6; border-radius: 5px; background: #fff; cursor: pointer; }
.directory-style-option:hover,
.directory-style-option.is-selected { border-color: #997b3d; background: #fbf9f4; }
.directory-style-option input { position: absolute; top: 10px; right: 10px; }
.directory-style-option > strong,
.directory-style-option > small { display: block; }
.directory-style-option > strong { margin: 4px 0 4px; color: #253247; font-size: 13px; }
.directory-style-option > small { color: #6b7280; font-size: 10px; font-weight: 500; line-height: 1.45; }
.directory-style-option__preview { position: absolute; top: 14px; left: 14px; display: block; width: 64px; height: 84px; border: 1px solid #d9d2c6; background: #fff; }
.directory-style-option__preview i { display: block; width: 100%; height: 49px; background: #d8d4cc; }
.directory-style-option__preview b,
.directory-style-option__preview small { display: block; height: 4px; margin: 7px 8px 0; background: #57442d; }
.directory-style-option__preview small { width: 62%; margin-top: 5px; background: #9a7d3d; }
.directory-style-option__preview--classic { border-radius: 5px; }
.directory-style-option__preview--classic i { width: 32px; height: 32px; margin: 9px auto 0; border-radius: 3px; }

@media (max-width: 1100px) {
    .staff-grid--showcase { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 850px) {
    .staff-grid--showcase { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .staff-grid--showcase { grid-template-columns: 1fr; gap: 18px; }
    .staff-card--showcase .staff-card__portrait { aspect-ratio: 4 / 4.25; }
    .directory-style-switch { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .staff-card--showcase,
    .staff-card--showcase .staff-card__portrait img { transition: none; }
    .staff-card--showcase:hover,
    .staff-card--showcase:focus-within,
    .staff-card--showcase:hover .staff-card__portrait img,
    .staff-card--showcase:focus-within .staff-card__portrait img { transform: none; }
}

.profile-staff-id { display: inline-block; margin: 0 0 8px; padding: 4px 8px; border: 1px solid #ded6c7; color: #765e2f !important; background: #faf8f3; font-size: 11px !important; font-weight: 750; }
.profile-link-list { display: flex; flex-wrap: wrap; gap: 9px; }
.profile-link-list a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--portal-border); border-radius: 4px; font-size: 12px; font-weight: 700; }
.profile-records { border-top: 1px solid var(--portal-border); }
.profile-records > div { padding: 13px 2px; border-bottom: 1px solid var(--portal-border); }
.profile-records strong,
.profile-records span { display: block; }
.profile-records strong { color: #263244; font-size: 13px; }
.profile-records span { margin-top: 3px; color: var(--portal-text-muted); font-size: 11px; }
.profile-records p { margin: 7px 0 0; color: var(--portal-text-muted); font-size: 12px; }
.profile-cv { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding: 28px 30px !important; }
.profile-cv h2 { margin: 0 !important; }
.profile-cv .btn { margin: 0; }
.profile-visibility-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; max-width: 850px; margin-top: 18px; }
.profile-visibility-option { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid #dce1e7; border-radius: 4px; background: #fff; cursor: pointer; }
.profile-visibility-option:hover { border-color: #b69f70; background: #fbfaf7; }
.profile-visibility-option input { position: absolute; opacity: 0; }
.profile-visibility-option > span { display: inline-flex; flex: 0 0 22px; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid #cbd3dd; border-radius: 3px; color: transparent; background: #fff; }
.profile-visibility-option input:checked + span { border-color: #57442d; color: #fff; background: #57442d; }
.profile-visibility-option input:focus-visible + span { outline: 2px solid #997b3d; outline-offset: 2px; }
.profile-visibility-option strong { color: #334155; font-size: 12px; }
.erp-shell .profile-form-actions {
    clear: both;
    margin: 24px 0 0;
    padding: 18px 0 2px;
    border-top: 1px solid var(--erp-line);
}
@media (max-width: 767px) {
    .erp-shell .profile-form-actions {
        margin-top: 20px;
        padding-top: 16px;
    }
    .erp-shell .profile-form-actions .btn {
        width: 100%;
    }
}
.erp-shell a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; text-decoration: none; }
.erp-shell a.btn > .fa { margin-right: 0; }
.erp-shell #staff-organisation-fields { margin: 20px 0; padding: 20px 0 8px; border-top: 1px solid var(--erp-line); border-bottom: 1px solid var(--erp-line); background: #fbfcfd; }
.erp-shell #staff-organisation-fields .help-block { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }
.erp-shell .table td:last-child .btn { margin: 2px; }
.erp-shell .panel > .table { margin-bottom: 0; }
.erp-impersonation-return { position: fixed; right: 18px; bottom: 18px; z-index: 1055; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 14px; border: 1px solid #d8c38e; border-radius: 7px; color: #3e321f; background: #fff8df; box-shadow: 0 8px 24px rgba(30,24,16,.18); }
.erp-impersonation-return > span { font-size: 11px; font-weight: 700; }
.erp-impersonation-return .btn { margin: 0; }
@media (max-width: 767px) {
    .profile-visibility-grid { grid-template-columns: 1fr; }
    .erp-impersonation-return { right: 10px; bottom: 10px; left: 10px; justify-content: space-between; }
}

/* Public portal mobile shell -------------------------------------------------
   Shared by the directory, staff profiles, careers, knowledgebase and CMS
   pages. Keep phone layouts compact without turning desktop cards into giant
   single-column posters. */
.portal-nav__mobile-actions,
.dir-mobile-filter-toggle { display: none; }

@media (max-width: 767px) {
    body.portal-mobile-nav-open { overflow: hidden; }
    .portal-public { overflow-x: hidden; }
    .portal-public img { max-width: 100%; }
    .portal-public .wrapper > section { padding-top: 64px; }
    .portal-public .content-wrapper { min-height: calc(100vh - 64px); padding-top: 0 !important; }

    .portal-nav { height: 64px; border-bottom-width: 2px; }
    .portal-nav__inner { gap: 10px; padding: 0 12px; }
    .portal-nav__brand { min-width: 0; }
    .portal-nav__brand img { width: auto; max-width: 165px; height: 38px; }
    .portal-nav__inner { position: relative; }
    .portal-nav__mobile-actions { position: absolute; top: 14px; right: 12px; display: flex; align-items: center; gap: 7px; }
    .portal-nav__mobile-account,
    .portal-nav__mobile-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid var(--portal-border); border-radius: 4px; }
    .portal-nav__mobile-account { gap: 6px; padding: 7px 10px; color: #fff; background: var(--portal-primary); font-size: 11.5px; font-weight: 750; }
    .portal-nav__mobile-account:hover,
    .portal-nav__mobile-account:focus { color: #fff; background: var(--portal-primary-dark); }
    .portal-nav__mobile-toggle { width: 38px; padding: 0; color: var(--portal-text-dark); background: #fff; font-size: 16px; }

    .portal-nav__links { position: fixed; z-index: 1199; inset: 64px 0 auto; display: none; max-height: calc(100vh - 64px); padding: 8px 12px 18px; overflow-y: auto; border-bottom: 3px solid var(--portal-primary); background: #fff; box-shadow: 0 16px 30px rgba(31,24,16,.16); }
    .portal-nav__links.is-mobile-open { display: block; }
    .portal-nav__links > a,
    .portal-nav__links > .portal-nav__dd > a { display: flex !important; align-items: center; justify-content: space-between; min-height: 43px; padding: 10px 8px; border: 0 !important; border-bottom: 1px solid #eee9e1 !important; font-size: 13px; }
    .portal-nav__links > .portal-nav__login,
    .portal-nav__links > .portal-nav__account > .portal-nav__login { display: none !important; }
    .portal-nav__dd { width: 100%; }
    .portal-nav__dd-panel,
    .portal-nav__account .portal-nav__account-menu { position: static; width: 100%; min-width: 0; margin: 0; padding: 4px 0 6px 10px; border: 0; border-bottom: 1px solid #eee9e1; box-shadow: none; }
    .portal-nav__account .portal-nav__account-menu { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; padding: 8px 0; }
    .portal-nav__account-menu a,
    .portal-nav__dd-panel a { min-height: 38px; padding: 8px 10px; border: 0; border-radius: 3px; background: #faf8f5; font-size: 11.5px; }
    .portal-nav__account-menu .portal-nav__account-logout { margin: 0; border: 0; }
    .fac-mega { max-width: none; min-width: 0; }
    .fac-mega-body { display: block; min-height: 0; }
    .fac-mega-left { width: 100%; min-width: 0; max-height: 285px; padding: 3px 0; border: 0; }
    .fac-mega-row { min-height: 39px; padding: 8px 10px; font-size: 11.5px; }
    .fac-mega-right { display: none; }
    .fac-mega-footer { padding: 8px 10px; }

    .portal-hero { padding: 25px 14px 26px; background-position: center 58%; }
    .portal-hero__eyebrow { padding-bottom: 5px; font-size: 9px; }
    .portal-hero h1 { margin: 10px 0 5px; font-size: 26px; line-height: 1.15; }
    .portal-hero p { margin-bottom: 15px; font-size: 12.5px; line-height: 1.5; }
    .portal-hero__search input { height: 44px; padding-right: 10px; padding-left: 12px; font-size: 12px; text-overflow: ellipsis; }
    .portal-hero__search button { width: 46px; height: 44px; padding: 0; }
    .portal-hero__search button span { display: none; }

    .portal-filters { padding: 0 var(--portal-mobile-gutter); }
    .portal-filters .dir-pill { min-height: 45px; padding: 11px 10px; font-size: 11px; white-space: nowrap; }
    .portal-body {
        width: 100%;
        margin-top: 14px;
        padding-right: var(--portal-mobile-gutter);
        padding-left: var(--portal-mobile-gutter);
    }
    .portal-body-grid { gap: 0; }
    body.directory-filter-open { overflow: hidden; }
    .dir-sidebar-column { min-height: 0; }
    .dir-mobile-filter-toggle { position: fixed; right: 14px; bottom: 16px; z-index: 1290; display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 42px; padding: 9px 15px; border: 1px solid #fff; border-radius: 22px; color: #fff; background: var(--portal-primary); box-shadow: 0 7px 20px rgba(49,25,31,.28); font-size: 11.5px; font-weight: 750; text-align: left; }
    .dir-mobile-filter-toggle span .fa { margin-right: 6px; color: var(--portal-accent-light); }
    .dir-mobile-filter-backdrop { position: fixed; z-index: 1300; inset: 0; display: none; width: 100%; padding: 0; border: 0; background: rgba(24,20,16,.52); }
    .dir-mobile-filter-backdrop.is-open { display: block; }
    .dir-mobile-filter-panel { position: fixed; z-index: 1301; right: 12px; bottom: 12px; left: 12px; display: none; max-height: min(76vh, 620px); padding: 0; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 18px 50px rgba(24,20,16,.28); }
    .dir-mobile-filter-panel.is-open { display: flex; flex-direction: column; }
    .dir-mobile-filter-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-height: 50px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--portal-border); color: var(--portal-text-dark); background: #fff; font-size: 12px; }
    .dir-mobile-filter-head strong .fa { margin-right: 7px; color: var(--portal-primary); }
    .dir-mobile-filter-close { width: 34px; height: 34px; padding: 0; border: 1px solid var(--portal-border); border-radius: 4px; color: var(--portal-text-body); background: #fff; }
    .dir-mobile-filter-panel .dir-sidebar-card { flex: 1 1 auto; max-height: none; overflow-y: auto; border: 0; border-top: 0; }
    .dir-mobile-filter-panel .dir-sidebar-head { display: none; }
    .dir-sidebar-head { padding: 9px 12px; }
    .dir-fac-link { min-height: 40px; padding: 8px 12px; font-size: 11.5px; }
    .dir-dept-link { padding: 8px 12px 8px 33px; font-size: 11px; }

    .staff-grid,
    .staff-grid--showcase { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px 9px; }
    .staff-card,
    .staff-card--showcase { min-width: 0; padding: 0; }
    .staff-card--showcase .staff-card__portrait { aspect-ratio: 1 / 1.08; }
    .staff-card--showcase .staff-card__body { min-height: 122px; padding: 12px 7px 11px; }
    .staff-card--showcase h3 { margin-bottom: 6px; font-size: 13px; line-height: 1.25; }
    .staff-card__designation-tag { margin-bottom: 6px; padding: 4px 6px; font-size: 9px; }
    .staff-card--showcase .staff-card__department,
    .staff-card--showcase .staff-card__role { margin-bottom: 3px; font-size: 10px; line-height: 1.35; }
    .staff-card--showcase .staff-card__link { margin-top: 8px; font-size: 10px; }

    .profile-hero { padding: 18px 14px 38px; }
    .profile-shell-wrap {
        width: 100%;
        margin-top: 0;
        padding: 18px var(--portal-mobile-gutter) 28px;
    }
    .profile-shell { gap: 0; }
    .profile-aside { padding: 19px 14px; }
    .profile-aside > img { width: 122px; height: 138px; }
    .profile-aside h1 { margin-top: 12px; font-size: 17px; }
    .profile-main { padding: 18px 15px; }
    .profile-section { padding: 19px 0; }
    .profile-contact-actions { gap: 6px; }
    .profile-contact-btn { min-height: 34px; padding: 6px 9px; font-size: 10.5px; }
    .profile-link-list a { font-size: 10.5px; }
    .profile-cv { align-items: flex-start; flex-direction: column; padding: 20px 16px !important; }
    .profile-cv .btn { min-height: 38px; padding: 8px 12px; }

    .portal-public .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .portal-public input,
    .portal-public select,
    .portal-public textarea { max-width: 100%; }
    .portal-section-hero,
    .kb-hero { margin-bottom: 18px; padding: 21px 16px; }
    .portal-section-hero h1,
    .kb-hero h2 { font-size: 25px; }
    .career-hero { min-height: 275px; margin: 0 -15px; }
    .career-hero__content { padding: 34px 17px 58px; }
    .career-hero h1 { font-size: 31px; }
    .career-hero__content > p:last-child { font-size: 13px; line-height: 1.55; }
    .career-search {
        width: calc(100% - (var(--portal-mobile-gutter) * 2));
        margin: -34px auto 22px;
        padding: 15px 12px;
    }
    .career-results-heading,
    .career-grid,
    .career-detail-shell,
    .id-verify-page {
        width: calc(100% - (var(--portal-mobile-gutter) * 2));
        margin-right: auto;
        margin-left: auto;
    }
    .career-grid { padding: 0; }
    .career-results-heading { padding: 0; }
    .kb-home,
    .kb-article-page {
        width: 100%;
        padding-right: var(--portal-mobile-gutter);
        padding-left: var(--portal-mobile-gutter);
    }
    .portal-public .portal-section-hero { margin-right: 0; margin-left: 0; }

    .portal-public .wrapper > footer.portal-footer,
    .portal-footer { padding: 30px 16px 0; }
    .portal-footer__inner { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 18px; }
    .portal-footer__brand,
    .portal-footer__col:last-child { grid-column: 1 / -1; }
    .portal-footer__desc { max-width: none; font-size: 11.5px; }
    .portal-footer__col ul li { margin-bottom: 7px; }
    .portal-footer__col ul li a,
    .portal-footer__contact-item { font-size: 11.5px; }
    .portal-footer__bottom { margin-top: 24px; padding: 14px 0; font-size: 10px; }
}

@media (max-width: 350px) {
    .portal-nav__brand img { max-width: 145px; height: 34px; }
    .portal-nav__mobile-account span { display: none; }
    .portal-nav__mobile-account { width: 36px; padding: 0; }
    .staff-grid,
    .staff-grid--showcase { gap: 8px 6px; }
    .staff-card--showcase h3 { font-size: 12px; }
}

/* Responsive hardening ------------------------------------------------------
   These rules intentionally live last.  The legacy Angle/Bootstrap mobile
   rules above pre-date the public portal and can otherwise re-display desktop
   navigation or leave wide ERP widgets outside the viewport. */
@media (max-width: 767px) {
    /* Public header: one compact row, with account + menu controls only once. */
    .portal-public .portal-nav,
    .portal-public .portal-nav__inner { height: 64px !important; }
    .portal-public .portal-nav__inner {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 8px;
        width: 100%;
        padding: 0 12px !important;
    }
    .portal-public .portal-nav__brand { min-width: 0; overflow: hidden; }
    .portal-public .portal-nav__brand img {
        display: block;
        width: auto !important;
        max-width: 172px !important;
        height: 38px !important;
        object-fit: contain;
    }
    .portal-public .portal-nav__mobile-actions {
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        min-width: 78px;
    }
    .portal-public .portal-nav__mobile-account {
        display: inline-flex !important;
        width: auto;
        min-width: 0;
        height: 36px;
        min-height: 36px;
        gap: 5px;
        padding: 0 9px !important;
        font-size: 10.5px;
    }
    .portal-public .portal-nav__mobile-account span { display: inline !important; }
    .portal-public .portal-nav__mobile-toggle {
        display: inline-flex !important;
        width: 36px;
        min-width: 36px;
        height: 36px;
    }
    .portal-public #portal-public-nav {
        position: fixed !important;
        z-index: 1199;
        top: 64px !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        max-height: calc(100dvh - 64px);
        margin: 0 !important;
    }
    .portal-public #portal-public-nav:not(.is-mobile-open) { display: none !important; }
    .portal-public #portal-public-nav.is-mobile-open { display: block !important; }
    .portal-public #portal-public-nav > .portal-nav__account > .portal-nav__login,
    .portal-public #portal-public-nav > .portal-nav__login { display: none !important; }

    /* Directory filter is never part of the page height on a phone. */
    .portal-public .dir-sidebar-column {
        position: static !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .portal-public .dir-mobile-filter-toggle {
        position: fixed !important;
        right: 14px !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        z-index: 1290 !important;
    }
    .portal-public .dir-mobile-filter-panel {
        position: fixed !important;
        top: auto !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        left: 10px !important;
        width: auto !important;
        max-height: min(76dvh,620px) !important;
        margin: 0 !important;
    }
    .portal-public .dir-mobile-filter-panel:not(.is-open),
    .portal-public .dir-mobile-filter-backdrop:not(.is-open) { display: none !important; }
    .portal-public .dir-mobile-filter-panel.is-open { display: flex !important; }
    .portal-public .dir-mobile-filter-backdrop.is-open { display: block !important; }
    .portal-public .portal-body-grid { display: block !important; width: 100%; }
    .portal-public .staff-grid,
    .portal-public .staff-grid--showcase {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px 8px !important;
    }
    .portal-public .staff-card--showcase .staff-card__portrait { aspect-ratio: 1 / 1 !important; }
    .portal-public .staff-card__portrait img { max-height: none; }
    .portal-public .staff-card--showcase .staff-card__portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 18%;
    }
    .portal-public .staff-card--showcase .staff-card__body {
        min-height: 118px;
        padding: 11px 6px 10px;
    }
    .portal-public .staff-card--showcase h3 { font-size: 12px; }
    .portal-public .staff-card--showcase .staff-card__link { margin-top: 7px; }

    /* Admin/mobile shell: drawer navigation and viewport-safe content. */
    html,
    body.erp-shell,
    .erp-shell .wrapper,
    .erp-shell .wrapper > section,
    .erp-shell .content-wrapper { max-width: 100%; overflow-x: hidden; }
    .erp-shell .topnavbar-wrapper,
    .erp-shell .topnavbar { height: 64px !important; min-height: 64px !important; }
    .erp-shell .topnavbar .navbar-header { width: 174px !important; }
    .erp-shell .topnavbar .navbar-header {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 12;
        height: 64px !important;
    }
    .erp-shell .topnavbar .navbar-brand { width: 174px; height: 64px !important; padding: 13px 12px; }
    .erp-shell .topnavbar .brand-logo { display: none !important; }
    .erp-shell .topnavbar .brand-logo-collapsed { display: flex !important; align-items: center; height: 38px; padding: 0 !important; }
    .erp-shell .topnavbar .brand-logo-collapsed .erp-collapsed-brand-image { display: none !important; }
    .erp-shell .topnavbar .brand-logo-collapsed .erp-mobile-brand-image {
        display: block !important;
        width: auto !important;
        max-width: 150px !important;
        height: 36px !important;
        max-height: 36px;
        margin: 0;
        border-radius: 0 !important;
        object-fit: contain;
        object-position: left center;
    }
    .erp-shell .topnavbar .nav-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        left: 174px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px !important;
        margin-left: 0 !important;
        padding: 0 4px;
    }
    .erp-shell .topnavbar .nav-wrapper .nav.navbar-nav {
        display: flex;
        float: none !important;
        align-items: center;
        height: 64px;
        margin: 0;
    }
    .erp-shell .topnavbar .nav-wrapper .nav > li { position: relative; float: none; }
    .erp-shell .topnavbar .sidebar-toggle {
        position: static !important;
        top: auto;
        right: auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 64px;
    }
    .erp-shell .topnavbar .navbar-nav > li > a { min-width: 42px; height: 64px !important; padding: 21px 11px; text-align: center; }
    .erp-shell .topnavbar .navbar-right { display: flex; float: none !important; align-items: center; margin: 0 4px 0 auto; }
    .erp-shell .topnavbar .erp-view-site-nav,
    .erp-shell .topnavbar .erp-quick-create-nav,
    .erp-shell .topnavbar .erp-language-nav,
    .erp-shell .topnavbar .navbar-right > li > a[data-toggle-state="offsidebar-open"] { display: none !important; }
    .erp-shell .topnavbar .erp-public-site-nav { display: block !important; }
    .erp-shell .topnavbar .erp-public-site-nav .erp-view-site-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        min-width: 42px;
        height: 64px;
        padding: 0;
    }
    .erp-shell .topnavbar .erp-public-site-nav .erp-view-site-link > span { display: none !important; }
    .erp-shell .topnavbar .erp-public-site-nav .erp-view-site-link > .fa { margin: 0; color: #fff; font-size: 15px; }
    .erp-shell .topnavbar .user-menu > a { padding-right: 8px; padding-left: 8px; }
    .erp-shell .topnavbar .user-menu .user-image { width: 30px; height: 30px; margin: -4px 0 0; }
    .erp-shell .topnavbar .dropdown-menu { position: fixed; top: 62px; right: 8px; left: auto; max-width: calc(100vw - 16px); }
    .erp-shell .topnavbar .user-menu { position: static !important; }
    .erp-shell .topnavbar .user-menu.open::before {
        position: fixed;
        z-index: 1300;
        inset: 64px 0 0;
        content: "";
        background: rgba(15,23,42,.48);
    }
    .erp-shell .topnavbar .user-menu.open > .dropdown-menu {
        position: fixed !important;
        z-index: 1301;
        top: 72px !important;
        right: 12px !important;
        left: 12px !important;
        display: block;
        width: auto !important;
        max-width: 360px !important;
        max-height: calc(100dvh - 84px);
        margin: 0 auto !important;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid #d9dee6;
        border-radius: 7px;
        box-shadow: 0 18px 48px rgba(15,23,42,.28);
    }
    .erp-shell .topnavbar .user-menu .user-body { display: flex; }
    .erp-shell .topnavbar .user-menu .user-body > [class*="col-"] { flex: 1; width: auto; padding: 0 4px; }
    .erp-shell .topnavbar .user-menu .user-footer { gap: 8px; }
    .erp-shell .topnavbar .user-menu .user-footer .btn { margin: 0; }
    .erp-shell .navbar-form { left: 0; padding: 10px 12px; }
    .erp-shell .navbar-form .input-group,
    .erp-shell .navbar-form .form-control { width: 100%; }
    .erp-shell .wrapper > .aside,
    .erp-shell.aside-collapsed .wrapper > .aside,
    .erp-shell .wrapper > .aside > .aside-inner,
    .erp-shell.aside-collapsed .wrapper > .aside > .aside-inner {
        width: min(86vw,300px) !important;
        margin-left: 0 !important;
    }
    .erp-shell .wrapper > .aside,
    .erp-shell.aside-collapsed .wrapper > .aside,
    .erp-shell.csstransforms3d .wrapper > .aside,
    .erp-shell.csstransforms3d.aside-collapsed .wrapper > .aside {
        right: auto !important;
        left: 0 !important;
        visibility: hidden;
        pointer-events: none;
        top: 64px !important;
        transform: translate3d(-105%,0,0) !important;
    }
    .erp-shell.aside-toggled .wrapper > .aside,
    .erp-shell.aside-collapsed.aside-toggled .wrapper > .aside,
    .erp-shell.csstransforms3d.aside-toggled .wrapper > .aside,
    .erp-shell.csstransforms3d.aside-collapsed.aside-toggled .wrapper > .aside {
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0,0,0) !important;
    }
    .erp-shell .erp-aside-backdrop { inset: 64px 0 0 !important; }
    .erp-shell .wrapper > section,
    .erp-shell .wrapper > footer,
    .erp-shell.aside-toggled .wrapper > section,
    .erp-shell.aside-toggled .wrapper > footer,
    .erp-shell.aside-collapsed.aside-toggled .wrapper > section,
    .erp-shell.aside-collapsed.aside-toggled .wrapper > footer,
    .erp-shell.csstransforms3d.aside-toggled .wrapper > section,
    .erp-shell.csstransforms3d.aside-toggled .wrapper > footer,
    .erp-shell.csstransforms3d.aside-collapsed.aside-toggled .wrapper > section,
    .erp-shell.csstransforms3d.aside-collapsed.aside-toggled .wrapper > footer {
        margin-left: 0 !important;
        transform: translate3d(0,0,0) !important;
    }
    .erp-shell .wrapper > section {
        margin-top: 64px !important;
        padding-top: 0 !important;
    }
    .erp-shell .content-wrapper { padding: 14px 16px 84px !important; }
    .erp-shell .content-heading {
        min-height: 0;
        margin: -14px -16px 14px !important;
        padding: 13px 16px !important;
        font-size: 18px !important;
        line-height: 1.3;
    }
    .erp-shell .content-heading .pull-right { gap: 8px; margin-top: 8px; }
    .erp-shell .content-heading .erp-clock-action { min-height: 34px; margin: 0; padding: 7px 10px; }
    .erp-shell .content-wrapper .row { margin-right: -6px; margin-left: -6px; }
    .erp-shell .content-wrapper .row > [class*="col-"] { min-width: 0; padding-right: 6px; padding-left: 6px; }
    .erp-shell .offsidebar,
    .erp-shell.offsidebar-open .offsidebar {
        display: none !important;
        right: -235px !important;
        transform: translate3d(235px,0,0) !important;
    }
    .erp-shell.offsidebar-open { overflow-x: hidden; }
    .erp-shell .panel,
    .erp-shell .well,
    .erp-shell .tab-content,
    .erp-shell .box,
    .erp-shell fieldset { min-width: 0; max-width: 100%; }
    .erp-shell .content-wrapper .panel,
    .erp-shell .content-wrapper .tab-content { box-sizing: border-box; width: 100%; }
    .erp-shell .panel { margin-bottom: 14px; }
    .erp-shell .content-wrapper > .row { clear: both; }
    .erp-shell .content-wrapper .nav-tabs-custom {
        float: none !important;
        clear: both;
        width: 100% !important;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    .erp-shell .content-wrapper .nav-tabs-custom > .nav-tabs,
    .erp-shell .content-wrapper .nav-tabs-custom > .tab-content { width: 100%; max-width: 100%; }
    .erp-shell .content-wrapper > .row > .col-lg-12 > .mb-lg.pull-left,
    .erp-shell .content-wrapper > .row > .col-lg-12 > .mb-lg.pull-right {
        display: flex;
        float: none !important;
        clear: both;
        align-items: center;
        width: 100%;
        margin-bottom: 10px !important;
        flex-wrap: wrap;
        gap: 7px;
    }
    .erp-shell .content-wrapper [class*="col-sm-"].pull-left,
    .erp-shell .content-wrapper [class*="col-sm-"].pull-right,
    .erp-shell .content-wrapper [class*="col-md-"].pull-left,
    .erp-shell .content-wrapper [class*="col-md-"].pull-right,
    .erp-shell .content-wrapper [class*="col-lg-"].pull-left,
    .erp-shell .content-wrapper [class*="col-lg-"].pull-right {
        float: none !important;
        clear: both;
        width: 100% !important;
    }
    .erp-shell .panel-heading,
    .erp-shell .panel-body,
    .erp-shell .panel-footer,
    .erp-shell .well,
    .erp-shell .tab-content { padding: 12px !important; }
    .erp-shell .panel-heading,
    .erp-shell .panel-footer,
    .erp-shell .btn-toolbar,
    .erp-shell .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
    .erp-shell .panel-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }
    .erp-shell .panel-title > .pull-left,
    .erp-shell .panel-title > .pull-right { float: none !important; margin: 0; }
    .erp-shell .panel-heading .pull-right,
    .erp-shell .panel-footer .pull-right { float: none !important; margin-left: auto; }
    .erp-shell .nav-tabs { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .erp-shell .nav-tabs > li { flex: 0 0 auto; float: none; }
    .erp-shell .nav-tabs > li > a { padding: 9px 12px; white-space: nowrap; }
    .erp-shell .form-horizontal .form-group { margin-right: 0; margin-left: 0; }
    .erp-shell .form-horizontal [class*="col-"] { padding-right: 0; padding-left: 0; }
    .erp-shell .form-control,
    .erp-shell .select2-container,
    .erp-shell .bootstrap-select,
    .erp-shell .input-group { width: 100% !important; max-width: 100%; }
    .erp-shell textarea.form-control { min-height: 110px; }
    .erp-shell .table-responsive,
    .erp-shell .dataTables_wrapper { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .erp-shell .panel-body > table.table:not(.dataTable),
    .erp-shell .tab-content > table.table:not(.dataTable) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .erp-shell .dataTables_wrapper > .row { min-width: 0; margin-right: 0; margin-left: 0; }
    .erp-shell .dataTables_wrapper > .row > [class*="col-"] { width: 100%; padding: 5px 0; }
    .erp-shell .dataTables_length,
    .erp-shell .dataTables_filter,
    .erp-shell .dataTables_info,
    .erp-shell .dataTables_paginate { float: none !important; width: 100%; margin: 3px 0; text-align: left !important; }
    .erp-shell .dataTables_filter label { display: block; width: 100%; }
    .erp-shell .dataTables_filter input { width: 100% !important; max-width: none; margin: 6px 0 0 !important; }
    .erp-shell .dataTables_paginate { overflow-x: auto; white-space: nowrap; }
    .erp-shell .table { width: max-content; min-width: 100%; margin-bottom: 0; }
    .erp-shell .table th,
    .erp-shell .table td { max-width: 240px; white-space: normal; overflow-wrap: anywhere; }
    .erp-shell .table td:last-child { white-space: nowrap; }
    .erp-shell .table td:last-child .btn { margin: 2px 1px; }
    .erp-shell .content-wrapper .dropdown-menu { max-width: calc(100vw - 32px); }
    .erp-shell .content-wrapper .btn-with-tooltip-group + .nav-tabs-custom,
    .erp-shell .content-wrapper .filtered + .nav-tabs-custom { clear: both; }
    .erp-shell .dataTables_wrapper .custom-bulk-button,
    .erp-shell .dataTables_wrapper .btn,
    .erp-shell .dataTables_wrapper button { float: none !important; margin: 2px !important; }
    .erp-shell .dataTables_wrapper .btn-group { display: inline-flex; width: auto !important; }
    .erp-shell .modal-dialog { width: auto !important; max-width: none; margin: 10px; }
    .erp-shell .modal-header,
    .erp-shell .modal-body,
    .erp-shell .modal-footer { padding: 12px !important; }
    .erp-shell .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
    .erp-shell .modal-footer .btn { margin: 0 !important; }
    .erp-shell .note-toolbar,
    .erp-shell .mce-toolbar,
    .erp-shell .tox-toolbar__primary { max-width: 100%; overflow-x: auto; white-space: nowrap; }
    .erp-shell .fc-toolbar { display: flex; flex-wrap: wrap; gap: 7px; }
    .erp-shell .fc-toolbar .fc-left,
    .erp-shell .fc-toolbar .fc-center,
    .erp-shell .fc-toolbar .fc-right { float: none; margin: 0; }
    .erp-shell .fc-toolbar h2 { font-size: 16px; }
    .erp-shell .fc-view-container { max-width: 100%; overflow-x: auto; }
    .erp-shell .fc-view { min-width: 620px; }
    .erp-shell .mailbox-folders,
    .erp-shell .mailbox-content { width: 100% !important; margin: 0 0 12px !important; }
    .erp-shell .document-envelope-filebar__actions,
    .erp-shell .workflow-action-bar,
    .erp-shell .workflow-step-toolbar { max-width: 100%; }
    .erp-shell .fm-toolbar,
    .erp-shell .spreadsheet-toolbar { max-width: 100%; overflow-x: auto; white-space: nowrap; }
    .erp-shell canvas,
    .erp-shell svg,
    .erp-shell iframe { max-width: 100%; }
    .erp-shell .invoice-preview-inner,
    .erp-shell .preview-main.client-preview {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .erp-shell .invoice-preview-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .erp-shell .invoice-preview-inner .d-header-inner { padding: 18px !important; }
    .erp-shell .invoice-preview-inner .d-header-brand { width: 120px !important; max-width: 36%; }
    .erp-shell .invoice-preview-inner img { max-width: 100%; height: auto; }
    .erp-shell .btn-bottom-toolbar { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; overflow-x: auto; }

    /* Tasks: legacy left/right floats were squeezing the list into a narrow
       centre column on phones. Keep the switch, tabs, filter and table in one
       full-width flow. */
    .erp-shell .tasks-view-switch,
    .erp-shell .tasks-view-switch > .pull-left,
    .erp-shell .tasks-page-row,
    .erp-shell .tasks-page-row > [class*="col-"],
    .erp-shell .tasks-list-shell {
        float: none !important;
        clear: both;
        width: 100% !important;
        max-width: 100%;
    }
    .erp-shell .tasks-view-switch { margin: 0 0 10px !important; }
    .erp-shell .tasks-view-switch .btn { float: none !important; margin: 0 !important; }
    .erp-shell .tasks-page-row { position: relative; }
    .erp-shell .tasks-filter-menu { position: absolute; z-index: 20; top: 0; right: 6px; float: none !important; }
    .erp-shell .tasks-list-shell { padding-top: 48px; }
    .erp-shell .tasks-list-shell > .nav-tabs { width: calc(100% - 54px); }
    .erp-shell .tasks-list-shell > .tab-content,
    .erp-shell .tasks-list-shell .box,
    .erp-shell .tasks-list-shell .box-body,
    .erp-shell .tasks-list-shell .dataTables_wrapper { width: 100% !important; max-width: 100%; }
    .erp-shell .tasks-list-shell .dt-buttons,
    .erp-shell .tasks-list-shell .dataTables_buttons { display: flex; float: none !important; flex-wrap: wrap; gap: 5px; width: 100%; }
    .erp-shell .tasks-list-shell .dt-buttons .btn,
    .erp-shell .tasks-list-shell .dataTables_buttons .btn { float: none !important; margin: 0 !important; }
}

@media (max-width: 374px) {
    .portal-public { --portal-mobile-gutter: 12px; }
    .portal-public .portal-nav__brand img { max-width: 150px !important; height: 34px !important; }
    .portal-public .portal-nav__mobile-account { width: 36px; min-width: 36px; padding: 0 !important; }
    .portal-public .portal-nav__mobile-account span { display: none !important; }
    .portal-public .staff-grid,
    .portal-public .staff-grid--showcase {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 7px 6px !important;
    }
    .portal-public .staff-card--showcase .staff-card__body { min-height: 112px; padding: 9px 5px; }
    .portal-public .staff-card--showcase h3 { font-size: 11px; }
    .portal-public .staff-card--showcase .staff-card__department,
    .portal-public .staff-card--showcase .staff-card__role { font-size: 9px; }
    .portal-public .staff-card--showcase .staff-card__link { font-size: 9px; }
    .erp-shell .topnavbar .navbar-right > li:first-child { display: none; }
    .erp-shell .topnavbar .navbar-header,
    .erp-shell .topnavbar .navbar-brand { width: 148px !important; }
    .erp-shell .topnavbar .nav-wrapper { left: 148px; }
    .erp-shell .topnavbar .brand-logo-collapsed .erp-mobile-brand-image { max-width: 124px !important; }
}