:root {
    --bg: #f6f7f2;
    --bg-accent: #edf1ea;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-strong: #ffffff;
    --text: #17213a;
    --muted: #667085;
    --brand: #117864;
    --brand-dark: #0b4f44;
    --accent: #f2a95f;
    --secondary: #8f4a6f;
    --border: rgba(23, 33, 58, 0.11);
    --shadow: 0 18px 45px rgba(23, 33, 58, 0.1);
    --soft-shadow: 0 8px 24px rgba(23, 33, 58, 0.08);
    --motion-fast: 140ms cubic-bezier(0.2, 0, 0.2, 1);
    --motion-base: 220ms cubic-bezier(0.2, 0, 0.2, 1);
    --motion-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);
    --focus-ring: 0 0 0 0.22rem rgba(17, 120, 100, 0.14);
    --menu-icon-color: #117864;
}

/* Employee self-service redesign */
.employee-self-page {
    padding-bottom: 7rem;
}

.employee-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: end;
    padding: 1.35rem 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(20, 121, 98, 0.16);
    border-radius: 8px;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(246, 253, 250, 0.92)),
        radial-gradient(circle at 90% 12%, rgba(234, 174, 88, 0.16), transparent 28%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.employee-hero h1 {
    margin: 0.25rem 0 0;
    color: #18243c;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.employee-hero p,
.employee-panel p,
.employee-muted {
    color: #67728a;
    font-weight: 700;
}

.employee-hero-actions,
.employee-row-actions,
.employee-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-end;
}

.employee-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.employee-metric {
    min-height: 7rem;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.employee-metric span {
    display: block;
    color: #68728a;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.employee-metric strong {
    display: block;
    margin-top: 0.45rem;
    color: #18243c;
    font-size: 1.55rem;
    line-height: 1.1;
}

.employee-metric small {
    display: block;
    margin-top: 0.35rem;
    color: #6f7b91;
    font-weight: 700;
}

.employee-panel,
.employee-compact-panel {
    margin-bottom: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.employee-panel {
    padding: 1.1rem;
}

.employee-compact-panel {
    padding: 0.95rem;
}

.employee-panel-head {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.employee-panel-title span,
.employee-eyebrow {
    display: block;
    color: #067260;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.employee-panel-title h2,
.employee-panel-title h3 {
    margin: 0.2rem 0 0;
    color: #19243c;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.employee-panel-title p {
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
}

.employee-grid-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.employee-grid-aside {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.75fr);
    gap: 1rem;
}

.employee-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.employee-form-grid .span-2 {
    grid-column: span 2;
}

.employee-form-grid .span-3 {
    grid-column: 1 / -1;
}

.employee-field-card,
.employee-info-card {
    padding: 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(247, 252, 250, 0.94), rgba(255, 250, 243, 0.82));
}

.employee-info-card span {
    display: block;
    color: #68728a;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.employee-info-card strong {
    display: block;
    margin-top: 0.35rem;
    color: #19243c;
}

.employee-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #fff;
}

.employee-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.employee-table thead th {
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f7faf9;
    color: #647089;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.employee-table tbody td {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: #1d2941;
    font-weight: 700;
    vertical-align: middle;
}

.employee-table tbody tr:last-child td {
    border-bottom: 0;
}

.employee-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #edf7f3;
    color: #087260;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.employee-status-pill.pending {
    background: #fff8e8;
    color: #9a640b;
}

.employee-status-pill.rejected {
    background: #fff0f0;
    color: #b42318;
}

.employee-status-pill.muted {
    background: #eef2f7;
    color: #62708a;
}

.employee-filter-bar {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.employee-action-button {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
}

.employee-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: 8px;
}

.employee-icon-button svg,
.employee-action-button svg {
    width: 1rem;
    height: 1rem;
}

.employee-card-list {
    display: grid;
    gap: 0.75rem;
}

.employee-card-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #fff;
}

.employee-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 8px;
    background: #e9f6f2;
    color: #087260;
}

.employee-card-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.employee-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.employee-doc-card {
    display: flex;
    min-height: 9.5rem;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #f7fcfa);
}

.employee-empty-state {
    padding: 1.5rem;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    border-radius: 8px;
    background: #fbfdfc;
    color: #67728a;
    font-weight: 800;
    text-align: center;
}

.employee-pagination {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

@media (max-width: 992px) {
    .employee-hero,
    .employee-grid-two,
    .employee-grid-aside,
    .employee-filter-bar {
        grid-template-columns: 1fr;
    }

    .employee-hero-actions,
    .employee-inline-actions {
        justify-content: flex-start;
    }

    .employee-summary-grid,
    .employee-doc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-form-grid {
        grid-template-columns: 1fr;
    }

    .employee-form-grid .span-2,
    .employee-form-grid .span-3 {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .employee-summary-grid,
    .employee-doc-grid {
        grid-template-columns: 1fr;
    }

    .employee-panel-head,
    .employee-pagination,
    .employee-card-row {
        align-items: flex-start;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .employee-row-actions {
        justify-content: flex-start;
    }
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--text);
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(17, 120, 100, 0.08) 0 25%, transparent 25% 50%, rgba(242, 169, 95, 0.09) 50% 75%, transparent 75%),
        linear-gradient(180deg, var(--bg), #fbfbf8 42%, var(--bg-accent));
    background-size: 42px 42px, auto;
}

h1, h2, h3, .navbar-brand {
    font-family: "IBM Plex Serif", serif;
}

.app-shell {
    background-attachment: fixed;
}

.employee-shell {
    background:
        linear-gradient(135deg, rgba(143, 74, 111, 0.08) 0 25%, transparent 25% 50%, rgba(17, 120, 100, 0.08) 50% 75%, transparent 75%),
        linear-gradient(180deg, #f8faf5, #eef3ed);
    background-size: 44px 44px, auto;
}

.app-navbar {
    z-index: 1080;
    backdrop-filter: blur(18px);
    background:
        linear-gradient(180deg, rgba(23, 33, 58, 0.98), rgba(23, 33, 58, 0.92)),
        radial-gradient(circle at 20% 0%, rgba(17, 120, 100, 0.22), transparent 34%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 4.75rem;
    box-shadow: 0 16px 42px rgba(23, 33, 58, 0.18);
}

.app-navbar .container-fluid {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.app-navbar-inner {
    gap: 1rem;
    justify-content: space-between;
}

.app-navbar .navbar-nav {
    align-items: center;
}

.app-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.app-navbar .navbar-toggler:focus {
    box-shadow: var(--focus-ring);
}

.app-navbar .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

.app-nav-links {
    gap: 0.35rem;
}

.app-navbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.18rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 26px rgba(10, 73, 61, 0.14);
}

.app-menu-toggle {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: #fff !important;
    font-weight: 850;
    box-shadow: none;
}

.app-menu-toggle:hover,
.app-menu-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.11);
    border-left-color: rgba(242, 169, 95, 0.34);
}

.app-side-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    height: 100vh;
    height: 100dvh;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8faf5 38%, #eef4ee 100%);
    color: var(--text);
    border-left: 1px solid rgba(23, 33, 58, 0.12);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1070;
    background-attachment: local;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-side-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.offcanvas-backdrop {
    z-index: 1060;
}

.app-side-menu.show {
    transform: none;
    visibility: visible;
}

.app-side-menu .offcanvas-header {
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
    background:
        linear-gradient(135deg, rgba(23, 33, 58, 0.98), rgba(17, 120, 100, 0.92));
    color: #fff;
}

.app-side-menu .offcanvas-title {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 900;
    color: #fff;
}

.app-side-menu .offcanvas-header small {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
}

.app-side-menu .btn-close {
    flex: 0 0 auto;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.82;
}

.app-side-menu .offcanvas-body {
    display: grid;
    align-content: start;
    gap: 0.72rem;
    padding: 1rem 1rem calc(var(--app-footer-height, 64px) + 1.25rem);
    overflow: visible;
    max-height: none;
    min-height: calc(100vh - 5.45rem);
    min-height: calc(100dvh - 5.45rem);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 249, 246, 0.98)),
        radial-gradient(circle at 100% 0%, rgba(17, 120, 100, 0.08), transparent 28%);
}

.side-menu-section {
    display: grid;
    gap: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 30px rgba(23, 33, 58, 0.06);
}

.side-menu-section > span {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: rgba(23, 33, 58, 0.68);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.7rem 0.85rem;
    background: rgba(23, 33, 58, 0.035);
}

.app-side-menu .side-menu-link {
    position: relative;
    min-height: 2.72rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.68rem;
    padding: 0.58rem 0.75rem;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--text) !important;
    box-shadow: none;
    font-weight: 820;
    text-decoration: none;
    transition: background-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}

.app-side-menu .side-menu-link:hover,
.app-side-menu .side-menu-link:focus-visible,
.app-side-menu .side-menu-link.is-active {
    background: #ffffff;
    color: var(--brand-dark) !important;
    box-shadow: 0 10px 24px rgba(23, 33, 58, 0.08), inset 0 0 0 1px rgba(17, 120, 100, 0.12);
}

.app-side-menu .side-menu-link::before {
    content: "";
    position: absolute;
    left: 0.12rem;
    top: 0.62rem;
    bottom: 0.62rem;
    width: 0.18rem;
    border-radius: 999px;
    background: transparent;
    transition: background-color var(--motion-fast);
}

.app-side-menu .side-menu-link.is-active::before,
.app-side-menu .side-menu-link:hover::before,
.app-side-menu .side-menu-link:focus-visible::before {
    background: var(--brand);
}

.navbar-brand,
.nav-link,
.navbar .btn {
    color: #fff !important;
}

.app-navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.82) !important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.app-navbar .nav-link svg {
    flex-shrink: 0;
}

.app-navbar .nav-link.is-active {
    background: linear-gradient(135deg, rgba(242, 169, 95, 0.2), rgba(17, 120, 100, 0.32));
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 24px rgba(10, 73, 61, 0.18);
}

.app-navbar .nav-link.is-active svg {
    color: #f7d9ca;
}

.app-navbar .app-side-menu .side-menu-link.nav-link {
    width: 100%;
    position: relative;
    min-height: 2.72rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.68rem;
    padding: 0.58rem 0.75rem;
    border-radius: 8px;
    background: transparent;
    color: var(--text) !important;
    box-shadow: none;
    font-weight: 820;
    text-decoration: none;
}

.app-navbar .app-side-menu .side-menu-link.nav-link:hover,
.app-navbar .app-side-menu .side-menu-link.nav-link:focus-visible,
.app-navbar .app-side-menu .side-menu-link.nav-link.is-active {
    background: #ffffff;
    color: var(--brand-dark) !important;
    box-shadow: 0 10px 24px rgba(23, 33, 58, 0.08), inset 0 0 0 1px rgba(17, 120, 100, 0.12);
}

.side-menu-profile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(17, 120, 100, 0.1), rgba(242, 169, 95, 0.1)),
        #ffffff;
    box-shadow: inset 0 0 0 1px rgba(23, 33, 58, 0.08), 0 14px 28px rgba(23, 33, 58, 0.08);
}

.side-menu-profile .profile-initials {
    flex: 0 0 auto;
}

.side-menu-profile div {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.side-menu-profile strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 0.96rem;
    font-weight: 900;
}

.side-menu-profile small {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.side-menu-header-card {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 2.4rem);
    padding: 0.82rem;
    background:
        linear-gradient(135deg, rgba(17, 120, 100, 0.12), rgba(242, 169, 95, 0.1)),
        rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74), 0 16px 34px rgba(4, 29, 47, 0.18);
}

.app-side-menu .side-menu-header-card small {
    color: var(--muted);
}

.menu-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    fill: currentColor;
    color: var(--menu-icon-color) !important;
    opacity: 0.94;
}

.side-menu-link .menu-icon {
    box-sizing: content-box;
    padding: 0.42rem;
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.1);
    box-shadow: inset 0 0 0 1px rgba(17, 120, 100, 0.08);
}

.side-menu-section-body {
    padding: 0.44rem;
    gap: 0.22rem;
    display: grid;
    grid-auto-rows: minmax(2.72rem, auto);
    overflow: visible;
}

.side-menu-section-body[hidden] {
    display: none !important;
}

.side-menu-section-toggle {
    width: 100%;
    min-height: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.68rem 0.85rem;
    border: 0;
    background: rgba(23, 33, 58, 0.035);
    color: rgba(23, 33, 58, 0.68);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}

.side-menu-section-toggle:hover {
    background: rgba(17, 120, 100, 0.075);
    color: var(--brand-dark);
}

.side-menu-section-toggle::after {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--motion-fast), translate var(--motion-fast);
}

.side-menu-section-toggle[aria-expanded="true"]::after {
    translate: 0 0.15rem;
    transform: rotate(225deg);
}

.side-menu-section-toggle:focus-visible {
    outline: 0;
    color: var(--brand-dark);
    box-shadow: inset 0 0 0 0.18rem rgba(17, 120, 100, 0.12);
}

.side-menu-link:hover .menu-icon,
.side-menu-link:focus-visible .menu-icon,
.side-menu-link.is-active .menu-icon {
    color: var(--menu-icon-color) !important;
}

.side-menu-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-menu-account {
    margin-top: 0.15rem;
    background: rgba(255, 255, 255, 0.92);
}

.side-menu-danger {
    color: #a83232 !important;
}

.side-menu-danger .menu-icon {
    color: #c2413d !important;
    background: rgba(194, 65, 61, 0.1);
    box-shadow: inset 0 0 0 1px rgba(194, 65, 61, 0.12);
}

.side-menu-danger:hover,
.side-menu-danger:focus-visible {
    background: rgba(194, 65, 61, 0.1) !important;
    color: #8f2424 !important;
    box-shadow: inset 0 0 0 1px rgba(194, 65, 61, 0.16) !important;
}

.side-menu-danger:hover .menu-icon,
.side-menu-danger:focus-visible .menu-icon {
    color: #c2413d !important;
}

.brand-block {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 3rem;
    max-width: 100%;
    padding: 0.25rem 0;
    white-space: nowrap;
}

.brand-copy,
.marketing-brand-copy {
    min-width: 0;
    display: grid;
    gap: 0.05rem;
    line-height: 1.05;
}

.brand-copy strong,
.marketing-brand-copy strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.98rem;
    font-weight: 850;
}

.brand-copy small,
.marketing-brand-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.72rem;
    font-weight: 700;
}

.brand-client-id {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
}

.workspace-role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.62rem;
    border-radius: 8px;
    background: rgba(242, 169, 95, 0.14);
    color: #ffd8a8;
    box-shadow: inset 0 0 0 1px rgba(242, 169, 95, 0.25);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0;
}

.client-id-badge {
    min-height: 2.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.client-id-label {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.brand-logo-shell {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-grid;
    place-items: center;
    overflow: hidden;
}

.app-profile-menu {
    display: inline-flex;
}

.top-user-card {
    min-height: 3rem;
    min-width: 12.5rem;
    max-width: 18rem;
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.36rem 0.78rem 0.36rem 0.42rem;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 246, 0.94));
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 10px 24px rgba(4, 29, 47, 0.12);
}

.top-user-card div {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.top-user-card strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.15;
}

.top-user-card small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(23, 33, 58, 0.66);
    font-size: 0.72rem;
    font-weight: 850;
}

.account-control {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.28rem 0.35rem 0.28rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff !important;
    box-shadow: none;
    text-align: left;
}

.account-control:hover,
.account-control:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.account-control.dropdown-toggle::after {
    margin-left: 0;
    color: rgba(255, 255, 255, 0.56);
}

.employee-account-summary {
    cursor: default;
}

.employee-account-summary:hover,
.employee-account-summary:focus-visible {
    background: transparent;
}

.account-control-meta {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
}

.account-role {
    width: fit-content;
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.18rem 0.45rem;
    border-radius: 8px;
    background: rgba(242, 169, 95, 0.14);
    color: #ffd8a8;
    box-shadow: inset 0 0 0 1px rgba(242, 169, 95, 0.24);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.1;
}

.account-client {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1.1;
    text-transform: uppercase;
}

.account-client svg {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.82);
}

.account-client strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: none;
    white-space: nowrap;
}

.account-initials {
    flex: 0 0 auto;
}

.profile-menu-button {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 24px rgba(10, 73, 61, 0.18);
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 34, 27, 0.58);
    backdrop-filter: blur(8px);
}

.processing-overlay-card {
    min-width: 320px;
    max-width: 420px;
    padding: 1.5rem 1.75rem;
    border-radius: 8px;
    background: rgba(16, 34, 27, 0.9);
    color: #fff;
    box-shadow: 0 24px 80px rgba(16, 34, 27, 0.3);
    text-align: center;
}

.processing-overlay-card .spinner-border {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.9rem;
}

.processing-overlay-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.processing-overlay-copy {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.94rem;
}

.hero-card,
.surface-card,
.metric-card,
.login-form-card,
.login-copy,
.credential-card {
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.hero-card,
.surface-card,
.metric-card,
.login-form-card,
.credential-card {
    background: var(--surface);
    backdrop-filter: blur(18px);
    border-radius: 8px;
}

.hero-card {
    padding: 2.4rem;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(23, 33, 58, 0.97), rgba(17, 120, 100, 0.92)),
        var(--surface);
    color: #fff;
    min-height: 14rem;
    display: flex;
    align-items: center;
}

.hero-card::after {
    content: "";
    position: absolute;
    inset: auto 1.5rem 1.5rem auto;
    width: 9rem;
    height: 9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    transform: rotate(8deg);
    background: rgba(255, 255, 255, 0.06);
}

.hero-card .eyebrow,
.hero-card p {
    color: rgba(255, 255, 255, 0.78);
}

.hero-card h1 {
    max-width: 760px;
    font-family: "Manrope", sans-serif;
    font-weight: 850;
    letter-spacing: 0;
}

.employee-floating-actions {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    max-width: min(30rem, calc(100vw - 2.5rem));
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(23, 33, 58, 0.12);
    background: rgba(23, 33, 58, 0.88);
    box-shadow: 0 18px 45px rgba(23, 33, 58, 0.22);
    backdrop-filter: blur(14px);
}

