/* HRIS - "Modern" theme, styled after the VDBS PeoplePay reference design.
   Loaded exclusively by Site.Modern.Master (+ Login.aspx when the modern theme cookie is
   set) - Content/Site.css (the classic theme, loaded by Site.Master) is left completely
   untouched so switching back is a single cookie flip, never a code change.

   This file intentionally restyles the SAME shared class vocabulary used by every existing
   page in this app (fieldset/legend, .field-row/.field, .btn/.btn-secondary, .toolbar,
   .grid table, .message*, .status-inactive, .nav-group/.nav-group-title) - that is what
   makes the new look apply to every module automatically, without editing ~150 individual
   .aspx files. New classes (prefixed vp-) are only for the sidebar/topbar shell itself. */

:root {
    /* Background / surface / border */
    --bg: #f5f7fb;
    --card: #ffffff;
    --soft: #f1f4fb;
    --text: #182035;
    --muted: #70798f;
    --text-inverse: #ffffff;
    --line: #e5e9f2;
    --line-strong: #d6dced;

    /* Primary / secondary brand colors */
    --pri: #5b5cf0;
    --pri2: #7c3aed;
    --pri-hover: #4a4bd9;
    --pri-active: #3f40c0;
    --sec: #00b8a9;
    --sec-hover: #00a598;
    --acc: #00b8a9;

    /* Semantic colors (success / warning / error / info) */
    --ok: #16a34a;
    --ok-bg: #e8f6ee;
    --ok-border: #bdf0e0;
    --warn: #a15c07;
    --warn-bg: #fdf1de;
    --warn-border: #f6dfb0;
    --bad: #ef4444;
    --bad-bg: #fdeaea;
    --bad-border: #ffd2d2;
    --error: var(--bad);
    --error-bg: var(--bad-bg);
    --error-border: var(--bad-border);
    --info: #1d4ed8;
    --info-bg: #eaf0fe;
    --info-border: #cddcfb;

    /* Interaction states */
    --focus-ring: 0 0 0 3px rgba(91, 92, 240, 0.16);
    --hover-tint: rgba(91, 92, 240, 0.08);
    --disabled-bg: #eef0f6;
    --disabled-text: #a7aec2;
    --disabled-border: #e5e9f2;

    /* Spacing scale (8px grid) */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;

    /* Radius tokens, per component */
    --r: 20px;
    --r-sm: 8px;
    --r-lg: 20px;
    --r-btn: 12px;
    --r-input: 12px;
    --r-card: 20px;
    --r-dialog: 20px;
    --r-table: 20px;
    --r-dropdown: 20px;
    --r-badge: 999px;

    /* Shadow scale */
    --shadow-none: none;
    --shadow: 0 18px 50px rgba(38, 52, 90, 0.10);
    --shadow-sm: 0 1px 2px rgba(38, 52, 90, 0.08), 0 1px 1px rgba(38, 52, 90, 0.05);
    --shadow-md: 0 8px 24px rgba(38, 52, 90, 0.12);
    --shadow-lg: 0 18px 50px rgba(38, 52, 90, 0.10);
    --shadow-hover: 0 14px 32px rgba(91, 92, 240, 0.28);
    --shadow-dialog: 0 30px 90px rgba(20, 24, 50, 0.35);

    /* Typography scale */
    --fs-display: 34px;
    --fs-page-title: 21px;
    --fs-section-title: 16px;
    --fs-card-title: 14px;
    --fs-subheading: 13px;
    --fs-body: 14px;
    --fs-small: 12px;
    --fs-caption: 11px;
    --fs-label: 11px;
    --fs-table: 13px;
    --fs-button: 13px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;

    --side: 264px;
    --font-data: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", "Roboto Mono", monospace;
}

body.dark {
    --bg: #0e1320;
    --card: #151b2b;
    --soft: #20283d;
    --text: #edf2ff;
    --muted: #9aa6bc;
    --line: #29324a;
    --line-strong: #38416060;
    --ok-bg: #123322;
    --ok-border: #1c4a34;
    --warn: #fbbf24;
    --warn-bg: #3a2a0c;
    --warn-border: #55400f;
    --bad-bg: #3a1414;
    --bad-border: #5a1f1f;
    --info: #7aa2ff;
    --info-bg: #16234a;
    --info-border: #253568;
    --pri-hover: #7071f5;
    --pri-active: #8a8bf7;
    --hover-tint: rgba(122, 162, 255, 0.12);
    --disabled-bg: #1b2233;
    --disabled-text: #55607a;
    --disabled-border: #29324a;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
    --shadow-dialog: 0 30px 90px rgba(0, 0, 0, 0.6);
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at 0 0, rgba(91, 92, 240, 0.09), transparent 28%),
                radial-gradient(circle at 100% 10%, rgba(0, 184, 169, 0.08), transparent 22%),
                var(--bg);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--pri);
}

