:root {
    --primary-color: #2a4ba0;
    --primary-hover: #24428c;
    --primary-active: #1f3a7a;
    --primary-rgb: 42, 75, 160;
    --bg-color: #f8f9fa;
    --sidebar-bg: #ffffff;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --topbar-height: 70px;
    --text-color: #333333;
    --text-muted: #6c757d;
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --transition-speed: 0.3s;

    /* Table header row: soft blue-grey, as in Oracle Redwood / SAP Fiori lists. */
    --table-head-bg: #eef3f9;
    --table-head-hover-bg: #e3ebf5;
    --table-head-color: #3b4a5e;
    --table-head-border: #d5dfeb;
    --table-sort-icon: #9aa8ba;

    /* Wire Bootstrap's primary utilities (bg-primary, text-primary,
       border-primary) to the HRMS navy theme. Bootstrap is vendored as
       compiled CSS, so the variables are overridden here instead. */
    --bs-primary: #2a4ba0;
    --bs-primary-rgb: 42, 75, 160;
}

/* Bootstrap's .btn-primary / .btn-outline-primary hardcode their component
   colors in the compiled CSS, so the per-component variables are remapped
   to the navy theme here. */
.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-active);
    --bs-btn-active-border-color: var(--primary-active);
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-disabled-color: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}

/* Action buttons in listing tables match the navy theme:
   View (.btn-info) -> solid navy, Edit (.btn-warning) -> navy outline.
   Delete keeps Bootstrap's red (.btn-danger) as the destructive action. */
.btn-info {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--primary-active);
    --bs-btn-active-border-color: var(--primary-active);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}

.btn-warning {
    --bs-btn-color: var(--primary-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-disabled-color: var(--primary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    overflow-x: hidden;
}

/* Layout Wrapper */
#wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* Sidebar Styling */
#sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--text-color);
    transition: all var(--transition-speed);
    height: 100vh;
    position: fixed;
    z-index: 1000;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
}

#sidebar.active {
    margin-left: calc(-1 * var(--sidebar-width));
}

#sidebar .sidebar-header {
    padding: 20px;
    background: var(--sidebar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f1f1f1;
}

#sidebar .sidebar-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

#sidebar ul.components {
    padding: 20px 0;
}

#sidebar ul li a {
    padding: 12px 25px;
    font-size: 1.1rem;
    display: block;
    color: var(--text-color);
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
}

#sidebar ul li a i {
    margin-right: 15px;
    width: 20px;
    text-align: center;
}

#sidebar ul li a:hover {
    background: #f8f9fa;
    color: var(--primary-color);
}

#sidebar ul li.active > a {
    color: var(--primary-color);
    background: #f3f0ff;
    border-right: 4px solid var(--primary-color);
}

/* Page Content */
#content {
    width: 100%;
    padding-left: var(--sidebar-width);
    min-height: 100vh;
    transition: all var(--transition-speed);
}

#content.active {
    padding-left: 0;
}

/* Topbar Styling */
.topbar {
    height: var(--topbar-height);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: var(--card-shadow);
    position: sticky;
    top: 0;
    z-index: 999;
}

.topbar .left-content {
    display: flex;
    align-items: center;
}

.topbar .sidebar-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    margin-right: 20px;
}

.topbar .search-bar {
    position: relative;
    width: 400px;
}

.topbar .search-bar input {
    background: #f0f2f5;
    border: none;
    border-radius: 20px;
    padding: 8px 15px 8px 40px;
    width: 100%;
}

.topbar .search-bar i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.topbar .right-content {
    display: flex;
    align-items: center;
}

.topbar .nav-icons {
    display: flex;
    margin-right: 20px;
}

.topbar .nav-icons a {
    color: var(--text-muted);
    font-size: 1.2rem;
    margin: 0 10px;
    position: relative;
}

.topbar .nav-icons a .badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: #dc3545;
    font-size: 0.6rem;
}