.employee-floating-actions .btn {
    color: var(--text) !important;
    font-weight: 850;
    border-color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.page-floating-actions {
    position: fixed;
    right: 1.25rem;
    bottom: calc(var(--app-footer-height, 64px) + 1.65rem);
    z-index: 1040;
    display: grid;
    justify-items: end;
    gap: 0.5rem;
    max-width: min(15rem, calc(100vw - 2.5rem));
}

.page-guide-fab {
    position: fixed;
    right: 1.25rem;
    bottom: calc(var(--app-footer-height, 64px) + 1.65rem);
    z-index: 1042;
    min-height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.82rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(17, 120, 100, 0.98), rgba(11, 79, 68, 0.96)),
        radial-gradient(circle at 12% 0%, rgba(242, 169, 95, 0.32), transparent 42%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(17, 120, 100, 0.28);
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1;
    text-decoration: none;
    backdrop-filter: blur(14px);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.page-guide-fab svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
    flex: 0 0 auto;
}

.page-guide-fab:hover,
.page-guide-fab:focus-visible {
    border-color: rgba(242, 169, 95, 0.6);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(17, 120, 100, 0.34);
}

.page-guide-fab:focus-visible {
    outline: 0;
    box-shadow: 0 22px 48px rgba(17, 120, 100, 0.34), 0 0 0 0.22rem rgba(242, 169, 95, 0.24);
}

.page-guide-fab:not([hidden]) + .page-floating-actions {
    bottom: calc(var(--app-footer-height, 64px) + 4.95rem);
}

.page-floating-action {
    min-height: 2.55rem;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.48rem;
    padding: 0.58rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(23, 33, 58, 0.98), rgba(23, 33, 58, 0.92)),
        radial-gradient(circle at 15% 0%, rgba(17, 120, 100, 0.24), transparent 42%);
    color: #fff;
    box-shadow: 0 16px 36px rgba(23, 33, 58, 0.22);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.15;
    text-decoration: none;
    backdrop-filter: blur(14px);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.page-floating-action:hover,
.page-floating-action:focus-visible {
    border-color: rgba(242, 169, 95, 0.44);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(23, 33, 58, 0.28);
}

.page-floating-action:focus-visible {
    outline: 0;
    box-shadow: 0 20px 44px rgba(23, 33, 58, 0.28), 0 0 0 0.22rem rgba(242, 169, 95, 0.22);
}

.floating-action-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--accent);
    fill: currentColor;
}

.page-floating-action span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-card {
    padding: 1.6rem;
    min-height: 9.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 4px solid rgba(17, 120, 100, 0.72);
}

/* Fixed width for Current Month Payroll Runs metric */
.metric-card.payroll-runs {
    width: 340px;
    min-width: 240px;
    max-width: 44%;
    flex-shrink: 0;
    text-align: right;
}

.metric-card span {
    display: block;
    color: var(--muted);
    margin-bottom: 0.45rem;
}

.metric-card strong {
    font-size: 1.65rem;
    line-height: 1.15;
}

.light-card {
    background: rgba(255, 255, 255, 0.88);
}

.surface-card {
    padding: 1.75rem;
    box-shadow: var(--soft-shadow);
}

/* Info icon for widgets */
.surface-card.position-relative { position: relative; }
.surface-card .widget-info { position: absolute; right: 0.6rem; top: 0.6rem; left: auto; }
.surface-card .info-btn {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    padding: 0;
    line-height: 1.6rem;
    font-size: 0.85rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    background: #e6f7ff; /* light sky blue */
    color: #6c757d; /* grey text for 'i' */
    box-shadow: 0 4px 10px rgba(10,73,61,0.06);
}
.surface-card .info-btn:focus { box-shadow: 0 0 0 0.18rem rgba(49,130,206,0.18); }

/* Ensure info icon is visible inside modals and for plain .btn.info-btn usage */
.btn.info-btn,
.modal .info-btn,
.modal-content .info-btn {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    padding: 0;
    line-height: 1.6rem;
    font-size: 0.85rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    background: #e6f7ff; /* light sky blue */
    color: #6c757d; /* grey text for 'i' */
    box-shadow: 0 4px 10px rgba(10,73,61,0.06);
}
.btn.info-btn:focus,
.modal .info-btn:focus,
.modal-content .info-btn:focus { box-shadow: 0 0 0 0.18rem rgba(49,130,206,0.18); }

/* Brand button styles to follow application palette */
.btn-brand {
    background: var(--brand);
    color: #fff;
    border-color: transparent;
}
.btn-brand:hover, .btn-brand:focus {
    background: var(--brand-dark);
    color: #fff;
}
.btn-outline-brand {
    background: transparent;
    color: var(--brand-dark);
    border: 1px solid rgba(14,107,88,0.12);
}
.btn-outline-brand:hover, .btn-outline-brand:focus {
    background: rgba(14,107,88,0.06);
    color: var(--brand-dark);
}

/* Danger outline to match theme but indicate destructive action */
.btn-outline-danger {
    background: transparent;
    color: #b71c1c;
    border: 1px solid rgba(183,28,28,0.08);
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background: rgba(183,28,28,0.06);
    color: #b71c1c;
}

/* Themed form controls */
.form-select, .form-control {
    border-radius: 12px;
    border: 1px solid rgba(16,34,27,0.08);
    padding: 0.5rem 0.6rem;
}
.form-select:focus, .form-control:focus {
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(14,107,88,0.12);
    border-color: var(--brand);
}

/* Table header links and small controls use brand colors */
.app-table thead th a { color: var(--brand-dark); text-decoration: none; }
.app-table thead th a:hover { color: var(--brand); }

/* Larger search input used on payslips page */
.search-input-lg {
    min-width: 20rem;
    max-width: 56rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
}

/* Positioning for metric-card info icon */
.metric-card { position: relative; }
.metric-card .widget-info { position: absolute; right: 0.6rem; top: 0.6rem; }
.metric-card .info-btn { width: 1.6rem; height: 1.6rem; border-radius: 50%; padding: 0; line-height: 1.6rem; font-size: 0.85rem; display: inline-grid; place-items: center; border: 1px solid transparent; background: #e6f7ff; color: #6c757d; box-shadow: 0 4px 10px rgba(10,73,61,0.06); }
.metric-card .info-btn:focus { box-shadow: 0 0 0 0.18rem rgba(49,130,206,0.18); }

/* Ensure equal, elegant widget presentation */
.surface-card.h-100 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.75rem;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.current-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.current-config-grid .config-left {
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}

.current-config-grid .config-right {
    min-width: 0;
}

/* Center-align simple statuary config widgets while keeping tables left-aligned */
.current-config-grid .surface-card.h-100 {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
}
.current-config-grid .surface-card.h-100 h5 {
    margin: 0 0 0.25rem 0;
}
.current-config-grid .surface-card.h-100 .small {
    display: block;
    color: var(--muted);
}
/* Ensure any tables inside these cards remain left-aligned */
.current-config-grid .surface-card.h-100 table {
    width: 100%;
    text-align: left;
}

/* No-wrap and consistent typography for compact statuary cards */
.current-config-grid .surface-card.h-100.nowrap {
    white-space: nowrap;
    align-items: center;
}
.current-config-grid .surface-card.h-100.nowrap h5 {
    font-weight: 600;
}
.current-config-grid .surface-card.h-100.nowrap strong {
    font-weight: 700;
    font-size: 1.05rem;
}
.current-config-grid .surface-card.h-100.nowrap .small {
    white-space: nowrap;
    font-size: 0.9rem;
}

/* Rows-per-page selector styling for employees table footer */
.rows-per-page-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; }
.rows-per-page-form .form-select { width: 5rem; min-width: 3.2rem; }
.employees-footer-left { display: flex; align-items: center; gap: 0.75rem; }
/* ensure the Records per page label stays on a single line */
.rows-per-page-form label { display: inline-block; white-space: nowrap; overflow: visible; text-overflow: clip; margin: 0; }

.config-item strong { display:block; font-size:0.95rem; }
.config-item .small { color: var(--muted); }

.settings-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.settings-company-card,
.settings-branding-card {
    height: 100%;
}

.settings-company-form {
    display: grid;
    gap: 1rem;
}

.settings-form-group {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(16, 34, 27, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.52);
}

.settings-form-group-head {
    margin-bottom: 0.95rem;
}

.settings-form-group-head h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.05rem;
}

.settings-form-group-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.settings-form-actions {
    padding-top: 0.25rem;
}

.settings-section-heading {
    margin-bottom: 1.5rem;
}

.settings-section-heading h1 {
    margin-bottom: 0.35rem;
}

.settings-section-copy {
    margin: 0;
    color: var(--muted);
    max-width: 42rem;
}

.settings-branding-stack {
    display: grid;
    gap: 1rem;
    height: 100%;
    align-content: start;
}

.settings-brand-preview {
    min-height: 220px;
    border-radius: 8px;
    border: 1px dashed rgba(16, 34, 27, 0.16);
    background:
        linear-gradient(135deg, rgba(242, 169, 95, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(220, 231, 225, 0.52));
    display: grid;
    place-items: center;
    padding: 1.25rem;
    text-align: center;
    color: var(--muted);
}

.settings-brand-preview.has-logo {
    background: rgba(255, 255, 255, 0.92);
    border-style: solid;
}

.settings-brand-preview img {
    max-width: 100%;
    max-height: 170px;
    object-fit: contain;
}

.settings-upload-form {
    display: grid;
    gap: 0.75rem;
}

.settings-upload-form .btn {
    justify-self: start;
}

.settings-page .form-control,
.settings-page .form-select,
.settings-page textarea.form-control {
    border-radius: 16px;
    border: 1px solid rgba(16, 34, 27, 0.12);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text);
    box-shadow: none;
}

.settings-page .form-control::placeholder,
.settings-page .form-select::placeholder,
.settings-page textarea.form-control::placeholder {
    color: rgba(86, 112, 101, 0.72);
}

.settings-page .form-control:focus,
.settings-page .form-select:focus,
.settings-page textarea.form-control:focus {
    border-color: rgba(14, 107, 88, 0.45);
    box-shadow: 0 0 0 0.2rem rgba(14, 107, 88, 0.12);
    background: #fff;
}

.settings-page .form-label,
.settings-page .form-check-label {
    color: var(--brand-dark);
    font-weight: 600;
}

.settings-page .form-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    line-height: 1.3;
}

.settings-page .form-label .info-btn,
.settings-page .form-check-label .info-btn {
    flex: 0 0 auto;
}

.settings-page .form-check {
    padding: 0.7rem 0.9rem 0.7rem 2.35rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(16, 34, 27, 0.08);
}

.settings-page .form-check + .form-check {
    margin-top: 0.65rem;
}

.settings-page .form-check-input {
    margin-top: 0.15rem;
    border-color: rgba(16, 34, 27, 0.18);
}

.settings-page .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.settings-page .form-check-input:focus {
    box-shadow: 0 0 0 0.18rem rgba(14, 107, 88, 0.14);
}

.settings-compact-card {
    padding: 1.35rem;
    gap: 0.9rem;
}

.settings-compact-card h1 {
    margin-bottom: 0.15rem !important;
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: 0;
}

.settings-compact-card .text-secondary,
.settings-compact-card .timeline-item p {
    font-size: 0.84rem;
    line-height: 1.45;
}

.settings-compact-form {
    gap: 0.85rem 0;
}

.settings-compact-card .col-12 + .col-12 {
    margin-top: 0.15rem;
}

.settings-widget-card .col-12 {
    display: grid;
    gap: 0.7rem;
}

.settings-widget-option {
    position: relative;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    padding: 0.65rem 0.85rem 0.65rem 2.35rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 248, 0.92));
    border: 1px solid rgba(16, 34, 27, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.settings-widget-option .form-check-input {
    margin-top: 0;
}

.settings-widget-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.35;
}

.settings-widget-label span {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-widget-label .info-btn {
    margin-left: auto;
}

.settings-page .client-error {
    margin-top: 0.35rem;
    line-height: 1.35;
}

.settings-page .is-invalid {
    border-color: rgba(176, 60, 60, 0.42) !important;
    box-shadow: 0 0 0 0.18rem rgba(176, 60, 60, 0.08) !important;
}

.settings-page .btn-dark {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
    border-color: transparent;
}

.settings-page .btn-dark:hover,
.settings-page .btn-dark:focus {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-color: transparent;
}

.settings-page hr {
    border-color: rgba(16, 34, 27, 0.08);
    opacity: 1;
}

.settings-workspace {
    width: 100%;
    max-width: 1440px;
    padding-bottom: calc(var(--app-footer-height, 68px) + 2.5rem) !important;
}

.settings-overview-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
    gap: 1rem;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(29, 42, 66, 0.98), rgba(16, 91, 80, 0.94)),
        var(--brand-dark);
    box-shadow: 0 20px 48px rgba(14, 28, 50, 0.16);
    color: #fff;
    overflow: hidden;
    padding: 1.35rem;
}

.settings-overview-copy {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.settings-overview-icon {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--accent);
}

.settings-overview-icon svg {
    width: 1.55rem;
    height: 1.55rem;
    fill: currentColor;
}

.settings-overview-copy h1 {
    margin: 0;
    max-width: 42rem;
    color: #fff;
    font-size: 2.05rem;
    line-height: 1.08;
    letter-spacing: 0;
}

.settings-overview-copy p:last-child {
    max-width: 48rem;
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.74);
}

.settings-overview-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    align-self: center;
}

.settings-overview-meta div {
    min-width: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    padding: 0.85rem;
}

.settings-overview-meta span {
    display: block;
    margin-bottom: 0.3rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-overview-meta strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-page .surface-card {
    border: 1px solid rgba(16, 34, 27, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 42px rgba(31, 49, 75, 0.08);
}

.settings-page .surface-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 48px rgba(31, 49, 75, 0.12);
}

.settings-hero-grid {
    grid-template-columns: 1fr;
}

.settings-company-card,
.settings-branding-card,
.settings-compact-card {
    position: relative;
    overflow: hidden;
}

.settings-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(16, 34, 27, 0.08);
}

.settings-section-heading h1,
.settings-compact-card h1 {
    color: var(--brand-dark);
    font-size: 1.28rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.settings-section-copy {
    font-size: 0.92rem;
}

.settings-section-icon {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.09);
    color: var(--brand);
    box-shadow: inset 0 0 0 1px rgba(17, 120, 100, 0.1);
}

.settings-section-icon svg {
    width: 1.08rem;
    height: 1.08rem;
    fill: currentColor;
}

.settings-form-group {
    display: grid;
    grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    padding: 1.1rem 0;
    border: 0;
    border-top: 1px solid rgba(16, 34, 27, 0.08);
    border-radius: 0;
    background: transparent;
}

.settings-form-group:first-child {
    border-top: 0;
    padding-top: 0;
}

.settings-form-group-head {
    margin-bottom: 0;
}

.settings-form-group-head h2 {
    font-size: 0.95rem;
    font-weight: 800;
}

.settings-form-group-head p {
    max-width: 14rem;
    font-size: 0.82rem;
}

.settings-form-group > .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    width: 100%;
    margin: 0;
}

.settings-form-group > .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    padding: 0;
}

.settings-form-group > .row > .col-12 {
    grid-column: 1 / -1;
}

.settings-page .client-id-field {
    min-width: 0;
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
}

.settings-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(16, 34, 27, 0.08);
}

.settings-brand-preview {
    min-height: 196px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(18, 111, 96, 0.11), transparent 44%),
        repeating-linear-gradient(45deg, rgba(31, 49, 75, 0.04) 0 10px, transparent 10px 20px),
        #f8fbf9;
}

.settings-branding-group .settings-form-group-head {
    align-self: start;
}

.settings-branding-inline {
    display: grid;
    grid-template-columns: minmax(220px, 0.36fr) minmax(0, 0.64fr);
    gap: 1rem;
    align-items: stretch;
}

.settings-embedded-upload {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(23, 33, 58, 0.08);
}

.settings-upload-inline {
    margin-top: 0.85rem;
}

.settings-help-card .settings-card-head {
    margin-bottom: 0.85rem;
}

.settings-guide-list {
    display: grid;
    gap: 0.55rem;
}

.settings-guide-list span {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.4;
}

.settings-guide-list span::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    flex: 0 0 auto;
    margin-top: 0.42rem;
    border-radius: 999px;
    background: var(--brand);
}

.settings-upload-form {
    padding: 1rem;
    border: 1px solid rgba(16, 34, 27, 0.08);
    border-radius: 8px;
    background: rgba(248, 251, 249, 0.82);
}

.settings-page .form-control,
.settings-page .form-select,
.settings-page textarea.form-control {
    min-height: 2.75rem;
    border-radius: 8px;
    width: 100%;
}

.settings-page .form-label,
.settings-page .form-check-label {
    color: #334155;
    font-size: 0.82rem;
}

.settings-page .info-btn {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(14, 107, 88, 0.2);
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 800;
}

.settings-compact-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.25rem;
}

.settings-compact-card h1 {
    margin: 0 !important;
}

.settings-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.82rem;
    margin-bottom: 1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
}

.settings-card-head div {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.settings-card-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.4;
}

.settings-compact-form {
    flex: 1 1 auto;
}

.settings-horizontal-form {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.settings-horizontal-form > .col-12 {
    width: auto;
    min-width: 0;
}

.settings-horizontal-form > .col-12:last-child {
    grid-column: 1 / -1;
}

.settings-compact-form > .col-12 {
    padding: 0.78rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.66);
}

.settings-compact-form > .col-12:has(> .btn) {
    padding: 0;
    border: 0;
    background: transparent;
}

.settings-compact-form > .col-12:has(.settings-choice-grid) {
    padding: 0;
    border: 0;
    background: transparent;
}

.settings-widget-option {
    min-height: 3.15rem;
    border-radius: 8px;
    background: #fff;
}

.settings-widget-option:hover {
    border-color: rgba(14, 107, 88, 0.24);
    box-shadow: 0 10px 24px rgba(14, 107, 88, 0.08);
}

.settings-page .form-check {
    border-radius: 8px;
}

.settings-widget-card .settings-compact-form > .col-12:first-child {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.65rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.settings-widget-card {
    display: grid;
    grid-template-columns: minmax(260px, 0.24fr) minmax(0, 0.76fr);
    gap: 1rem;
    align-items: start;
}

.settings-widget-card .settings-card-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.settings-widget-card .settings-compact-form {
    display: grid;
    gap: 0.8rem;
}

.settings-widget-option {
    padding: 0.75rem 0.85rem 0.75rem 2.35rem;
}

.settings-widget-option .form-check-input:checked ~ .settings-widget-label strong {
    color: var(--brand-dark);
}

.holiday-lines-source {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.holiday-builder-panel {
    display: grid;
    gap: 0.8rem;
}

.holiday-toolbar,
.holiday-add-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background: #fff;
}

.holiday-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.holiday-toolbar strong {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 950;
}

.holiday-toolbar small {
    display: block;
    margin-top: 0.12rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.holiday-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.holiday-add-card {
    grid-template-columns: minmax(150px, 0.3fr) minmax(0, 0.48fr) auto;
    align-items: end;
}

.holiday-add-card label {
    display: grid;
    gap: 0.35rem;
}

.holiday-add-card label span {
    color: #334155;
    font-size: 0.78rem;
    font-weight: 850;
}

.holiday-list-builder {
    display: grid;
    gap: 0.55rem;
}

.holiday-list-head {
    display: grid;
    grid-template-columns: minmax(150px, 0.3fr) minmax(0, 0.52fr) auto;
    gap: 0.55rem;
    padding: 0 0.62rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.holiday-builder-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.3fr) minmax(0, 0.52fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.62rem;
    border: 1px solid rgba(17, 120, 100, 0.12);
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.06);
}

.settings-widget-label span {
    display: grid;
    gap: 0.1rem;
}

.settings-widget-label strong {
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 950;
}

.settings-widget-label small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.settings-shell .app-footer {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--app-footer-height);
    transform: none;
}