button, input, select, textarea {
    font: inherit;
}

/* On-brand keyboard focus ring. :focus-visible (not :focus) so it only shows for keyboard
   navigation, matching what the browser itself would decide, rather than also flashing on
   every mouse click. Interactive elements otherwise had no custom focus style at all -
   just the browser default outline, which is accessible but visually disconnected from the
   theme (and easy to lose against a rounded, border-less .btn's gradient background).
   .field input/select/textarea are excluded - they already get their own box-shadow focus
   ring a few lines up, and adding this too would just double up on the same element. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--pri);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Sidebar shell (Site.Modern.Master only) ---------- */

.vp-app {
    display: grid;
    grid-template-columns: var(--side) 1fr;
    min-height: 100vh;
}

.vp-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--side);
    padding: 22px 16px;
    background: linear-gradient(180deg, #292c76, #5146c8 48%, #6e4ed3);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 50;
    box-shadow: 18px 0 45px rgba(40, 37, 113, 0.2);
    transition: transform 0.25s ease;
}

.vp-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 2px 8px 20px;
}

.vp-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #fff;
    color: #4f46e5;
    display: grid;
    place-items: center;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.vp-brand b {
    display: block;
    font-size: 16px;
}

.vp-brand small {
    opacity: 0.72;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 10px;
}

.vp-nav-scroll {
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
}

.vp-sidebar .nav-group {
    display: block;
    border-right: none;
    padding: 10px 4px 4px;
}

.vp-sidebar .nav-group-title {
    display: flex;
    /* flex-start, not center: a long group label ("Performance, Task & Project") wraps to two
       lines in the sidebar's width, and centering against the full wrapped block puts the
       chevron floating between the two lines - visibly out of step with every other (one-line)
       heading, whose chevron naturally sits level with its single line. flex-start keeps the
       chevron level with the FIRST line for every heading, wrapped or not. */
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    /* A <button>'s default appearance:auto can keep painting a native control surface (a
       light "ButtonFace"-style box on some Windows/Chrome combinations) UNDER background:none
       above - without this reset, the button can render as a near-illegible light box behind
       light text instead of plain text on the sidebar's own purple background. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none;
    font: inherit;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 6px;
    padding: 4px 6px 4px 10px;
    cursor: pointer;
    border-radius: 8px;
}

.vp-sidebar .nav-group-title:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.vp-sidebar .nav-group-title:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

/* Chevron rotates to point right when the group is collapsed - state lives on the button's
   aria-expanded attribute (set by site.theme.js), not a class, so it can never drift out of
   sync with what a screen reader announces. */
.vp-sidebar .nav-group-title::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
    /* Nudges the chevron down from the flex-start edge to sit level with the first line's own
       text (rather than the very top of the line box), matching where it already looked right
       on every single-line heading before align-items changed to flex-start above. */
    margin-top: 5px;
    margin-left: 6px;
}

.vp-sidebar .nav-group-title[aria-expanded="false"]::after {
    transform: rotate(-45deg);
}

.vp-sidebar .nav-group.collapsed a {
    display: none;
}

.vp-sidebar .nav-group a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 12px;
    margin-bottom: 2px;
    opacity: 0.88;
    white-space: normal;
}

.vp-sidebar .nav-group a:hover {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

.vp-help {
    margin-top: 12px;
    padding: 13px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 11px;
}

.vp-help a {
    color: #fff;
    font-weight: 700;
}

/* ---------- Top bar ---------- */

.vp-main {
    grid-column: 2;
    min-width: 0;
}

.vp-topbar {
    height: 72px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
}

.vp-menu-toggle {
    display: none;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.vp-heading .vp-heading-text {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.vp-top-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.vp-company-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* These class names (app-*) are emitted by SiteNavHelper.BuildNotificationBellHtml /
   BuildProfileWidgetHtml - shared markup rendered into both this theme's and the classic
   theme's Literals, restyled here per the same "same class vocabulary" convention as the
   rest of this file (see file header comment). */
.app-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
}

.app-user-photo, .app-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
}

.app-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f6b26b, #ef6d5b);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.app-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 9px;
    background: var(--bad);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.app-notif-wrap, .app-profile-wrap {
    position: relative;
}

.app-dropdown-panel {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    z-index: 40;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

.app-dropdown-panel.open {
    display: block;
}

.app-profile-panel {
    width: 220px;
    padding: 16px;
}

.app-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.app-profile-card-photo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    margin-bottom: 4px;
}

.app-profile-card-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}

.app-profile-card-code, .app-profile-card-designation {
    font-size: 12px;
    color: var(--muted);
}

.app-notif-panel {
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
}

.app-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    font-size: 13px;
}

.app-notif-header a {
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
}

.app-notif-empty {
    padding: 20px 14px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.app-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-notif-item a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--text);
}

.app-notif-item:last-child a {
    border-bottom: none;
}

