/* ==========================================================
   GTM Dashboard — corporate UI
   Scoped to :is(.gtm-main-content, .om-main-content, .manager-dashboard, .admin-dashboard, .login-main) so other pages are not affected.
   Walang gagalawin sa backend / Blade variables / JS.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:is(
    .gtm-main-content,
    .om-main-content,
    .manager-dashboard,
    .admin-dashboard,
    .login-main
) {
    --ink: #1c2733; /* main text */
    --ink-soft: #5b6877; /* secondary text */
    --line: #dde2e8; /* borders */
    --line-soft: #eceff3; /* row dividers */
    --paper: #f4f6f8; /* page background */
    --surface: #ffffff; /* cards */
    --head-bg: #f0f3f6; /* table header */
    --brand: #1d4e7a; /* company navy */
    --brand-dark: #153a5c;

    --c-blue: #1d4e7a;
    --c-amber: #a86a0c;
    --c-green: #25704a;

    --radius: 4px;
    --font:
        "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    font-family: var(--font);
    color: var(--ink);
    background: var(--paper);
    font-size: 14px;
    line-height: 1.5;
}

:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    *,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    *::before,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    *::after {
    box-sizing: border-box;
}

/* ---------- Page title ---------- */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .pagetitle {
    padding: 4px 0 14px;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .pagetitle
    h1 {
    font-family: var(--font);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 4px;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .breadcrumb
    p {
    color: var(--ink-soft) !important;
    font-size: 13px;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    hr {
    border: 0;
    border-top: 1px solid var(--line);
    opacity: 1;
    margin: 0 0 20px;
}

/* ---------- KPI tiles ---------- */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat {
    position: relative;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent, var(--brand));
    border-radius: var(--radius);
    padding: 16px 18px 14px;
    box-shadow: none;
    transform: none;
    transition: none;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat::before,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat::after {
    display: none;
}

:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-blue {
    --accent: var(--c-blue);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-amber {
    --accent: var(--c-amber);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-green {
    --accent: var(--c-green);
}

:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--head-bg);
    color: var(--accent, var(--brand));
    font-size: 15px;
    box-shadow: none;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-value {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--ink);
    margin: 10px 0 8px;
    font-variant-numeric: tabular-nums;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-foot {
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-hint {
    font-size: 12.5px;
    color: var(--ink-soft);
    background: none;
    padding: 0;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-stat-hint
    i {
    margin-right: 4px;
}

/* ---------- Salesmen card ---------- */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-card-head-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font-size: 15px;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-card-title {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-card-sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-soft);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-chip {
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--head-bg);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Table ---------- */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(.gtm-table-content, .om-table-content) {
    max-height: none;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--ink);
    --bs-table-bg: transparent;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    thead
    th {
    padding: 10px 20px;
    background: var(--head-bg);
    border-top: 0;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    tbody
    td {
    padding: 12px 20px;
    border-top: 0;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 14px;
    background: transparent;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    tbody
    tr:last-child
    td {
    border-bottom: 0;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    tbody
    tr:hover
    td {
    background: #f8fafb;
}

/* avatar / profile (generic, kasi JS ang gumagawa ng rows) */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    td
    img,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    td
    .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--head-bg);
}

/* badges sa loob ng table (Position, CL) */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .badge {
    padding: 3px 8px;
    border-radius: var(--radius);
    background: var(--head-bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 500;
}

/* action buttons sa loob ng table */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn {
    padding: 5px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-primary,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-info {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-primary:hover,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-info:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-outline-primary,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-light,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-secondary {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-outline-primary:hover,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-light:hover,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-table
    .btn-secondary:hover {
    background: var(--head-bg);
    border-color: var(--brand);
}

/* ---------- Pagination ---------- */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    ) {
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13px;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    ):empty {
    display: none;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    .pagination {
    margin: 0;
    gap: 4px;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    .page-link,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    button {
    min-width: 32px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    box-shadow: none;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    .page-link:hover,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    button:hover:not(:disabled) {
    background: var(--head-bg);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    .page-item.active
    .page-link,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    .active,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    button.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    .disabled
    .page-link,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    :is(
        #gtmTablePagination,
        #kpiTablePagination,
        #omTablePagination,
        #omSaturatorsPagination,
        #usersPagination,
        #talentTablePagination
    )
    button:disabled {
    color: #9aa5b1;
    background: var(--head-bg);
    cursor: not-allowed;
}

/* ---------- Keyboard focus ---------- */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    a:focus-visible,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    :is(
            .gtm-main-content,
            .om-main-content,
            .manager-dashboard,
            .admin-dashboard,
            .login-main
        )
        .db-card-head {
        flex-wrap: wrap;
        padding: 12px 16px;
    }
    :is(
            .gtm-main-content,
            .om-main-content,
            .manager-dashboard,
            .admin-dashboard,
            .login-main
        )
        .cute-table
        thead
        th,
    :is(
            .gtm-main-content,
            .om-main-content,
            .manager-dashboard,
            .admin-dashboard,
            .login-main
        )
        .cute-table
        tbody
        td {
        padding: 10px 14px;
    }
    :is(
            .gtm-main-content,
            .om-main-content,
            .manager-dashboard,
            .admin-dashboard,
            .login-main
        )
        .db-stat-value {
        font-size: 26px;
    }
}

/* ==========================================================
   KPI / Upload page — same design system
   ========================================================== */

/* Section heading ("Talent KPI") + toolbar */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .section
    > .d-flex
    > h5 {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

/* Toolbar buttons — navy primary, outlined secondary (pareho sa home) */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    #addKpiBtn,
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    #importKpiCsvBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    #addKpiBtn {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    #addKpiBtn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    #importKpiCsvBtn {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    #importKpiCsvBtn:hover {
    background: var(--head-bg);
    border-color: var(--brand);
}

/* Table cell content (cute-* classes) */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--head-bg);
    border: 1px solid var(--line);
    color: var(--brand);
    font-size: 16px;
    box-shadow: none;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-name {
    margin: 0;
    font-weight: 500;
    color: var(--ink);
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-position {
    margin: 0;
    color: var(--ink-soft);
    font-size: 13.5px;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-rank {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius);
    background: var(--head-bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transform: none;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .cute-btn:hover {
    background: var(--head-bg);
    border-color: var(--brand);
    color: var(--brand-dark);
}

/* ==========================================================
   Modals (nasa labas ng <main>, kaya hiwalay ang scope)
   ========================================================== */
.modal {
    --ink: #1c2733;
    --ink-soft: #5b6877;
    --line: #dde2e8;
    --head-bg: #f0f3f6;
    --brand: #1d4e7a;
    --brand-dark: #153a5c;
    --radius: 4px;
    --font:
        "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font);
    color: var(--ink);
}
.modal .modal-content {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(28, 39, 51, 0.18);
}
.modal .modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.modal .modal-title {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.modal .modal-body {
    padding: 20px;
}
.modal .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--head-bg);
    gap: 8px;
}
.modal .form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
}
.modal .form-control,
.modal .form-select {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.modal .btn {
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.modal .btn-success,
.modal .btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.modal .btn-success:hover,
.modal .btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}
.modal .btn-success:disabled,
.modal .btn-primary:disabled {
    opacity: 0.55;
}
.modal .btn-secondary,
.modal .btn-light {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
}
.modal .btn-secondary:hover,
.modal .btn-light:hover {
    background: var(--head-bg);
}
.modal .btn:focus-visible,
.modal .btn-close:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ==========================================================
   Improvement Plan page — same design system
   ========================================================== */

/* Toolbar: Add Improvement Plan (reuses #addKpiBtn rules above) + import button */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    #importImprovementPlanCsvBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    #importImprovementPlanCsvBtn:hover {
    background: var(--head-bg);
    border-color: var(--brand);
}

/* Add Improvement Plan modal */
.modal .gtm-ip-modal {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.modal .gtm-ip-modal-header {
    align-items: flex-start;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.modal .gtm-ip-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
}
.modal .gtm-ip-modal-icon {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font-size: 15px;
}
.modal .gtm-ip-modal-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-soft);
}
.modal .gtm-ip-modal-body {
    padding: 20px 24px;
    background: #f4f6f8;
}
.modal .gtm-ip-modal-footer {
    padding: 12px 24px;
    background: #fff;
    border-top: 1px solid var(--line);
}

/* Plan details card */
.modal .gtm-ip-talent-card {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}
.modal .gtm-ip-card-kicker {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
}
.modal .gtm-ip-card-kicker i {
    color: var(--brand);
}

/* Section blocks (Functional / Mindset) */
.modal .gtm-ip-form-section {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--sec, var(--brand));
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
}
.modal .gtm-ip-accent-blue {
    --sec: #1d4e7a;
}
.modal .gtm-ip-accent-orange {
    --sec: #a86a0c;
}

.modal .gtm-ip-form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.modal .gtm-ip-form-section-header i {
    color: var(--sec, var(--brand));
}

.modal .gtm-ip-add-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    color: var(--brand);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.modal .gtm-ip-add-row-btn:hover {
    background: var(--head-bg);
    border-color: var(--brand);
    color: var(--brand-dark);
}

/* Form table (rows are added by JS, so style by element) */
.modal .gtm-ip-form-table {
    margin: 0;
    --bs-table-bg: transparent;
}
.modal .gtm-ip-form-table thead th {
    padding: 8px 12px;
    background: var(--head-bg);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.modal .gtm-ip-form-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #eceff3;
    vertical-align: middle;
}
.modal .gtm-ip-form-table tbody tr:last-child td {
    border-bottom: 0;
}
.modal .gtm-ip-form-table .form-control,
.modal .gtm-ip-form-table .form-select,
.modal .gtm-ip-form-table input,
.modal .gtm-ip-form-table select,
.modal .gtm-ip-form-table textarea {
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}
.modal .gtm-ip-form-table .btn-outline-danger,
.modal .gtm-ip-form-table .btn-danger {
    padding: 3px 8px;
    border-radius: var(--radius);
    box-shadow: none;
}

/* Save button */
.modal .gtm-ip-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: var(--radius);
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.modal .gtm-ip-save-btn:hover:not(:disabled) {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}
.modal .gtm-ip-save-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* "Download CSV Template" link in import modal */
.modal .btn-outline-primary {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--brand);
}
.modal .btn-outline-primary:hover {
    background: var(--head-bg);
    border-color: var(--brand);
    color: var(--brand-dark);
}

/* ==========================================================
   OM pages — same design system (.om-main-content)
   ========================================================== */

/* Card head icon variant (Your Saturators) — muted amber, encodes the second list */
:is(
        .gtm-main-content,
        .om-main-content,
        .manager-dashboard,
        .admin-dashboard,
        .login-main
    )
    .db-card-head-icon.db-icon-amber {
    background: var(--c-amber);
    color: #fff;
}

/* ==========================================================
   Manager dashboard — same design system (.manager-dashboard)
   Load this file AFTER manager.css and home.css.
   !important lang kung saan may inline style sa markup.
   ========================================================== */

/* Breadcrumb with links */
.manager-dashboard .breadcrumb {
    font-size: 13px;
}
.manager-dashboard .breadcrumb-item,
.manager-dashboard .breadcrumb-item a {
    color: var(--ink-soft);
    text-decoration: none;
}
.manager-dashboard .breadcrumb-item a:hover {
    color: var(--brand);
}
.manager-dashboard .breadcrumb-item.active {
    color: var(--ink);
    font-weight: 500;
}
.manager-dashboard .breadcrumb-item + .breadcrumb-item::before {
    color: #9aa5b1;
}

/* Section heading row ("My Team" + badge) */
.manager-dashboard .section > .d-flex .card-title {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.manager-dashboard .badge {
    padding: 4px 10px;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.manager-dashboard .badge.bg-primary {
    background: var(--brand) !important;
    color: #fff !important;
}

/* KPI tiles (hr-kpi) — pareho ng db-stat */
.manager-dashboard .hr-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--hr-kpi-accent, var(--brand));
    border-radius: var(--radius);
    box-shadow: none;
    transform: none;
    transition: none;
}
.manager-dashboard .hr-kpi::before,
.manager-dashboard .hr-kpi::after {
    display: none;
}

.manager-dashboard .row.g-3 > div:nth-child(1) .hr-kpi {
    --hr-kpi-accent: #1d4e7a !important;
}
.manager-dashboard .row.g-3 > div:nth-child(2) .hr-kpi {
    --hr-kpi-accent: #25704a !important;
}
.manager-dashboard .row.g-3 > div:nth-child(3) .hr-kpi {
    --hr-kpi-accent: #a86a0c !important;
}

.manager-dashboard .hr-kpi-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--head-bg) !important;
    color: var(--hr-kpi-accent, var(--brand)) !important;
    font-size: 18px;
    box-shadow: none;
}
.manager-dashboard .hr-kpi-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
}
.manager-dashboard .hr-kpi-value {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.manager-dashboard .hr-kpi-note {
    font-size: 12.5px;
    color: var(--ink-soft);
}

/* Company filter card */
.manager-dashboard .appraisal-filter-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}
.manager-dashboard .appraisal-filter-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding: 16px 20px;
}
.manager-dashboard .appraisal-filter-field {
    flex: 1 1 260px;
    max-width: 360px;
}
.manager-dashboard .appraisal-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
}
.manager-dashboard .appraisal-filter-label i {
    color: var(--brand);
}
.manager-dashboard .appraisal-filter-select {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
.manager-dashboard .appraisal-filter-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.manager-dashboard .appraisal-filter-button {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--radius);
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.manager-dashboard .appraisal-filter-button:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* Team card + table */
.manager-dashboard .team-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
}
.manager-dashboard .team-card .card-body {
    padding: 0;
}
.manager-dashboard .team-card .card-title {
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.manager-dashboard .team-table {
    margin: 0;
    color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f8fafb;
}
.manager-dashboard .team-table thead th {
    padding: 10px 20px;
    background: var(--head-bg);
    border-top: 0;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.manager-dashboard .team-table tbody td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 14px;
}
.manager-dashboard .team-table tbody tr:last-child td {
    border-bottom: 0;
}

.manager-dashboard .employee-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.manager-dashboard .employee-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--head-bg);
    border: 1px solid var(--line);
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none;
}
.manager-dashboard .employee-name {
    font-weight: 500;
    color: var(--ink);
}
.manager-dashboard .dept-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius);
    background: var(--head-bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: none;
}

/* Status badges — flat tinted (same meaning, mas tahimik na kulay) */
.manager-dashboard .team-table .badge {
    border: 1px solid transparent;
}
.manager-dashboard .team-table .badge.bg-success {
    background: #e7f1ec !important;
    color: #25704a !important;
    border-color: #bcd8c8;
}
.manager-dashboard .team-table .badge.bg-warning {
    background: #fbf1df !important;
    color: #7a4d08 !important;
    border-color: #ecd3a2;
}
.manager-dashboard .team-table .badge.bg-info {
    background: #e6eef6 !important;
    color: #1d4e7a !important;
    border-color: #bccfe2;
}
.manager-dashboard .team-table .badge.bg-danger {
    background: #f8e8e8 !important;
    color: #9b2c2c !important;
    border-color: #e6bcbc;
}
.manager-dashboard .team-table .badge.bg-secondary {
    background: var(--head-bg) !important;
    color: var(--ink-soft) !important;
    border-color: var(--line);
}

@media (max-width: 767.98px) {
    .manager-dashboard .team-table thead th,
    .manager-dashboard .team-table tbody td {
        padding: 10px 14px;
    }
    .manager-dashboard .hr-kpi-value {
        font-size: 24px;
    }
}

/* ==========================================================
   Performance Appraisal page — add class "manager-dashboard"
   sa <main> (performance-dashboard manager-dashboard)
   ========================================================== */

/* Action buttons sa table (View / PDF) */
.manager-dashboard .team-table .btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    margin-right: 6px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
.manager-dashboard .team-table .btn:last-child {
    margin-right: 0;
}

.manager-dashboard .team-table .btn-view {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
}
.manager-dashboard .team-table .btn-view:hover {
    background: var(--head-bg);
    border-color: var(--brand);
    color: var(--brand-dark);
}

.manager-dashboard .team-table .btn-danger {
    background: var(--surface);
    border: 1px solid #e6bcbc;
    color: #9b2c2c;
}
.manager-dashboard .team-table .btn-danger:hover {
    background: #f8e8e8;
    border-color: #9b2c2c;
    color: #7a2020;
}

/* Period badge sa loob ng card title */
.manager-dashboard .team-card .card-title .badge {
    vertical-align: middle;
    margin-left: 10px;
}

/* ==========================================================
   View Performance Appraisal form
   <main class="main appraisal-form-page manager-dashboard">
   (generic Bootstrap markup, kaya naka-scope sa .appraisal-form-page)
   ========================================================== */

.appraisal-form-page .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}
.appraisal-form-page .card-body {
    padding: 24px 28px;
}

/* Form title */
.appraisal-form-page .card-title.text-center {
    margin: 0 0 24px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
}

/* Employee info tables (borderless) */
.appraisal-form-page .table-borderless th {
    padding: 6px 12px 6px 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
    vertical-align: top;
}
.appraisal-form-page .table-borderless td {
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.appraisal-form-page hr {
    border: 0;
    border-top: 1px solid var(--line);
    opacity: 1;
    margin: 18px 0;
}

/* Section headings (I. ATTENDANCE, II. ...) */
.appraisal-form-page h6.fw-bold {
    margin: 28px 0 12px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font);
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--brand);
}
.appraisal-form-page h6.fw-bold small {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft) !important;
}