.settings-shell .app-footer-inner {
    padding-inline: 1rem;
}

.settings-page .row.g-4 > [class*="col-"] {
    display: flex;
}

.settings-page .row.g-4 > [class*="col-"] > .surface-card,
.settings-page .row.g-4 > [class*="col-"] > .settings-hero-grid {
    width: 100%;
}

.settings-control-hero {
    margin-bottom: 1rem;
}

.settings-quick-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.settings-quick-links a {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(17, 120, 100, 0.14);
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.08);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.settings-quick-links a:hover,
.settings-quick-links a:focus-visible {
    background: rgba(17, 120, 100, 0.13);
    color: var(--brand-dark);
}

.settings-stat-grid {
    margin-bottom: 1rem;
}

.settings-stat-grid .tenant-stat-card {
    min-height: 7.4rem;
}

.settings-stat-grid .tenant-stat-card strong {
    min-width: 0;
    overflow: hidden;
    font-size: 1.32rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-page .row.g-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0;
}

.settings-page .row.g-4 > [class*="col-"] {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    padding: 0;
}

.settings-page .row.g-4 > .col-12 {
    grid-column: 1 / -1;
}

.settings-page .surface-card {
    padding: 1.15rem;
}

.settings-page .row.g-4 > [class*="col-"] > .settings-compact-card {
    min-height: 0;
}

.settings-page .row.g-4 > [class*="col-"] > .settings-compact-card:not(.settings-widget-card) {
    display: grid;
    grid-template-columns: minmax(260px, 0.24fr) minmax(0, 0.76fr);
    gap: 1rem;
    align-items: start;
}

.settings-page .row.g-4 > [class*="col-"] > .settings-compact-card:not(.settings-widget-card) .settings-card-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.settings-company-card,
.settings-branding-card,
.settings-compact-card {
    border-radius: 8px;
}

.settings-page .surface-card:hover {
    transform: none;
}

.settings-compact-card h1 {
    font-family: "Manrope", sans-serif;
    font-size: 1.08rem;
    font-weight: 900;
}

.settings-choice-grid {
    display: grid;
    gap: 0.65rem;
}

.settings-choice-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.82rem;
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
}

.settings-choice-card:hover {
    border-color: rgba(17, 120, 100, 0.22);
    box-shadow: 0 10px 22px rgba(23, 33, 58, 0.07);
}

.settings-choice-card input {
    margin-top: 0.25rem;
    accent-color: var(--brand);
}

.settings-choice-card span {
    display: grid;
    gap: 0.12rem;
}

.settings-choice-card strong {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 950;
}

.settings-choice-card small {
    color: var(--muted);
    font-weight: 750;
}

.settings-choice-card:has(input:checked) {
    border-color: rgba(17, 120, 100, 0.35);
    background: rgba(17, 120, 100, 0.07);
    box-shadow: inset 0 0 0 1px rgba(17, 120, 100, 0.08);
}

@media (max-width: 1199px) {
    .settings-hero-grid {
        grid-template-columns: 1fr;
    }

    .settings-form-group {
        grid-template-columns: 1fr;
    }

    .settings-form-group-head p {
        max-width: 100%;
    }

    .settings-page .row.g-4 {
        grid-template-columns: 1fr;
    }

    .settings-branding-inline,
    .settings-horizontal-form,
    .holiday-toolbar,
    .holiday-add-card,
    .holiday-list-head,
    .holiday-builder-row,
    .settings-page .row.g-4 > [class*="col-"] > .settings-compact-card:not(.settings-widget-card),
    .settings-widget-card {
        grid-template-columns: 1fr;
    }

    .settings-page .row.g-4 > [class*="col-"] > .settings-compact-card:not(.settings-widget-card) .settings-card-head,
    .settings-widget-card .settings-card-head {
        margin-bottom: 1rem;
        padding-bottom: 0.95rem;
        border-bottom: 1px solid rgba(23, 33, 58, 0.08);
    }
}

@media (max-width: 767px) {
    .current-config-grid { grid-template-columns: 1fr; }
    .settings-hero-grid { grid-template-columns: 1fr; }
    .settings-widget-label {
        font-size: 0.89rem;
    }
}

.section-heading h1,
.section-heading h2 {
    margin: 0;
}

.app-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    margin-bottom: 0;
}

.app-table thead th {
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom-color: rgba(16, 34, 27, 0.08);
}

/* Make header links match app theme: muted color, no underline by default */
.app-table thead th a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
}
.app-table thead th a:hover,
.app-table thead th a:focus {
    color: var(--brand);
    text-decoration: underline;
}

.app-table tbody td {
    border-bottom-color: rgba(16, 34, 27, 0.06);
}

.timeline-list {
    display: grid;
    gap: 1rem;
}

.timeline-item,
.line-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 20px;
}

.timeline-item h3,
.timeline-item p,
.line-item span,
.line-item strong {
    margin: 0;
}

.eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand);
    font-weight: 800;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
    border-color: transparent;
}

/* Pagination styling aligned with app theme */
.pagination .page-link {
    color: var(--brand-dark);
    background: transparent;
    border: 1px solid rgba(16,34,27,0.06);
    border-radius: 8px;
    padding: 0.25rem 0.6rem;
}
.pagination .page-item.active .page-link {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-color: transparent;
    box-shadow: none;
}
.pagination .page-item.disabled .page-link {
    color: rgba(16,34,27,0.35);
    background: rgba(255,255,255,0.6);
    border-color: rgba(16,34,27,0.04);
}
.pagination .page-link:hover,
.pagination .page-link:focus {
    color: var(--brand);
    background: rgba(14,107,88,0.06);
}

/* Smarter spacing for small pagination */
.pagination-sm .page-link {
    padding: 0.2rem 0.5rem;
    font-size: 0.82rem;
}

/* Employee actions cell layout */
.emp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.action-icon-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.action-icon-btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.leave-widget-card {
    padding: 2rem;
}

.leave-widget-card .section-heading {
    margin-bottom: 1.5rem;
}

.leave-widget-card h1 {
    margin: 0;
    font-size: 2.45rem;
    line-height: 1.05;
}

.leave-table thead th {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--muted);
    border-bottom-color: rgba(16, 34, 27, 0.08);
}

.leave-table tbody td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    vertical-align: middle;
    border-bottom-color: rgba(16, 34, 27, 0.07);
}

.leave-table tbody tr:last-child td {
    border-bottom: 0;
}

.leave-type-label {
    display: inline-block;
    font-weight: 600;
    color: var(--text);
    text-transform: capitalize;
}

.leave-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.9rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.leave-status-approved {
    background: linear-gradient(135deg, #1f9d62, #17784b);
    color: #fff;
}

.leave-status-pending {
    background: linear-gradient(135deg, #ffd34f, #f2b705);
    color: #1e1e1e;
}

.leave-status-default {
    background: rgba(86, 112, 101, 0.15);
    color: var(--brand-dark);
}

.leave-table .emp-actions {
    min-width: 6rem;
}

.leave-table .emp-actions form {
    margin: 0;
}

.action-icon-btn {
    box-shadow: 0 6px 14px rgba(16, 34, 27, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.action-icon-btn:hover,
.action-icon-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(16, 34, 27, 0.1);
}

.leave-empty-action {
    display: inline-block;
    min-width: 2rem;
    color: rgba(86, 112, 101, 0.6);
    text-align: center;
    font-weight: 600;
}

/* Theme-styled toggle for employee status */
.form-check-input.emp-status-toggle {
    width: 2.2rem;
    height: 1.25rem;
    background-color: #e9ecef;
    border-radius: 2rem;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    border: 1px solid rgba(16,34,27,0.08);
}
.form-check-input.emp-status-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.9rem;
    height: 0.9rem;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s ease, left .18s ease;
}
.form-check-input.emp-status-toggle:checked {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-color: transparent;
}
.form-check-input.emp-status-toggle:checked::after {
    transform: translateX(1rem);
}

/* Inactive badge should be red to indicate non-active */
.badge.text-bg-danger {
    background: linear-gradient(135deg, #d9534f, #c12b26);
    color: #fff;
}

.login-shell {
    display: grid;
    place-items: center;
    padding: 2rem;
}

.login-page {
    max-width: 1180px;
    width: 100%;
}

.sign-in-shell .login-page {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 4rem 0 3rem;
}

.login-panel {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: 1.5rem;
    align-items: stretch;
}

.login-copy {
    border-radius: 8px;
    padding: 3rem;
    background:
        linear-gradient(135deg, rgba(23, 33, 58, 0.96), rgba(17, 120, 100, 0.9)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    color: #f6f1e7;
    overflow: hidden;
}

.login-copy h1 {
    max-width: 720px;
    font-size: 3.65rem;
    line-height: 1;
    margin: 0.85rem 0 1rem;
}

.login-copy p {
    max-width: 38rem;
    color: rgba(246, 241, 231, 0.78);
}

.login-copy .hero-eyebrow-row {
    color: #17213a;
}

.login-visual {
    margin-top: 1.4rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.login-visual svg {
    display: block;
    width: 100%;
    height: auto;
}

.credential-card {
    background: rgba(255, 255, 255, 0.08);
    padding: 1.25rem;
    margin-top: 2rem;
    display: grid;
    gap: 0.75rem;
}

.credential-card h2 {
    margin: 0;
    font-size: 1.25rem;
}

.credential-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.credential-card span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
    font-weight: 800;
}

.demo-access-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.35rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    background: linear-gradient(135deg, #17213a, #0e6b58);
    color: #fff;
    box-shadow: 0 18px 45px rgba(23, 33, 58, 0.28);
    font-weight: 900;
}

.demo-access-fab svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.demo-access-fab:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 55px rgba(23, 33, 58, 0.34);
}

.demo-access-modal .modal-content {
    border: 1px solid rgba(14, 107, 88, 0.18);
    border-radius: 8px;
    box-shadow: 0 26px 80px rgba(23, 33, 58, 0.24);
}

.demo-access-modal .modal-header {
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(23, 33, 58, 0.04), rgba(14, 107, 88, 0.08));
}

.demo-access-eyebrow {
    display: block;
    margin-bottom: 0.4rem;
    color: #0e6b58;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.demo-access-list {
    display: grid;
    gap: 0.75rem;
}

.demo-access-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(14, 107, 88, 0.12);
    border-radius: 8px;
    background: rgba(14, 107, 88, 0.05);
}

.demo-access-list span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-access-list strong {
    color: var(--ink);
    font-weight: 900;
    text-align: right;
}

.login-form-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-icon-stack {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.4rem;
}

.brand-mark {
    width: 4rem;
    height: 4rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), #f4b66d);
    color: #fff;
    font-weight: 800;
}

.login-lock-icon {
    width: 3.1rem;
    height: 3.1rem;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    color: #0e6b58;
    background: rgba(14, 107, 88, 0.1);
    border: 1px solid rgba(14, 107, 88, 0.16);
}

.login-lock-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}

/* Profile initials button (themed to match app palette) */
.btn.profile-initials,
.profile-initials {
    width: 2.65rem;
    min-width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(143, 74, 111, 0.98), rgba(17, 120, 100, 0.98));
    color: #fff !important;
    border: none;
    box-shadow: 0 8px 22px rgba(14,107,88,0.14);
    font-weight: 850;
    font-size: 0.86rem;
}
.btn.profile-initials:focus,
.btn.profile-initials:hover,
.profile-initials:focus,
.profile-initials:hover {
    box-shadow: 0 10px 28px rgba(14,107,88,0.18);
    outline: none;
}
.profile-initials.dropdown-toggle::after {
    display: none;
}

.form-control,
.form-select {
    border-radius: 8px;
    border: 1px solid rgba(16, 34, 27, 0.12);
    padding: 0.85rem 1rem;
}

.marketing-shell {
    min-height: 100vh;
    background:
        linear-gradient(90deg, rgba(23, 33, 58, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, #fbfcf8, #eef3ed);
    background-size: 72px 72px, auto;
    color: #17213a;
}

.marketing-shell h1,
.marketing-shell h2,
.marketing-shell h3,
.marketing-brand {
    font-family: "Manrope", sans-serif;
    letter-spacing: 0;
}

.marketing-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, rgba(246, 247, 242, 0.96), rgba(246, 247, 242, 0.74));
    backdrop-filter: blur(18px);
}

.marketing-nav-inner {
    width: min(1180px, 100%);
    min-height: 4.2rem;
    margin: 0 auto;
    padding: 0.65rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(23, 33, 58, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 50px rgba(23, 33, 58, 0.1);
}

.marketing-brand,
.marketing-links,
.hero-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.marketing-brand,
.marketing-links a {
    color: #17213a;
    text-decoration: none;
    font-weight: 700;
}

.marketing-links a:not(.btn) {
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    color: #475467;
}

.marketing-links a:not(.btn):hover,
.marketing-links a:not(.btn):focus {
    color: #17213a;
    background: rgba(17, 120, 100, 0.08);
}

.marketing-links a.is-active:not(.btn),
.marketing-links .btn.is-active {
    color: #0b4f44;
    background: rgba(17, 120, 100, 0.12);
    box-shadow: inset 0 0 0 1px rgba(17, 120, 100, 0.16);
}

.marketing-mark {
    width: 2.55rem;
    height: 2.55rem;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7b267, #f2a95f);
    color: #17213a;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(242, 169, 95, 0.28);
}

.marketing-brand-copy strong {
    color: #17213a;
}

.marketing-brand-copy small {
    color: #667085;
}

.marketing-cta,
.marketing-login {
    min-height: 2.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
}

.marketing-cta {
    color: #17213a !important;
    background: #f6ad63;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(242, 169, 95, 0.22);
}

.marketing-cta:hover,
.marketing-cta:focus {
    color: #17213a !important;
    background: #f3bb7d;
}

.marketing-login {
    color: #17213a !important;
    background: #ffffff;
    border: 1px solid rgba(23, 33, 58, 0.18);
}

.marketing-login:hover,
.marketing-login:focus {
    background: #17213a;
    color: #fff !important;
}

.saas-hero,
.pricing-hero,
.marketing-section,
.pricing-grid,
.marketing-footer {
    width: min(1180px, calc(100% - 2rem));
    margin-left: auto;
    margin-right: auto;
}

.saas-hero {
    min-height: calc(100vh - 4.5rem);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1fr);
    align-items: center;
    gap: 3.25rem;
    padding: 4.5rem 0 3.75rem;
}

.hero-eyebrow-row {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(23, 33, 58, 0.1);
    box-shadow: 0 12px 28px rgba(23, 33, 58, 0.08);
    color: #0e6b58;
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero-eyebrow-row svg {
    width: 1rem;
    height: 1rem;
}

.saas-hero-copy h1,
.pricing-hero h1 {
    max-width: 850px;
    margin: 0.8rem 0 1rem;
    font-size: 4.6rem;
    line-height: 0.98;
    font-weight: 850;
}

.saas-hero-copy p,
.pricing-hero p,
.marketing-section p {
    color: #5a6478;
    font-size: 1.03rem;
    line-height: 1.7;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.4rem;
}

.hero-proof span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(23, 33, 58, 0.1);
    color: #344054;
    font-size: 0.82rem;
    font-weight: 850;
}

.hero-proof svg {
    width: 0.95rem;
    height: 0.95rem;
    color: #0e6b58;
}

.hero-stat-grid {
    max-width: 680px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.hero-stat-grid div {
    min-height: 6.2rem;
    padding: 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(23, 33, 58, 0.1);
    box-shadow: 0 10px 28px rgba(23, 33, 58, 0.07);
}

.hero-stat-grid strong {
    display: block;
    color: #17213a;
    font-size: 1.45rem;
    line-height: 1;
}

.hero-stat-grid span {
    display: block;
    margin-top: 0.55rem;
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.35;
}

.payroll-visual {
    position: relative;
    min-height: 520px;
}

.payroll-visual-main {
    min-height: 470px;
    padding: 1rem;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(23, 33, 58, 0.12);
    box-shadow: 0 28px 80px rgba(23, 33, 58, 0.16);
}

.visual-header-row {
    min-height: 4.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.2rem 0.85rem;
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
}

.visual-header-row div {
    display: grid;
    gap: 0.2rem;
}

.visual-header-row span {
    color: #667085;
    font-size: 0.82rem;
    font-weight: 800;
}

.visual-header-row strong {
    color: #17213a;
    font-size: 1.35rem;
}

.visual-status {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.72rem;
    border-radius: 999px;
    background: rgba(14, 107, 88, 0.1);
    color: #0e6b58 !important;
    border: 1px solid rgba(14, 107, 88, 0.18);
}

.payroll-hero-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.8rem auto 0;
}

.visual-compliance-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding-top: 0.3rem;
}

.visual-compliance-row span {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.7rem;
    border-radius: 999px;
    background: #eef4fb;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 850;
}

.visual-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(250px, 54%);
    padding: 0.85rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(23, 33, 58, 0.12);
    box-shadow: 0 18px 42px rgba(23, 33, 58, 0.14);
}

.visual-floating-card > span {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #0e6b58;
    background: rgba(14, 107, 88, 0.1);
}

.visual-floating-card svg {
    width: 1.15rem;
    height: 1.15rem;
}

.visual-floating-card div {
    display: grid;
    gap: 0.18rem;
}

.visual-floating-card strong {
    color: #17213a;
    font-size: 0.95rem;
}

.visual-floating-card small {
    color: #667085;
    line-height: 1.35;
}

.payroll-card {
    left: -1.2rem;
    bottom: 4.5rem;
}

.compliance-card {
    right: -1rem;
    top: 7.4rem;
}

.product-visual {
    min-height: 460px;
    padding: 1rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(23, 33, 58, 0.12);
    box-shadow: 0 28px 80px rgba(23, 33, 58, 0.16);
    transform: perspective(1100px) rotateY(-5deg) rotateX(3deg);
}

.visual-topbar {
    height: 3.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
}

.visual-topbar span {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #d6dde8;
}

.visual-topbar strong {
    margin-left: auto;
    color: #17213a;
}