.app-notif-item a:hover {
    background: var(--soft);
}

.app-notif-unread a {
    background: var(--soft);
}

.app-notif-title {
    font-size: 13px;
    font-weight: 600;
}

.app-notif-message {
    font-size: 12px;
    color: var(--muted);
}

.app-notif-time {
    font-size: 11px;
    color: var(--muted);
}

.company-logo-preview {
    display: block;
    max-height: 80px;
    max-width: 240px;
    object-fit: contain;
    margin-bottom: 8px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
}

.vp-round {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    border-radius: 12px;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 15px;
}

.vp-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    padding: 5px 12px 5px 5px;
    border-radius: 13px;
    background: var(--card);
    white-space: nowrap;
}

.vp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f6b26b, #ef6d5b);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 11px;
    flex-shrink: 0;
}

.vp-profile b, .vp-profile small {
    display: block;
    line-height: 1.3;
}

.vp-profile b {
    font-size: 11px;
}

.vp-profile small {
    font-size: 9px;
    color: var(--muted);
}

.vp-theme-link {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    white-space: nowrap;
}

.vp-theme-link:hover {
    color: var(--pri);
    border-color: var(--pri);
}

.vp-content {
    padding: 24px 26px 90px;
    max-width: 1600px;
    margin: auto;
}

/* ---------- Shared page content, restyled (used by every existing module page) ---------- */

h1 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 0;
}

fieldset {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    padding: 18px 20px;
    min-width: 0;
}

legend {
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pri);
    padding: 0 6px;
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.field-row:last-child {
    margin-bottom: 0;
}

.field {
    display: flex;
    flex-direction: column;
    flex: 1 1 220px;
    min-width: 220px;
}

.field label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 6px;
}

.field input[type="text"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="number"],
.field input[type="password"],
.field input[type="file"],
.field select,
.field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--soft);
    border-radius: 12px;
    font-size: 15px;
    color: var(--text);
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--pri);
    box-shadow: 0 0 0 3px rgba(91, 92, 240, 0.16);
}

.field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
    accent-color: var(--pri);
}

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.btn, a.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--pri), var(--pri2));
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(91, 92, 240, 0.22);
    transition: transform 0.05s ease, box-shadow 0.15s ease;
}

.btn:hover, a.btn:hover {
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(91, 92, 240, 0.32);
}

.btn:active, a.btn:active {
    transform: translateY(1px);
}

.btn-secondary, a.btn-secondary {
    background: var(--soft);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: none;
}

.btn-secondary:hover, a.btn-secondary:hover {
    color: var(--pri);
    border-color: var(--pri);
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    background: var(--card);
}

.grid {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    background: var(--card);
    font-size: 13px;
}

.grid th {
    background: var(--soft);
    color: var(--muted);
    text-align: left;
    padding: 11px 14px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

.grid td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
}

.grid tr:last-child td {
    border-bottom: none;
}

.grid tr:hover td {
    background: var(--soft);
}

.grid a {
    color: var(--pri);
    text-decoration: none;
    font-weight: 700;
}

.grid a:hover {
    text-decoration: underline;
}

.status-inactive {
    color: var(--bad);
    font-weight: 700;
}

/* ---------- Smart Grid (Phase 2, 2026-07): sorting, mobile card view, skeleton rows ---------- */

.grid th.sortable { padding: 0; }

.grid th.sortable a {
    display: block;
    padding: 11px 14px;
    color: inherit;
    text-decoration: none;
}

.grid th.sortable a:hover { color: var(--pri); }

.table-scroll {
    max-height: 560px;
    overflow-y: auto;
}

.table-scroll .grid th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.grid.grid-loading { opacity: 0.5; }

@media (max-width: 640px) {
    .grid-cards thead { display: none; }

    .grid-cards, .grid-cards tbody, .grid-cards tr, .grid-cards td {
        display: block;
        width: 100%;
    }

    .grid-cards {
        min-width: 0;
    }

    .grid-cards tr {
        border-bottom: 1px solid var(--line);
        padding: 10px 0;
    }

    .grid-cards tr:hover td {
        background: none;
    }

    .grid-cards td {
        border: none;
        padding: 4px 0;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
    }

    .grid-cards td[data-label]::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        text-align: left;
        flex-shrink: 0;
    }

    .grid-cards td:not([data-label]) {
        justify-content: flex-start;
        text-align: left;
    }
}