/* Rating system note */
.appraisal-form-page .alert.alert-light {
    padding: 12px 16px;
    background: #f8fafb;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    color: var(--ink-soft);
}
.appraisal-form-page .alert.alert-light strong {
    color: var(--ink);
}

/* Data tables */
.appraisal-form-page .table-bordered {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line);
    border-color: var(--line);
    color: var(--ink);
    font-size: 14px;
}
.appraisal-form-page .table-bordered > :not(caption) > * > * {
    padding: 10px 14px;
    border-color: var(--line);
}
.appraisal-form-page .table-light {
    --bs-table-bg: var(--head-bg);
    --bs-table-color: var(--ink-soft);
    --bs-table-border-color: var(--line);
}
.appraisal-form-page .table-light th {
    background: var(--head-bg);
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Inputs */
.appraisal-form-page .form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
.appraisal-form-page .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.appraisal-form-page .form-control[readonly] {
    background: #f8fafb;
    text-align: center;
    color: var(--ink-soft);
}
.appraisal-form-page input[type="number"].form-control {
    max-width: 84px;
    margin: 0 auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.appraisal-form-page textarea.form-control {
    min-height: 96px;
    line-height: 1.5;
}
.appraisal-form-page textarea.form-control::placeholder,
.appraisal-form-page .form-control::placeholder {
    color: #9aa5b1;
}

/* Signatures */
.appraisal-form-page .border-top {
    border-top: 1px solid var(--ink-soft) !important;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}

/* Save button */
.appraisal-form-page .btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: var(--radius);
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
}
.appraisal-form-page .btn-primary:hover:not(:disabled) {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}
.appraisal-form-page .btn-primary:disabled {
    opacity: 0.7;
}

@media (max-width: 767.98px) {
    .appraisal-form-page .card-body {
        padding: 18px 16px;
    }
}

/* ==========================================================
   Admin dashboard — <main class="main dashboard admin-dashboard">
   Load AFTER the admin dashboard CSS (nasa huli ang <link>).
   ========================================================== */

/* Page title with subtitle + date chip */
.admin-dashboard .pagetitle {
    padding: 4px 0 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.admin-dashboard .db-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ink-soft);
}
.admin-dashboard .db-today {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.admin-dashboard .db-today i {
    color: var(--brand);
}

/* KPI tiles: 4th variant + footer layout */
.admin-dashboard .db-stat-red {
    --accent: #9b2c2c;
}
.admin-dashboard .db-stat-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.admin-dashboard .db-stat-foot.flex-column {
    align-items: stretch;
    flex-wrap: nowrap;
}
.admin-dashboard .db-stat-strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.admin-dashboard .db-trend {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px 1px 4px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 12.5px;
    font-weight: 600;
}
.admin-dashboard .db-trend-up {
    background: #e7f1ec;
    color: #25704a;
    border-color: #bcd8c8;
}
.admin-dashboard .db-trend-alert {
    background: #f8e8e8;
    color: #9b2c2c;
    border-color: #e6bcbc;
}

.admin-dashboard .db-mini-bar {
    height: 6px;
    background: var(--line-soft);
    border-radius: 3px;
    overflow: hidden;
}
.admin-dashboard .db-mini-bar > span {
    display: block;
    height: 100%;
    background: #25704a;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Cards */
.admin-dashboard .db-card > .card-body:not(.p-0) {
    padding: 20px;
}
.admin-dashboard .db-card-head-icon.db-icon-violet {
    background: #46586b;
    color: #fff;
}

/* Department distribution */
.admin-dashboard .db-dept {
    margin-bottom: 16px;
}
.admin-dashboard .db-dept-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.admin-dashboard .db-dept-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.admin-dashboard .db-dept-rank {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--head-bg);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.admin-dashboard .db-dept-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.admin-dashboard .db-dept-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.admin-dashboard .db-dept-pct {
    min-width: 44px;
    text-align: right;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.admin-dashboard .db-progress {
    height: 8px;
    background: var(--line-soft);
    border-radius: 4px;
    box-shadow: none;
}
.admin-dashboard .db-progress .progress-bar {
    background: var(--brand);
    border-radius: 4px;
    box-shadow: none;
}

/* Empty state */
.admin-dashboard .db-empty {
    padding: 32px 12px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13.5px;
}
.admin-dashboard .db-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
    color: #9aa5b1;
}

/* Recent activity timeline */
.admin-dashboard .db-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-dashboard .db-timeline li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}
.admin-dashboard .db-timeline li:first-child {
    padding-top: 0;
}
.admin-dashboard .db-timeline li:last-child {
    border-bottom: 0;
}
.admin-dashboard .db-timeline li::before,
.admin-dashboard .db-timeline li::after {
    display: none;
}

.admin-dashboard .db-tl-dot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--head-bg) !important;
    border: 1px solid var(--line);
    color: var(--brand) !important;
    font-size: 14px;
    box-shadow: none;
}
/* color classes galing sa backend ($activity['color']) — tahimik na tint */
.admin-dashboard .db-tl-dot.success,
.admin-dashboard .db-tl-dot.bg-success {
    background: #e7f1ec !important;
    border-color: #bcd8c8;
    color: #25704a !important;
}
.admin-dashboard .db-tl-dot.danger,
.admin-dashboard .db-tl-dot.bg-danger {
    background: #f8e8e8 !important;
    border-color: #e6bcbc;
    color: #9b2c2c !important;
}
.admin-dashboard .db-tl-dot.warning,
.admin-dashboard .db-tl-dot.bg-warning {
    background: #fbf1df !important;
    border-color: #ecd3a2;
    color: #7a4d08 !important;
}
.admin-dashboard .db-tl-dot.info,
.admin-dashboard .db-tl-dot.bg-info,
.admin-dashboard .db-tl-dot.primary,
.admin-dashboard .db-tl-dot.bg-primary {
    background: #e6eef6 !important;
    border-color: #bccfe2;
    color: #1d4e7a !important;
}