.visual-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.visual-metric,
.visual-table div,
.feature-grid article,
.audience-grid article,
.implementation-grid article,
.faq-grid article,
.pricing-card,
.review-list div,
.comparison-table-wrap {
    border: 1px solid rgba(23, 33, 58, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 24px rgba(23, 33, 58, 0.07);
}

.visual-metric {
    min-height: 6.5rem;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.visual-metric small,
.visual-table span,
.price-note,
.per-employee,
.source-note {
    color: #667085;
}

.visual-metric strong {
    font-size: 1.45rem;
}

.visual-table {
    display: grid;
    gap: 0.75rem;
}

.visual-table div {
    min-height: 3.7rem;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.visual-table strong {
    color: #0e6b58;
}

.marketing-section {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.section-kicker {
    margin-bottom: 0.65rem;
    color: #0e6b58;
    font-weight: 850;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.marketing-section h2 {
    max-width: 850px;
    margin-bottom: 1rem;
    font-size: 2.75rem;
    font-weight: 850;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1.6rem;
}

.audience-grid,
.implementation-grid,
.faq-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.4rem;
}

.audience-grid {
    grid-template-columns: repeat(4, 1fr);
}

.implementation-grid,
.faq-grid {
    grid-template-columns: repeat(4, 1fr);
}

.feature-grid article,
.audience-grid article,
.implementation-grid article,
.faq-grid article,
.pricing-card {
    padding: 1.35rem;
}

.feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 8px;
    color: var(--brand);
    background: rgba(17, 120, 100, 0.1);
}

.feature-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.feature-grid h3,
.pricing-card h2 {
    margin-bottom: 0.65rem;
    font-weight: 850;
}

.review-band,
.cta-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
    gap: 1.5rem;
    align-items: center;
    padding: 2rem;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(231, 240, 236, 0.96), rgba(255, 248, 239, 0.96));
    border: 1px solid rgba(14, 107, 88, 0.14);
}

.review-list {
    display: grid;
    gap: 0.8rem;
}

.review-list div {
    padding: 1rem;
}

.review-list strong,
.review-list span {
    display: block;
}

.review-list span {
    margin-top: 0.35rem;
    color: #5a6478;
}

.workflow-section {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.security-section {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.72fr);
    gap: 1.5rem;
    align-items: start;
    padding: 2rem;
    border-radius: 8px;
    background: #17213a;
    color: #fff;
}

.security-section .section-kicker,
.security-section h2 {
    color: #fff;
}

.security-section p {
    color: rgba(255, 255, 255, 0.72);
}

.security-panel {
    display: grid;
    gap: 0.8rem;
}

.security-panel div {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.security-panel span {
    color: rgba(255, 255, 255, 0.72);
}

.workflow-steps {
    display: grid;
    gap: 0.9rem;
}

.workflow-steps article,
.compliance-grid div,
.contact-benefits div,
.contact-sales-form {
    border-radius: 8px;
    border: 1px solid rgba(23, 33, 58, 0.1);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 24px rgba(23, 33, 58, 0.07);
}

.workflow-steps article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.85rem;
    padding: 1rem;
}

.workflow-steps article span {
    grid-row: span 2;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #17213a;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
}

.workflow-steps article strong,
.compliance-grid strong,
.contact-benefits strong {
    font-weight: 850;
}

.workflow-steps article p,
.compliance-grid span,
.contact-benefits small {
    margin: 0;
    color: #667085;
}

.compliance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.4rem;
}

.compliance-grid div {
    display: grid;
    gap: 0.4rem;
    padding: 1.1rem;
}

.insight-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 0;
}

.insight-strip div {
    padding: 1.4rem;
    border-radius: 8px;
    background: #17213a;
    color: #fff;
}

.metric-number {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 2.3rem;
    font-weight: 900;
}

.implementation-grid article {
    display: grid;
    gap: 0.45rem;
}

.implementation-grid article span {
    width: fit-content;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: rgba(17, 120, 100, 0.1);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 900;
}

.faq-section {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.faq-grid {
    margin-top: 0;
    grid-template-columns: repeat(2, 1fr);
}

.faq-grid article {
    display: grid;
    gap: 0.45rem;
}

.contact-sales-layout {
    width: min(1180px, calc(100% - 2rem));
    min-height: calc(100vh - 4.5rem);
    margin: 0 auto;
    padding: 5rem 0;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
    gap: 2rem;
    align-items: center;
}

.contact-sales-copy h1 {
    max-width: 720px;
    margin: 0.8rem 0 1rem;
    font-size: 4rem;
    line-height: 1;
    font-weight: 850;
}

.contact-sales-copy p {
    color: #5a6478;
    font-size: 1.03rem;
    line-height: 1.7;
}

.contact-visual-panel {
    margin-top: 1.4rem;
    padding: 0.9rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(23, 33, 58, 0.1);
    box-shadow: 0 18px 48px rgba(23, 33, 58, 0.1);
}

.contact-visual-panel svg {
    display: block;
    width: 100%;
    height: auto;
}

.contact-visual-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.contact-visual-metrics span {
    min-height: 4rem;
    display: grid;
    align-content: center;
    gap: 0.2rem;
    padding: 0.7rem;
    border-radius: 8px;
    background: #f4f7f1;
    color: #667085;
    font-size: 0.8rem;
    font-weight: 800;
}

.contact-visual-metrics strong {
    color: #17213a;
    font-size: 1.35rem;
    line-height: 1;
}

.contact-benefits {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.contact-benefits div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1rem 0.85rem;
    padding: 1rem;
}

.contact-benefits .feature-icon {
    grid-row: span 2;
    margin: 0;
}

.contact-sales-form {
    padding: 1.5rem;
}

.contact-form-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
}

.contact-form-heading .feature-icon {
    margin: 0;
}

.contact-form-heading h2 {
    margin: 0 0 0.25rem;
    font-size: 1.45rem;
    font-weight: 850;
}

.contact-form-heading p {
    margin: 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.5;
}

.client-id-field {
    font-weight: 900;
    color: var(--brand-dark);
    background: #f4f7f1;
}

.lead-message-cell {
    max-width: 24rem;
    white-space: normal;
    color: #5a6478;
}

.pricing-hero {
    padding: clamp(3rem, 7vw, 5rem) 0 2rem;
    text-align: center;
}

.pricing-hero p {
    max-width: 820px;
    margin: 0 auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    padding-bottom: 2rem;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 60px rgba(23, 33, 58, 0.12);
    border-color: rgba(17, 120, 100, 0.25);
}

.pricing-card h2 {
    margin: 0.75rem 0 0.25rem;
    font-size: 2.5rem;
}

.pricing-card ul {
    padding-left: 1.1rem;
    margin: 1.2rem 0 1.5rem;
    display: grid;
    gap: 0.55rem;
}

.pricing-card .btn {
    margin-top: auto;
}

.plan-label,
.recommended-badge {
    width: fit-content;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 850;
}

.plan-label {
    background: #edf2f7;
    color: #17213a;
}

.recommended-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: #f2a95f;
    color: #17213a;
}

.featured-plan {
    border-color: rgba(14, 107, 88, 0.42);
    box-shadow: 0 22px 60px rgba(14, 107, 88, 0.12);
}

@media (max-width: 1100px) {
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Modern SaaS template refresh */
.container {
    max-width: 1220px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-heading h1,
.section-heading h2,
.section-heading h3,
.surface-card h1,
.surface-card h2,
.surface-card h3,
.metric-card strong {
    font-family: "Manrope", sans-serif;
    letter-spacing: 0;
}

.section-heading h1,
.section-heading h2 {
    margin-bottom: 0;
    font-weight: 850;
}

.surface-card h3,
.surface-card h5,
.surface-card h6 {
    font-weight: 800;
}

.surface-card,
.metric-card,
.login-form-card {
    border-color: rgba(23, 33, 58, 0.1);
}

.surface-card:hover,
.metric-card:hover {
    box-shadow: 0 18px 46px rgba(23, 33, 58, 0.11);
}

.metric-card span {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.metric-card strong {
    font-size: 2.15rem;
    color: var(--text);
}

.table-responsive {
    border-radius: 8px;
}

.app-table {
    border-collapse: separate;
    border-spacing: 0;
}

.app-table thead th,
.table thead th {
    background: #f4f7f1;
    color: #475467;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
}

.app-table tbody tr {
    transition: background-color 0.16s ease;
}

.app-table tbody tr:hover {
    background: rgba(17, 120, 100, 0.045);
}

.badge {
    border-radius: 999px;
    padding: 0.42rem 0.65rem;
    font-weight: 800;
}

.btn {
    border-radius: 8px;
    font-weight: 800;
    letter-spacing: 0;
}

.btn svg,
.marketing-links .btn svg {
    flex: 0 0 auto;
}

.marketing-links .btn,
.hero-actions .btn,
.contact-sales-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.btn-outline-primary,
.btn-outline-brand {
    color: var(--brand);
    border-color: rgba(17, 120, 100, 0.45);
}

.btn-outline-primary:hover,
.btn-outline-brand:hover,
.btn-outline-brand:focus,
.btn-brand,
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-color: transparent;
}

.btn-secondary,
.btn-outline-secondary {
    border-color: rgba(23, 33, 58, 0.18);
}

.modal-content,
.dropdown-menu,
.popover {
    border-radius: 8px;
    border: 1px solid rgba(23, 33, 58, 0.1);
    box-shadow: 0 24px 70px rgba(23, 33, 58, 0.18);
}

.modal-header,
.modal-footer {
    border-color: rgba(23, 33, 58, 0.08);
}

.form-label {
    color: #344054;
    font-weight: 800;
    font-size: 0.88rem;
}

.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: rgba(23, 33, 58, 0.14);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(17, 120, 100, 0.65);
    box-shadow: 0 0 0 0.22rem rgba(17, 120, 100, 0.12);
}

.pagination .page-link {
    border-radius: 8px;
    font-weight: 800;
}

.btn.profile-initials,
.profile-initials {
    border-radius: 8px;
}

.comparison-section {
    display: grid;
    grid-template-columns: 0.78fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.comparison-table-wrap {
    overflow-x: auto;
}

.comparison-table {
    margin-bottom: 0;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    vertical-align: middle;
}

.source-note {
    grid-column: 1 / -1;
    font-size: 0.92rem;
}

.source-note a {
    color: #0e6b58;
    font-weight: 700;
}

@keyframes issRevealUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes issHeaderDrop {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes issControlReveal {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes issFloatY {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.marketing-nav-inner,
.app-navbar {
    animation: issHeaderDrop var(--motion-slow) both;
}

.saas-hero-copy,
.payroll-visual,
.pricing-hero,
.pricing-card,
.marketing-section,
.contact-sales-copy,
.contact-sales-form,
.login-copy,
.login-form-card,
.hero-card,
.surface-card,
.metric-card {
    animation: issRevealUp var(--motion-slow) both;
}

.pricing-card:nth-child(2),
.feature-grid article:nth-child(2),
.audience-grid article:nth-child(2),
.implementation-grid article:nth-child(2),
.metric-card:nth-child(2) {
    animation-delay: 45ms;
}

.pricing-card:nth-child(3),
.feature-grid article:nth-child(3),
.audience-grid article:nth-child(3),
.implementation-grid article:nth-child(3),
.metric-card:nth-child(3) {
    animation-delay: 90ms;
}

.visual-floating-card,
.contact-visual-panel,
.login-visual {
    animation: issFloatY 5.5s ease-in-out infinite;
}

.compliance-card,
.contact-visual-panel {
    animation-delay: 700ms;
}

.btn,
button,
.nav-link,
.marketing-links a,
.dropdown-item,
.page-link,
.form-control,
.form-select,
.form-check-input,
.form-check-label,
.feature-icon,
.brand-mark,
.client-id-badge,
.badge,
.pricing-card,
.surface-card,
.metric-card,
.visual-metric,
.visual-table div,
.workflow-steps article,
.contact-benefits div,
.contact-visual-metrics span,
.credential-card div,
.comparison-table tbody tr,
.app-table tbody tr,
.table tbody tr {
    transition:
        transform var(--motion-base),
        box-shadow var(--motion-base),
        border-color var(--motion-base),
        background-color var(--motion-base),
        color var(--motion-base),
        opacity var(--motion-base);
}

.btn:hover,
button:not(:disabled):hover,
.page-link:hover,
.dropdown-item:hover,
.marketing-links a:hover,
.app-navbar .nav-link:hover {
    transform: translateY(-2px);
}

.btn:active,
button:not(:disabled):active,
.page-link:active,
.dropdown-item:active,
.marketing-links a:active,
.app-navbar .nav-link:active {
    transform: translateY(0) scale(0.98);
}

.btn:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.marketing-links a:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.form-check-input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 10px 24px rgba(23, 33, 58, 0.1);
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(17, 120, 100, 0.34);
    box-shadow: 0 8px 22px rgba(23, 33, 58, 0.06);
}

.form-control:focus,
.form-select:focus {
    transform: translateY(-1px);
}

.form-check-input {
    cursor: pointer;
}

.form-check-input:checked {
    animation: issControlReveal var(--motion-base) both;
}

.feature-icon:hover,
.brand-mark:hover,
.client-id-badge:hover,
.badge:hover {
    transform: translateY(-2px);
}

.surface-card:hover,
.metric-card:hover,
.visual-metric:hover,
.visual-table div:hover,
.workflow-steps article:hover,
.contact-benefits div:hover,
.contact-visual-metrics span:hover,
.credential-card div:hover {
    transform: translateY(-3px);
}

.comparison-table tbody tr:hover,
.app-table tbody tr:hover,
.table tbody tr:hover {
    transform: translateX(2px);
}

.dropdown-menu {
    animation: issControlReveal var(--motion-base) both;
    transform-origin: top right;
}

.modal.fade .modal-dialog {
    transition: transform var(--motion-slow), opacity var(--motion-slow);
    transform: translateY(14px) scale(0.98);
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

.btn svg,
.nav-link svg,
.marketing-links svg,
.feature-icon svg,
.login-lock-icon svg,
.visual-floating-card svg {
    transition: transform var(--motion-base), color var(--motion-base), opacity var(--motion-base);
}

.btn:hover svg,
.nav-link:hover svg,
.marketing-links a:hover svg,
.feature-icon:hover svg,
.login-lock-icon:hover svg,
.visual-floating-card:hover svg {
    transform: translateY(-1px) scale(1.05);
}

.btn:disabled,
button:disabled,
.form-control:disabled,
.form-select:disabled {
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }

    .visual-floating-card,
    .contact-visual-panel,
    .login-visual {
        animation: none !important;
    }
}

.cta-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 2rem;
}

.marketing-footer {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0;
    color: #667085;
}

.marketing-footer-main {
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(140px, 0.6fr));
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 8px;
    background: #17213a;
    color: #fff;
}

.marketing-footer-main p {
    max-width: 34rem;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.68);
}

.footer-brand {
    color: #fff;
}

.footer-brand .marketing-brand-copy strong {
    color: #fff;
}

.footer-brand .marketing-brand-copy small {
    color: rgba(255, 255, 255, 0.66);
}

.footer-link-group {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.footer-link-group strong {
    color: #fff;
}

.footer-link-group a,
.footer-link-group span {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.footer-link-group a:hover,
.footer-link-group a:focus {
    color: #fff;
}

.marketing-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    font-size: 0.9rem;
}

.marketing-footer-bottom a {
    color: var(--brand);
    font-weight: 850;
    text-decoration: none;
}

.payslip-card {
    max-width: 940px;
    margin: 0 auto;
}

.luxe-payslip {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,244,236,0.96));
    border: 1px solid rgba(14, 107, 88, 0.14);
}

.payslip-brand-band {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.25rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(14,107,88,0.92), rgba(16,34,27,0.92));
    color: #fff;
}

/* Payslip totals highlighting */
.payslip-card .totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(14,107,88,0.06), rgba(14,107,88,0.03));
    font-weight: 800;
    margin-top: 0.5rem;
}
.payslip-card .totals-row strong {
    font-size: 1.05rem;
}

.payslip-brand-band .eyebrow,
.payslip-brand-band h2 {
    color: #fff;
}

.payslip-note {
    margin-top: 0.55rem;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(233, 137, 87, 0.14);
    color: var(--brand-dark);
    font-size: 0.86rem;
    font-weight: 700;
}

.payslip-logo {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 1rem;
    background: #fff;
    padding: 0.35rem;
}

.holiday-textarea {
    min-height: 18rem;
    font-family: "SFMono-Regular", Consolas, monospace;
}

.user-bulk-textarea {
    min-height: 14rem;
    font-family: "SFMono-Regular", Consolas, monospace;
    line-height: 1.55;
}

.admin-control-page,
.admin-users-page {
    display: grid;
    gap: 1.25rem;
}

.admin-control-page {
    max-width: 1120px;
    padding-bottom: calc(var(--app-footer-height, 64px) + 3rem) !important;
}

.admin-control-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid rgba(23, 33, 58, 0.1);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 246, 0.92)),
        radial-gradient(circle at 100% 0%, rgba(17, 120, 100, 0.12), transparent 34%);
    box-shadow: var(--soft-shadow);
}

.admin-control-hero h1 {
    max-width: 780px;
    margin: 0.2rem 0 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    font-weight: 900;
    letter-spacing: 0;
}

.admin-control-hero p {
    max-width: 720px;
    margin: 0.45rem 0 0;
    color: var(--muted);
    font-weight: 700;
}

.admin-control-hero-meta,
.admin-control-hero-actions {
    display: grid;
    justify-items: end;
    gap: 0.45rem;
    text-align: right;
}

.admin-control-hero-meta,
.admin-control-hero-actions span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.admin-control-hero-meta strong,
.admin-control-hero-actions strong {
    color: var(--text);
    font-size: 1rem;
}

.tenant-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.tenant-stat-card {
    min-height: 8.25rem;
    display: grid;
    align-content: space-between;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid rgba(23, 33, 58, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--soft-shadow);
}

.tenant-stat-card span,
.tenant-panel-badge {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.tenant-stat-card strong {
    color: var(--text);
    font-size: 1.65rem;
    font-weight: 950;
}

.tenant-stat-card small {
    color: var(--muted);
    font-weight: 750;
}

.tenant-control-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.users-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.tenant-control-grid .tenant-panel-primary {
    grid-row: auto;
}

.tenant-panel,
.users-table-panel {
    padding: 1.15rem;
    border: 1px solid rgba(23, 33, 58, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--soft-shadow);
}

.tenant-control-grid .tenant-panel {
    width: 100%;
}

.tenant-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tenant-panel-head h2 {
    margin: 0.15rem 0 0;
    font-family: "Manrope", sans-serif;
    font-size: 1.08rem;
    font-weight: 900;
}

.tenant-panel-badge {
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.08);
    color: var(--brand-dark);
}

.subscription-overview {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 0.58fr);
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.subscription-overview-combined {
    grid-template-columns: 1fr;
}

.subscription-combo-card {
    display: grid;
    grid-template-columns: minmax(240px, 0.38fr) minmax(0, 0.62fr);
    overflow: hidden;
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.76);
}

.subscription-plan-card,
.subscription-sales-card,
.permission-helper,
.workflow-step-card {
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.76);
}

.subscription-plan-card {
    display: grid;
    align-content: space-between;
    gap: 0.45rem;
    padding: 1rem;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(17, 120, 100, 0.12), rgba(242, 169, 95, 0.1)),
        #fff;
}