/* ---------- Status badges, stat tiles, tabular data (design refresh, 2026-07) ----------
   Additive only - restyles nothing above. Badges give the same status words the .grid table
   already renders (Active/Inactive/Probation/Pending) a color+shape encoding instead of plain
   text, so status reads at a glance without relying on color alone (each variant pairs a hue
   with a filled dot, not color only). .stat-card is for a short row of KPI tiles above a page's
   main content (see Default.aspx's Platform Overview panel for the first use). .tabular applies
   to any numeric column (codes, phone numbers, amounts, dates) so figures actually align. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-good { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--soft); color: var(--muted); }

.tabular {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-data);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.stat-card .stat-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: linear-gradient(135deg, rgba(91, 92, 240, 0.14), rgba(124, 58, 237, 0.14));
    color: var(--pri);
}

.stat-card .stat-value {
    font-size: 26px;
    font-weight: 700;
    margin-top: 12px;
    letter-spacing: -0.01em;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* ---------- Dashboard (Default.aspx) - KPI tiles, welcome header, quick actions ----------
   Only ever defined in Site.VHris.css/Site.Suite.css - Default.aspx is shared across all 4
   themes, so this file was silently missing them, rendering the dashboard's KPI tiles and
   quick-action links as unstyled plain text/links under the Modern theme. Caught via a real
   screenshot, not a content check. Modeled on the .stat-grid/.stat-card pair above, using
   this file's own tokens. */

.welcome {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.welcome h1 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

.eyebrow {
    color: var(--pri);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.kpi {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}

.kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.kpi-label {
    font-size: 12px;
    color: var(--muted);
}

.kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: rgba(91, 92, 240, 0.1);
    color: var(--pri);
    font-size: 14px;
    flex-shrink: 0;
}

.kpi-value {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 8px;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

.kpi-note {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.quick-action {
    min-height: 84px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    border-radius: var(--r-lg);
    padding: 13px;
    text-align: left;
    text-decoration: none;
    display: block;
    transition: 0.15s ease;
}

.quick-action:hover {
    border-color: var(--pri);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.quick-action i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: rgba(91, 92, 240, 0.1);
    color: var(--pri);
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.quick-action strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.quick-action span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.35;
}

@media (max-width: 414px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .welcome {
        flex-direction: column;
    }
}

.message {
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 600;
}

.message-success {
    background: #e9fbf5;
    color: #0b9474;
    border: 1px solid #bdf0e0;
}

.message-error {
    background: #fff0f0;
    color: var(--bad);
    border: 1px solid #ffd2d2;
}

.message-warning {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid var(--warn-border);
}

.message-info {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
}

/* ---------- Typography scale (design foundation, 2026-07) ----------
   Utility classes for the required type roles. h1/fieldset/legend/etc above already carry
   their own sizes for backward compatibility - these classes are for places that need a
   given role without a semantic heading element, e.g. a card title inside a div. */

.text-display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.text-page-title { font-size: var(--fs-page-title); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.text-section-title { font-size: var(--fs-section-title); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.text-card-title { font-size: var(--fs-card-title); font-weight: var(--fw-bold); line-height: var(--lh-normal); }
.text-subheading { font-size: var(--fs-subheading); font-weight: var(--fw-semibold); color: var(--muted); }
.text-body { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-normal); }
.text-small { font-size: var(--fs-small); font-weight: var(--fw-regular); line-height: var(--lh-normal); }
.text-caption { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--muted); }
.text-label { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.text-table { font-size: var(--fs-table); }
.text-button { font-size: var(--fs-button); font-weight: var(--fw-bold); }

/* ---------- Utility classes (design foundation, 2026-07) ----------
   Small atomic helpers so pages don't need one-off inline styles or arbitrary spacing.
   Naming follows the 8px scale in --space-*: .mt-16 = margin-top:16px, etc. */

.m-0 { margin: 0; }
.mt-4 { margin-top: var(--space-4); } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); } .mt-24 { margin-top: var(--space-24); } .mt-32 { margin-top: var(--space-32); }
.mb-4 { margin-bottom: var(--space-4); } .mb-8 { margin-bottom: var(--space-8); } .mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); } .mb-24 { margin-bottom: var(--space-24); } .mb-32 { margin-bottom: var(--space-32); }
.ml-4 { margin-left: var(--space-4); } .ml-8 { margin-left: var(--space-8); } .ml-16 { margin-left: var(--space-16); }
.mr-4 { margin-right: var(--space-4); } .mr-8 { margin-right: var(--space-8); } .mr-16 { margin-right: var(--space-16); }
.p-0 { padding: 0; }
.p-4 { padding: var(--space-4); } .p-8 { padding: var(--space-8); } .p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); } .p-24 { padding: var(--space-24); } .p-32 { padding: var(--space-32); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.gap-4 { gap: var(--space-4); } .gap-8 { gap: var(--space-8); } .gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); } .gap-24 { gap: var(--space-24); }

.d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-block { display: block; }
.d-none { display: none; } .d-grid { display: grid; }
.flex-col { flex-direction: column; } .flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; }
.flex-1 { flex: 1 1 0%; } .flex-none { flex: none; }

.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
.text-muted { color: var(--muted); }
.text-nowrap { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.w-100 { width: 100%; } .h-100 { height: 100%; }
.overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; }

