/*
 * ERP professional theme overrides.
 *
 * This file intentionally layers on top of the existing Bootstrap/Gleek
 * stylesheet. It does not replace component markup or alter JavaScript hooks.
 */
:root {
    --erp-ink: #172033;
    --erp-muted: #667085;
    --erp-primary: #2563eb;
    --erp-primary-dark: #1d4ed8;
    --erp-surface: #ffffff;
    --erp-page: #f6f8fb;
    --erp-border: #e4e9f1;
    --erp-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

body {
    color: var(--erp-muted);
    background: var(--erp-page);
}

a { color: var(--erp-primary); }
a:hover, a:focus { color: var(--erp-primary-dark); }

.nav-header {
    background: #111827;
    box-shadow: 0 2px 14px rgba(15, 23, 42, .18);
}

.nav-header .brand-logo a span,
.nav-header .brand-logo a b,
.nav-header .brand-logo a i { color: #fff; }

/* Customer dashboard logos must fit the fixed navigation header in every
 * sidebar mode. The source image can be much larger than the header. */
.nav-header .brand-logo a img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 5rem;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}
.nav-header .brand-logo a {
    padding: 0;
}
.nav-header .brand-logo a .brand-title img,
.nav-header .brand-logo a .logo-compact img {
    width: 100%;
}
.nav-header .brand-logo a .logo-abbr img {
    width: 100%;
}

/* Override the theme's mini-menu padding and 25px image limit. */
body .nav-header .brand-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    padding: 0 !important;
}
body .nav-header .brand-logo a .brand-title {
    width: 100%;
}
body .nav-header .brand-logo a .logo-abbr,
body .nav-header .brand-logo a .logo-compact {
    width: 100%;
}
body .nav-header .brand-logo a .logo-abbr img,
body .nav-header .brand-logo a .logo-compact img {
    width: 100%;
    height: 5rem;
    max-width: 100%;
    object-fit: contain;
    background: #fff;
    margin: 0 auto !important;
}

.header {
    background: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
    box-shadow: 0 2px 12px rgba(31, 42, 68, .04);
}

.nk-sidebar {
    background: #fff;
    border-right: 1px solid var(--erp-border);
}