.subscription-plan-card span,
.subscription-sales-card span,
.permission-helper strong,
.workflow-step-card span {
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.subscription-plan-card strong {
    color: var(--text);
    font-size: 2rem;
    font-weight: 950;
}

.subscription-plan-card small,
.subscription-sales-card p,
.permission-helper span {
    color: var(--muted);
    font-weight: 750;
}

.subscription-sales-card {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.5rem;
    padding: 1rem;
    border: 0;
    border-left: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 0;
    background: transparent;
}

.subscription-sales-card p {
    margin: 0;
}

.tenant-form-grid,
.modal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.tenant-form-grid label,
.tenant-workflow-label,
.modal-form-grid label {
    display: grid;
    gap: 0.4rem;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 850;
}

.tenant-form-grid label span,
.tenant-workflow-label span,
.modal-form-grid label span {
    color: rgba(23, 33, 58, 0.74);
}

.tenant-form-actions {
    grid-column: 1 / -1;
}

.role-matrix-list {
    display: grid;
    gap: 0.75rem;
}

.tenant-control-grid .role-matrix-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permission-helper {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.9rem;
    padding: 0.85rem;
}

.role-matrix-row {
    display: grid;
    grid-template-columns: minmax(9rem, 0.32fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.8rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(23, 33, 58, 0.05);
}

.tenant-control-grid .role-matrix-row {
    grid-template-columns: 1fr;
    align-content: start;
}

.role-matrix-copy,
.role-matrix-input {
    display: grid;
    gap: 0.2rem;
}

.role-matrix-row small {
    color: var(--muted);
    font-weight: 700;
}

.permission-chip-grid,
.workflow-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.permission-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    cursor: pointer;
}

.permission-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.permission-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.38rem 0.6rem;
    border: 1px solid rgba(23, 33, 58, 0.12);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.86);
    color: rgba(23, 33, 58, 0.72);
    font-size: 0.78rem;
    font-weight: 850;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}

.permission-chip input:checked + span {
    border-color: rgba(17, 120, 100, 0.28);
    background: rgba(17, 120, 100, 0.11);
    color: var(--brand-dark);
    box-shadow: inset 0 0 0 1px rgba(17, 120, 100, 0.08);
}

.permission-chip input:focus-visible + span {
    box-shadow: var(--focus-ring);
}

.matrix-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
}

.tenant-workflow-textarea {
    min-height: 10rem;
    font-family: "SFMono-Regular", Consolas, monospace;
}

.workflow-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.workflow-step-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
}

.workflow-step-card strong {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 900;
}

.workflow-builder-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.workflow-builder-card {
    display: grid;
    align-content: start;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 245, 0.86));
    box-shadow: 0 8px 20px rgba(23, 33, 58, 0.05);
}

.workflow-enable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
}

.workflow-enable-row input {
    width: 2.4rem;
    height: 1.25rem;
    flex: 0 0 auto;
    accent-color: var(--brand);
}

.workflow-builder-card span,
.workflow-enable-row span {
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.workflow-builder-card strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 900;
}

.workflow-builder-card.is-disabled {
    opacity: 0.72;
    background: rgba(248, 250, 245, 0.64);
}

.workflow-builder-card.is-disabled .permission-chip span {
    cursor: not-allowed;
    opacity: 0.72;
}

.users-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.36fr);
}

.users-layout-single {
    grid-template-columns: 1fr;
}

.users-utility-panel {
    display: grid;
    gap: 1rem;
}

.directory-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.users-modern-table {
    min-width: 760px;
}

.user-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.user-cell div {
    display: grid;
    gap: 0.1rem;
}

.user-cell small {
    color: var(--muted);
    font-weight: 750;
}

.user-avatar {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), var(--secondary));
    color: #fff;
    font-weight: 950;
}

.role-chip,
.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 900;
}

.role-chip {
    background: rgba(17, 120, 100, 0.08);
    color: var(--brand-dark);
}

.status-active {
    background: rgba(17, 120, 100, 0.1);
    color: var(--brand-dark);
}

.status-inactive {
    background: rgba(194, 65, 61, 0.1);
    color: #9c2f2c;
}

.row-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.icon-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.icon-text-btn svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    fill: currentColor;
}

.employee-code-list {
    display: grid;
    gap: 0.5rem;
    max-height: 18rem;
    overflow: auto;
    padding-right: 0.25rem;
}

.employee-code-item {
    display: grid;
    gap: 0.15rem;
    padding: 0.62rem 0.7rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.72);
}

.employee-code-item span {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 750;
}

.admin-modal {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(23, 33, 58, 0.24);
}

.admin-modal .modal-header {
    align-items: flex-start;
    background: rgba(248, 250, 245, 0.84);
}

.admin-modal .modal-header small {
    color: var(--muted);
    font-weight: 750;
}

.user-modal-header {
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
    background:
        linear-gradient(135deg, rgba(23, 33, 58, 0.98), rgba(17, 120, 100, 0.92)) !important;
    color: #fff;
}

.user-modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.88;
}

.user-modal-header small {
    color: rgba(255, 255, 255, 0.76) !important;
}

.user-modal-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.user-modal-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.user-modal-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: #fff;
}

.user-create-modal-body {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    background:
        linear-gradient(180deg, rgba(248, 250, 245, 0.72), #fff);
}

.user-modal-section {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
}

.user-modal-section-title {
    display: grid;
    gap: 0.16rem;
}

.user-modal-section-title span {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 950;
}

.user-modal-section-title small {
    color: var(--muted);
    font-weight: 750;
}

.modal-field-card {
    padding: 0.85rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.62);
}

.user-modal-footer {
    border-top: 1px solid rgba(23, 33, 58, 0.08);
    background: #fff;
}

.employee-modal-dialog {
    max-width: min(1180px, calc(100vw - 1.5rem));
}

.employee-modal {
    overflow: hidden;
}

.employee-modal-body {
    display: grid;
    gap: 1rem;
    max-height: min(74vh, 760px);
    overflow-y: auto;
    padding: 1rem;
    background:
        linear-gradient(180deg, rgba(248, 250, 245, 0.74), #fff);
}

.employee-form-section {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(23, 33, 58, 0.085);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 30px rgba(23, 33, 58, 0.055);
}

.employee-form-section-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.72rem;
    border-bottom: 1px solid rgba(23, 33, 58, 0.075);
}

.employee-form-step {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.1);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px rgba(17, 120, 100, 0.12);
}

.employee-form-section-title strong {
    display: block;
    color: var(--text);
    font-size: 0.98rem;
    font-weight: 950;
}

.employee-form-section-title small {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.employee-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.employee-form-grid-compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.employee-form-grid label {
    display: grid;
    gap: 0.36rem;
    min-width: 0;
}

.employee-form-grid label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    color: rgba(23, 33, 58, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
}

.employee-form-grid label > span em {
    color: var(--brand-dark);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.employee-form-grid .form-control,
.employee-form-grid .form-select {
    min-height: 2.58rem;
    border-radius: 8px;
    border-color: rgba(23, 33, 58, 0.1);
    background-color: rgba(255, 255, 255, 0.96);
    font-weight: 760;
}

.employee-salary-preview {
    display: grid;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid rgba(17, 120, 100, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(17, 120, 100, 0.1), rgba(242, 169, 95, 0.08));
}

.employee-salary-preview-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.employee-salary-preview-head span,
.employee-preview-label-row span {
    display: block;
    color: var(--brand-dark);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.employee-salary-preview-head strong {
    display: block;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 950;
}

.employee-salary-preview-head small {
    color: var(--muted);
    font-weight: 800;
    text-align: right;
}

.employee-salary-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.employee-salary-preview-item {
    display: grid;
    align-content: start;
    gap: 0.38rem;
    min-height: 6rem;
    min-width: 0;
    padding: 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 0 0 1px rgba(23, 33, 58, 0.06);
}

.employee-salary-preview-item > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.employee-salary-preview-item strong {
    color: var(--text);
    font-size: clamp(1rem, 1vw, 1.18rem);
    font-weight: 950;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.employee-salary-preview-item small {
    color: var(--muted);
    font-weight: 750;
    line-height: 1.35;
}

.employee-salary-preview-item small b {
    color: var(--text);
    font-weight: 950;
}

.employee-salary-preview-item-primary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 249, 245, 0.92));
}

.employee-salary-preview-item-net {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 238, 0.92));
}

.employee-preview-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.employee-preview-label-row em {
    flex: 0 0 auto;
    padding: 0.2rem 0.48rem;
    border-radius: 999px;
    background: rgba(17, 120, 100, 0.1);
    color: var(--brand-dark);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.employee-salary-preview-item.is-muted {
    background: rgba(255, 255, 255, 0.68);
}

.employee-salary-preview-item.is-muted strong,
.employee-salary-preview-item.is-muted small {
    color: rgba(103, 116, 142, 0.78);
}

.employee-salary-preview-item.is-muted .employee-preview-label-row em {
    background: rgba(103, 116, 142, 0.11);
    color: rgba(75, 85, 105, 0.92);
}

.employee-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.employee-toggle-card {
    min-height: 4.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.72);
    cursor: pointer;
}

.employee-toggle-card .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
    flex: 0 0 auto;
    margin: 0;
}

.hr-dashboard-page,
.hr-lifecycle-page,
.hr-documents-page {
    display: grid;
    gap: 1.15rem;
}

.hr-chart-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.hr-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1rem;
}

.hr-letters-page {
    padding-bottom: calc(var(--app-footer-height, 64px) + 5rem) !important;
}

.hr-letter-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
    gap: 1rem;
    align-items: start;
}

.hr-letter-generate-row {
    display: grid;
    gap: 1rem;
}

.hr-letter-generate-panel {
    width: 100%;
}

.hr-letter-generate-form {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) auto;
    align-items: end;
}

.hr-letter-generate-action {
    display: flex;
    align-items: end;
    min-width: 12rem;
}

.hr-letter-generate-action .btn {
    width: 100%;
    min-height: 2.65rem;
}

.hr-template-table-wrap {
    overflow-x: hidden;
    border: 1px solid rgba(23, 33, 58, 0.075);
    border-radius: 8px;
    background: #fff;
}

.hr-template-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
}

.hr-template-table th:nth-child(1) { width: 18%; }
.hr-template-table th:nth-child(2) { width: 24%; }
.hr-template-table th:nth-child(3) { width: 12%; }
.hr-template-table th:nth-child(4) { width: 32%; }
.hr-template-table th:nth-child(5) { width: 14%; }

.hr-template-table td,
.hr-template-table th {
    white-space: normal;
    overflow-wrap: anywhere;
}

.hr-template-preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 720;
    line-height: 1.45;
}

.hr-template-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.hr-template-actions form {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.hr-template-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.hr-template-modal-grid label,
.hr-letter-generate-form label {
    display: grid;
    gap: 0.35rem;
}

.hr-template-modal-grid label span,
.hr-letter-generate-form label span {
    color: rgba(23, 33, 58, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
}

.hr-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(23, 33, 58, 0.07);
}

.hr-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.hr-panel-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 950;
}

.hr-panel-head a,
.hr-soft-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.36rem 0.62rem;
    border-radius: 999px;
    background: rgba(17, 120, 100, 0.1);
    color: var(--brand-dark);
    font-size: 0.76rem;
    font-weight: 900;
    text-decoration: none;
}

.hr-letter-help {
    display: grid;
    gap: 0.22rem;
    margin-top: 0.85rem;
    padding: 0.82rem;
    border: 1px solid rgba(17, 120, 100, 0.12);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.78);
}

.hr-letter-help strong {
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 950;
}

.hr-letter-help span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 720;
    line-height: 1.45;
}

.hr-letter-template-textarea {
    min-height: 14rem;
    resize: vertical;
    line-height: 1.5;
}

.hr-letter-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hr-letter-token-list span {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid rgba(17, 120, 100, 0.14);
    border-radius: 999px;
    background: rgba(17, 120, 100, 0.075);
    color: var(--brand-dark);
    font-size: 0.75rem;
    font-weight: 900;
}

.hr-letter-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.hr-letter-editor-actions .btn {
    min-height: 2.5rem;
}

.hr-bar-list {
    display: grid;
    gap: 0.7rem;
}

.hr-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem 0.75rem;
}

.hr-bar-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 850;
}

.hr-bar-row strong {
    color: var(--brand-dark);
    font-weight: 950;
}

.hr-bar-row div {
    grid-column: 1 / -1;
    height: 0.58rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23, 33, 58, 0.07);
}

.hr-bar-row div::before {
    content: "";
    display: block;
    width: var(--bar, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.hr-activity-list {
    display: grid;
    gap: 0.55rem;
}

.hr-activity-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem;
    border: 1px solid rgba(23, 33, 58, 0.07);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.72);
}

.hr-activity-row span,
.hr-activity-row em {
    justify-self: start;
    padding: 0.24rem 0.48rem;
    border-radius: 999px;
    background: rgba(17, 120, 100, 0.1);
    color: var(--brand-dark);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hr-activity-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 920;
}

.hr-activity-row small {
    color: var(--muted);
    font-weight: 800;
}

.hr-milestone-grid,
.hr-lifecycle-types {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.hr-milestone-grid article,
.hr-lifecycle-types article {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(23, 33, 58, 0.055);
}

.hr-milestone-grid span,
.hr-lifecycle-types span {
    display: inline-flex;
    margin-bottom: 0.55rem;
    padding: 0.2rem 0.48rem;
    border-radius: 999px;
    background: rgba(242, 169, 95, 0.15);
    color: var(--brand-dark);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hr-milestone-grid strong,
.hr-lifecycle-types strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    font-weight: 950;
}

.hr-milestone-grid small,
.hr-lifecycle-types small {
    display: block;
    margin-top: 0.25rem;
    color: var(--muted);
    font-weight: 780;
}

.hr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.hr-form-grid label {
    display: grid;
    gap: 0.36rem;
    min-width: 0;
}

.hr-form-grid label > span {
    color: rgba(23, 33, 58, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
}

.hr-form-grid .form-control,
.hr-form-grid .form-select {
    min-height: 2.58rem;
    border-radius: 8px;
    border-color: rgba(23, 33, 58, 0.1);
    font-weight: 760;
}

.hr-form-wide {
    grid-column: 1 / -1;
}

.hr-rule-list {
    display: grid;
    gap: 0.65rem;
}

.hr-rule-list div {
    padding: 0.78rem;
    border: 1px solid rgba(23, 33, 58, 0.07);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.74);
}

.hr-rule-list strong,
.hr-rule-list span {
    display: block;
}

.hr-rule-list strong {
    color: var(--text);
    font-weight: 950;
}

.hr-rule-list span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 760;
}

.hr-notes-cell {
    max-width: 18rem;
    color: var(--muted);
}

.hr-action-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    white-space: nowrap;
}

.hr-action-row form {
    display: inline-flex;
    margin: 0;
}

.hr-vault-search {
    width: min(100%, 25rem);
}

.hr-progress-cell {
    display: grid;
    gap: 0.32rem;
    min-width: 10rem;
}

.hr-progress-cell strong {
    color: var(--text);
    font-weight: 950;
}

.hr-progress-cell div {
    height: 0.62rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23, 33, 58, 0.08);
}

.hr-progress-cell div span {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.hr-policy-editor {
    min-height: 18rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.88rem;
    line-height: 1.55;
}

.hr-policy-list {
    display: grid;
    gap: 0.7rem;
}

.hr-policy-list article {
    display: grid;
    gap: 0.24rem;
    padding: 0.82rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.76);
}

.hr-policy-list span {
    color: var(--brand-dark);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hr-policy-list strong {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 950;
}

.hr-policy-list small {
    color: var(--muted);
    font-weight: 760;
}

.employee-toggle-card span {
    display: grid;
    gap: 0.15rem;
}

.employee-toggle-card strong {
    color: var(--text);
    font-weight: 950;
}

.employee-toggle-card small {
    color: var(--muted);
    font-weight: 750;
}

.employee-modal-footer .btn {
    min-height: 2.55rem;
    border-radius: 8px;
    font-weight: 850;
}

.modal-switch-row {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.72);
}

.workspace-sales-page {
    display: grid;
    gap: 1.25rem;
    max-width: 1120px;
    padding-bottom: calc(var(--app-footer-height, 64px) + 3rem) !important;
}

.workspace-sales-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
    gap: 1rem;
    align-items: start;
}

.workspace-sales-message {
    grid-column: 1 / -1;
}

.workspace-sales-aside {
    display: grid;
    gap: 0.85rem;
}

.workspace-sales-aside h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
}

.workspace-sales-aside p {
    margin: 0;
    color: var(--muted);
    font-weight: 750;
}

@media (max-width: 991px) {
    .admin-control-hero,
    .tenant-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-control-hero-meta,
    .admin-control-hero-actions {
        justify-items: start;
        text-align: left;
    }

    .tenant-stat-grid,
    .tenant-control-grid,
    .users-layout,
    .subscription-overview,
    .subscription-combo-card,
    .tenant-control-grid .role-matrix-list,
    .workspace-sales-grid {
        grid-template-columns: 1fr;
    }

    .subscription-sales-card {
        border-left: 0;
        border-top: 1px solid rgba(23, 33, 58, 0.09);
    }

    .tenant-control-grid .tenant-panel-primary {
        grid-row: auto;
    }
}

@media (max-width: 767px) {
    .tenant-stat-grid,
    .tenant-form-grid,
    .modal-form-grid,
    .role-matrix-row,
    .workflow-preview-grid,
    .workflow-builder-grid {
        grid-template-columns: 1fr;
    }
}

/* Application footer */
:root {
    --app-footer-height: 64px;
}
.app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--app-footer-height);
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(23, 33, 58, 0.98), rgba(23, 33, 58, 0.92)),
        radial-gradient(circle at 20% 0%, rgba(17, 120, 100, 0.22), transparent 34%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: 0 -12px 34px rgba(23, 33, 58, 0.18);
    z-index: 1050;
    color: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(18px);
}
.app-footer .container { max-width: none; }
.app-footer a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}
.app-footer a:hover {
    color: var(--accent);
    text-decoration: none;
}

.app-footer-inner {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, auto) minmax(260px, 1fr);
    align-items: center;
    gap: 1.1rem;
    width: 100%;
    font-size: 0.82rem;
    font-weight: 700;
}

.app-footer-brand,
.app-footer-meta,
.app-footer-end,
.app-footer-links,
.footer-status {
    display: inline-flex;
    align-items: center;
}

.app-footer-brand {
    flex: 0 0 auto;
    gap: 0.7rem;
    min-width: 220px;
}

.app-footer-center {
    min-width: 0;
    display: grid;
    justify-items: center;
    text-align: center;
}

.app-footer-meta {
    gap: 0.55rem;
    min-width: 0;
}

.app-footer-links {
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    color: rgba(255, 255, 255, 0.68);
}

.app-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0.22rem 0.5rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 850;
}

.app-footer-links a:hover,
.app-footer-links a:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.app-footer-end {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0.65rem;
    min-width: 250px;
    text-align: right;
}

.app-footer-brand strong,
.app-footer-brand small {
    display: block;
    line-height: 1.12;
}

.app-footer-brand strong {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 850;
}

.app-footer-brand small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.74rem;
    font-weight: 800;
}

.app-footer-mark {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.footer-chip {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.62rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    white-space: nowrap;
}

.footer-chip svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    fill: currentColor;
    opacity: 0.78;
}

.footer-chip span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.footer-status {
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.footer-status span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 0.22rem rgba(242, 169, 95, 0.14);
}