/* Responsive display helpers, keyed to the breakpoint reference documented above the
   "Responsive" section further down this file. Suffix = the width at/under which the
   element hides (mobile-first "d-none" defaults would require a much larger rewrite of
   every page's markup, so these are the practical "hide at/under X" helpers instead). */
.d-none-mobile { }
.d-none-tablet { }

/* ---------- New shared components (design foundation, 2026-07) ----------
   Dialog/modal, tabs, accordion, breadcrumbs, pagination, tooltip, avatar, skeleton,
   empty-state. None of these are wired into any page yet - Phase 3 of the rollout adds
   markup that uses them, page by page. Adding them here first (Phase 1) means every page
   gets the same look the moment it opts in, with no per-page CSS. */

.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 40, 0.45);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
}

.dialog-backdrop.open {
    display: flex;
}

.dialog {
    background: var(--card);
    border-radius: var(--r-dialog);
    box-shadow: var(--shadow-dialog);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-16) var(--space-24);
    border-bottom: 1px solid var(--line);
}

.dialog-title {
    font-size: var(--fs-section-title);
    font-weight: var(--fw-bold);
    margin: 0;
}

.dialog-close {
    border: none;
    background: none;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: var(--space-4);
}

.dialog-close:hover { color: var(--text); }

.dialog-body {
    padding: var(--space-24);
    overflow-y: auto;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
    padding: var(--space-16) var(--space-24);
    border-top: 1px solid var(--line);
}

.tabs {
    display: flex;
    gap: var(--space-4);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-16);
    overflow-x: auto;
}

.tab {
    border: none;
    background: none;
    padding: var(--space-8) var(--space-16);
    font-size: var(--fs-button);
    font-weight: var(--fw-semibold);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab:hover { color: var(--text); }

.tab.active {
    color: var(--pri);
    border-bottom-color: var(--pri);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.accordion-item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: var(--space-8);
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: none;
    padding: var(--space-12) var(--space-16);
    font-size: var(--fs-card-title);
    font-weight: var(--fw-semibold);
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.accordion-header:hover { background: var(--soft); }

.accordion-icon {
    transition: transform 0.15s ease;
    color: var(--muted);
}

.accordion-item.open .accordion-icon { transform: rotate(180deg); }

.accordion-body {
    display: none;
    padding: 0 var(--space-16) var(--space-16);
    color: var(--muted);
    font-size: var(--fs-body);
}

.accordion-item.open .accordion-body { display: block; }

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    font-size: var(--fs-small);
    color: var(--muted);
    margin-bottom: var(--space-16);
}

.breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}

.breadcrumbs a:hover { color: var(--pri); }

.breadcrumbs .current {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

.breadcrumb-sep {
    color: var(--line-strong);
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-12) 0;
}

.pagination-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 var(--space-8);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    border-radius: var(--r-sm);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    text-align: center;
}

.pagination-btn:hover:not(:disabled) { border-color: var(--pri); color: var(--pri); }
.pagination-btn.active { background: var(--pri); border-color: var(--pri); color: #fff; }
.pagination-btn:disabled { color: var(--disabled-text); cursor: not-allowed; background: var(--disabled-bg); }

.pagination-summary {
    font-size: var(--fs-small);
    color: var(--muted);
    margin-right: auto;
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--text);
    color: var(--card);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    padding: 5px 9px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 70;
}

[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: linear-gradient(135deg, #f6b26b, #ef6d5b);
    color: #fff;
    font-size: 11px;
    font-weight: var(--fw-black);
    flex-shrink: 0;
}

.avatar-sm { width: 24px; height: 24px; font-size: 9px; }
.avatar-lg { width: 48px; height: 48px; font-size: 15px; border-radius: var(--r-sm); }

.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--soft);
    border-radius: var(--r-sm);
    color: transparent !important;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: skeleton-shimmer 1.3s infinite;
}

body.dark .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.skeleton-text { height: 13px; margin-bottom: 6px; width: 100%; }
.skeleton-text:last-child { width: 60%; }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-48) var(--space-24);
    color: var(--muted);
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--soft);
    display: grid;
    place-items: center;
    font-size: 20px;
    margin-bottom: var(--space-16);
    color: var(--muted);
}

.empty-state-title {
    font-size: var(--fs-card-title);
    font-weight: var(--fw-bold);
    color: var(--text);
    margin-bottom: var(--space-4);
}

.empty-state-text {
    font-size: var(--fs-small);
    color: var(--muted);
    max-width: 320px;
}

.empty-state .btn, .empty-state a.btn {
    margin-top: var(--space-16);
}

/* ---------- Chat ---------- */

.chat-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.chat-sidebar {
    width: 280px;
    flex-shrink: 0;
}

.chat-main {
    flex: 1;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.chat-channel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.chat-channel-item a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}

.chat-channel-item:last-child a {
    border-bottom: none;
}

.chat-channel-item a:hover {
    background: var(--soft);
}