.admin-dashboard .db-tl-body {
    min-width: 0;
}
.admin-dashboard .db-tl-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.admin-dashboard .db-tl-desc {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ink-soft);
    word-break: break-word;
}
.admin-dashboard .db-tl-time {
    margin: 4px 0 0;
    font-size: 12px;
    color: #8a96a3;
}
.admin-dashboard .db-tl-time i {
    margin-right: 4px;
}

.admin-dashboard .db-view-all {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}
.admin-dashboard .db-view-all:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

/* ==========================================================
   Admin — User Management
   <main class="main users-management admin-dashboard">
   Modals ay nasa loob ng <main> dito.
   !important lang kung saan may Bootstrap utility (shadow, rounded)
   o global sidebar .nav-link rules na tumatama rin sa tabs.
   ========================================================== */

/* Card */
.users-management .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}

/* Tabs (flat underline) */
.users-management .nav-tabs {
    border-bottom: 1px solid var(--line);
    gap: 2px;
}
.users-management .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft) !important;
    transition:
        background-color 0.15s,
        color 0.15s;
}
.users-management .nav-tabs .nav-link:hover {
    background: var(--head-bg) !important;
    color: var(--ink) !important;
}
.users-management .nav-tabs .nav-link.active {
    background: transparent !important;
    border-bottom-color: var(--brand);
    color: var(--brand) !important;
    box-shadow: none !important;
}
.users-management .nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* Add Account + general buttons */
.users-management .btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--radius);
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.users-management .btn-primary:hover:not(:disabled) {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* Users table */
.users-management #users_table {
    margin: 0;
    color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f8fafb;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.users-management #users_table thead th {
    padding: 10px 16px;
    background: var(--head-bg);
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.users-management #users_table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 14px;
}
.users-management #users_table tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
}