.app-footer-powered {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

/* Prevent page content from being hidden under the fixed footer */
.app-shell {
    padding-bottom: calc(var(--app-footer-height) + 2rem);
}

.compact-list .timeline-item {
    padding: 0.85rem 1rem;
}

@media (max-width: 991px) {
    :root {
        --app-footer-height: 132px;
    }

    .app-navbar {
        min-height: auto;
    }

    .app-navbar-inner {
        align-items: flex-start;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .brand-block {
        align-items: flex-start;
        gap: 0.65rem;
        white-space: normal;
    }

    .app-navbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .app-profile-menu {
        flex: 1 1 auto;
    }

    .app-menu-toggle {
        flex: 0 0 auto;
    }

    .workspace-role-pill {
        margin-top: 0.2rem;
    }

    .app-navbar .navbar-collapse {
        width: 100%;
        padding-top: 0.75rem;
    }

    .app-nav-links {
        align-items: stretch !important;
        gap: 0.45rem;
    }

    .app-nav-links .nav-item,
    .app-navbar .nav-link,
    .client-id-badge,
    .app-profile-menu,
    .top-user-card,
    .account-control,
    .profile-menu-button {
        width: 100%;
    }

    .top-user-card {
        min-width: 0;
        max-width: none;
    }

    .account-control {
        justify-content: space-between;
    }

    .profile-menu-button {
        justify-content: center;
    }

    .marketing-nav-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .marketing-links {
        width: 100%;
        flex-wrap: wrap;
    }

    .saas-hero,
    .review-band,
    .comparison-section,
    .cta-strip,
    .workflow-section,
    .security-section,
    .faq-section,
    .contact-sales-layout {
        grid-template-columns: 1fr;
    }

    .saas-hero {
        min-height: auto;
        padding-top: 3rem;
    }

    .saas-hero-copy h1,
    .pricing-hero h1 {
        font-size: 3.35rem;
    }

    .marketing-section h2 {
        font-size: 2.25rem;
    }

    .contact-sales-copy h1 {
        font-size: 3.15rem;
    }

    .login-copy h1 {
        font-size: 3.2rem;
    }

    .leave-widget-card h1 {
        font-size: 2.15rem;
    }

    .feature-grid,
    .pricing-grid,
    .compliance-grid,
    .insight-strip,
    .audience-grid,
    .implementation-grid,
    .marketing-footer-main {
        grid-template-columns: repeat(2, 1fr);
    }

    .login-panel {
        grid-template-columns: 1fr;
    }

    .sign-in-shell .login-page {
        padding-top: 2.5rem;
    }

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .payroll-visual {
        min-height: 500px;
    }

    .payroll-card {
        left: 0.75rem;
    }

    .compliance-card {
        right: 0.75rem;
    }

    .app-footer {
        height: var(--app-footer-height);
        align-items: stretch;
        padding: 0.65rem 0;
    }

    .app-footer-inner {
        align-items: center;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.65rem 1rem;
    }

    .app-footer-brand {
        min-width: 0;
    }

    .app-footer-center {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-items: start;
        order: 3;
    }

    .app-footer-end {
        min-width: 0;
        justify-content: flex-end;
    }

    .app-footer-links,
    .app-footer-meta {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .page-floating-actions {
        right: 1rem;
        bottom: calc(var(--app-footer-height, 132px) + 1.4rem);
    }

    .page-guide-fab {
        right: 1rem;
        bottom: calc(var(--app-footer-height, 132px) + 1.4rem);
    }

    .page-guide-fab:not([hidden]) + .page-floating-actions {
        bottom: calc(var(--app-footer-height, 132px) + 4.8rem);
    }

    .settings-overview-panel,
    .settings-hero-grid,
    .settings-form-group {
        grid-template-columns: 1fr;
    }

    .settings-overview-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .settings-form-group-head p {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .login-shell,
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .marketing-brand {
        font-size: 0.95rem;
    }

    .marketing-nav {
        padding: 0.65rem;
    }

    .marketing-nav-inner {
        border-radius: 14px;
        padding: 0.75rem;
    }

    .settings-overview-panel {
        padding: 1rem;
    }

    .settings-overview-copy {
        align-items: flex-start;
    }

    .settings-overview-copy h1 {
        font-size: 1.65rem;
    }

    .settings-overview-meta {
        grid-template-columns: 1fr;
    }

    .app-shell {
        padding-bottom: calc(var(--app-footer-height) + 8.5rem);
    }

    .page-floating-actions {
        right: 0.85rem;
        bottom: calc(var(--app-footer-height, 132px) + 1.25rem);
        max-width: min(12.5rem, calc(100vw - 1.7rem));
        gap: 0.42rem;
    }

    .page-floating-action {
        min-height: 2.35rem;
        padding: 0.52rem 0.62rem;
        font-size: 0.74rem;
    }

    .app-footer,
    .settings-shell .app-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        min-height: var(--app-footer-height);
        margin: 0;
        transform: none;
    }

    .app-footer-inner {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.9rem 0;
    }

    .app-footer-center {
        width: 100%;
        order: 0;
    }

    .app-footer-meta,
    .app-footer-links,
    .app-footer-end {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .app-footer-powered,
    .footer-status {
        white-space: normal;
    }

    .marketing-brand-copy small,
    .brand-copy small {
        display: none;
    }

    .saas-hero-copy h1,
    .pricing-hero h1 {
        font-size: 2.45rem;
        line-height: 1.05;
    }

    .marketing-section h2 {
        font-size: 1.85rem;
    }

    .contact-sales-copy h1 {
        font-size: 2.35rem;
        line-height: 1.05;
    }

    .login-copy h1 {
        font-size: 2.35rem;
    }

    .settings-compact-card h1,
    .leave-widget-card h1 {
        font-size: 1.8rem;
    }

    .marketing-links {
        gap: 0.7rem;
    }

    .marketing-links a:not(.btn) {
        font-size: 0.9rem;
    }

    .marketing-links .btn {
        flex: 1 1 auto;
    }

    .hero-actions,
    .marketing-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .btn,
    .cta-strip .btn {
        width: 100%;
    }

    .feature-grid,
    .pricing-grid,
    .visual-grid,
    .hero-stat-grid,
    .contact-visual-metrics,
    .compliance-grid,
    .insight-strip,
    .audience-grid,
    .implementation-grid,
    .faq-grid,
    .marketing-footer-main {
        grid-template-columns: 1fr;
    }

    .product-visual {
        min-height: auto;
        transform: none;
    }

    .payroll-visual {
        min-height: auto;
    }

    .payroll-visual-main {
        min-height: auto;
        padding: 0.8rem;
    }

    .visual-header-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .visual-floating-card {
        position: static;
        width: 100%;
        margin-top: 0.75rem;
    }

    .hero-stat-grid div {
        min-height: auto;
    }

    .review-band,
    .cta-strip,
    .security-section,
    .contact-sales-form {
        padding: 1.25rem;
    }

    .marketing-footer-bottom,
    .app-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-footer {
        height: auto;
        justify-content: flex-start;
        padding: 0.75rem 0;
    }

    .app-footer-inner {
        gap: 0.55rem;
    }

    .app-footer-meta {
        flex-wrap: wrap;
    }

    .app-footer-powered {
        white-space: normal;
    }

    .contact-sales-layout {
        min-height: auto;
        padding: 2.25rem 0;
    }

    .login-copy,
    .login-form-card,
    .hero-card,
    .surface-card,
    .metric-card {
        padding: 1.25rem;
        border-radius: 8px;
    }

    .credential-card div {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .demo-access-fab {
        right: 1rem;
        bottom: 1rem;
        min-height: 3rem;
        padding: 0.75rem 0.9rem;
    }

    .demo-access-list div {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .demo-access-list strong {
        text-align: left;
    }
    .metric-card.payroll-runs {
        width: 100%;
        min-width: 0;
        text-align: right;
    }
}

/* Settings page final alignment pass */
.settings-shell {
    padding-bottom: 0 !important;
}

.settings-shell .app-footer {
    position: static;
    height: auto;
    min-height: var(--app-footer-height);
    margin-top: 2rem;
}

.settings-workspace.container {
    width: min(1440px, calc(100% - 2rem));
    max-width: min(1440px, calc(100% - 2rem));
    padding-bottom: 2rem !important;
}

.settings-page .admin-control-hero,
.settings-page .tenant-stat-grid,
.settings-page .row.g-4 {
    width: 100%;
}

.settings-page .surface-card {
    overflow: visible;
}

.settings-section-heading,
.settings-card-head {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.settings-section-heading > div,
.settings-card-head > div {
    min-width: 0;
    text-align: left;
}

.settings-form-group {
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
}

.settings-branding-inline {
    grid-template-columns: minmax(250px, 0.28fr) minmax(0, 0.72fr);
}

.settings-page .row.g-4 > [class*="col-"] > .settings-compact-card:not(.settings-widget-card),
.settings-widget-card {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

.settings-horizontal-form {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    align-items: end;
}

.holiday-builder-form,
.holiday-builder-panel,
.holiday-toolbar,
.holiday-add-card,
.holiday-list-head,
.holiday-builder-row {
    width: 100%;
}

.holiday-add-card,
.holiday-list-head,
.holiday-builder-row {
    grid-template-columns: minmax(170px, 0.26fr) minmax(0, 1fr) minmax(140px, auto);
}

.settings-widget-card .settings-compact-form > .col-12:first-child {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (max-width: 1199px) {
    .settings-workspace.container {
        width: min(100%, calc(100% - 1.5rem));
        max-width: min(100%, calc(100% - 1.5rem));
    }

    .settings-form-group,
    .settings-branding-inline,
    .settings-page .row.g-4 > [class*="col-"] > .settings-compact-card:not(.settings-widget-card),
    .settings-widget-card,
    .settings-horizontal-form,
    .holiday-toolbar,
    .holiday-add-card,
    .holiday-list-head,
    .holiday-builder-row {
        grid-template-columns: 1fr;
    }
}

/* Settings page latest controls and alignment overrides */
.settings-form-group .settings-identity-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(150px, 0.62fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 1rem;
    align-items: start;
    margin-left: 0;
    margin-right: 0;
}

.settings-identity-grid > * {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.settings-identity-grid > .col-12 {
    grid-column: 1 / -1;
}

.settings-page .form-label {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.45rem;
    margin-bottom: 0.42rem;
    line-height: 1.25;
}

.settings-page .form-label .info-btn,
.holiday-modal .form-label .info-btn {
    margin-left: 0.15rem !important;
    align-self: center;
    transform: translateY(-1px);
}

.btn.info-btn,
.surface-card .info-btn,
.metric-card .info-btn,
.settings-page .info-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}

.holiday-modal {
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.22);
}

.holiday-modal .modal-body {
    padding: 1.2rem 1.25rem 0.65rem;
}

.holiday-modal .modal-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding: 1rem 1.25rem 1.2rem;
}

.holiday-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.holiday-readonly-cell {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 800;
}

.holiday-name-cell {
    font-weight: 900;
}

.icon-only-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 8px;
}

.icon-only-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}

.holiday-list-head,
.holiday-builder-row {
    grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr) minmax(96px, auto);
}

.settings-widget-card .settings-compact-form > .col-12:first-child {
    gap: 0.75rem;
}

.settings-widget-option {
    position: relative;
    min-height: 4.25rem;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: linear-gradient(180deg, #fff, rgba(248, 252, 250, 0.94));
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.settings-widget-option:has(.form-check-input:checked) {
    border-color: rgba(17, 120, 100, 0.32);
    background: linear-gradient(180deg, rgba(235, 249, 245, 0.96), #fff);
    box-shadow: 0 10px 26px rgba(17, 120, 100, 0.08);
}

.settings-widget-option .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.settings-widget-label {
    position: relative;
    display: flex;
    min-height: 4.25rem;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.8rem 6.6rem 0.8rem 1rem;
    cursor: pointer;
}

.settings-widget-label::before {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 2.8rem;
    height: 1.55rem;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.18);
    border: 1px solid rgba(100, 116, 139, 0.18);
    transform: translateY(-50%);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.settings-widget-label::after {
    content: "";
    position: absolute;
    right: 2.38rem;
    top: 50%;
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.24);
    transform: translateY(-50%);
    transition: right 0.18s ease;
}

.settings-widget-option .form-check-input:checked + .settings-widget-label::before {
    background: var(--brand);
    border-color: var(--brand);
}

.settings-widget-option .form-check-input:checked + .settings-widget-label::after {
    right: 1.16rem;
}

.settings-widget-label .info-btn {
    position: absolute;
    right: 4.45rem;
    top: 50%;
    margin-left: 0;
    transform: translateY(-50%);
}

.settings-widget-label span {
    min-width: 0;
}

@media (max-width: 1199px) {
    .settings-form-group .settings-identity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .settings-form-group .settings-identity-grid,
    .holiday-list-head,
    .holiday-builder-row {
        grid-template-columns: 1fr;
    }

    .holiday-row-actions {
        justify-content: flex-start;
    }

    .settings-widget-label {
        padding-right: 6rem;
    }
}

/* Admin employee and leave directory redesign */
.admin-directory-page {
    width: min(1440px, calc(100% - 2rem));
    max-width: min(1440px, calc(100% - 2rem));
    display: grid;
    gap: 1.1rem;
    padding-bottom: calc(var(--app-footer-height, 64px) + 2rem) !important;
}

.directory-hero .admin-control-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.directory-hero .btn {
    min-height: 2.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 8px;
    font-weight: 850;
}

.directory-hero .btn svg,
.directory-search-form svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: currentColor;
}

.directory-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.directory-stat-card {
    min-height: 7.5rem;
    display: grid;
    align-content: space-between;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid rgba(23, 33, 58, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--soft-shadow);
}

.directory-stat-card span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.directory-stat-card strong {
    color: var(--text);
    font-size: 1.75rem;
    font-weight: 950;
    line-height: 1;
}

.directory-stat-card small {
    color: var(--muted);
    font-weight: 750;
}

.directory-panel {
    padding: 1.15rem;
    border: 1px solid rgba(23, 33, 58, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--soft-shadow);
}

.directory-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.directory-panel-head h2 {
    margin: 0.1rem 0 0;
    font-family: "Manrope", sans-serif;
    font-size: 1.25rem;
    font-weight: 950;
}

.directory-search-form {
    min-width: min(440px, 100%);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.7rem;
    border: 1px solid rgba(23, 33, 58, 0.11);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.92);
}

.directory-search-form svg {
    color: var(--brand);
}

.directory-search-form .form-control {
    min-height: 2.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.directory-search-form .form-control:focus {
    box-shadow: none;
}

.directory-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.directory-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.directory-actions .btn {
    min-height: 2.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 8px;
    font-weight: 850;
    white-space: nowrap;
}

.directory-actions .btn svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: currentColor;
}

.directory-table-wrap {
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: #fff;
}

.directory-table thead th {
    padding: 0.9rem 1rem;
    background: rgba(23, 33, 58, 0.035);
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
    color: rgba(23, 33, 58, 0.66);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
}

.directory-table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(23, 33, 58, 0.06);
    font-weight: 750;
}

.directory-table tbody tr:hover {
    background: rgba(17, 120, 100, 0.035);
}

.directory-code {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.08);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 950;
}

.employee-mini-profile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 14rem;
}

.employee-avatar {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.25rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--secondary), var(--brand));
    color: #fff;
    font-weight: 950;
    text-transform: uppercase;
}

.employee-mini-profile div {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.employee-mini-profile strong,
.employee-mini-profile small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-mini-profile strong {
    color: var(--text);
    font-weight: 950;
}

.employee-mini-profile small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.directory-money {
    color: var(--brand-dark);
    font-weight: 950 !important;
}

.directory-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    min-width: 5.8rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.directory-status-active {
    background: rgba(17, 120, 100, 0.12);
    color: var(--brand-dark);
}

.directory-status-pending {
    background: rgba(242, 169, 95, 0.2);
    color: #7a4a12;
}

.directory-status-inactive {
    background: rgba(194, 65, 61, 0.1);
    color: #9b2f2b;
}

.directory-table .emp-actions {
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: 8rem;
}

.directory-table .emp-actions form {
    margin: 0;
}

.directory-table .form-check {
    min-height: auto;
    margin: 0;
    padding: 0;
}

.directory-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.95rem;
}

.directory-footer .rows-per-page-form {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.directory-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 2rem;
    text-align: center;
}

.directory-empty-state strong {
    color: var(--text);
    font-size: 1rem;
    font-weight: 950;
}

.directory-empty-state span {
    color: var(--muted);
    font-weight: 750;
}

.leave-type-pill,
.leave-period {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.leave-type-pill {
    min-height: 1.8rem;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    background: rgba(23, 33, 58, 0.055);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: capitalize;
}

.leave-period span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.leave-period strong {
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 950;
}

.leave-empty-action {
    min-width: auto;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(17, 120, 100, 0.08);
    color: var(--brand-dark);
    font-size: 0.76rem;
    font-weight: 900;
}

@media (max-width: 1199px) {
    .admin-directory-page {
        width: min(100%, calc(100% - 1.5rem));
        max-width: min(100%, calc(100% - 1.5rem));
    }

    .directory-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .directory-panel-head,
    .directory-footer,
    .directory-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .directory-search-form {
        min-width: 100%;
    }

    .directory-toolbar,
    .directory-actions {
        width: 100%;
        justify-content: stretch;
    }

    .directory-actions .btn {
        flex: 1 1 12rem;
        justify-content: center;
    }

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

/* Directory overflow and action-control fixes */
.employee-directory-page .directory-table-wrap,
.leave-approvals-page .directory-table-wrap {
    overflow-x: hidden !important;
}

.employee-directory-page .directory-table,
.leave-approvals-page .directory-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.employee-directory-page .directory-table th,
.employee-directory-page .directory-table td,
.leave-approvals-page .directory-table th,
.leave-approvals-page .directory-table td {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    overflow-wrap: anywhere;
}

.employee-directory-page .directory-table th:nth-child(1) { width: 8%; }
.employee-directory-page .directory-table th:nth-child(2) { width: 20%; }
.employee-directory-page .directory-table th:nth-child(3) { width: 13%; }
.employee-directory-page .directory-table th:nth-child(4) { width: 10%; }
.employee-directory-page .directory-table th:nth-child(5) { width: 8%; }
.employee-directory-page .directory-table th:nth-child(6) { width: 8%; }
.employee-directory-page .directory-table th:nth-child(7) { width: 10%; }
.employee-directory-page .directory-table th:nth-child(8) { width: 10%; }
.employee-directory-page .directory-table th:nth-child(9) { width: 13%; }

.leave-approvals-page .directory-table th:nth-child(1) { width: 30%; }
.leave-approvals-page .directory-table th:nth-child(2) { width: 20%; }
.leave-approvals-page .directory-table th:nth-child(3) { width: 24%; }
.leave-approvals-page .directory-table th:nth-child(4) { width: 14%; }
.leave-approvals-page .directory-table th:nth-child(5) { width: 12%; }

.employee-directory-page .employee-mini-profile,
.leave-approvals-page .employee-mini-profile {
    min-width: 0;
}

.employee-directory-page .directory-code,
.employee-directory-page .directory-money,
.employee-directory-page .directory-status,
.leave-approvals-page .directory-status {
    white-space: nowrap;
}

.directory-table .emp-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-width: 0;
}

.directory-table .emp-actions .icon-only-btn,
.directory-table .emp-actions form,
.directory-table .emp-actions .form-check,
.directory-table .emp-actions .emp-status-toggle {
    flex: 0 0 auto;
}

.directory-table .emp-actions .form-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
}