.chat-channel-active a {
    background: var(--soft);
}

.chat-channel-unread a {
    font-weight: 700;
}

.chat-channel-name {
    font-size: 13px;
}

.chat-channel-preview {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-channel-empty {
    padding: 14px 12px;
    color: var(--muted);
    font-size: 13px;
}

.chat-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
}

.chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 480px;
}

.chat-message {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: var(--r);
    background: var(--soft);
    align-self: flex-start;
}

.chat-message-mine {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--pri), var(--pri2));
    color: #fff;
}

.chat-message-sender {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.chat-message-mine .chat-message-sender {
    color: rgba(255, 255, 255, 0.85);
}

.chat-message-text {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-message-time {
    font-size: 10px;
    color: var(--muted);
    text-align: right;
    margin-top: 2px;
}

.chat-message-mine .chat-message-time {
    color: rgba(255, 255, 255, 0.75);
}

.chat-composer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

.chat-composer textarea {
    flex: 1;
    resize: none;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
}

.chat-manage-members {
    margin-top: 10px;
}

/* ---------- Ask HRIS assistant ---------- */

.ai-assistant-toggle {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 50;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--pri), var(--pri2));
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.ai-assistant-panel {
    display: none;
    position: fixed;
    right: 24px;
    bottom: 88px;
    z-index: 50;
    width: 320px;
    height: 420px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    flex-direction: column;
    overflow: hidden;
}

.ai-assistant-panel.open {
    display: flex;
}

.ai-assistant-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
}

.ai-assistant-scrollback {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-assistant-bubble {
    max-width: 85%;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    background: var(--soft);
    color: var(--text);
    align-self: flex-start;
}

.ai-assistant-bubble a {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--pri);
}

.ai-assistant-bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--pri), var(--pri2));
    color: #fff;
}

.ai-assistant-composer {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--line);
}

.ai-assistant-composer input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
}

@media (max-width: 720px) {
    .chat-layout {
        flex-direction: column;
    }

    .chat-sidebar {
        width: 100%;
    }
}

details {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 10px;
}

details > summary {
    cursor: pointer;
    padding: 6px 2px;
}

/* ---------- Login page (Login.aspx, when the modern theme cookie is active) ---------- */

.login-shell {
    max-width: 420px;
    margin: 90px auto;
    padding: 0 16px;
}

.login-shell fieldset {
    padding: 28px 26px;
}

body:has(.login-shell) .app-header {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-top: 20px;
}

body:has(.login-shell) .app-title {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--pri);
}

/* ---------- Responsive ----------
   Reference breakpoints (the 9 widths required by the design brief). Plain CSS custom
   properties cannot be read inside an @media condition, so these are documented here as
   literals and used directly in the rules below - actual @media rules only exist where
   layout genuinely changes at that tier, rather than repeating all 9 on every component:

     320 / 375 / 414   small / large / extra-large mobile  (single column, drawer nav)
     768               tablet portrait                     (single/two column forms, drawer nav)
     1024              tablet landscape / small laptop      (collapsible sidebar, two-column forms)
     1280 / 1366       laptop / common desktop               (full sidebar, multi-column)
     1440 / 1920       desktop / large desktop                (full sidebar, multi-column, wider max-width)
*/

.vp-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 40, 0.45);
    z-index: 45;
}

.vp-backdrop.open {
    display: block;
}