/* Status badges (galing sa JS) */
.users-management #users_table .badge {
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
}
.users-management #users_table .badge.bg-success {
    background: #e7f1ec !important;
    color: #25704a !important;
    border-color: #bcd8c8;
}
.users-management #users_table .badge.bg-warning {
    background: #fbf1df !important;
    color: #7a4d08 !important;
    border-color: #ecd3a2;
}
.users-management #users_table .badge.bg-info,
.users-management #users_table .badge.bg-primary {
    background: #e6eef6 !important;
    color: #1d4e7a !important;
    border-color: #bccfe2;
}
.users-management #users_table .badge.bg-danger {
    background: #f8e8e8 !important;
    color: #9b2c2c !important;
    border-color: #e6bcbc;
}
.users-management #users_table .badge.bg-secondary {
    background: var(--head-bg) !important;
    color: var(--ink-soft) !important;
    border-color: var(--line);
}

/* Row action buttons (galing sa JS) */
.users-management #users_table .btn {
    padding: 5px 12px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
.users-management #users_table .btn:hover {
    background: var(--head-bg);
    border-color: var(--brand);
    color: var(--brand-dark);
}
.users-management #users_table .btn-danger,
.users-management #users_table .btn-outline-danger {
    border-color: #e6bcbc;
    color: #9b2c2c;
}
.users-management #users_table .btn-danger:hover,
.users-management #users_table .btn-outline-danger:hover {
    background: #f8e8e8;
    border-color: #9b2c2c;
    color: #7a2020;
}