.user-profile {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.user-profile img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

/* Dashboard work area (Oracle "work area" landing page)
   Infolets are summary tiles: one number, one label, and the whole tile links
   to the filtered list behind the number. */
.page-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.infolet {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.1rem 1.25rem;
    background: var(--sidebar-bg);
    border-radius: 0.5rem;
    border-top: 3px solid var(--primary-color);
    box-shadow: var(--card-shadow);
    color: var(--text-color);
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}

a.infolet:hover,
a.infolet:focus-visible {
    color: var(--text-color);
    box-shadow: 0 0.35rem 1rem rgba(var(--primary-rgb), 0.15);
    transform: translateY(-2px);
}

.infolet:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.infolet-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.infolet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.infolet-value {
    margin-top: 0.6rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.infolet-meta {
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.infolet-attention {
    border-top-color: #f59e0b;
}

.infolet-attention .infolet-icon {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

/* Work-area cards: compact header with a "View all" link on the right. */
.work-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.work-card .card-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.work-card a:not(.btn):not(.quick-action) {
    color: var(--primary-color);
}

.work-card .card-header a {
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.empty-state i {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    opacity: 0.5;
}

/* Stacked bar for a breakdown that always sums to a known total. */
.breakdown-bar {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: 5px;
    background: #e9ecef;
}

.breakdown-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.breakdown-legend li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.legend-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.45rem;
    border-radius: 50%;
}

.key-figure {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: border-color 0.15s, background-color 0.15s;
}

.quick-action:hover,
.quick-action:focus-visible {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.05);
    color: var(--primary-color);
}

.quick-action i {
    width: 1.25rem;
    text-align: center;
    color: var(--primary-color);
}

/* Page header shared by every screen (see core::components.page-header). */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
    font-weight: 600;
}

.page-header .breadcrumb {
    margin-bottom: 0.25rem;
    font-size: 0.82rem;
}

.page-header .breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.page-header .breadcrumb a:hover {
    color: var(--primary-color);
}

.page-header .form-select-sm {
    width: auto;
    padding-right: 2rem;
}

/* Filter panel above a list (Oracle "search region"). */
.filter-card .card-body {
    padding: 1rem 1.25rem;
}

.filter-card .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* --- DataTables -------------------------------------------------------------
   The table sits in a .work-card; the toolbar (page length + search) and the
   footer (info + paging) get card-like padding and the navy theme. */
.work-card .dt-container {
    padding: 0;
}

.work-card .dt-container > .row:first-child,
.work-card .dt-container > .dt-layout-row:first-child {
    margin: 0;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.work-card .dt-container > .row:last-child,
.work-card .dt-container > .dt-layout-row:last-child {
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.work-card .dt-container .dt-layout-table {
    margin: 0;
}

.work-card .dt-container .dt-layout-table > div {
    padding: 0;
}

div.dt-container .dt-search input {
    min-width: 240px;
    margin-left: 0;
    padding-left: 2rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 0.65rem center;
}

div.dt-container .dt-length select {
    width: auto;
    min-height: 32px;
    margin: 0 0.35rem;
    padding: 0.2rem 2rem 0.2rem 0.6rem;
}

div.dt-container .dt-info {
    padding-top: 0 !important;
    font-size: 0.85rem;
    color: var(--text-muted);
}

div.dt-container .pagination {
    margin: 0;
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-hover-color: var(--primary-hover);
    --bs-pagination-focus-color: var(--primary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
    --bs-pagination-font-size: 0.85rem;
}

/* Sortable headers: muted arrows, the active sort arrow in the theme colour. */
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover {
    outline: none;
    background-color: var(--table-head-hover-bg) !important;
}

table.dataTable thead > tr > th .dt-column-order::before,
table.dataTable thead > tr > th .dt-column-order::after {
    color: var(--table-sort-icon);
}

table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order::after {
    color: var(--primary-color);
    opacity: 1;
}

table.dataTable > tbody > tr.dt-empty-row > td,
table.dataTable td.dt-empty {
    padding: 2rem 1rem;
    color: var(--text-muted);
    text-align: center;
}

div.dt-processing {
    background: var(--sidebar-bg);
    border-radius: 0.5rem;
    box-shadow: var(--card-shadow);
}

/* Create / edit pages: centered, readable width; actions bottom-right. */
.form-page {
    max-width: 1100px;
}

.form-page-narrow {
    max-width: 640px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0.85rem 1.25rem;
}

/* Save bar that stays visible at the bottom of long editable grids. */
.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--sidebar-bg);
    border-radius: 0 0 0.5rem 0.5rem;
}

.sticky-actions-card {
    position: sticky;
    bottom: 1rem;
    z-index: 2;
}

/* Small avatar / initials circle used in employee columns. */
.avatar-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Read-only key/value facts on detail pages (Oracle "object page" header). */
.detail-list dt {
    font-weight: 500;
    color: var(--text-muted);
}

.detail-list dd {
    margin-bottom: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    #sidebar {
        margin-left: calc(-1 * var(--sidebar-width));
    }
    #sidebar.active {
        margin-left: 0;
    }
    #content {
        padding-left: 0;
    }
    #content.active {
        padding-left: var(--sidebar-width);
    }
    .topbar .search-bar {
        display: none;
    }
}

/* ==========================================================================
   Component normalization layer
   --------------------------------------------------------------------------
   Bootstrap is vendored as compiled CSS loaded BEFORE this file, so the rules
   below (same or higher specificity, later in the cascade) override Bootstrap's
   defaults to give every app the same look for tables, cards, forms and
   buttons — regardless of which utility classes a given template happens to use.
   ========================================================================== */