.nk-sidebar ul,
.nk-sidebar .metismenu { background: #fff; }
.nk-sidebar .metismenu>li { color: var(--erp-ink); }
.nk-sidebar .metismenu a,
.nk-sidebar .metismenu>li a>i { color: #52627a; }
.nk-sidebar .metismenu a:hover,
.nk-sidebar .metismenu a:active,
.nk-sidebar .metismenu a.active,
.nk-sidebar .metismenu>li:hover>a,
.nk-sidebar .metismenu>li.active>a {
    color: var(--erp-primary);
    background: #eff6ff;
}
.nk-sidebar .metismenu>li:hover i,
.nk-sidebar .metismenu>li:focus i,
.nk-sidebar .metismenu>li.active i,
.nk-sidebar .metismenu>li:hover span,
.nk-sidebar .metismenu>li:focus span,
.nk-sidebar .metismenu>li.active span { color: var(--erp-primary) !important; }

.content-body { background: var(--erp-page); min-height: calc(100vh - 5rem); }
.content-body .container-fluid { padding: 1.5rem 1.75rem; }

.card,
.panel,
.modal-content,
.dropdown-menu {
    border: 1px solid var(--erp-border);
    border-radius: .65rem;
    box-shadow: var(--erp-shadow);
}
.card-header,
.panel-heading { background: #fff; border-bottom: 1px solid var(--erp-border); }
.card-title, .panel-title, .page-heading, h1, h2, h3, h4, h5, h6 { color: var(--erp-ink); }

.form-control,
.custom-select,
.dataTables_wrapper select {
    color: var(--erp-ink);
    border-color: #d9e0ec;
    border-radius: .4rem;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);
}

.btn-primary, .bg-primary { background-color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--erp-primary-dark) !important; border-color: var(--erp-primary-dark) !important; }
.text-primary { color: var(--erp-primary) !important; }
.border-primary { border-color: var(--erp-primary) !important; }
.btn { border-radius: .4rem; font-weight: 500; }

.table thead th { color: #475467; background: #f8fafc; border-bottom-color: var(--erp-border); }
.table td, .table th { border-color: var(--erp-border); vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fbfcff; }
.table-hover tbody tr:hover { background-color: #f1f5ff; }

.breadcrumb { background: transparent; padding-left: 0; }
.alert { border: 0; border-radius: .5rem; }
.badge { font-weight: 500; }
.footer { background: #fff; border-top: 1px solid var(--erp-border); }
.footer .copyright { background: #fff; }

/* Consistent SaaS list controls for the existing DataTables integration. */
.dataTables_wrapper { padding-top: .25rem; color: var(--erp-muted); }
.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child { align-items: center; row-gap: .75rem; margin-bottom: .75rem; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { margin: 0; padding-top: 0; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap; }
.dataTables_wrapper .dataTables_filter { float: none; text-align: right; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { height: 2.25rem; margin: 0; padding: .375rem .75rem; color: var(--erp-ink); background: #fff; border: 1px solid #d8e0eb; border-radius: .4rem; box-shadow: none; }
.dataTables_wrapper .dataTables_filter input { width: min(100%, 15rem); }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: var(--erp-primary); outline: 0; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12); }
.dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 2.25rem; margin-left: .25rem; padding: .375rem .65rem; color: #475467 !important; background: #fff !important; border: 1px solid var(--erp-border) !important; border-radius: .35rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: #fff !important; background: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: #98a2b3 !important; background: #f8fafc !important; border-color: var(--erp-border) !important; }
.dataTables_wrapper .dataTables_info { color: #667085; }
.dataTables_wrapper .dataTables_processing { border: 1px solid var(--erp-border); border-radius: .5rem; }

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_filter { text-align: left; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; }
    .dataTables_wrapper .dataTables_paginate { text-align: left; }
    .dataTables_wrapper .dataTables_paginate .paginate_button { margin: .15rem; }
}

@media (max-width: 767px) {
    .dashboard-heading h1 { white-space: normal; }
    .content-body .container-fluid { padding: 1rem; }
    .content-body { min-height: calc(100vh - 4rem); }
}

/* Keep inline/vector action icons visible in existing data tables. */
.employee-action-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; }

/* Override the legacy settings.js color presets with the SaaS palette. */
body[data-nav-headerbg] .nav-header { background: #111827; }
body[data-headerbg] .header { background: #fff; border-bottom-color: var(--erp-border); }
body[data-sibebarbg] .nk-sidebar,
body[data-sibebarbg] .nk-sidebar ul,
body[data-sibebarbg] .nk-sidebar .metismenu { background: #fff; }
body[data-sibebarbg] .nk-sidebar { border-right: 1px solid var(--erp-border); }
body[data-sibebarbg] .nk-sidebar .metismenu a,
body[data-sibebarbg] .nk-sidebar .metismenu>li a>i { color: #52627a; }
body[data-sibebarbg] .nk-sidebar .metismenu a:hover,
body[data-sibebarbg] .nk-sidebar .metismenu a:focus,
body[data-sibebarbg] .nk-sidebar .metismenu a.active,
body[data-sibebarbg] .nk-sidebar .metismenu>li:hover>a,
body[data-sibebarbg] .nk-sidebar .metismenu>li.active>a {
    color: var(--erp-primary);
    background: #eff6ff;
}
body[data-sibebarbg] .nk-sidebar .metismenu>li:hover i,
body[data-sibebarbg] .nk-sidebar .metismenu>li:focus i,
body[data-sibebarbg] .nk-sidebar .metismenu>li.active i,
body[data-sibebarbg] .nk-sidebar .metismenu>li:hover span,
body[data-sibebarbg] .nk-sidebar .metismenu>li:focus span,
body[data-sibebarbg] .nk-sidebar .metismenu>li.active span { color: var(--erp-primary) !important; }
body[data-sibebarbg] .nk-sidebar .metismenu .nav-label>a {
    padding-top: 1.1rem;
    padding-bottom: .65rem;
    color: #98a2b3;
    background: transparent;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body[data-sibebarbg] .nk-sidebar .metismenu .nav-label>a:hover { color: var(--erp-primary); }

/* Dashboard-specific cleanup of legacy demo gradients and semantic row fills. */
.dashboard-header { margin-bottom: 1.75rem !important; padding: .25rem 0; }
.dashboard-heading h1 { margin: 0; color: var(--erp-ink) !important; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.dashboard-heading p { color: #98a2b3; font-size: .85rem; }
.dashboard-header .btn { padding: .65rem 1rem; border: 0; border-radius: .5rem; box-shadow: 0 6px 14px rgba(37, 99, 235, .2) !important; }
.dashboard-metrics > .row:first-child { margin-top: .25rem; margin-bottom: 1.75rem; }
.dashboard-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 0;
}
.dashboard-module-grid > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    display: flex;
    padding: 0;
}
.dashboard-module-grid > [class*="col-"]:not(:has(.card)) { display: none; }
.dashboard-module-grid > [class*="col-"] > .card {
    width: 100%;
    height: 100%;
    margin: 0;
}
.dashboard-last-login {
    grid-column: 1 / -1;
    margin: 0 !important;
}
.dashboard-page .gradient-1,
.dashboard-page .gradient-2,
.dashboard-page .gradient-3,
.dashboard-page .gradient-4 {
    position: relative;
    min-height: 9.5rem;
    background: linear-gradient(135deg, #eef5ff 0%, #ffffff 72%) !important;
    border: 1px solid var(--erp-border);
    border-top: 3px solid var(--erp-primary);
    box-shadow: var(--erp-shadow);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.dashboard-page .gradient-5,
.dashboard-page .gradient-9 {
    position: relative;
    min-height: 9.5rem;
    border: 1px solid var(--erp-border);
    border-top: 3px solid #ea580c;
    background: linear-gradient(135deg, #fff4ed 0%, #ffffff 72%) !important;
    box-shadow: var(--erp-shadow);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.dashboard-page .gradient-9 {
    border-top-color: #db2777;
    background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 72%) !important;
}
.dashboard-page .gradient-5::after,
.dashboard-page .gradient-9::after {
    content: '';
    position: absolute;
    right: -2.5rem;
    bottom: -3.5rem;
    width: 8rem;
    height: 8rem;
    border: 1px solid rgba(234, 88, 12, .12);
    border-radius: 50%;
    pointer-events: none;
}
.dashboard-page .gradient-9::after { border-color: rgba(219, 39, 119, .12); }
.dashboard-page .gradient-5:hover,
.dashboard-page .gradient-9:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}
.dashboard-page .gradient-5 .card-body,
.dashboard-page .gradient-9 .card-body { position: relative; padding: 1.35rem 1.4rem; }
.dashboard-page .gradient-5 .card-title,
.dashboard-page .gradient-9 .card-title {
    max-width: 75%;
    margin-bottom: .8rem;
    color: var(--erp-ink) !important;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.dashboard-page .gradient-5 .text-white,
.dashboard-page .gradient-9 .text-white { color: var(--erp-ink) !important; }
.dashboard-page .gradient-5 .display-5,
.dashboard-page .gradient-9 .display-5 {
    display: grid;
    width: 3.15rem;
    height: 3.15rem;
    place-items: center;
    margin-top: 1rem;
    border-radius: 50%;
    font-size: 1.35rem;
    opacity: 1;
}
.dashboard-page .gradient-5 .display-5 { color: #ea580c; background: #fff7ed; }
.dashboard-page .gradient-9 .display-5 { color: #db2777; background: #fdf2f8; }
.dashboard-page .gradient-2 { background: linear-gradient(135deg, #ecfcf8 0%, #ffffff 72%) !important; }
.dashboard-page .gradient-3 { background: linear-gradient(135deg, #fff8e8 0%, #ffffff 72%) !important; }
.dashboard-page .gradient-4 { background: linear-gradient(135deg, #f5f1ff 0%, #ffffff 72%) !important; }
.dashboard-page .gradient-1::after,
.dashboard-page .gradient-2::after,
.dashboard-page .gradient-3::after,
.dashboard-page .gradient-4::after { content: ''; position: absolute; right: -2.5rem; bottom: -3.5rem; width: 8rem; height: 8rem; border: 1px solid rgba(37, 99, 235, .08); border-radius: 50%; pointer-events: none; }
.dashboard-page .gradient-2::after { border-color: rgba(15, 159, 154, .1); }
.dashboard-page .gradient-3::after { border-color: rgba(217, 119, 6, .1); }
.dashboard-page .gradient-4::after { border-color: rgba(124, 58, 237, .1); }
.dashboard-page .gradient-1:hover,
.dashboard-page .gradient-2:hover,
.dashboard-page .gradient-3:hover,
.dashboard-page .gradient-4:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .1); }
.dashboard-page .gradient-1 .card-body,
.dashboard-page .gradient-2 .card-body,
.dashboard-page .gradient-3 .card-body,
.dashboard-page .gradient-4 .card-body { position: relative; padding: 1.35rem 1.4rem; }
.dashboard-page .gradient-1 .card-title,
.dashboard-page .gradient-2 .card-title,
.dashboard-page .gradient-3 .card-title,
.dashboard-page .gradient-4 .card-title { max-width: 75%; margin-bottom: .8rem; color: #667085 !important; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.dashboard-page .gradient-1 h2,
.dashboard-page .gradient-2 h2,
.dashboard-page .gradient-3 h2,
.dashboard-page .gradient-4 h2 { margin-bottom: .25rem; color: var(--erp-ink) !important; font-size: 2rem; font-weight: 700; }
.dashboard-page .gradient-1 p,
.dashboard-page .gradient-2 p,
.dashboard-page .gradient-3 p,
.dashboard-page .gradient-4 p { color: #98a2b3 !important; font-size: .75rem; }
.dashboard-page .gradient-1 .display-5,
.dashboard-page .gradient-2 .display-5,
.dashboard-page .gradient-3 .display-5,
.dashboard-page .gradient-4 .display-5 { display: grid; width: 3.15rem; height: 3.15rem; place-items: center; margin-top: 1rem; border-radius: 50%; font-size: 1.35rem; }
.dashboard-page .gradient-1 .display-5 { color: var(--erp-primary); background: #eff6ff; }
.dashboard-page .gradient-2 { border-top-color: #0f9f9a; }
.dashboard-page .gradient-2 .display-5 { color: #0f9f9a; background: #ecfdf5; }
.dashboard-page .gradient-3 { border-top-color: #d97706; }
.dashboard-page .gradient-3 .display-5 { color: #d97706; background: #fffbeb; }
.dashboard-page .gradient-4 { border-top-color: #7c3aed; }
.dashboard-page .gradient-4 .display-5 { color: #7c3aed; background: #f5f3ff; }
.dashboard-page .gradient-1 .text-white,
.dashboard-page .gradient-2 .text-white,
.dashboard-page .gradient-3 .text-white,
.dashboard-page .gradient-4 .text-white { color: var(--erp-ink) !important; }
.dashboard-page .gradient-1 .opacity-5,
.dashboard-page .gradient-2 .opacity-5,
.dashboard-page .gradient-3 .opacity-5,
.dashboard-page .gradient-4 .opacity-5 { color: #98a2b3; opacity: 1; }
.dashboard-notice-board { overflow: hidden; }
.dashboard-section-title { color: var(--erp-ink) !important; font-size: 1.25rem; font-weight: 700; }
.dashboard-notice-table { border-collapse: separate; border-spacing: 0; }
.dashboard-notice-table thead tr.bg-dark { background: #f8fafc !important; }
.dashboard-notice-table thead th { color: #475467; border-bottom: 1px solid var(--erp-border); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-notice-table.table-striped tbody tr:nth-of-type(odd),
.dashboard-notice-table tbody tr,
.dashboard-notice-table tbody tr.table-warning,
.dashboard-notice-table tbody tr.table-success,
.dashboard-notice-table tbody tr.table-info { background: #fff !important; }
.dashboard-notice-table.table-striped tbody tr:nth-of-type(odd)>td,
.dashboard-notice-table tbody tr.table-warning>td,
.dashboard-notice-table tbody tr.table-success>td,
.dashboard-notice-table tbody tr.table-info>td { background: #fff !important; }
.dashboard-notice-table tbody tr:hover { background: #f8fafc !important; }
.dashboard-notice-table tbody td { border-top: 1px solid #eef1f5; color: #52627a; }
.dashboard-notice-table .btn-success { background: #eef6ff; border-color: #dbeafe; color: var(--erp-primary); }
.dashboard-notice-table .btn-success:hover { background: var(--erp-primary); border-color: var(--erp-primary); color: #fff; }

/* Dashboard data lists use status classes for content; they must not color the whole row. */
.dashboard-page table.table-striped tbody tr:nth-of-type(odd),
.dashboard-page table tbody tr.table-success,
.dashboard-page table tbody tr.table-warning,
.dashboard-page table tbody tr.table-info,
.dashboard-page table tbody tr.table-danger,
.dashboard-page table tbody tr.table-primary { background: #fff !important; }
.dashboard-page table tbody tr.table-success>td,
.dashboard-page table tbody tr.table-warning>td,
.dashboard-page table tbody tr.table-info>td,
.dashboard-page table tbody tr.table-danger>td,
.dashboard-page table tbody tr.table-primary>td { background: #fff !important; }
.dashboard-page table tbody tr:hover,
.dashboard-page table.table-hover tbody tr:hover { background: #f8fafc !important; }
.dashboard-page table thead tr.bg-dark { background: #f8fafc !important; }
.dashboard-page table thead tr.bg-dark th,
.dashboard-page table thead tr.bg-dark td { color: #475467 !important; border-bottom: 1px solid var(--erp-border); }

/* Bootstrap 4 DataTables pagination: style the page links, not the wrapper items. */
.dataTables_wrapper.dt-bootstrap4 .dataTables_paginate { display: flex; justify-content: flex-end; }
.dataTables_wrapper.dt-bootstrap4 .dataTables_paginate ul.pagination { display: inline-flex; gap: .35rem; margin: 0; }
.dataTables_wrapper.dt-bootstrap4 .dataTables_paginate li.paginate_button.page-item { margin: 0; padding: 0; border: 0; background: transparent; }
.dataTables_wrapper.dt-bootstrap4 .dataTables_paginate li.paginate_button .page-link {
    min-width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .7rem;
    color: #475467;
    background: #fff;
    border: 1px solid var(--erp-border);
    border-radius: .4rem;
    font-size: .82rem;
    line-height: 1;
    box-shadow: none;
}
.dataTables_wrapper.dt-bootstrap4 .dataTables_paginate li.paginate_button .page-link:hover,
.dataTables_wrapper.dt-bootstrap4 .dataTables_paginate li.paginate_button.active .page-link {
    color: #fff;
    background: var(--erp-primary);
    border-color: var(--erp-primary);
}
.dataTables_wrapper.dt-bootstrap4 .dataTables_paginate li.paginate_button.disabled .page-link {
    color: #98a2b3;
    background: #f8fafc;
    border-color: var(--erp-border);
    cursor: not-allowed;
}
.dataTables_wrapper.dt-bootstrap4 .dataTables_paginate li.paginate_button:not(.disabled):not(.active) .page-link:focus {
    color: var(--erp-primary);
    background: #eff6ff;
    border-color: #bfdbfe;
    box-shadow: 0 0 0 .15rem rgba(37, 99, 235, .1);
}

/* Employee list: align the existing export toolbar with the SaaS theme. */
.employee-page { padding-top: 1.25rem !important; background: #fff; }
.employee-page-shell { margin: 0; }
.employee-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--erp-border); border-radius: .7rem; box-shadow: 0 5px 18px rgba(15, 23, 42, .05); }
.employee-page-title span { display: block; margin-bottom: .2rem; color: #98a2b3; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.employee-page-header h6 { color: var(--erp-ink) !important; font-size: 1.15rem; font-weight: 700; }
.employee-back-button { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; color: #475467 !important; background: #fff; border: 1px solid #d8e0eb; border-radius: .45rem; font-size: .8rem; font-weight: 600; }
.employee-back-button:hover { color: var(--erp-primary) !important; background: #eff6ff; border-color: #bfdbfe; }
.employee-page-body { padding: 0 !important; }
.employee-section-divider { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--erp-border); }
.employee-list-section { padding: 0; }
.employee-list-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.employee-list-heading h4 { margin: 0; color: var(--erp-ink); font-size: 1.1rem; font-weight: 700; }
#signUpForm { margin: 1.25rem 0 !important; }
#signUpForm label { color: #344054 !important; }
#signUpForm label.form-label { display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
#signUpForm .field-help { display: inline-flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; border: 1px solid #b8c4d6; border-radius: 50%; color: #667085; font-size: .65rem; font-weight: 700; line-height: 1; cursor: help; }
#signUpForm .required-marker { color: #dc2626 !important; font-weight: 700 !important; display: inline-block; }
#signUpForm .field-help:hover { color: var(--erp-primary); border-color: var(--erp-primary); background: #eff6ff; }
#example_wrapper { padding: 0; }
#example_wrapper .dt-toolbar,
#example_wrapper .dt-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
#example_wrapper .dt-toolbar { margin-bottom: 1rem; }
#example_wrapper .dt-actions { display: flex; align-items: center; gap: .5rem; }
#example_wrapper .dt-actions .btn { min-width: 4.1rem; padding: .55rem .85rem; border: 0; border-radius: .45rem; font-size: .78rem; font-weight: 600; box-shadow: none; }
#example_wrapper .dt-actions .buttons-csv,
#example_wrapper .dt-actions .buttons-excel,
#example_wrapper .dt-actions .buttons-pdf,
#example_wrapper .dt-actions .buttons-print { color: #fff; }
#example_wrapper .dt-actions .buttons-csv { background: #2563eb; }
#example_wrapper .dt-actions .buttons-excel { background: #0f9f9a; }
#example_wrapper .dt-actions .buttons-pdf { background: #d97706; }
#example_wrapper .dt-actions .buttons-print { background: #475467; }
#example_wrapper .dt-actions .btn:hover { transform: translateY(-1px); filter: brightness(.96); }
#example_wrapper .dt-search label { display: flex; align-items: center; gap: .5rem; margin: 0; color: #667085; font-size: .82rem; }
#example_wrapper .dt-search input { width: 12rem; height: 2.35rem; margin: 0; padding: .45rem .75rem; border: 1px solid #d8e0eb; border-radius: .45rem; background: #fff; box-shadow: none; }
#example_wrapper .dt-search input:focus { border-color: var(--erp-primary); outline: 0; box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .12); }
#example_wrapper .dt-footer { margin-top: 1rem; }
#example_wrapper .dt-summary,
#example_wrapper .dt-length { color: #667085; font-size: .82rem; }
#example_wrapper .dt-length select { height: 2.25rem; margin: 0 .25rem; padding: .35rem 1.8rem .35rem .65rem; border: 1px solid #d8e0eb; border-radius: .4rem; color: #172033; background-color: #fff; }
#example_wrapper table.dataTable { width: 100% !important; margin: 0 !important; border-collapse: separate !important; border-spacing: 0; }
#example_wrapper table.dataTable thead th { padding: .9rem .75rem; color: #475467; background: #f8fafc; border-bottom: 1px solid var(--erp-border); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
#example_wrapper table.dataTable tbody td { padding: .9rem .75rem; color: #52627a; border-top: 1px solid #eef1f5; }
#example_wrapper table.dataTable tbody tr:nth-of-type(odd),
#example_wrapper table.dataTable tbody tr:nth-of-type(even) { background: #fff; }
#example_wrapper table.dataTable tbody tr:hover { background: #f8fafc; }
#example_wrapper table.dataTable th:first-child,
#example_wrapper table.dataTable td:first-child { min-width: 4.5rem; }
#example_wrapper table.dataTable th:last-child,
#example_wrapper table.dataTable td:last-child { min-width: 8rem; text-align: center; }
#example_wrapper table.dataTable .editEmp,
#example_wrapper table.dataTable .showEmp { display: inline-flex !important; width: 2.35rem; height: 2.35rem; align-items: center; justify-content: center; margin: .12rem; padding: 0; border: 0; border-radius: .45rem; }
#example_wrapper table.dataTable .editEmp { color: #fff; background: #0f9f9a; }
#example_wrapper table.dataTable .showEmp { color: #fff; background: var(--erp-primary); }
#example_wrapper table.dataTable .editEmp:hover,
#example_wrapper table.dataTable .showEmp:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, .12); }

/* Replace the legacy purple employee wizard surface while retaining its steps. */
#signUpForm { background: #fff !important; color: var(--erp-ink) !important; border: 1px solid var(--erp-border); box-shadow: var(--erp-shadow); animation: none; }
#signUpForm .form-header .stepIndicator { color: #667085; }
#signUpForm .form-header .stepIndicator.active,
#signUpForm .form-header .stepIndicator.finish { color: var(--erp-primary); }
#signUpForm .form-header .stepIndicator::before { background: #dbeafe; border-color: #fff; }
#signUpForm .form-header .stepIndicator.active::before,
#signUpForm .form-header .stepIndicator.finish::before { background: var(--erp-primary); border-color: #dbeafe; }
#signUpForm .form-header .stepIndicator.active::after { background: #e5e7eb; }
#signUpForm .form-header .stepIndicator.finish::after { background: #93c5fd; }
#signUpForm .form-header .stepIndicator:not(.finish)::after { background: #e5e7eb !important; }
#signUpForm .form-header .stepIndicator:not(.active):not(.finish)::before { background: #f1f5f9 !important; border-color: #d8e0eb !important; }
#signUpForm .form-header .stepIndicator.active::before { background: var(--erp-primary) !important; border-color: #dbeafe !important; }
#signUpForm .form-header .stepIndicator.finish::before { background: var(--erp-primary) !important; border-color: #dbeafe !important; }
#signUpForm .form-header .stepIndicator.finish::after { background: #93c5fd !important; }

@media (max-width: 767px) {
    .employee-page-header { align-items: flex-start; flex-direction: column; }
    #example_wrapper .dt-toolbar,
    #example_wrapper .dt-footer { align-items: flex-start; flex-direction: column; }
    #example_wrapper .dt-search { width: 100%; }
    #example_wrapper .dt-search input { width: 100%; }
    #example_wrapper .dt-pagination { width: 100%; overflow-x: auto; }
}

@media (max-width: 767px) {
    .dataTables_wrapper.dt-bootstrap4 .dataTables_paginate { justify-content: flex-start; overflow-x: auto; }
    .dataTables_wrapper.dt-bootstrap4 .dataTables_paginate ul.pagination { flex-wrap: nowrap; }
}