/* DataTables controls (v1 at v2 class names) */
.users-management :is(.dataTables_filter, .dt-search) input,
.users-management :is(.dataTables_length, .dt-length) select {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 5px 10px;
    font-size: 13.5px;
    color: var(--ink);
    box-shadow: none;
}
.users-management :is(.dataTables_filter, .dt-search) input:focus,
.users-management :is(.dataTables_length, .dt-length) select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
    outline: 0;
}
.users-management :is(.dataTables_info, .dt-info),
.users-management
    :is(.dataTables_length, .dataTables_filter, .dt-length, .dt-search)
    label {
    font-size: 13px;
    color: var(--ink-soft);
}
.users-management :is(.paginate_button, .dt-paging-button, .page-link) {
    min-width: 32px;
    padding: 4px 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-size: 13px;
    box-shadow: none !important;
}
.users-management
    :is(.paginate_button, .dt-paging-button):hover:not(.disabled):not(.current),
.users-management .page-link:hover {
    background: var(--head-bg) !important;
}
.users-management :is(.paginate_button.current, .dt-paging-button.current),
.users-management .page-item.active .page-link {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.users-management :is(.paginate_button.disabled, .dt-paging-button.disabled),
.users-management .page-item.disabled .page-link {
    color: #9aa5b1 !important;
    background: var(--head-bg) !important;
}

/* Modals (nasa loob ng main; override ang rounded-3 / shadow utilities) */
.users-management .modal-content.rounded-3 {
    border-radius: var(--radius) !important;
}
.users-management .modal-content.shadow {
    box-shadow: 0 8px 24px rgba(28, 39, 51, 0.18) !important;
}
.users-management .modal-title.fw-bold {
    font-weight: 600 !important;
}
.users-management .modal-body p {
    font-size: 14px;
    color: var(--ink);
}
.users-management .modal-body p.text-muted {
    color: var(--ink-soft) !important;
}

/* Checkboxes (Add Account Type) */
.users-management .form-check {
    padding-top: 2px;
    padding-bottom: 2px;
}
.users-management .form-check-input {
    border: 1px solid #9aa5b1;
    border-radius: 3px;
    box-shadow: none;
}
.users-management .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.users-management .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.users-management .form-check-label {
    font-size: 14px;
    color: var(--ink);
}

/* Danger button sa modal (Delete) — flat na pula */
.modal .btn-danger {
    background: #9b2c2c;
    border-color: #9b2c2c;
    color: #fff;
}
.modal .btn-danger:hover {
    background: #7a2020;
    border-color: #7a2020;
}

/* ==========================================================
   Admin — Holiday Calendar
   <main class="main hc-main admin-dashboard">
   ========================================================== */

.hc-main .breadcrumb {
    margin: 0;
    font-size: 13px;
}
.hc-main .breadcrumb-item.active {
    color: var(--ink-soft);
}

.hc-main .hc-today {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.hc-main .hc-today i {
    color: var(--brand);
}

/* Summary tiles */
.hc-main .hc-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--hc-accent, var(--brand));
    border-radius: var(--radius);
    box-shadow: none;
}
.hc-main .hc-page .row.g-3 > div:nth-child(1) .hc-stat {
    --hc-accent: #1d4e7a;
}
.hc-main .hc-page .row.g-3 > div:nth-child(2) .hc-stat {
    --hc-accent: #9b2c2c;
}
.hc-main .hc-page .row.g-3 > div:nth-child(3) .hc-stat {
    --hc-accent: #a86a0c;
}
.hc-main .hc-page .row.g-3 > div:nth-child(4) .hc-stat {
    --hc-accent: #25704a;
}

.hc-main .hc-stat-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--head-bg);
    color: var(--hc-accent, var(--brand));
    font-size: 18px;
}
.hc-main .hc-stat-value {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.hc-main .hc-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
}

/* Cards */
.hc-main .hc-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
}
.hc-main .hc-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.hc-main .hc-card-head-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font-size: 15px;
}
.hc-main .hc-card-title {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.hc-main .hc-card-sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-soft);
}
.hc-main .hc-card .card-body {
    padding: 0 20px 20px;
}

/* Form */
.hc-main .hc-label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.hc-main .hc-optional {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-soft);
}
.hc-main .hc-card .form-control,
.hc-main .hc-card .form-select,
.hc-main .hc-card .hc-input {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
.hc-main .hc-card .form-control:focus,
.hc-main .hc-card .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.hc-main .hc-group .input-group-text {
    background: var(--head-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius) 0 0 var(--radius);
    color: var(--ink-soft);
}
.hc-main .hc-group .form-control {
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Schedule segmented control */
.hc-main .hc-segment {
    display: flex;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.hc-main .hc-segment-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--surface);
    cursor: pointer;
    transition:
        background-color 0.15s,
        color 0.15s;
}
.hc-main .hc-segment-btn + .btn-check + .hc-segment-btn,
.hc-main .btn-check + .hc-segment-btn + .btn-check + .hc-segment-btn {
    border-left: 1px solid var(--line);
}
.hc-main .hc-segment-btn:hover {
    background: var(--head-bg);
}
.hc-main .btn-check:checked + .hc-segment-btn {
    background: var(--brand);
    color: #fff;
}
.hc-main .btn-check:focus-visible + .hc-segment-btn {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* Buttons */
.hc-main .hc-btn-primary,
.hc-main .hc-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
.hc-main .hc-btn-primary {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
}
.hc-main .hc-btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}
.hc-main .hc-btn-ghost {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
}
.hc-main .hc-btn-ghost:hover {
    background: var(--head-bg);
    border-color: var(--brand);
}

/* List header tools */
.hc-main .hc-head-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.hc-main .hc-search {
    position: relative;
}
.hc-main .hc-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--ink-soft);
    pointer-events: none;
}
.hc-main .hc-search .form-control {
    width: 200px;
    padding-left: 32px;
}
.hc-main .hc-year {
    width: auto;
    min-width: 110px;
}

/* Filter pills (flat) */
.hc-main .hc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
}
.hc-main .hc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    box-shadow: none;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
.hc-main .hc-pill:hover {
    background: var(--head-bg);
    color: var(--ink);
}
.hc-main .hc-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.hc-main .hc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.hc-main .hc-dot-red {
    background: #9b2c2c;
}
.hc-main .hc-dot-amber {
    background: #a86a0c;
}
.hc-main .hc-pill.active .hc-dot {
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}

/* Table */
.hc-main .hc-table {
    color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f8fafb;
}
.hc-main .hc-table thead th {
    padding: 10px 14px;
    background: var(--head-bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.hc-main .hc-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 14px;
}
.hc-main .hc-table tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
}