.directory-table .emp-actions .form-check-input.emp-status-toggle {
    margin: 0 !important;
    position: relative;
}

.leave-approvals-page .leave-period {
    flex-wrap: wrap;
}

@media (max-width: 1199px) {
    .employee-directory-page .directory-table th,
    .employee-directory-page .directory-table td,
    .leave-approvals-page .directory-table th,
    .leave-approvals-page .directory-table td {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
        font-size: 0.82rem;
    }

    .employee-directory-page .directory-status {
        min-width: 4.8rem;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
}

/* Payroll runs workspace */
.payroll-runs-page .payroll-hero {
    align-items: center;
}

.payroll-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
    max-width: 42rem;
}

.payroll-hero-actions .btn {
    min-height: 2.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 8px;
    font-weight: 850;
    white-space: nowrap;
}

.payroll-hero-actions .btn svg,
.payroll-search-control svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: currentColor;
}

.payroll-command-bar {
    align-items: center;
}

.payroll-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(130px, auto) minmax(130px, auto) auto;
    align-items: center;
    gap: 0.55rem;
    min-width: min(720px, 100%);
    padding: 0.35rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.payroll-search-control {
    min-height: 2.65rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.7rem;
    border: 1px solid rgba(23, 33, 58, 0.11);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.92);
}

.payroll-search-control svg {
    color: var(--brand);
}

.payroll-search-control .form-control {
    min-height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.payroll-filter-form .form-select,
.payroll-filter-form .btn {
    min-height: 2.65rem;
    border-radius: 8px;
    font-weight: 800;
}

.payroll-table-wrap {
    overflow-x: hidden;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: #fff;
}

.payroll-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.payroll-table thead th {
    padding: 0.9rem 0.7rem;
    background: rgba(23, 33, 58, 0.035);
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
    color: rgba(23, 33, 58, 0.66);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
}

.payroll-table tbody td {
    padding: 0.85rem 0.7rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(23, 33, 58, 0.06);
    font-weight: 750;
    overflow-wrap: anywhere;
}

.payroll-table th:nth-child(1) { width: 8%; }
.payroll-table th:nth-child(2) { width: 21%; }
.payroll-table th:nth-child(3) { width: 9%; }
.payroll-table th:nth-child(4) { width: 12%; }
.payroll-table th:nth-child(5) { width: 14%; }
.payroll-table th:nth-child(6) { width: 12%; }
.payroll-table th:nth-child(7) { width: 13%; }
.payroll-table th:nth-child(8) { width: 11%; }

.payroll-code,
.payroll-period,
.payroll-bank-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.08);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 950;
    white-space: nowrap;
}

.payroll-period {
    background: rgba(242, 169, 95, 0.16);
    color: #7a4a12;
}

.payroll-bank-chip {
    background: rgba(23, 33, 58, 0.055);
    color: var(--text);
}

.payroll-bank-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-money {
    color: var(--brand-dark);
    font-weight: 950 !important;
}

.payroll-money strong {
    display: block;
    color: var(--brand-dark);
    font-weight: 950;
}

.payroll-money small {
    display: block;
    margin-top: 0.12rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.payroll-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.payroll-row-actions .icon-only-btn {
    flex: 0 0 auto;
}

.payroll-runs-page .rows-per-page-form {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

@media (max-width: 1199px) {
    .payroll-runs-page .payroll-hero,
    .payroll-command-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .payroll-hero-actions,
    .payroll-filter-form {
        width: 100%;
        max-width: none;
    }

    .payroll-filter-form {
        grid-template-columns: minmax(240px, 1fr) repeat(3, auto);
    }

    .payroll-table th,
    .payroll-table td {
        font-size: 0.82rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (max-width: 767px) {
    .payroll-hero-actions,
    .payroll-filter-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .payroll-hero-actions .btn,
    .payroll-filter-form .btn {
        justify-content: center;
    }
}

/* Monitoring, data exchange, compliance, and account help */
.audit-table .audit-time,
.audit-table .audit-user,
.audit-table .audit-action,
.audit-table .audit-entity,
.compliance-missing-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.28rem 0.58rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 950;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.audit-table-wrap {
    overflow-x: hidden;
}

.audit-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.audit-table th,
.audit-table td {
    overflow-wrap: anywhere;
}

.audit-table th:nth-child(1) { width: 22%; }
.audit-table th:nth-child(2) { width: 18%; }
.audit-table th:nth-child(3) { width: 26%; }
.audit-table th:nth-child(4) { width: 20%; }
.audit-table th:nth-child(5) { width: 14%; }

.audit-table .audit-time {
    background: rgba(23, 33, 58, 0.055);
    color: var(--text);
}

.audit-table .audit-user,
.audit-table .audit-entity {
    background: rgba(17, 120, 100, 0.08);
    color: var(--brand-dark);
}

.audit-table .audit-action,
.compliance-missing-pill {
    background: rgba(242, 169, 95, 0.16);
    color: #7a4a12;
}

.audit-record {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .audit-table thead th,
    .audit-table tbody td {
        padding-left: 0.48rem;
        padding-right: 0.48rem;
        font-size: 0.78rem;
    }

    .audit-table .audit-time,
    .audit-table .audit-user,
    .audit-table .audit-action,
    .audit-table .audit-entity,
    .audit-record {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        font-size: 0.72rem;
    }
}

.exchange-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.exchange-card {
    position: relative;
    display: grid;
    gap: 0.45rem;
    min-height: 9rem;
    padding: 1rem 3.2rem 1rem 1rem;
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 245, 0.88));
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(23, 33, 58, 0.07);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.exchange-card:hover {
    border-color: rgba(17, 120, 100, 0.28);
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(23, 33, 58, 0.1);
}

.exchange-card span,
.compliance-alert-card span {
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.exchange-card strong,
.compliance-alert-card strong {
    font-size: 1rem;
    font-weight: 950;
}

.exchange-card small {
    color: var(--muted);
    font-weight: 750;
}

.exchange-download-icon {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    padding: 0.45rem;
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.1);
    color: var(--brand);
    fill: currentColor;
    box-shadow: inset 0 0 0 1px rgba(17, 120, 100, 0.12);
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.exchange-card:hover .exchange-download-icon,
.exchange-card:focus-visible .exchange-download-icon {
    background: var(--brand);
    color: #fff;
    transform: translateY(-1px);
}

.compliance-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
    gap: 1rem;
}

.compliance-alert-list {
    display: grid;
    gap: 0.7rem;
}

.compliance-alert-card {
    display: grid;
    gap: 0.28rem;
    padding: 0.85rem;
    border: 1px solid rgba(242, 169, 95, 0.28);
    border-radius: 8px;
    background: rgba(242, 169, 95, 0.08);
}

.compliance-table .employee-mini-profile {
    min-width: 0;
}

.compliance-list-wrap {
    overflow-x: hidden;
}

.compliance-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.compliance-table th,
.compliance-table td {
    overflow-wrap: anywhere;
}

.compliance-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.28rem 0.58rem;
    border-radius: 8px;
    background: rgba(17, 120, 100, 0.08);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 950;
}

.compliance-alert-text {
    color: var(--text);
    font-weight: 900;
}

.compliance-table th:nth-child(1) { width: 32%; }
.compliance-table th:nth-child(2) { width: 44%; }
.compliance-table th:nth-child(3) { width: 24%; }

.compliance-workspace-page article:nth-child(2) .compliance-table th:nth-child(1) { width: 16%; }
.compliance-workspace-page article:nth-child(2) .compliance-table th:nth-child(2) { width: 28%; }
.compliance-workspace-page article:nth-child(2) .compliance-table th:nth-child(3) { width: 36%; }
.compliance-workspace-page article:nth-child(2) .compliance-table th:nth-child(4) { width: 20%; }

.compliance-workspace-page .compliance-grid {
    grid-template-columns: 1fr;
}

.compliance-workspace-page .compliance-alert-list {
    grid-template-columns: 1fr;
}

.compliance-workspace-page .compliance-alert-card {
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
    align-items: center;
}

.profile-modal-body,
.guide-modal-body {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    background:
        linear-gradient(180deg, rgba(248, 250, 245, 0.74), #fff);
}

.profile-summary-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(17, 120, 100, 0.09), rgba(242, 169, 95, 0.08));
}

.profile-initials {
    width: 2.8rem;
    height: 2.8rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: linear-gradient(135deg, #87506f, var(--brand));
    color: #fff;
    font-weight: 950;
}

.profile-summary-card strong,
.user-modal-section-title strong {
    display: block;
    color: var(--text);
    font-weight: 950;
}

.profile-summary-card small,
.user-modal-section-title small {
    display: block;
    color: var(--muted);
    font-weight: 750;
}

.profile-validation-message {
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(184, 46, 46, 0.18);
    border-radius: 8px;
    background: rgba(184, 46, 46, 0.08);
    color: #9f1d1d;
    font-size: 0.82rem;
    font-weight: 850;
}

.guide-modal .modal-dialog {
    max-width: 1100px;
}

.guide-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.guide-quick-card,
.guide-content section {
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 30px rgba(23, 33, 58, 0.055);
}

.guide-quick-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
}

.guide-quick-card span {
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guide-quick-card strong {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.35;
}

.guide-content {
    display: grid;
    gap: 0.85rem;
}

.guide-content section {
    margin-bottom: 0 !important;
    padding: 1rem;
}

.guide-content h6 {
    margin: 0 0 0.55rem;
    color: var(--text);
    font-size: 1rem;
    font-weight: 950;
}

.guide-content p {
    margin-bottom: 0.55rem;
    color: rgba(23, 33, 58, 0.74);
    font-weight: 700;
    line-height: 1.55;
}

.guide-content p:last-child {
    margin-bottom: 0;
}

.guide-content strong {
    color: var(--text);
    font-weight: 950;
}

.page-guide-content {
    gap: 0.85rem;
}

.page-guide-summary {
    border-color: rgba(17, 120, 100, 0.18) !important;
    background:
        linear-gradient(135deg, rgba(17, 120, 100, 0.08), rgba(242, 169, 95, 0.08)),
        #fff !important;
}

.page-guide-workflow ol {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding-left: 1.25rem;
    color: rgba(23, 33, 58, 0.78);
    font-weight: 800;
    line-height: 1.5;
}

.page-guide-workflow li::marker {
    color: var(--brand);
    font-weight: 950;
}

@media (max-width: 991px) {
    .exchange-grid,
    .compliance-grid,
    .guide-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .exchange-grid,
    .compliance-grid,
    .guide-quick-grid,
    .profile-modal .modal-form-grid {
        grid-template-columns: 1fr;
    }

    .compliance-workspace-page .compliance-alert-card {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* Cross-role workspace redesign */
.employee-shell,
.manager-shell,
.hr-shell,
.payroll-shell {
    background:
        linear-gradient(135deg, rgba(17, 120, 100, 0.065) 0 25%, transparent 25% 50%, rgba(242, 169, 95, 0.07) 50% 75%, transparent 75%),
        linear-gradient(180deg, #f8faf5 0%, #ffffff 42%, #eef3ed 100%);
    background-size: 42px 42px, auto;
}

.manager-shell {
    background:
        linear-gradient(135deg, rgba(23, 33, 58, 0.055) 0 25%, transparent 25% 50%, rgba(17, 120, 100, 0.07) 50% 75%, transparent 75%),
        linear-gradient(180deg, #f8faf5 0%, #ffffff 44%, #edf3f0 100%);
    background-size: 42px 42px, auto;
}

.hr-shell {
    background:
        linear-gradient(135deg, rgba(143, 74, 111, 0.055) 0 25%, transparent 25% 50%, rgba(17, 120, 100, 0.065) 50% 75%, transparent 75%),
        linear-gradient(180deg, #fafaf6 0%, #ffffff 42%, #f0f3ed 100%);
    background-size: 42px 42px, auto;
}

.payroll-shell {
    background:
        linear-gradient(135deg, rgba(242, 169, 95, 0.07) 0 25%, transparent 25% 50%, rgba(23, 33, 58, 0.055) 50% 75%, transparent 75%),
        linear-gradient(180deg, #f8faf5 0%, #ffffff 42%, #eef2ee 100%);
    background-size: 42px 42px, auto;
}

.role-workspace-page {
    width: min(100%, 1240px);
    display: grid;
    gap: 1rem;
    padding-top: 1.35rem !important;
    padding-bottom: calc(var(--app-footer-height, 64px) + 2.25rem) !important;
}

.role-workspace-page > .row,
.role-workspace-page > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.role-workspace-page > .row:first-child .metric-card {
    min-height: 8.2rem;
}

.role-workspace-page .hero-card,
.role-workspace-page .surface-card,
.role-workspace-page .metric-card {
    border: 1px solid rgba(23, 33, 58, 0.085);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 245, 0.9));
    box-shadow: 0 18px 44px rgba(23, 33, 58, 0.08);
    backdrop-filter: blur(16px);
}

.role-workspace-page .hero-card {
    min-height: 11rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.35rem 1.45rem;
    overflow: hidden;
}

.role-workspace-page .hero-card::after {
    display: none;
}

.role-workspace-page .hero-card h1,
.role-workspace-page .surface-card .section-heading h1,
.role-workspace-page .surface-card .section-heading h2 {
    margin: 0;
    color: var(--text);
    letter-spacing: 0;
}

.role-workspace-page .hero-card h1,
.role-workspace-page .surface-card .section-heading h1 {
    font-size: clamp(1.65rem, 2.4vw, 2.45rem);
    line-height: 1.08;
    font-weight: 950;
}

.role-workspace-page .surface-card .section-heading h2 {
    font-size: 1.16rem;
    font-weight: 950;
}

.role-workspace-page .hero-card p,
.role-workspace-page .section-heading + p,
.role-workspace-page .small.text-muted,
.role-workspace-page .text-muted {
    color: var(--muted) !important;
    font-weight: 720;
}

.role-workspace-page .metric-card {
    position: relative;
    min-height: 8.6rem;
    padding: 1rem;
    overflow: hidden;
    border-top: 0;
}

.role-workspace-page .metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: linear-gradient(180deg, var(--brand), var(--accent));
}

.role-workspace-page .metric-card span {
    color: rgba(23, 33, 58, 0.68);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.role-workspace-page .metric-card strong {
    color: var(--text);
    font-size: clamp(1.55rem, 2.2vw, 2.2rem);
    font-weight: 950;
}

.role-workspace-page .surface-card {
    padding: 1.1rem;
}

.role-workspace-page .section-heading {
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(23, 33, 58, 0.075);
    margin-bottom: 0.95rem;
}

.role-workspace-page .section-heading .btn,
.role-workspace-page .d-flex.flex-wrap.gap-2 .btn,
.role-workspace-page .surface-card > .d-flex .btn {
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    border-radius: 8px;
    font-weight: 850;
    white-space: nowrap;
}

.role-workspace-page .btn-primary,
.role-workspace-page .btn-dark {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 10px 22px rgba(17, 120, 100, 0.18);
}

.role-workspace-page .btn-primary:hover,
.role-workspace-page .btn-primary:focus,
.role-workspace-page .btn-dark:hover,
.role-workspace-page .btn-dark:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.role-workspace-page .btn-outline-dark,
.role-workspace-page .btn-outline-brand {
    color: var(--brand-dark);
    border-color: rgba(17, 120, 100, 0.24);
    background: rgba(255, 255, 255, 0.72);
}

.role-workspace-page .btn-outline-dark:hover,
.role-workspace-page .btn-outline-brand:hover,
.role-workspace-page .btn-outline-dark:focus,
.role-workspace-page .btn-outline-brand:focus {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

.role-workspace-page form.row,
.role-workspace-page form.d-grid,
.role-workspace-page .surface-card > form {
    padding: 0.85rem;
    border: 1px solid rgba(23, 33, 58, 0.07);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.58);
}

.role-workspace-page .form-label {
    color: rgba(23, 33, 58, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
}

.role-workspace-page .form-control,
.role-workspace-page .form-select {
    min-height: 2.65rem;
    border-radius: 8px;
    border-color: rgba(23, 33, 58, 0.1);
    background-color: rgba(255, 255, 255, 0.94);
    font-weight: 740;
}

.role-workspace-page textarea.form-control {
    min-height: 8rem;
}

.role-workspace-page .table-responsive {
    border: 1px solid rgba(23, 33, 58, 0.075);
    border-radius: 8px;
    background: #fff;
    overflow-x: auto;
}

.role-workspace-page .app-table {
    margin-bottom: 0;
}

.role-workspace-page .app-table thead th {
    padding: 0.86rem 0.82rem;
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
    background: rgba(23, 33, 58, 0.035);
    color: rgba(23, 33, 58, 0.62);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.role-workspace-page .app-table tbody td {
    padding: 0.82rem;
    border-bottom: 1px solid rgba(23, 33, 58, 0.055);
    color: var(--text);
    font-weight: 740;
    vertical-align: middle;
}

.role-workspace-page .app-table tbody tr:last-child td {
    border-bottom: 0;
}

.role-workspace-page .badge {
    min-height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.32rem 0.55rem;
    border-radius: 8px;
    font-weight: 900;
    letter-spacing: 0;
}

.role-workspace-page .badge.text-bg-secondary {
    background: rgba(23, 33, 58, 0.09) !important;
    color: var(--text) !important;
}

.role-workspace-page .badge.text-bg-success,
.role-workspace-page .btn-success {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

.role-workspace-page .border.rounded-2.bg-white,
.role-workspace-page .border.rounded-2.p-2.bg-white,
.role-workspace-page .d-flex.justify-content-between.border-bottom {
    border-color: rgba(23, 33, 58, 0.075) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.86) !important;
}

.role-workspace-page .d-flex.justify-content-between.border-bottom {
    align-items: center;
    padding: 0.72rem 0.82rem !important;
    margin-bottom: 0.45rem;
    border: 1px solid rgba(23, 33, 58, 0.075) !important;
}

.role-workspace-page object[type="application/pdf"] {
    min-height: 70vh;
    border: 1px solid rgba(23, 33, 58, 0.1);
    border-radius: 8px;
    background: #fff;
}

.employee-workspace-page .metric-card::before {
    background: linear-gradient(180deg, var(--brand), #8f4a6f);
}

.manager-workspace-page .metric-card::before {
    background: linear-gradient(180deg, #17213a, var(--brand));
}

.hr-workspace-page .metric-card::before {
    background: linear-gradient(180deg, #8f4a6f, var(--brand));
}

.payroll-workspace-page .metric-card::before {
    background: linear-gradient(180deg, var(--accent), var(--brand));
}

.payroll-redesign-page {
    gap: 1rem;
    padding-bottom: calc(var(--app-footer-height, 64px) + 4rem) !important;
}

.payroll-hero {
    min-height: 9.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 1.45rem;
    border: 1px solid rgba(23, 33, 58, 0.085);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 239, 0.9));
    box-shadow: 0 18px 44px rgba(23, 33, 58, 0.08);
}

.payroll-hero h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.7rem, 2.6vw, 2.55rem);
    line-height: 1.08;
    font-weight: 950;
}

.payroll-hero p:not(.eyebrow) {
    max-width: 46rem;
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-weight: 720;
}

.payroll-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.payroll-panel,
.payroll-summary-grid article,
.payroll-status-grid article {
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(23, 33, 58, 0.07);
}

.payroll-panel {
    min-width: 0;
    padding: 1rem;
}

.payroll-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.payroll-panel-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 950;
}

.payroll-soft-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.36rem 0.62rem;
    border-radius: 999px;
    background: rgba(242, 169, 95, 0.14);
    color: #80521e;
    font-size: 0.76rem;
    font-weight: 900;
}

.payroll-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.payroll-summary-grid article,
.payroll-status-grid article {
    position: relative;
    display: grid;
    gap: 0.35rem;
    min-height: 6.5rem;
    padding: 1rem;
    overflow: hidden;
}

.payroll-summary-grid article::before,
.payroll-status-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.26rem;
    background: linear-gradient(180deg, var(--accent), var(--brand));
}

.payroll-summary-grid span,
.payroll-status-grid span {
    color: rgba(23, 33, 58, 0.65);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.payroll-summary-grid strong,
.payroll-status-grid strong {
    color: var(--text);
    font-size: clamp(1.35rem, 2vw, 1.95rem);
    font-weight: 950;
}

.payroll-summary-grid small {
    color: var(--muted);
    font-weight: 760;
}

.payroll-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.payroll-split-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    gap: 1rem;
    align-items: start;
}

.payroll-form-grid,
.payroll-filter-bar {
    display: grid;
    gap: 0.85rem;
}

.payroll-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payroll-form-wide {
    grid-column: 1 / -1;
}

.payroll-form-grid label,
.payroll-filter-bar label {
    display: grid;
    gap: 0.35rem;
}

.payroll-form-grid label span,
.payroll-filter-bar label span {
    color: rgba(23, 33, 58, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
}

.payroll-form-grid label small {
    color: var(--muted);
    font-weight: 720;
}

.payroll-filter-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
}

.payroll-filter-bar .btn {
    min-height: 2.65rem;
}

.payroll-bulk-actions {
    display: grid;
    grid-template-columns: minmax(10rem, 0.8fr) minmax(12rem, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.payroll-table-wrap {
    overflow-x: hidden;
    border: 1px solid rgba(23, 33, 58, 0.075);
    border-radius: 8px;
    background: #fff;
}

.payroll-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
}

.payroll-table td,
.payroll-table th {
    white-space: normal;
    overflow-wrap: anywhere;
}

.payroll-table td strong,
.payroll-table td small,
.payroll-table td em {
    display: block;
}

.payroll-table td small,
.payroll-table td em {
    color: var(--muted);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 720;
}

.payroll-document-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.payroll-document-actions a,
.payroll-download-grid a,
.payroll-download-grid button {
    text-decoration: none;
}

.payroll-document-actions a {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.55rem;
    border: 1px solid rgba(17, 120, 100, 0.18);
    border-radius: 8px;
    color: var(--brand-dark);
    font-size: 0.74rem;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.85);
}

.payroll-download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.8rem;
}

.payroll-download-grid a,
.payroll-download-grid button {
    min-height: 7rem;
    display: grid;
    gap: 0.28rem;
    align-content: start;
    padding: 0.9rem;
    border: 1px solid rgba(23, 33, 58, 0.08);
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, rgba(248, 250, 245, 0.78));
    color: var(--text);
    text-align: left;
    box-shadow: 0 10px 24px rgba(23, 33, 58, 0.06);
}

.payroll-download-grid a span,
.payroll-download-grid button span {
    color: var(--brand-dark);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.payroll-download-grid a strong,
.payroll-download-grid button strong {
    color: var(--text);
    font-weight: 950;
}

.payroll-download-grid a small,
.payroll-download-grid button small {
    color: var(--muted);
    font-weight: 720;
    line-height: 1.35;
}

.payroll-issue-pill {
    display: inline-flex;
    max-width: 100%;
    padding: 0.34rem 0.55rem;
    border-radius: 999px;
    background: rgba(199, 56, 56, 0.09);
    color: #9b2c2c;
    font-size: 0.78rem;
    font-weight: 900;
}

.payroll-step-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.payroll-step-list span {
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(23, 33, 58, 0.075);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.72);
    color: var(--text);
    font-weight: 850;
}

.payroll-home-action-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.payroll-home-action-grid a {
    min-height: 8rem;
    display: grid;
    gap: 0.3rem;
    align-content: start;
    padding: 0.95rem;
    border: 1px solid rgba(23, 33, 58, 0.085);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 239, 0.82));
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(23, 33, 58, 0.07);
}