/* --- Listing tables --------------------------------------------------------
   Headers render in the soft --table-head-* colours everywhere (overrides
   table-dark / table-light / bare theads). Rows get uniform padding, middle alignment and a single hover
   style; striping is neutralized so all lists match. */
.table {
    margin-bottom: 0;
    border-color: #e9ecef;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.table thead th,
.table thead td,
.table-dark thead th,
.table-light thead th {
    background-color: var(--table-head-bg) !important;
    color: var(--table-head-color) !important;
    box-shadow: none !important;
    border-color: var(--table-head-border) !important;
    border-bottom-width: 1px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Two-row headers (e.g. leave balances): separate the rows with the same soft line. */
.table thead tr + tr th {
    border-top: 1px solid var(--table-head-border) !important;
}

/* Uniform row hover for every table, even those without .table-hover. */
.table > tbody > tr:hover > * {
    background-color: rgba(var(--primary-rgb), 0.06) !important;
    box-shadow: none !important;
}

/* Neutralize striping so striped tables (e.g. jobs admin) match the rest. */
.table-striped > tbody > tr > * {
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
    box-shadow: none !important;
}

/* --- Cards -----------------------------------------------------------------
   One soft shadow + rounded corners + no border on every card, regardless of
   shadow / shadow-sm / none in the markup. Semantic colored headers (bg-primary,
   bg-success, bg-danger) keep their color via Bootstrap's !important utilities. */
.card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: var(--card-shadow) !important;
}

.card-header {
    padding: 0.85rem 1.25rem;
    font-weight: 600;
}

/* --- Forms -----------------------------------------------------------------
   Uniform control sizing, radius and a navy focus ring everywhere. Combined
   with removing the per-page inline <style> blocks, every form now matches. */
.form-control,
.form-select {
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border-color: #d0d5dd;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
}

/* Keep the small variants (used in list filter bars) compact. */
.form-control-sm,
.form-select-sm {
    min-height: 32px;
    padding: 0.25rem 0.5rem;
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.35rem;
}

textarea.form-control {
    min-height: 90px;
}

/* Grouped form sections (used by the employee and job forms). */
fieldset legend {
    color: var(--primary-color);
}

/* Wide, centered form cards (employee / branch / job create-edit pages). */
.employee-form-card,
.job-form-card {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Buttons ---------------------------------------------------------------
   Uniform shape/sizing for every button. Color variants stay semantic
   (primary = navy, success = confirm, danger = destructive). */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.btn-sm {
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
}

.btn-lg {
    padding: 0.6rem 1.4rem;
}

/* Cancel/secondary buttons share one neutral look across forms. */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
}

/* ── Print styles ─────────────────────────────────────────────────────────── */
@media print {
    #sidebar,
    .topbar,
    .no-print,
    .pagination,
    .sidebar-toggle,
    form.row,
    form.mb-3 {
        display: none !important;
    }

    #content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    #wrapper {
        display: block !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
    }

    a.btn,
    button.btn {
        display: none !important;
    }
}

/* ============================================================
   Theme palette overrides
   html[data-theme="..."] has higher specificity than :root,
   so these vars win over the navy defaults above.
   navy is the :root default — no override block needed.
   ============================================================ */

html[data-theme="emerald"] {
    --primary-color: #059669;
    --primary-hover: #047857;
    --primary-active: #065f46;
    --primary-rgb: 5, 150, 105;
    --bs-primary: #059669;
    --bs-primary-rgb: 5, 150, 105;
}

html[data-theme="purple"] {
    --primary-color: #7c3aed;
    --primary-hover: #6d28d9;
    --primary-active: #5b21b6;
    --primary-rgb: 124, 58, 237;
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
}

html[data-theme="slate"] {
    --primary-color: #475569;
    --primary-hover: #334155;
    --primary-active: #1e293b;
    --primary-rgb: 71, 85, 105;
    --bs-primary: #475569;
    --bs-primary-rgb: 71, 85, 105;
}

html[data-theme="dark"] {
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --primary-active: #4338ca;
    --primary-rgb: 99, 102, 241;
    --bs-primary: #6366f1;
    --bs-primary-rgb: 99, 102, 241;
    --bg-color: #0f172a;
    --sidebar-bg: #1e293b;
    --text-color: #f1f5f9;
    --text-muted: #94a3b8;
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
    --table-head-bg: #243247;
    --table-head-hover-bg: #2c3c54;
    --table-head-color: #cbd5e1;
    --table-head-border: #334155;
    --table-sort-icon: #64748b;
}