/* Badges at buttons na galing sa JS */
.hc-main .hc-table .badge {
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--head-bg);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
}
.hc-main .hc-table .badge.bg-success {
    background: #e7f1ec !important;
    color: #25704a !important;
    border-color: #bcd8c8;
}
.hc-main .hc-table .badge.bg-danger {
    background: #f8e8e8 !important;
    color: #9b2c2c !important;
    border-color: #e6bcbc;
}
.hc-main .hc-table .badge.bg-warning {
    background: #fbf1df !important;
    color: #7a4d08 !important;
    border-color: #ecd3a2;
}
.hc-main .hc-table .badge.bg-info,
.hc-main .hc-table .badge.bg-primary {
    background: #e6eef6 !important;
    color: #1d4e7a !important;
    border-color: #bccfe2;
}
.hc-main .hc-table .badge.bg-secondary {
    background: var(--head-bg) !important;
    color: var(--ink-soft) !important;
    border-color: var(--line);
}

.hc-main .hc-table .btn {
    padding: 4px 9px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
    font-size: 13px;
    box-shadow: none;
}
.hc-main .hc-table .btn:hover {
    background: var(--head-bg);
    border-color: var(--brand);
}
.hc-main .hc-table .btn-danger,
.hc-main .hc-table .btn-outline-danger,
.hc-main .hc-table .text-danger {
    color: #9b2c2c;
}
.hc-main .hc-table .btn-danger:hover,
.hc-main .hc-table .btn-outline-danger:hover {
    background: #f8e8e8;
    border-color: #9b2c2c;
}

/* Empty state + remarks note */
.hc-main .hc-empty {
    padding: 32px 12px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13.5px;
}
.hc-main .hc-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
    color: #9aa5b1;
}

.hc-main .remarks-note {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 14px;
    background: #f8fafb;
    border: 1px solid var(--line);
    border-left: 3px solid #a86a0c;
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--ink-soft);
}
.hc-main .remarks-note i {
    color: #a86a0c;
    margin-top: 2px;
}

@media (max-width: 767.98px) {
    .hc-main .hc-search .form-control {
        width: 100%;
    }
    .hc-main .hc-search {
        flex: 1 1 100%;
    }
    .hc-main .hc-head-tools {
        width: 100%;
        margin-left: 0;
    }
}

/* ==========================================================
   Admin — User Online
   <main class="main user-online-main admin-dashboard">
   ========================================================== */

.user-online-main .pagetitle {
    border-bottom: 0;
    margin-bottom: 0;
}
.user-online-main .breadcrumb {
    margin: 0;
    font-size: 13px;
}
.user-online-main .breadcrumb-item.active {
    color: var(--ink-soft);
}

.user-online-main .hc-today {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.user-online-main .hc-today i {
    color: var(--brand);
}

/* "N online" indicator — flat, hindi pill */
.user-online-main .fk-badge-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #bcd8c8;
    border-radius: var(--radius) !important;
    background: #e7f1ec;
    color: #25704a;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
}
.user-online-main .fk-online-dot {
    font-size: 8px;
    color: #25704a;
}

/* Status badges sa rows (galing sa JS) */
.user-online-main .cute-table .badge {
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius) !important;
    background: var(--head-bg);
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
}
.user-online-main .cute-table .badge.bg-success {
    background: #e7f1ec !important;
    color: #25704a !important;
    border-color: #bcd8c8;
}
.user-online-main .cute-table .badge.bg-danger {
    background: #f8e8e8 !important;
    color: #9b2c2c !important;
    border-color: #e6bcbc;
}
.user-online-main .cute-table .badge.bg-warning {
    background: #fbf1df !important;
    color: #7a4d08 !important;
    border-color: #ecd3a2;
}
.user-online-main .cute-table .badge.bg-secondary {
    background: var(--head-bg) !important;
    color: var(--ink-soft) !important;
    border-color: var(--line);
}

/* Loading + empty states */
.user-online-main .fk-skeleton-row td {
    font-size: 13.5px;
    color: var(--ink-soft) !important;
}
.user-online-main #usersEmpty {
    color: var(--ink-soft) !important;
    font-size: 13.5px;
}
.user-online-main #usersEmpty i {
    color: #9aa5b1;
}

/* ==========================================================
   Admin — Assign Manager / Supervisor
   <main class="main edit_supervisor admin-dashboard">
   (generic Bootstrap markup + rows galing sa JS)
   ========================================================== */

.edit_supervisor .pagetitle {
    border-bottom: 0;
    margin-bottom: 0;
}
.edit_supervisor .pagetitle p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ink-soft) !important;
}

/* Cards */
.edit_supervisor .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none !important;
}
.edit_supervisor .card-header {
    padding: 14px 20px;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line);
}
.edit_supervisor .card-header h5 {
    margin: 0 0 2px !important;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.edit_supervisor .card-header p {
    font-size: 12.5px !important;
    color: var(--ink-soft) !important;
}
/* table flush sa card */
.edit_supervisor .card-header + .card-body {
    padding: 0;
}

/* Filters / form */
.edit_supervisor .form-label {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500 !important;
    color: var(--ink);
}
.edit_supervisor .form-select,
.edit_supervisor .form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
.edit_supervisor .form-select-sm {
    font-size: 13px;
    min-width: 190px;
}
.edit_supervisor .form-select:focus,
.edit_supervisor .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}

/* Save button */
.edit_supervisor .btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--radius);
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.edit_supervisor .btn-primary:hover:not(:disabled) {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* Badges (static at galing sa JS) — flat tint */
.edit_supervisor .badge {
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
}
.edit_supervisor .badge.text-bg-light {
    background: var(--head-bg) !important;
    color: var(--ink) !important;
    border-color: var(--line);
}
.edit_supervisor .badge.text-bg-success {
    background: #e7f1ec !important;
    color: #25704a !important;
    border-color: #bcd8c8;
}
.edit_supervisor .badge.text-bg-warning {
    background: #fbf1df !important;
    color: #7a4d08 !important;
    border-color: #ecd3a2;
}
.edit_supervisor .badge.text-bg-danger {
    background: #f8e8e8 !important;
    color: #9b2c2c !important;
    border-color: #e6bcbc;
}
.edit_supervisor .badge.text-bg-info,
.edit_supervisor .badge.text-bg-primary {
    background: #e6eef6 !important;
    color: #1d4e7a !important;
    border-color: #bccfe2;
}
.edit_supervisor .badge.text-bg-secondary {
    background: var(--head-bg) !important;
    color: var(--ink-soft) !important;
    border-color: var(--line);
}

/* Table */
.edit_supervisor .table {
    color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f8fafb;
}
.edit_supervisor .table thead th {
    padding: 10px 16px;
    background: var(--head-bg);
    border-top: 0;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.edit_supervisor .table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 14px;
}
.edit_supervisor .table tbody tr:last-child td {
    border-bottom: 0;
}
.edit_supervisor .table tbody td.fw-semibold {
    font-weight: 500 !important;
}
.edit_supervisor .table tbody td.text-danger {
    color: #9b2c2c !important;
}

/* Checkboxes */
.edit_supervisor .form-check-input {
    border: 1px solid #9aa5b1;
    border-radius: 3px;
    box-shadow: none;
}
.edit_supervisor .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.edit_supervisor .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}