.payroll-home-action-grid a:hover,
.payroll-home-action-grid a:focus {
    border-color: rgba(17, 120, 100, 0.22);
    box-shadow: 0 18px 36px rgba(23, 33, 58, 0.1);
}

.payroll-home-action-grid span {
    color: var(--brand-dark);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.payroll-home-action-grid strong {
    color: var(--text);
    font-weight: 950;
    line-height: 1.2;
}

.payroll-home-action-grid small {
    color: var(--muted);
    font-weight: 720;
    line-height: 1.35;
}

.payroll-home-status-grid {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.payroll-variance-pill {
    display: inline-flex;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.34rem 0.55rem;
    border-radius: 999px;
    background: rgba(242, 169, 95, 0.15);
    color: #80521e;
    font-weight: 950;
}

.manager-redesign-page {
    gap: 1rem;
    padding-bottom: calc(var(--app-footer-height, 64px) + 4rem) !important;
}

.manager-hero {
    min-height: 9.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 1.45rem;
    border: 1px solid rgba(23, 33, 58, 0.085);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 246, 0.9));
    box-shadow: 0 18px 44px rgba(23, 33, 58, 0.08);
}

.manager-hero h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.7rem, 2.6vw, 2.55rem);
    line-height: 1.08;
    font-weight: 950;
}

.manager-hero p:not(.eyebrow) {
    max-width: 46rem;
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-weight: 720;
}

.manager-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.manager-panel,
.manager-summary-grid article {
    border: 1px solid rgba(23, 33, 58, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(23, 33, 58, 0.07);
}

.manager-panel {
    min-width: 0;
    padding: 1rem;
}

.manager-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.manager-panel-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 950;
}

.manager-soft-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.36rem 0.62rem;
    border-radius: 999px;
    background: rgba(17, 120, 100, 0.1);
    color: var(--brand-dark);
    font-size: 0.76rem;
    font-weight: 900;
}

.manager-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.manager-summary-grid article {
    position: relative;
    display: grid;
    gap: 0.35rem;
    min-height: 6.5rem;
    padding: 1rem;
    overflow: hidden;
}

.manager-summary-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.26rem;
    background: linear-gradient(180deg, #17213a, var(--brand));
}

.manager-summary-grid span {
    color: rgba(23, 33, 58, 0.65);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.manager-summary-grid strong {
    color: var(--text);
    font-size: clamp(1.35rem, 2vw, 1.95rem);
    font-weight: 950;
}

.manager-summary-grid small {
    color: var(--muted);
    font-weight: 760;
}

.manager-split-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    gap: 1rem;
    align-items: start;
}

.manager-form-grid,
.manager-filter-bar {
    display: grid;
    gap: 0.85rem;
}

.manager-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manager-form-wide {
    grid-column: 1 / -1;
}

.manager-form-grid label,
.manager-filter-bar label {
    display: grid;
    gap: 0.35rem;
}

.manager-form-grid label span,
.manager-filter-bar label span {
    color: rgba(23, 33, 58, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
}

.manager-filter-bar {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr) auto auto;
    align-items: end;
}

.manager-filter-bar .btn {
    min-height: 2.65rem;
}

.manager-visibility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    padding: 0.85rem;
    border: 1px solid rgba(23, 33, 58, 0.075);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.72);
}

.manager-visibility-row strong,
.manager-visibility-row small {
    display: block;
}

.manager-visibility-row small {
    color: var(--muted);
    font-weight: 720;
}

.manager-switch {
    position: relative;
    display: inline-flex;
    width: 3rem;
    height: 1.65rem;
    flex: 0 0 auto;
}

.manager-switch input {
    opacity: 0;
}

.manager-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(23, 33, 58, 0.16);
    cursor: pointer;
}

.manager-switch span::after {
    content: "";
    position: absolute;
    top: 0.22rem;
    left: 0.22rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(23, 33, 58, 0.18);
    transition: transform 0.18s ease;
}

.manager-switch input:checked + span {
    background: var(--brand);
}

.manager-switch input:checked + span::after {
    transform: translateX(1.34rem);
}

.manager-switch input:disabled + span {
    cursor: not-allowed;
    opacity: 0.58;
}

.manager-table-wrap {
    overflow-x: hidden;
    border: 1px solid rgba(23, 33, 58, 0.075);
    border-radius: 8px;
    background: #fff;
}

.manager-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
}

.manager-table td,
.manager-table th {
    white-space: normal;
    overflow-wrap: anywhere;
}

.manager-table td strong,
.manager-table td small {
    display: block;
}

.manager-table td small {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 720;
}

.manager-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.manager-row-actions form {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.manager-calendar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.manager-calendar-grid article {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem;
    border: 1px solid rgba(23, 33, 58, 0.075);
    border-radius: 8px;
    background: rgba(248, 250, 245, 0.72);
}

.manager-calendar-grid strong {
    color: var(--text);
    font-weight: 950;
}

.manager-calendar-grid span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 720;
}

.manager-warning-pill,
.manager-rating-pill {
    display: inline-flex;
    min-width: 2.4rem;
    justify-content: center;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    font-weight: 950;
}

.manager-warning-pill {
    background: rgba(242, 169, 95, 0.15);
    color: #80521e;
}

.manager-rating-pill {
    background: rgba(17, 120, 100, 0.1);
    color: var(--brand-dark);
}

.employee-shell .modal-content,
.manager-shell .modal-content,
.hr-shell .modal-content,
.payroll-shell .modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(23, 33, 58, 0.24);
}

.employee-shell .modal-header,
.manager-shell .modal-header,
.hr-shell .modal-header,
.payroll-shell .modal-header {
    border-bottom: 1px solid rgba(23, 33, 58, 0.08);
    background:
        linear-gradient(135deg, rgba(23, 33, 58, 0.98), rgba(17, 120, 100, 0.92));
    color: #fff;
}

.employee-shell .modal-header .btn-close,
.manager-shell .modal-header .btn-close,
.hr-shell .modal-header .btn-close,
.payroll-shell .modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.88;
}

.employee-shell .modal-body,
.manager-shell .modal-body,
.hr-shell .modal-body,
.payroll-shell .modal-body {
    background: linear-gradient(180deg, rgba(248, 250, 245, 0.7), #fff);
}

.employee-shell .modal-footer,
.manager-shell .modal-footer,
.hr-shell .modal-footer,
.payroll-shell .modal-footer {
    border-top: 1px solid rgba(23, 33, 58, 0.08);
    background: #fff;
}

@media (max-width: 991px) {
    .role-workspace-page {
        width: min(100%, 960px);
    }

    .role-workspace-page .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-form-grid,
    .employee-form-grid-compact,
    .employee-salary-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hr-chart-grid,
    .hr-two-column,
    .hr-letter-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hr-letter-generate-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hr-letter-generate-action {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .hr-lifecycle-types,
    .hr-milestone-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payroll-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .payroll-hero-actions {
        justify-content: flex-start;
    }

    .payroll-summary-grid,
    .payroll-split-grid,
    .payroll-home-action-grid,
    .payroll-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manager-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .manager-hero-actions {
        justify-content: flex-start;
    }

    .manager-summary-grid,
    .manager-split-grid,
    .manager-filter-bar,
    .manager-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payroll-bulk-actions {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .role-workspace-page {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .role-workspace-page .hero-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .role-workspace-page .surface-card {
        padding: 0.85rem;
    }

    .role-workspace-page .table-responsive {
        overflow-x: auto;
    }

    .employee-modal-body {
        max-height: 78vh;
        padding: 0.85rem;
    }

    .employee-form-section {
        padding: 0.85rem;
    }

    .employee-form-section-title,
    .employee-form-grid,
    .employee-form-grid-compact,
    .employee-salary-preview-grid,
    .employee-toggle-grid {
        grid-template-columns: 1fr;
    }

    .employee-salary-preview-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-salary-preview-head small {
        text-align: left;
    }

    .hr-chart-grid,
    .hr-two-column,
    .hr-letter-layout,
    .hr-letter-generate-form,
    .hr-template-modal-grid,
    .hr-lifecycle-types,
    .hr-milestone-grid,
    .hr-form-grid {
        grid-template-columns: 1fr;
    }

    .hr-activity-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .hr-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .hr-vault-search {
        width: 100%;
    }

    .payroll-summary-grid,
    .payroll-status-grid,
    .payroll-split-grid,
    .payroll-home-action-grid,
    .payroll-form-grid,
    .payroll-filter-bar {
        grid-template-columns: 1fr;
    }

    .manager-summary-grid,
    .manager-split-grid,
    .manager-form-grid,
    .manager-filter-bar,
    .manager-calendar-grid {
        grid-template-columns: 1fr;
    }

    .manager-panel-head,
    .manager-visibility-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .manager-table-wrap {
        overflow-x: auto;
    }

    .manager-table {
        min-width: 46rem;
    }

    .manager-row-actions {
        justify-content: flex-start;
    }

    .payroll-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .payroll-table-wrap {
        overflow-x: auto;
    }

    .payroll-table {
        min-width: 46rem;
    }

    .payroll-document-actions {
        justify-content: flex-start;
    }
}

/* Public marketing page alignment pass */
.marketing-shell {
    background:
        linear-gradient(90deg, rgba(23, 33, 58, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, #fbfcf8 0%, #f4f8f2 42%, #eef4ee 100%);
    background-size: 64px 64px, auto;
}

.marketing-nav {
    padding: 0.8rem 1rem 1.1rem;
}

.marketing-nav-inner,
.saas-hero,
.pricing-hero,
.marketing-section,
.pricing-grid,
.contact-sales-layout,
.marketing-footer {
    width: min(1120px, calc(100% - 2rem));
}

.marketing-nav-inner {
    min-height: 3.7rem;
    border-radius: 14px;
}

.marketing-links {
    gap: 0.45rem;
}

.marketing-links a:not(.btn) {
    min-height: 2.25rem;
    padding-inline: 0.65rem;
}

.saas-hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
    gap: clamp(2rem, 5vw, 3rem);
    align-items: center;
    padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 4rem);
}

.saas-hero-copy h1,
.pricing-hero h1,
.contact-sales-copy h1 {
    max-width: 760px;
    font-size: clamp(2.75rem, 5.8vw, 4.25rem);
    line-height: 0.98;
}

.pricing-hero h1 {
    margin-left: auto;
    margin-right: auto;
}

.saas-hero-copy p,
.pricing-hero p,
.contact-sales-copy p {
    max-width: 690px;
}

.pricing-hero p {
    max-width: 760px;
}

.payroll-visual,
.payroll-visual-main {
    min-height: auto;
}

.payroll-visual-main {
    padding: 1rem;
}

.visual-floating-card {
    max-width: 250px;
}

.marketing-section {
    padding: clamp(2.75rem, 5.5vw, 4.25rem) 0;
}

.marketing-section h2 {
    font-size: clamp(2rem, 4vw, 2.65rem);
    line-height: 1.08;
}

.feature-grid,
.audience-grid,
.implementation-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-grid article,
.audience-grid article,
.implementation-grid article,
.faq-grid article,
.pricing-card,
.review-list div,
.comparison-table-wrap,
.workflow-steps article,
.compliance-grid div,
.contact-benefits div,
.contact-sales-form,
.contact-visual-panel {
    box-shadow: 0 12px 30px rgba(23, 33, 58, 0.075);
}

.feature-grid article,
.audience-grid article {
    min-height: 15.5rem;
}

.feature-grid article p,
.audience-grid article p,
.implementation-grid article p,
.faq-grid article p,
.pricing-card li {
    font-size: 0.93rem;
    line-height: 1.55;
}

.workflow-section,
.security-section,
.faq-section,
.comparison-section {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(1.5rem, 4vw, 2.4rem);
    align-items: start;
}

.security-section,
.review-band,
.cta-strip {
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.pricing-hero {
    padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
}

.pricing-grid {
    max-width: 1040px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.pricing-card {
    min-height: auto;
    padding: 1.45rem;
}

.pricing-card h2 {
    font-size: clamp(2.15rem, 4vw, 2.85rem);
}

.pricing-card ul {
    margin-top: 1rem;
    gap: 0.45rem;
}

.comparison-section {
    align-items: center;
}

.comparison-table {
    margin-bottom: 0;
}

.contact-sales-layout {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.95fr);
    gap: clamp(2rem, 5vw, 3rem);
    align-items: start;
    padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(4rem, 7vw, 5rem);
}

.contact-sales-form {
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.contact-visual-panel {
    max-width: 620px;
}

.contact-benefits div {
    align-items: center;
}

.contact-sales-form .form-control,
.contact-sales-form .form-select {
    min-height: 3.1rem;
    border-color: rgba(23, 33, 58, 0.14);
}

.marketing-footer {
    margin-top: 1.5rem;
}

@media (max-width: 1120px) {
    .feature-grid,
    .audience-grid,
    .implementation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-grid article,
    .audience-grid article {
        min-height: auto;
    }
}

@media (max-width: 992px) {
    .marketing-nav-inner,
    .saas-hero,
    .workflow-section,
    .security-section,
    .faq-section,
    .comparison-section,
    .contact-sales-layout {
        grid-template-columns: 1fr;
    }

    .saas-hero,
    .contact-sales-layout {
        padding-top: 2.75rem;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 680px;
    }

    .contact-sales-form {
        max-width: 680px;
    }
}

@media (max-width: 640px) {
    .marketing-nav-inner,
    .marketing-footer,
    .saas-hero,
    .pricing-hero,
    .marketing-section,
    .pricing-grid,
    .contact-sales-layout {
        width: min(100% - 1rem, 1120px);
    }

    .feature-grid,
    .audience-grid,
    .implementation-grid,
    .compliance-grid,
    .insight-strip,
    .faq-grid,
    .contact-visual-metrics,
    .marketing-footer-main {
        grid-template-columns: 1fr;
    }

    .saas-hero-copy h1,
    .pricing-hero h1,
    .contact-sales-copy h1 {
        font-size: clamp(2.2rem, 12vw, 2.8rem);
    }

    .visual-floating-card {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: 0.75rem;
    }
}