@media (max-width: 1024px) {
    .vp-app {
        display: block;
    }

    .vp-sidebar {
        width: 280px;
        transform: translateX(-105%);
    }

    .vp-sidebar.open {
        transform: none;
    }

    .vp-main {
        grid-column: auto;
    }

    .vp-menu-toggle {
        display: grid;
    }

    .vp-content {
        padding: 18px 16px 90px;
    }

    .vp-topbar {
        padding: 0 16px;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .vp-content {
        max-width: 1280px;
    }
}

@media (max-width: 768px) {
    /* The topbar's icon-button row (notifications/chat/AI/theme/profile/logout) does not
       shrink or wrap by default, which was overflowing the viewport by ~150-250px at mobile
       widths (caught by Tools/uiaudit - document.documentElement.scrollWidth exceeded
       clientWidth identically on every page, since the cause is this shared shell, not
       page content). Wrapping the action row and shrinking icon buttons fixes it without
       hiding any functionality. */
    .vp-topbar {
        flex-wrap: wrap;
        height: auto;
        min-height: 62px;
        padding: 10px 16px;
        row-gap: 8px;
    }

    .vp-top-actions {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
    }

    .app-icon-btn, .vp-round {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .vp-heading .vp-heading-text {
        font-size: 15px;
    }

    .vp-profile small {
        display: none;
    }

    .field-row {
        gap: 10px;
    }

    .field {
        flex-basis: 100%;
        min-width: 0;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar .field, .toolbar .btn, .toolbar a.btn, .toolbar a.btn-secondary {
        width: 100%;
    }

    .dialog {
        max-width: calc(100vw - 32px);
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vp-topbar {
        min-height: 56px;
    }
}

@media (max-width: 414px) {
    .vp-brand small,
    .vp-help {
        display: none;
    }
}

/* ---------- Chat enrichment (avatars, mentions, attachments, edit/delete, search) ---------- */

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.chat-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f6b26b, #ef6d5b);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.chat-channel-item a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-channel-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.chat-channel-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 9px;
    background: var(--bad);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    flex-shrink: 0;
}

.chat-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chat-header-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
}

.chat-header-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-header-search input {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
}

.chat-member-designation {
    color: var(--muted);
    font-size: 12px;
    margin-left: 6px;
}

.chat-load-older {
    display: block;
    margin: 8px auto;
}

.chat-message {
    display: flex;
    gap: 8px;
    max-width: 75%;
    align-self: flex-start;
}

.chat-message-mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-message-body {
    background: var(--soft);
    border-radius: var(--r);
    padding: 8px 12px;
    min-width: 0;
    color: var(--text);
}

.chat-message-mine .chat-message-body {
    background: linear-gradient(135deg, var(--pri), var(--pri2));
    color: #fff;
}

.chat-message-mine .chat-message-sender,
.chat-message-mine .chat-message-time {
    color: rgba(255, 255, 255, 0.85);
}

.chat-message-deleted {
    font-style: italic;
    color: var(--muted);
}

.chat-mention {
    background: rgba(91, 92, 240, 0.18);
    color: var(--pri);
    border-radius: 4px;
    padding: 0 3px;
    font-weight: 600;
}

.chat-message-mine .chat-mention {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.chat-message-actions {
    display: inline-flex;
    gap: 8px;
    margin-left: 8px;
}

.chat-message-actions button {
    border: none;
    background: none;
    color: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.chat-message-seenby {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
}

.chat-message-mine .chat-message-seenby {
    color: rgba(255, 255, 255, 0.75);
}

.chat-edit-textarea {
    width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
}

.chat-attachment {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    text-decoration: none;
    color: inherit;
}

.chat-attachment-image {
    max-width: 160px;
    max-height: 160px;
    border-radius: 10px;
    display: block;
}

.chat-attachment-icon {
    font-size: 18px;
}

.chat-attachment-name {
    font-size: 12px;
    text-decoration: underline;
}

.chat-composer input[type="file"] {
    max-width: 140px;
    font-size: 12px;
}

.chat-mention-suggestions {
    position: absolute;
    z-index: 60;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    max-height: 160px;
    overflow-y: auto;
}

.chat-mention-suggestion-item {
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
}

.chat-mention-suggestion-item:hover {
    background: var(--soft);
}

.chat-search-empty {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* ---------- Global search type-ahead ----------
   Floating suggestions list built by Content/search-autocomplete.js and appended to <body>,
   so it is positioned in page coordinates rather than inside the toolbar. Every theme needs
   these rules: the script is loaded by all four masters, but the styles previously existed
   only in Site.css (classic). */
.search-suggestions {
    position: absolute;
    z-index: 1000;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    max-height: 320px;
    overflow-y: auto;
}

.search-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-item:hover {
    background: var(--hover-tint);
}

/* ---------- Print (design foundation, 2026-07) ----------
   Targets the pages named in the spec: Employee Profile, Reports, Payroll, Leave Summary,
   Attendance. Applied globally rather than gated per-page, since every page shares this
   shell - nav/topbar/toolbars/buttons never make sense on paper regardless of which page
   printed them. */
@media print {
    .vp-sidebar, .vp-topbar, .vp-backdrop, .vp-menu-toggle,
    .toolbar, .ai-assistant-toggle, .ai-assistant-panel,
    .app-dropdown-panel, .dialog-backdrop,
    a.btn, a.btn-secondary, button.btn, button.btn-secondary,
    .pagination, .chat-composer {
        display: none !important;
    }

    .vp-app {
        display: block;
    }

    .vp-main {
        grid-column: auto;
    }

    .vp-content {
        padding: 0;
        max-width: none;
    }

    body {
        background: #fff;
        color: #000;
    }

    fieldset {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .table-responsive {
        box-shadow: none;
        overflow: visible;
    }

    .grid {
        min-width: 0;
    }

    .grid thead {
        display: table-header-group;
    }

    .grid tr {
        break-inside: avoid;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}

/* ------------------------------------------------------------------
   Smart Grid per-column filter row (UserList, 2026-07-21)
   Sits inside <th> under the sort link. Mirrors this theme's .field
   input tokens (--line / --soft / --acc / --focus-ring) at a compact
   size, so it reads as an input rather than as more heading text.
   ------------------------------------------------------------------ */
.grid th .col-filter-wrap {
    display: block;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--line);
}

.grid th .col-filter {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.grid th .col-filter::placeholder {
    color: var(--muted);
    opacity: 0.8;
    font-weight: 400;
}

.grid th .col-filter:focus {
    border-color: var(--acc);
    box-shadow: var(--focus-ring);
}

/* A filtered column is called out, so a grid showing 1 of 22 rows never
   looks like missing data - you can see which column is doing it. */
.grid th .col-filter-active {
    border-color: var(--acc);
    box-shadow: inset 0 0 0 1px var(--acc);
    font-weight: 600;
}

.grid th .col-filter-range {
    display: flex;
    gap: 5px;
}

.grid th .col-filter-range .col-filter {
    min-width: 0;
    flex: 1 1 0;
    padding-left: 6px;
    padding-right: 3px;
}

.filter-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    font-size: 13px;
    color: var(--muted);
}

/* CTC calculator + computed salary fields (Employee Master, 2026-07-21) */
.ctc-calc {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
    padding: 14px 16px;
    margin: 0 0 18px;
}
.ctc-calc-head { font-weight: 600; color: var(--text); margin-bottom: 10px; }
.ctc-calc-sub { font-weight: 400; font-size: 12.5px; color: var(--muted); margin-left: 8px; }
.ctc-calc-grid { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.ctc-calc-grid label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12.5px; color: var(--muted); min-width: 150px;
}
.ctc-calc-grid input {
    padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--text); font-size: 13.5px; outline: 0;
}
.ctc-calc-grid input:focus { border-color: var(--acc); box-shadow: var(--focus-ring); }
.ctc-calc-result { margin: 12px 0 10px; }
.calc-table { width: 100%; max-width: 460px; border-collapse: collapse; font-size: 13.5px; }
.calc-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
.calc-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-strong { font-weight: 700; }
.calc-warn { color: var(--bad); font-size: 13px; margin: 6px 0 0; }
.ctc-calc-note, .salary-calc-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.salary-calc-note { margin-bottom: 14px; }
input.is-computed { background: var(--soft); font-weight: 600; }

/* Structure-driven CTC calculator additions (2026-07-21) */
.ctc-calc-struct { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line, #d8dde6); }
.ctc-struct-input { padding: 6px 9px; border-radius: 8px; font-size: 13.5px; }
.calc-basis { display: block; font-size: 11.5px; opacity: 0.75; font-weight: 400; }
.calc-ok { font-size: 13px; margin: 8px 0 0; }


/* ----------------------------------------------------------------------------
   Statutory setup screens (2026-07-22)

   Professional Tax and Labour Welfare Fund put a state list beside an editor;
   PF & Pension, ESIC, Income Tax and the hub reuse the same section headings.
   These class names already existed in ProfessionalTax.aspx (428) but had no
   styles in any stylesheet, so every one of those screens collapsed to plain
   stacked divs.

   The four themes use two different custom-property vocabularies (Site.css:
   --color-*/--radius-*; the three themed sheets: --line/--card/--text/--r-*),
   so every var() here is chained through both and ends in a literal. One block,
   appended verbatim to all four sheets, rather than four divergent copies.
   ---------------------------------------------------------------------------- */
.page-intro {
    font-size: 13px;
    color: var(--color-text-muted, var(--muted, #64748b));
    margin: 0 0 14px;
    max-width: 90ch;
    line-height: 1.55;
}
.pt-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}
.pt-states {
    flex: 0 1 360px;
    min-width: 280px;
    max-height: 640px;
    /* overflow on BOTH axes: the inner grid has a second column (the
       configured/not-configured badge) that is the entire point of this list,
       and overflow-y alone clipped it off the right-hand edge. */
    overflow: auto;
    border: 1px solid var(--color-border, var(--line, #e2e8f0));
    border-radius: var(--radius-sm, var(--r-card, 8px));
    background: var(--color-surface, var(--card, #ffffff));
    padding: 10px 12px;
}
.pt-editor {
    flex: 1 1 480px;
    min-width: 0;
}
.pt-panel-head {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text, var(--text, #1f2937));
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border, var(--line, #e2e8f0));
}
.pt-states .pt-panel-head { margin-top: 0; }
/* The themes give .grid generous cell padding and nowrap, which pushed this
   two-column list to ~640px inside a 360px panel and scrolled the
   configured/not-configured badge - the whole point of the list - out of sight. */
.pt-states .grid { width: 100%; min-width: 0; font-size: 12.5px; }
.pt-states .grid th,
.pt-states .grid td { padding: 6px 8px; white-space: normal; }
.pt-empty {
    border: 1px dashed var(--color-border-strong, var(--line-strong, #cbd5e1));
    border-radius: var(--radius-sm, var(--r-card, 8px));
    padding: 24px 18px;
    color: var(--color-text-muted, var(--muted, #64748b));
    font-size: 13.5px;
    text-align: center;
}
.pt-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    max-width: 150px;
}