@media (max-width: 767.98px) {
    .edit_supervisor .card-header .form-select-sm {
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* ==========================================================
   Admin — Add Position
   <main class="main add-position admin-dashboard">
   ========================================================== */

.add-position .pagetitle {
    border-bottom: 0;
    margin-bottom: 0;
}

.add-position .card {
    background: var(--surface);
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    box-shadow: none !important;
}
.add-position .card-title {
    margin: 0 0 4px;
    padding: 0;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.add-position .card-body > p.text-muted {
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--ink-soft) !important;
}

/* Validation alert */
.add-position .alert-danger {
    padding: 12px 16px;
    background: #f8e8e8;
    border: 1px solid #e6bcbc;
    border-radius: var(--radius);
    color: #9b2c2c;
    font-size: 13.5px;
}

/* Form */
.add-position .form-label {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.add-position .form-select,
.add-position .form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
.add-position .form-select:focus,
.add-position .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.add-position .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--radius);
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.add-position .btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* Table (flush sa card) */
.add-position .card.mt-4 .table-responsive {
    margin: 14px -1.5rem -1.5rem;
}
.add-position .table {
    color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f8fafb;
}
.add-position .table thead th {
    padding: 10px 24px;
    background: var(--head-bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.add-position .table tbody td {
    padding: 11px 24px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 14px;
}
.add-position .table tbody tr:last-child td {
    border-bottom: 0;
}

/* Delete button */
.add-position .btn-outline-danger {
    padding: 4px 9px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid #e6bcbc;
    color: #9b2c2c;
    box-shadow: none;
}
.add-position .btn-outline-danger:hover {
    background: #f8e8e8;
    border-color: #9b2c2c;
    color: #7a2020;
}

/* ==========================================================
   Admin — Add Groups
   <main class="main add-groups-main admin-dashboard">
   Ang mga modal ay nasa labas ng <main> → naka-scope sa .modal
   ========================================================== */

.add-groups-main .pagetitle {
    border-bottom: 0;
    margin-bottom: 0;
}
.add-groups-main .breadcrumb {
    margin: 0;
    font-size: 13px;
}
.add-groups-main .breadcrumb-item.active {
    color: var(--ink-soft);
}

.add-groups-main .hc-today {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.add-groups-main .hc-today i {
    color: var(--brand);
}

/* Card + alert */
.add-groups-main .add-groups-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}
.add-groups-main .alert-danger {
    padding: 12px 16px;
    background: #f8e8e8;
    border: 1px solid #e6bcbc;
    border-radius: var(--radius);
    color: #9b2c2c;
    font-size: 13.5px;
}

/* Toolbar */
.add-groups-main .add-groups-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.add-groups-main .add-groups-toolbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.add-groups-main .add-groups-toolbar-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font-size: 15px;
}
.add-groups-main .add-groups-toolbar-title h5 {
    margin: 0 !important;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.add-groups-main .add-groups-toolbar-title p {
    font-size: 12.5px;
    color: var(--ink-soft) !important;
}
.add-groups-main .add-groups-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Buttons */
.add-groups-main .btn,
.modal .btn {
    box-shadow: none;
}
.add-groups-main .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
}
.add-groups-main .btn-primary {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
}
.add-groups-main .btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}
.add-groups-main .btn-outline-primary,
.add-groups-main .btn-light {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
}
.add-groups-main .btn-outline-primary:hover,
.add-groups-main .btn-light:hover {
    background: var(--head-bg);
    border-color: var(--brand);
    color: var(--brand-dark);
}
.add-groups-main .add-groups-reset {
    color: var(--ink);
}
.add-groups-main .add-groups-reset span {
    margin-left: 6px;
}

/* Filters */
.add-groups-main .add-groups-filters .form-label {
    font-size: 12.5px !important;
    font-weight: 500;
    color: var(--ink-soft) !important;
}
.add-groups-main .form-select {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13.5px;
    color: var(--ink);
    box-shadow: none;
}
.add-groups-main .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.add-groups-main .form-select:disabled {
    background-color: var(--head-bg);
    color: #9aa5b1;
}

/* Table */
.add-groups-main .add-groups-table {
    color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f8fafb;
}
.add-groups-main .add-groups-table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--head-bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.add-groups-main .add-groups-table tbody td {
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 14px;
}
.add-groups-main .add-groups-table tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
}
.add-groups-main .add-groups-table tbody td.fw-semibold {
    font-weight: 500 !important;
}

.add-groups-main .add-groups-table .badge {
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--head-bg) !important;
    color: var(--brand) !important;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
}

/* Row action buttons */
.add-groups-main .add-groups-table .btn-outline-warning {
    background: var(--surface);
    border: 1px solid #ecd3a2;
    color: #7a4d08;
}
.add-groups-main .add-groups-table .btn-outline-warning:hover {
    background: #fbf1df;
    border-color: #a86a0c;
    color: #7a4d08;
}
.add-groups-main .add-groups-table .btn-outline-danger {
    background: var(--surface);
    border: 1px solid #e6bcbc;
    color: #9b2c2c;
}
.add-groups-main .add-groups-table .btn-outline-danger:hover {
    background: #f8e8e8;
    border-color: #9b2c2c;
    color: #7a2020;
}

/* Empty state */
.add-groups-main .add-groups-empty-state {
    padding: 32px 12px !important;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13.5px;
}
.add-groups-main .add-groups-empty-state i {
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
    color: #9aa5b1;
}

/* ---------- Modals ---------- */
.modal .modal-title i {
    color: var(--brand);
}
.modal .form-text {
    font-size: 12.5px;
    color: var(--ink-soft);
}
.modal .modal-body > p.text-muted {
    color: var(--ink-soft) !important;
}
.modal fieldset legend.form-label {
    float: none;
    width: auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.modal .form-select[multiple] {
    padding: 4px;
}
.modal .form-select[multiple] option {
    padding: 5px 8px;
    border-radius: 3px;
}
.modal .form-select:disabled {
    background-color: var(--head-bg);
    color: #9aa5b1;
}

.modal .alert-warning {
    padding: 10px 14px;
    background: #fbf1df;
    border: 1px solid #ecd3a2;
    border-radius: var(--radius);
    color: #7a4d08;
}
.modal .btn-warning {
    background: #a86a0c;
    border-color: #a86a0c;
    color: #fff;
}
.modal .btn-warning:hover:not(:disabled) {
    background: #8a5509;
    border-color: #8a5509;
    color: #fff;
}
.modal .btn-warning:disabled {
    opacity: 0.55;
}

/* Checkbox / radio */
.modal .form-check-input {
    border: 1px solid #9aa5b1;
    box-shadow: none;
}
.modal .form-check-input[type="checkbox"] {
    border-radius: 3px;
}
.modal .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.modal .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.modal .form-check-label {
    color: var(--ink);
}

/* Merge choice cards (label.form-check.border.rounded) */
.modal label.form-check.border {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--surface);
    cursor: pointer;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
.modal label.form-check.border:hover {
    background: #f8fafb;
}
.modal label.form-check.border:has(input:checked) {
    border-color: var(--brand) !important;
    background: #f1f6fa;
}
.modal label.form-check.border small {
    color: var(--ink-soft) !important;
}

/* ==========================================================
   Admin — Company Headcount
   <main class="main company_headcount hrdash admin-dashboard manager-dashboard">
   (hr-kpi tiles galing sa .manager-dashboard block; dito ang kulay
   ay naka-base sa kahulugan ng bawat tile)
   ========================================================== */

.company_headcount .pagetitle {
    border-bottom: 0;
    margin-bottom: 0;
}

/* KPI accent by meaning: companies / target / actual / vacant */
.company_headcount .row.g-3 > div:nth-child(1) .hr-kpi {
    --hr-kpi-accent: #1d4e7a !important;
}
.company_headcount .row.g-3 > div:nth-child(2) .hr-kpi {
    --hr-kpi-accent: #a86a0c !important;
}
.company_headcount .row.g-3 > div:nth-child(3) .hr-kpi {
    --hr-kpi-accent: #25704a !important;
}
.company_headcount .row.g-3 > div:nth-child(4) .hr-kpi {
    --hr-kpi-accent: #9b2c2c !important;
}

/* Card + filters */
.company_headcount .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}
.company_headcount .input-group-text {
    background: var(--head-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius) 0 0 var(--radius);
    color: var(--ink-soft);
}
.company_headcount .form-control,
.company_headcount .form-select {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
.company_headcount .input-group .form-control {
    border-radius: 0 var(--radius) var(--radius) 0;
}
.company_headcount .form-control:focus,
.company_headcount .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}

/* Table */
.company_headcount #headcountTable {
    color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f8fafb;
}
.company_headcount #headcountTable thead th {
    padding: 10px 14px;
    background: var(--head-bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.company_headcount #headcountTable tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.company_headcount #headcountTable tbody td.fw-semibold {
    font-weight: 500 !important;
}
.company_headcount #headcountTable tfoot td {
    padding: 11px 14px;
    background: var(--head-bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Fill rate bar (flat) */
.company_headcount #headcountTable .progress {
    height: 8px;
    background: var(--line-soft);
    border-radius: 4px;
    box-shadow: none;
}
.company_headcount #headcountTable .progress-bar {
    background: var(--brand);
    border-radius: 4px;
    box-shadow: none;
}
.company_headcount #headcountTable .progress-bar.is-low {
    background: #9b2c2c;
}
.company_headcount #headcountTable td small {
    min-width: 36px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

/* Edit button (galing sa JS) */
.company_headcount #headcountTable .btn {
    padding: 4px 9px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
    box-shadow: none;
}
.company_headcount #headcountTable .btn:hover {
    background: var(--head-bg);
    border-color: var(--brand);
    color: var(--brand-dark);
}

.company_headcount #emptyState {
    color: var(--ink-soft) !important;
    font-size: 13.5px;
}

/* ---------- Edit Headcount modal (nasa labas ng main) ---------- */
.modal .btn-navy {
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}
.modal .btn-navy:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}
.modal .form-control[readonly] {
    background: #f8fafb;
    color: var(--ink-soft);
}
.modal .form-control.is-invalid {
    border-color: #9b2c2c;
    background-image: none;
    padding-right: 12px;
}
.modal .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(155, 44, 44, 0.15);
}
.modal .invalid-feedback {
    font-size: 12.5px;
    color: #9b2c2c;
}
.modal .modal-body .small.text-muted {
    color: var(--ink-soft) !important;
}
.modal .modal-body .small.text-muted strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Login page — <main class="login-main">
   OTP modal ay nasa labas ng main → naka-scope sa .modal
   ========================================================== */

.login-main {
    position: relative;
}

.login-main .fk-login__card {
    background: #fff;
    border: 0;
    border-radius: var(--radius);
    box-shadow: none !important;
}
.login-main .fk-login__icon-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}
.login-main .fk-login__card p.text-muted {
    font-size: 13px;
    color: var(--ink-soft) !important;
}

/* Labels + fields */
.login-main .fk-login__label {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.login-main select.fk-login__input-group,
.login-main .form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
.login-main .input-group.fk-login__input-group {
    border-radius: var(--radius);
    transition: box-shadow 0.15s;
}
.login-main .input-group .input-group-text {
    background: #fff !important;
    border-color: var(--line);
    color: var(--ink-soft);
}
.login-main .input-group .form-control {
    border-color: var(--line);
}
.login-main select.fk-login__input-group:focus,
.login-main .form-control:focus {
    border-color: var(--brand);
    box-shadow: none;
}
.login-main .input-group.fk-login__input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.login-main .input-group:focus-within .input-group-text,
.login-main .input-group:focus-within .form-control {
    border-color: var(--brand);
}

/* Show/hide password */
.login-main #toggle_counselor_password {
    cursor: pointer;
    transition: color 0.15s;
}
.login-main #toggle_counselor_password:hover i {
    color: var(--brand) !important;
}
.login-main #toggle_counselor_password:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* Remember me */
.login-main .form-check-input {
    border: 1px solid #9aa5b1;
    border-radius: 3px;
    box-shadow: none;
}
.login-main .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.login-main .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 122, 0.15);
}
.login-main .form-check-label {
    color: var(--ink-soft) !important;
}

/* Alerts */
.login-main .alert-danger {
    background: #f8e8e8;
    border: 1px solid #e6bcbc;
    border-radius: var(--radius);
    color: #9b2c2c;
}
.login-main .alert-warning {
    background: #fbf1df;
    border: 1px solid #ecd3a2;
    border-radius: var(--radius);
    color: #7a4d08;
}

/* Login button (may inline background kaya !important) */
.login-main .fk-login__btn {
    padding: 10px 16px;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand) !important;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    transition: background-color 0.15s;
}
.login-main .fk-login__btn:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark);
}

.login-main .version-tag {
    font-size: 12px;
}

/* ---------- OTP modal ---------- */
.modal #otp_code {
    font-size: 18px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.modal #otp_code:not(:placeholder-shown) {
    letter-spacing: 0.35em;
}
.modal #otpLoginForm .btn[style] {
    background: var(--brand) !important;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    color: #fff !important;
}
.modal #otpLoginForm .btn[style]:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark);
}
.modal .btn-outline-secondary {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
}
.modal .btn-outline-secondary:hover {
    background: var(--head-bg);
    border-color: var(--brand);
    color: var(--brand-dark);
}