/* App-specific overrides on top of Corporate UI Dashboard. */

/* Sidebar: slate/blue gradient on top of Corporate UI dark sidenav (bg-slate-900). */
#sidenav-main.bg-slate-900.sidenav-gradient {
    background-color: #0f172a !important;
    background-image: linear-gradient(135deg, #1e293b 0%, #0f172a 55%, #172554 100%) !important;
}

/* Login / public pages: hide the sidebar offset since no sidenav is rendered. */
body.no-sidenav .main-content {
    margin-left: 0 !important;
}

/* Soft cream → gold wash for auth / public pages (no sidenav). */
body.no-sidenav.g-sidenav-show.bg-gray-100,
body.no-sidenav.g-sidenav-show.bg-gray-100 .main-content {
    background-color: var(--employiqo-page-bg, #f2efeb) !important;
    background-image:
        radial-gradient(ellipse 90% 70% at 100% 0%, color-mix(in srgb, var(--employiqo-nav-accent, #f8b940) 28%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 0% 100%, color-mix(in srgb, var(--employiqo-nav-accent, #f8b940) 22%, transparent) 0%, transparent 50%),
        linear-gradient(165deg, #f7f4f0 0%, var(--employiqo-page-bg, #f2efeb) 42%, #efe6d6 100%) !important;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Main workspace background (YashAdmin-style off-white instead of bg-gray-100). */
body.g-sidenav-show.bg-gray-100:not(.no-sidenav),
body.g-sidenav-show.bg-gray-100:not(.no-sidenav) .main-content {
    background-color: var(--employiqo-page-bg, #f2efeb) !important;
}

/*
 * Layout aligned with YashAdmin (https://yashadmin-vite.vercel.app/dashboard):
 * sidebar 15rem, content gutters 1.875rem (30px).
 */
:root {
    --employiqo-sidenav-width: 15rem;
    --employiqo-content-gutter: 1.875rem;
    --employiqo-sidenav-padding-x: 1.875rem;
    --employiqo-sidenav-header-height: 4.375rem;
    --employiqo-nav-accent: #f8b940;
    /* App accent = dashboard calendar slate (not purple) */
    --employiqo-accent: #1a1d2d;
    --employiqo-accent-ink: #1a1d2d;
    --employiqo-accent-rgb: 26, 29, 45;
    /* Cream page chrome — nested panels reuse this on white cards */
    --employiqo-page-bg: #f2efeb;
    /* Match Corporate UI / Dashboard .card radius */
    --employiqo-card-radius: var(--bs-card-border-radius, 0.375rem);
    /* Override Corporate UI purple primary globally */
    --bs-primary: #1a1d2d;
    --bs-primary-rgb: 26, 29, 45;
    --bs-link-color: #1a1d2d;
    --bs-link-hover-color: #12141f;
    /* Data tables (dashboard tickets style) — usable outside .yash-time-tracking-card */
    --yash-accent: var(--employiqo-accent);
    --yash-accent-rgb: 26, 29, 45;
    --yash-accent-ink: var(--employiqo-accent-ink);
}

/* Primary buttons: slate fill; hover matches topbar logout (bg-gradient-dark) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1a1d2d;
    --bs-btn-border-color: #1a1d2d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1e293b;
    --bs-btn-hover-border-color: #1e293b;
    --bs-btn-focus-shadow-rgb: 30, 41, 59;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1e293b;
    --bs-btn-active-border-color: #1e293b;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #1a1d2d;
    --bs-btn-disabled-border-color: #1a1d2d;
    color: #fff !important;
    background-color: #1a1d2d !important;
    background-image: none !important;
    border-color: #1a1d2d !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: #1e293b !important;
    background-image: linear-gradient(310deg, #1e293b 0%, #1e293b 100%) !important;
    border-color: transparent !important;
}

.btn-outline-primary {
    --bs-btn-color: #1a1d2d;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #1a1d2d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1e293b;
    --bs-btn-hover-border-color: #1e293b;
    --bs-btn-focus-shadow-rgb: 30, 41, 59;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1e293b;
    --bs-btn-active-border-color: #1e293b;
    --bs-btn-disabled-color: #1a1d2d;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #1a1d2d;
    color: #1a1d2d !important;
    background-color: #fff !important;
    background-image: none !important;
    border-color: #1a1d2d !important;
    box-shadow: none !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: #fff !important;
    background-color: #1e293b !important;
    background-image: linear-gradient(310deg, #1e293b 0%, #1e293b 100%) !important;
    border-color: transparent !important;
}

.text-primary {
    color: #1a1d2d !important;
}

.bg-primary {
    background-color: #1a1d2d !important;
}

.border-primary {
    border-color: #1a1d2d !important;
}

/* Keep page cards aligned with dashboard card radius */
.content-body .card,
.content-body .card.shadow-2,
body.no-sidenav .card.shadow-2 {
    border-radius: var(--employiqo-card-radius) !important;
}

/*
 * Nested sections inside white cards: reuse page cream so panels
 * sit between page chrome and white content (not Bootstrap gray).
 */
.employee-section {
    background-color: var(--employiqo-page-bg);
    border-radius: var(--employiqo-card-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.employee-section > h6:first-child {
    margin-bottom: 0.75rem;
}

.employee-section .table {
    --bs-table-bg: transparent;
}

/* Solid status badges — theme pastel colors wash out on white table cells. */
.badge.badge-status-active {
    background-color: #1b8a4a !important;
    color: #fff !important;
}

.badge.badge-status-inactive {
    background-color: #5f6b7a !important;
    color: #fff !important;
}

/* Worksite shift badges — same yellow/orange as sidenav accent */
.badge.badge-shift {
    background-color: var(--employiqo-nav-accent, #f8b940) !important;
    background-image: none !important;
    color: #222b40 !important;
}

/* Partner employee badge (lists + meeting invitees) */
.badge.badge-partner {
    background-color: color-mix(in srgb, var(--employiqo-nav-accent, #f8b940) 28%, #fff) !important;
    background-image: none !important;
    color: #8a5a08 !important;
    font-weight: 600;
    vertical-align: middle;
}

/*
 * Unified soft slate chrome for all content pages (lists, forms, detail).
 * Dashboard KPI accent cards keep their own colors.
 */
.content-body {
    --page-accent: var(--employiqo-accent);
    --page-accent-ink: var(--employiqo-accent-ink);
}

.content-body .card.shadow-2 > .card-body > .d-flex .h3,
.content-body .card.shadow-2 > .card-body > .h3,
.content-body .card.shadow-2 > .card-body h1.h3,
.content-body .card.shadow-2 > .card-header h5,
.content-body .card.shadow-2 > .card-header h6 {
    color: #222b40;
}

.content-body .card.bg-light,
.content-body .card.shadow-none.bg-light {
    background-color: color-mix(in srgb, var(--page-accent) 10%, #fff) !important;
}

.content-body .table thead,
.content-body .table thead.bg-light {
    background-color: color-mix(in srgb, var(--page-accent) 14%, #fff) !important;
}

.content-body .table thead th {
    color: var(--page-accent-ink);
    font-weight: 600;
    border-color: color-mix(in srgb, var(--page-accent) 16%, #e5e5e5) !important;
}

.content-body .table > :not(caption) > * > * {
    border-bottom-color: color-mix(in srgb, var(--page-accent) 12%, #eee);
}

.content-body .table.table-bordered {
    border-color: color-mix(in srgb, var(--page-accent) 14%, #e5e5e5);
}

.content-body .table.table-bordered > :not(caption) > * > * {
    border-color: color-mix(in srgb, var(--page-accent) 12%, #eee);
}

.content-body .table tfoot,
.content-body .table tfoot.bg-light {
    background-color: color-mix(in srgb, var(--page-accent) 10%, #fff) !important;
}

.content-body .table tfoot th {
    color: var(--page-accent-ink);
    font-weight: 600;
}

.content-body .form-label {
    color: color-mix(in srgb, var(--page-accent-ink) 55%, #5a6475);
}

.content-body .form-control:focus,
.content-body .form-select:focus {
    border-color: color-mix(in srgb, var(--page-accent) 45%, #ced4da);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--page-accent) 18%, transparent);
}

.content-body .nav-tabs .nav-link {
    color: #6b7686;
}

.content-body .nav-tabs .nav-link:hover {
    color: var(--page-accent-ink);
}

.content-body .nav-tabs .nav-link.active {
    color: var(--page-accent-ink);
    border-bottom-color: var(--page-accent);
}

.content-body .pagination .page-item.active .page-link {
    background-color: var(--page-accent);
    border-color: var(--page-accent);
}

.content-body .pagination .page-link {
    color: var(--page-accent-ink);
}

.content-body .pagination .page-link:hover {
    color: var(--page-accent);
    background-color: color-mix(in srgb, var(--page-accent) 10%, #fff);
}

/* Soften Soft-UI pastel badges in pages — keep status-active/inactive as-is */
.content-body .badge.badge-success:not(.badge-status-active),
.content-body .badge.bg-success:not(.badge-status-active),
.content-body .badge.badge-secondary:not(.badge-status-inactive),
.content-body .badge.bg-secondary:not(.badge-status-inactive),
.content-body .badge.badge-info,
.content-body .badge.bg-info,
.content-body .badge.badge-warning,
.content-body .badge.bg-warning,
.content-body .badge.badge-danger:not(.badge-status-inactive),
.content-body .badge.bg-danger {
    background-image: none !important;
}

.content-body .badge.badge-success:not(.badge-status-active),
.content-body .badge.bg-success:not(.badge-status-active) {
    background-color: color-mix(in srgb, var(--page-accent) 16%, #fff) !important;
    color: var(--page-accent-ink) !important;
}

.content-body .badge.badge-secondary:not(.badge-status-inactive),
.content-body .badge.bg-secondary:not(.badge-status-inactive) {
    background-color: color-mix(in srgb, var(--page-accent) 10%, #f0eef6) !important;
    color: #3a3f52 !important;
}

.content-body .badge.badge-info,
.content-body .badge.bg-info {
    background-color: color-mix(in srgb, var(--page-accent) 16%, #fff) !important;
    color: var(--page-accent-ink) !important;
}

.content-body .badge.badge-warning,
.content-body .badge.bg-warning {
    background-color: color-mix(in srgb, var(--page-accent) 10%, #ececf0) !important;
    color: #3a3f52 !important;
}

.content-body .badge.badge-danger:not(.badge-status-inactive),
.content-body .badge.bg-danger {
    background-color: color-mix(in srgb, var(--page-accent) 22%, #fff) !important;
    color: var(--page-accent-ink) !important;
}

.content-body .text-primary {
    color: var(--page-accent) !important;
}

/* Timesheet: same accent tokens as global page chrome */
.timesheet-page {
    --ts-accent: var(--employiqo-accent);
    --ts-accent-ink: var(--employiqo-accent-ink);
}

.timesheet-page__title {
    color: #222b40;
}

.timesheet-summary {
    background-color: color-mix(in srgb, var(--ts-accent) 10%, #fff) !important;
}

.timesheet-summary__label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ts-accent-ink);
    opacity: 0.75;
}

.timesheet-summary__total {
    color: var(--ts-accent-ink);
}

.timesheet-summary__divider {
    border-color: color-mix(in srgb, var(--ts-accent) 18%, #e8e8e8);
    opacity: 1;
}

.timesheet-summary__meta {
    color: #6b7686;
}

.timesheet-summary__meta span {
    color: #222b40;
}

/* Timesheet footer only — header/body come from .yash-projects-table */
.timesheet-table tfoot {
    background-color: color-mix(in srgb, var(--yash-accent) 10%, #fff);
}

.timesheet-table tfoot th {
    color: var(--yash-accent-ink);
    font-size: 0.875rem;
    font-weight: 600;
    border-color: color-mix(in srgb, var(--yash-accent) 14%, #eee);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.timesheet-badge {
    font-weight: 600;
    font-size: 0.68rem;
    border-radius: 0.35rem;
    padding: 0.28em 0.55em;
}

.timesheet-badge--night {
    background-color: color-mix(in srgb, var(--ts-accent) 16%, #fff);
    color: var(--ts-accent-ink);
}

.timesheet-badge--sunday {
    background-color: color-mix(in srgb, var(--ts-accent) 10%, #ececf0);
    color: #3a3f52;
}

.timesheet-badge--holiday {
    background-color: color-mix(in srgb, var(--ts-accent) 22%, #fff);
    color: var(--ts-accent-ink);
}

@media (min-width: 1200px) {
    #sidenav-main.sidenav.navbar-vertical,
    #sidenav-main.sidenav.navbar-vertical:hover,
    .navbar-vertical.navbar-expand-xs {
        max-width: var(--employiqo-sidenav-width) !important;
    }

    .sidenav.fixed-start ~ .main-content {
        margin-left: var(--employiqo-sidenav-width) !important;
    }
}

#sidenav-main .sidenav-header {
    height: var(--employiqo-sidenav-header-height);
}

#sidenav-main .navbar-brand {
    padding: 1.25rem var(--employiqo-sidenav-padding-x) !important;
}

.employiqo-brand-mark {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}

.employiqo-brand-mark--login {
    width: 3.5rem;
    height: 3.5rem;
    margin-inline: auto;
}

.employiqo-login-wordmark {
    margin-top: 0.65rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--employiqo-accent-ink, #1a1d2d);
}

.employiqo-brand-logo-sidebar {
    display: block;
    width: auto;
    height: 2.25rem;
    max-width: calc(100% - 0.5rem);
    flex-shrink: 1;
}

/* PWA install hint (login) — phones only -------------------------------- */
@media (min-width: 768px) {
    .employiqo-pwa-hint {
        display: none !important;
    }
}

.employiqo-pwa-hint {
    border: 1px solid color-mix(in srgb, var(--employiqo-accent, #1a1d2d) 12%, transparent);
    border-radius: var(--employiqo-card-radius, 0.375rem);
    background: color-mix(in srgb, var(--employiqo-nav-accent, #f8b940) 14%, #fff);
}

.employiqo-pwa-hint__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
}

.employiqo-pwa-hint__title {
    display: block;
    font-size: 0.9rem;
    color: var(--employiqo-accent-ink, #1a1d2d);
    margin-bottom: 0.2rem;
}

.employiqo-pwa-hint__text {
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(26, 29, 45, 0.72);
}

.employiqo-pwa-hint__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    flex-shrink: 0;
}

.employiqo-footer-copy {
    font-size: 0.875rem;
    line-height: 1.4;
}

.employiqo-footer-copy__line + .employiqo-footer-copy__line {
    margin-top: 0.15rem;
}

.employiqo-footer-copy__line .employiqo-footer-link {
    font-size: 0.75rem;
}

.employiqo-footer-copy,
.employiqo-footer-copy a,
.employiqo-footer-link,
.employiqo-footer-partner {
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
}

.employiqo-footer-partner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit !important;
    text-decoration: none;
    opacity: 0.92;
    transition: opacity 0.15s ease;
}

.employiqo-footer-partner:hover,
.employiqo-footer-partner:focus {
    opacity: 1;
    text-decoration: underline;
}

.employiqo-footer-partner__mark {
    display: block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.employiqo-footer-link {
    color: inherit !important;
    text-decoration: none;
}

.employiqo-footer-link:hover,
.employiqo-footer-link:focus {
    text-decoration: underline;
}

#sidenav-main #sidenav-collapse-main {
    padding-left: var(--employiqo-sidenav-padding-x) !important;
    padding-right: var(--employiqo-sidenav-padding-x) !important;
}

#sidenav-main .nav-section-title {
    padding-left: 0.75rem !important;
    margin-left: 0 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    opacity: 1 !important;
    letter-spacing: 0.04em;
}

#sidenav-main .navbar-nav .nav-link {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-weight: 400;
}

#sidenav-main .navbar-nav .nav-link:hover,
#sidenav-main .navbar-nav .nav-link:focus,
#sidenav-main .navbar-nav .nav-link.active {
    color: var(--employiqo-nav-accent) !important;
    background: transparent !important;
    box-shadow: none !important;
}

#sidenav-main .navbar-nav .nav-link.active {
    font-weight: 600;
}

#sidenav-main .nav-link-icon {
    min-width: 1.25rem;
    margin-right: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
}

#sidenav-main .navbar-nav .nav-link:hover .nav-link-icon,
#sidenav-main .navbar-nav .nav-link:focus .nav-link-icon,
#sidenav-main .navbar-nav .nav-link.active .nav-link-icon {
    color: var(--employiqo-nav-accent) !important;
}

#sidenav-main .navbar-nav .nav-link .icon {
    padding: 0 !important;
}

.navbar-main.mx-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.navbar-main .container-fluid {
    padding-left: var(--employiqo-content-gutter) !important;
    padding-right: var(--employiqo-content-gutter) !important;
}

/* Mobile topbar + sidenav ------------------------------------------------- */
.employiqo-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.employiqo-topbar__start {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
}

.employiqo-topbar__title {
    min-width: 0;
    flex: 1 1 auto;
}

.employiqo-topbar__actions {
    flex: 0 0 auto;
}

.employiqo-topbar__actions.navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    align-items: center;
}

.employiqo-sidenav-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
}

.employiqo-sidenav-toggler:hover,
.employiqo-sidenav-toggler:focus-visible {
    background: color-mix(in srgb, var(--employiqo-accent) 8%, #fff);
    outline: none;
}

.employiqo-sidenav-toggler .sidenav-toggler-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
}

.employiqo-sidenav-toggler .sidenav-toggler-line {
    display: block;
    width: 1.15rem;
    height: 2px;
    border-radius: 1px;
    background: var(--employiqo-accent-ink, #1a1d2d);
}

.sidenav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sidenav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.sidenav-is-open #sidenav-main {
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.25);
}

@media (max-width: 1199.98px) {
    .navbar-main .container-fluid.employiqo-topbar {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .content-body.container-fluid {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        padding-top: 1rem !important;
    }

    .g-sidenav-show .navbar:not(.sidenav).navbar-main .navbar-collapse.employiqo-topbar__actions {
        margin-top: 0 !important;
        width: auto !important;
    }

    .g-sidenav-show .navbar:not(.sidenav).navbar-main .navbar-nav {
        width: auto !important;
        flex-wrap: nowrap;
    }
}

@media (max-width: 767.98px) {
    .employiqo-topbar {
        gap: 0.35rem;
    }

    .employiqo-topbar__title h6 {
        font-size: 0.95rem;
        line-height: 1.25;
    }

    .employiqo-topbar__actions .navbar-nav > .nav-item {
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
    }

    .employiqo-logout-btn {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .employiqo-sidenav-toggler {
        width: 2.25rem;
        height: 2.25rem;
    }

    .notification-bell-toggle,
    .locale-switcher-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.15rem;
        height: 2.15rem;
    }
}

@media (min-width: 1200px) {
    .sidenav-backdrop {
        display: none !important;
    }

    body.sidenav-is-open {
        overflow: visible !important;
    }
}

.content-body.container-fluid {
    --bs-gutter-x: 0;
    padding-top: var(--employiqo-content-gutter) !important;
    padding-left: var(--employiqo-content-gutter) !important;
    padding-right: var(--employiqo-content-gutter) !important;
}

/*
 * Page headings — scaled from Corporate UI defaults (h3 was 1.875rem / 30px).
 * Target h3: 26px; h1–h4 scaled by the same ratio (13/15).
 */
h1,
.h1 {
    font-size: 2.625rem; /* 42px */
}

h2,
.h2 {
    font-size: 1.9375rem; /* 31px */
}

h3,
.h3 {
    font-size: 1.625rem; /* 26px */
}

h4,
.h4 {
    font-size: 1.3125rem; /* 21px */
}

@media (max-width: 575.98px) {
    h1,
    .h1 {
        font-size: calc(1.235rem + 1.82vw);
    }

    h2,
    .h2 {
        font-size: calc(1.17rem + 1.04vw);
    }

    h3,
    .h3 {
        font-size: calc(1.1375rem + 0.65vw);
    }

    h4,
    .h4 {
        font-size: calc(1.105rem + 0.26vw);
    }
}

/* Top bar: company name and username (default body text is 16px). */
.navbar-main .navbar-nav > .nav-item.text-body {
    font-size: 14px;
}

/* Default table typography across the app (inherits body font / Open Sans). */
.table,
.table th,
.table td {
    font-family: inherit;
    font-weight: 400;
    font-size: 14px;
    color: #334155;
}

/* Table headers always render bold. */
.table thead th,
.table tfoot th {
    font-weight: 700;
}

/* Breathing room below page content (especially big tables) before the footer. */
.content-body {
    padding-bottom: 100px;
}

/* Pagination: ensure the active page link is readable on its dark background. */
.pagination .page-item.active .page-link {
    color: #fff;
}

/* Status/info alerts: slightly smaller than default body text (16px). */
.alert {
    font-size: 14px;
}

/*
 * Corporate UI defaults are oversized on phones (padding-x 1.5rem, margin-bottom 1rem)
 * and leave small 12px labels inside large tap targets. Tighten globally; spacing via
 * gap / utility margins instead of the theme's blanket button margin.
 */
.btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-font-size: 0.8125rem;
    font-size: var(--bs-btn-font-size);
    line-height: 1.25;
    margin-bottom: 0;
}

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.75rem;
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-padding-x: 1.25rem;
}

@media (max-width: 575.98px) {
    .btn {
        --bs-btn-padding-y: 0.45rem;
        --bs-btn-padding-x: 0.75rem;
    }

    .btn.w-100 {
        --bs-btn-padding-y: 0.55rem;
    }
}

/* Body copy in page content matches table typography. */
.content-body p {
    font-size: 14px;
}

.content-body .ticket-copy {
    font-family: inherit;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
    white-space: pre-wrap;
}

.content-body .nav-tabs .nav-link {
    font-size: 14px;
}

.dash-missing-tabs-card .card-header-tabs {
    border-bottom: 0;
    gap: 0.25rem;
}

.dash-missing-tabs-card .card-header-tabs .nav-link {
    color: #6b7686;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.55rem 0.85rem;
}

.dash-missing-tabs-card .card-header-tabs .nav-link.active {
    color: #222b40;
    background: transparent;
    border-bottom-color: #1a1d2d;
    font-weight: 600;
}

.dash-missing-tabs-card .card-header-tabs .nav-link .badge {
    font-size: 0.65rem;
    vertical-align: middle;
}

.dash-count-badge {
    background-color: var(--employiqo-nav-accent, #f8b940) !important;
    color: #222b40 !important;
    font-weight: 700;
}

/* Time tracking detail + correction form: align with table/body copy (14px). */
.time-tracking-correction-form .form-control,
.time-tracking-correction-form .form-select,
.time-tracking-correction-form .form-text {
    font-size: 14px;
}

.time-tracking-history,
.time-tracking-history p {
    font-size: 14px;
    color: #334155;
}

/* Ticket action rows: controls + button share the same bottom edge. */
.ticket-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end !important;
    gap: 0.75rem;
}

.ticket-inline-actions__field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ticket-inline-actions__field--grow {
    flex: 1 1 14rem;
    min-width: 14rem;
}

.ticket-inline-actions__spacer {
    display: block;
    visibility: hidden;
    user-select: none;
    pointer-events: none;
}

.ticket-inline-actions .form-control,
.ticket-inline-actions .form-select {
    height: 2.5rem;
    min-height: 2.5rem;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

/* Corporate UI sets margin-bottom on .btn — that lifts the button above inputs. */
.ticket-inline-actions .btn {
    height: 2.5rem;
    min-height: 2.5rem;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    box-sizing: border-box;
}

.platform-companies-table .platform-companies-name {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.platform-companies-table .platform-companies-support {
    width: 99%;
    min-width: 36rem;
}

.platform-support-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.platform-support-form .form-label {
    font-size: 12px;
}

.platform-support-field--reason {
    flex: 1 1 12rem;
    min-width: 10rem;
}

.platform-support-field--ticket {
    flex: 0 1 9rem;
    min-width: 8rem;
}

.platform-support-field--duration {
    flex: 0 0 6.5rem;
}

.platform-support-field--action {
    flex: 0 0 auto;
}

.platform-support-field--action .btn {
    white-space: nowrap;
}

/* Symfony required fields: theme adds class "required"; asterisk from employiqo_bootstrap_5_layout. */
.form-label.required,
label.required,
legend.required {
    font-weight: 600;
}

.support-access-banner {
    background-color: #dc3545;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 0 !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
}

.support-access-banner--fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    margin: 0 !important;
    border-radius: 0 !important;
}

.support-access-banner__inner {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    text-align: center;
}

@media (min-width: 1200px) {
    .sidenav.fixed-start ~ .support-access-banner--fixed-top {
        left: var(--employiqo-sidenav-width, 15rem);
    }

    .g-sidenav-hidden .sidenav.fixed-start ~ .support-access-banner--fixed-top {
        left: 7.5rem;
    }
}

body.has-support-banner {
    --support-banner-height: 2rem;
}

body.has-support-banner .main-content.main-content--with-support-banner {
    margin-top: 0 !important;
    padding-top: var(--support-banner-height) !important;
    border-radius: 0 !important;
}

.support-access-banner__inner {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    text-align: center;
    line-height: 1.4;
}

.support-access-banner__message {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.support-access-banner__form {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: baseline;
    line-height: 1.4;
}

.support-access-banner__form .btn {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0.375rem;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.4;
    --bs-btn-border-radius: 0.25rem;
    margin: 0 !important;
    margin-block: 0 !important;
    padding: 0 0.375rem;
    font-size: 12px;
    line-height: 1.4;
    height: auto;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: baseline;
    box-shadow: none;
}

/* Dashboard KPI cards */
.dash-kpi-card {
    border: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-kpi-row .dash-kpi-card .card-body {
    padding: 0.9rem 1rem;
}

.dash-kpi-card:hover {
    transform: translateY(-1px);
}

.dash-kpi-card__label {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.dash-kpi-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.dash-kpi-card__hint {
    font-size: 0.75rem;
    opacity: 0.9;
}

.dash-kpi-card__icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.dash-kpi-card--hours {
    background-color: #f8b940 !important;
}

.dash-kpi-card--hours .dash-kpi-card__label,
.dash-kpi-card--hours .dash-kpi-card__hint {
    color: #fff;
}

.dash-kpi-card--hours .dash-kpi-card__value {
    color: #222b40;
}

.dash-kpi-trend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.dash-kpi-trend__arrow {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: #222b40;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

.dash-kpi-trend__value {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    color: #222b40;
}

.dash-kpi-card--hours .dash-kpi-trend--up .dash-kpi-trend__arrow i,
.dash-kpi-card--payroll .dash-kpi-trend--up .dash-kpi-trend__arrow i,
.dash-kpi-card--employees .dash-kpi-trend--up .dash-kpi-trend__arrow i {
    transform: rotate(45deg);
}

.dash-kpi-card--hours .dash-kpi-trend--down .dash-kpi-trend__arrow i,
.dash-kpi-card--payroll .dash-kpi-trend--down .dash-kpi-trend__arrow i,
.dash-kpi-card--employees .dash-kpi-trend--down .dash-kpi-trend__arrow i {
    transform: rotate(-45deg);
}

.dash-kpi-card--payroll {
    background-color: #fff;
}

.dash-kpi-card--payroll .dash-kpi-card__label {
    color: #6b7686;
    font-size: 0.875rem;
}

.dash-kpi-card--payroll .dash-kpi-card__value {
    color: #222b40;
}

.dash-kpi-card--payroll .dash-kpi-card__hint {
    color: #6b7686;
    opacity: 1;
}

.dash-kpi-card--payroll .dash-kpi-card__icon {
    background: color-mix(in srgb, var(--employiqo-accent) 18%, #fff) !important;
    color: var(--employiqo-accent) !important;
}

.dash-kpi-card--leave {
    background-color: #389589 !important;
    background-image:
        radial-gradient(ellipse 90% 70% at 110% -10%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 70% 55% at -15% 110%, rgba(255, 255, 255, 0.16) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 70% 80%, rgba(0, 0, 0, 0.08) 0%, transparent 60%);
    background-repeat: no-repeat;
}

.dash-kpi-card--leave .dash-kpi-card__label,
.dash-kpi-card--leave .dash-kpi-card__hint,
.dash-kpi-card--leave .dash-kpi-card__value {
    color: #fff;
    opacity: 1;
}

.dash-kpi-card--leave .dash-kpi-card__hint {
    opacity: 0.9;
}

.dash-kpi-card--leave .dash-kpi-card__icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.dash-kpi-card--sick {
    background-color: #fff;
}

.dash-kpi-card--sick .dash-kpi-card__label,
.dash-kpi-card--sick .dash-kpi-card__hint {
    color: #6b7686;
    opacity: 1;
}

.dash-kpi-card--sick .dash-kpi-card__value {
    color: #222b40;
}

.dash-kpi-card--sick .dash-kpi-card__icon {
    background: color-mix(in srgb, #e35d6a 16%, #fff) !important;
    color: #c0394a !important;
}

.dash-kpi-card--employees {
    background-color: #452b90 !important;
}

.dash-kpi-card--employees .dash-kpi-card__label,
.dash-kpi-card--employees .dash-kpi-card__hint,
.dash-kpi-card--employees .dash-kpi-card__value,
.dash-kpi-card--employees .dash-kpi-trend__value {
    color: #fff;
}

.dash-kpi-card--employees .dash-kpi-trend__arrow {
    background: rgba(255, 255, 255, 0.95);
    color: #452b90;
}

/* Dashboard: open tickets — compact rows like other yash cards */
.dash-open-tickets-card .yash-projects-table thead th,
.dash-open-tickets-card .yash-projects-table tbody td {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.dash-open-tickets-card .yash-status-badge {
    padding: 0.25rem 0.55rem;
    font-size: 0.68rem;
}

/* Dashboard: missing-time tables (slate accent — not nav yellow) */
.yash-time-tracking-card {
    --yash-accent: var(--employiqo-accent);
    --yash-accent-rgb: 26, 29, 45;
    --yash-accent-ink: var(--employiqo-accent-ink);
}

.yash-time-tracking-card .yash-entry-summary {
    color: #222b40;
}

.yash-projects-table thead {
    background-color: color-mix(in srgb, var(--yash-accent) 14%, #fff);
}

.yash-projects-table thead th {
    color: var(--yash-accent-ink);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    border-bottom: 0;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.yash-projects-table tbody td {
    border-color: color-mix(in srgb, var(--yash-accent) 14%, #eee);
    vertical-align: middle;
    font-size: 0.875rem;
    line-height: 1.5;
}

.yash-projects-table.schedule-table tbody tr.schedule-weekend td {
    background-color: color-mix(in srgb, var(--yash-accent) 6%, #fff);
}

.yash-progress {
    background-color: color-mix(in srgb, var(--yash-accent) 16%, #f5f5f5);
    border-radius: 999px;
    overflow: hidden;
}

.yash-progress-bar--pending {
    background-color: #e35d6a;
}

.yash-progress-bar--inprogress {
    background-color: var(--yash-accent);
}

.yash-progress-bar--completed {
    background-color: #2bbbad;
}

.yash-status-badge {
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.4rem 0.75rem;
}

.yash-status-badge--pending {
    background-color: #fde8eb;
    color: #c0394a;
}

.yash-status-badge--inprogress {
    background-color: color-mix(in srgb, var(--yash-accent) 18%, #fff);
    color: var(--yash-accent-ink);
}

.yash-status-badge--completed {
    background-color: #e0f7f4;
    color: #1a8f84;
}

#time-month .pagination,
.yash-time-tracking-card .pagination {
    gap: 0.2rem;
    --bs-pagination-border-radius: 0.4rem;
}

#time-month .pagination .page-item,
.yash-time-tracking-card .pagination .page-item {
    margin: 0;
}

#time-month .pagination .page-link,
.yash-time-tracking-card .pagination .page-link {
    width: 1.7rem;
    height: 1.7rem;
    min-width: 1.7rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 0.4rem;
    color: var(--yash-accent-ink);
    border-color: color-mix(in srgb, var(--yash-accent) 28%, #e5e5e5);
}

#time-month .pagination .page-link:hover,
.yash-time-tracking-card .pagination .page-link:hover {
    background-color: color-mix(in srgb, var(--yash-accent) 14%, #fff);
    border-color: var(--yash-accent);
    color: var(--yash-accent-ink);
}

#time-month .pagination .page-item.active .page-link,
.yash-time-tracking-card .pagination .page-item.active .page-link {
    background-color: var(--yash-accent);
    border-color: var(--yash-accent);
    color: #fff;
    font-weight: 700;
}

#time-month .pagination .page-item.disabled .page-link,
.yash-time-tracking-card .pagination .page-item.disabled .page-link {
    color: color-mix(in srgb, var(--yash-accent) 35%, #999);
}

#time-month .pagination .page-link i,
.yash-time-tracking-card .pagination .page-link i {
    font-size: 0.55rem;
}

/* Team meeting calendar (admin dashboard) */
.team-meeting-calendar {
    --tmc-bg: #1a1d2d;
    --tmc-bg-soft: #252836;
    --tmc-text: #ffffff;
    --tmc-muted: #9aa0b5;
    --tmc-accent: var(--employiqo-nav-accent);
    --tmc-weekend: #e07a7a;
    --tmc-line: rgba(255, 255, 255, 0.08);
    background: var(--tmc-bg);
    border: 0;
    color: var(--tmc-text);
    border-radius: var(--employiqo-card-radius, var(--bs-card-border-radius, 0.375rem));
    overflow: hidden;
}

.team-meeting-calendar .card-body {
    min-height: 0;
    overflow: hidden;
}

.team-meeting-calendar__events {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.team-meeting-calendar__month {
    color: var(--tmc-text);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.team-meeting-calendar__nav {
    color: var(--tmc-muted);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.team-meeting-calendar__nav:hover {
    color: var(--tmc-accent);
    background-color: rgba(248, 185, 64, 0.12);
}

.team-meeting-calendar__weekdays,
.team-meeting-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.15rem 0.2rem;
}

.team-meeting-calendar__weekdays {
    margin-bottom: 0.35rem;
}

.team-meeting-calendar__weekdays span {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--tmc-text);
    opacity: 0.85;
}

.team-meeting-calendar__day {
    width: 1.7rem;
    height: 1.7rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--tmc-text);
    text-decoration: none;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

a.team-meeting-calendar__day:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--tmc-text);
}

.team-meeting-calendar__day.is-weekend {
    color: var(--tmc-weekend);
}

.team-meeting-calendar__day.is-outside {
    color: #5a6078;
    pointer-events: none;
}

.team-meeting-calendar__day.is-outside.is-weekend {
    color: #6d4a4a;
}

.team-meeting-calendar__day.has-meeting::after {
    content: "";
    position: absolute;
    bottom: 0.12rem;
    width: 0.22rem;
    height: 0.22rem;
    border-radius: 50%;
    background: var(--tmc-accent);
}

.team-meeting-calendar__day.is-today,
.team-meeting-calendar__day.is-selected {
    background: var(--tmc-accent);
    color: #1a1d2d;
    font-weight: 700;
}

.team-meeting-calendar__day.is-today.has-meeting::after,
.team-meeting-calendar__day.is-selected.has-meeting::after {
    background: #1a1d2d;
}

.team-meeting-calendar__events-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tmc-text);
    padding-bottom: 0.65rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--tmc-line);
    flex-shrink: 0;
}

.team-meeting-calendar__events-viewport {
    position: relative;
    /* 2 volle Termine + anteilig der 3. mit leichtem Fade */
    --tmc-event-row: 4.15rem;
    height: calc(var(--tmc-event-row) * 2.45);
    min-height: calc(var(--tmc-event-row) * 2.45);
}

.team-meeting-calendar__events-viewport.has-fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.55rem;
    bottom: 0;
    height: 2.15rem;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(26, 29, 45, 0) 0%,
        rgba(26, 29, 45, 0.35) 55%,
        var(--tmc-bg) 100%
    );
}

.team-meeting-calendar__events-scroll {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-right: -0.15rem;
    padding-right: 0.4rem;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.06);
}

.team-meeting-calendar__events-scroll::-webkit-scrollbar {
    width: 0.4rem;
}

.team-meeting-calendar__events-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.team-meeting-calendar__events-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
}

.team-meeting-calendar__events-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.team-meeting-calendar__empty {
    color: var(--tmc-muted);
    font-size: 0.85rem;
    padding-top: 0.75rem;
}

.team-meeting-calendar__event-list {
    margin-top: 0.25rem;
}

.team-meeting-calendar__event {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--tmc-line);
}

a.team-meeting-calendar__event--link {
    color: inherit;
    text-decoration: none;
    border-radius: 0.55rem;
    margin: 0 -0.35rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    transition: background-color 0.15s ease;
}

a.team-meeting-calendar__event--link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: inherit;
}

a.team-meeting-calendar__event--link:hover .team-meeting-calendar__event-title {
    color: var(--tmc-accent);
}

.team-meeting-calendar__event:last-child,
li:last-child .team-meeting-calendar__event {
    border-bottom: 0;
}

.team-meeting-calendar__event-date {
    flex: 0 0 2.6rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.55rem;
    background: var(--tmc-bg-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}

.team-meeting-calendar__event-day {
    color: var(--tmc-accent);
    font-weight: 700;
    font-size: 0.9rem;
}

.team-meeting-calendar__event-weekday {
    color: var(--tmc-text);
    font-size: 0.65rem;
    opacity: 0.85;
}

.team-meeting-calendar__event-body {
    flex: 1 1 auto;
    min-width: 0;
}

.team-meeting-calendar__event-title {
    color: var(--tmc-text);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-meeting-calendar__event-subtitle {
    color: var(--tmc-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-meeting-calendar__event-time {
    flex: 0 0 auto;
    color: var(--tmc-accent);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.team-meeting-calendar__event--shift .team-meeting-calendar__event-time {
    letter-spacing: 0.01em;
}

.team-meeting-calendar__event--absence {
    border-left: 3px solid #0d9488;
}

.team-meeting-calendar__event--absence .team-meeting-calendar__event-title {
    color: #0f766e;
}

/* Absence request calendar */
.absence-calendar {
    max-width: none;
}

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

.absence-calendar__month-title {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.absence-calendar__weekdays,
.absence-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.2rem;
}

@media (max-width: 991.98px) {
    .absence-calendar__months {
        grid-template-columns: 1fr;
        max-width: 17.5rem;
    }
}

.absence-calendar__weekdays {
    margin-bottom: 0.25rem;
}

.absence-calendar__weekdays span {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6b7686;
    text-transform: uppercase;
}

.absence-calendar__day {
    height: 1.75rem;
    border: 0;
    border-radius: 0.4rem;
    background: #f8f9fa;
    color: #222b40;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

button.absence-calendar__day {
    cursor: pointer;
}

button.absence-calendar__day:hover {
    background: color-mix(in srgb, #1a1d2d 16%, #fff);
}

.absence-calendar__day.is-outside {
    opacity: 0.35;
}

.absence-calendar__day.is-weekend {
    color: #c0394a;
}

.absence-calendar__day.is-today {
    box-shadow: inset 0 0 0 1px #1a1d2d;
}

.absence-calendar__day.is-in-range {
    background: color-mix(in srgb, #1a1d2d 22%, #fff);
}

.absence-calendar__day.is-selected,
.absence-calendar__day.is-start,
.absence-calendar__day.is-end {
    background: #1a1d2d;
    color: #fff;
}

.absence-calendar__day.is-blackout {
    background: #fde8e8;
    color: #b42318;
    cursor: not-allowed;
    text-decoration: line-through;
}

button.absence-calendar__day.is-blackout:hover {
    background: #fde8e8;
    color: #b42318;
}

.absence-blackout-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #b42318;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.absence-request-list__item + .absence-request-list__item {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(34, 43, 64, 0.08);
}

/* Team calendar swimlanes ------------------------------------------------- */
.absence-teamcal__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.absence-teamcal__toolbar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
    margin-left: auto;
}

.absence-teamcal__search {
    position: relative;
    display: block;
    margin: 0;
    min-width: 12rem;
    max-width: 16rem;
    flex: 1 1 12rem;
}

.absence-teamcal__search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #8a93a3;
    pointer-events: none;
}

.absence-teamcal__search .form-control {
    padding-left: 1.85rem;
}

.absence-teamcal__nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.absence-teamcal__month-label {
    font-weight: 700;
    font-size: 1.05rem;
    color: #222b40;
    letter-spacing: -0.01em;
}

.absence-teamcal__board {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    border: 1px solid #e8eaef;
    border-radius: var(--employiqo-card-radius);
    overflow: hidden;
    background: #fff;
}

.absence-teamcal__sidebar {
    border-right: 1px solid #e8eaef;
    background: #fff;
    z-index: 2;
}

.absence-teamcal__sidebar-head {
    display: flex;
    align-items: center;
    height: 84px;
    padding: 0 0.9rem;
    border-bottom: 1px solid #eef0f4;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7686;
    background: #fafbfc;
}

.absence-teamcal__person {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 58px;
    padding: 0 0.9rem;
    border-bottom: 1px solid #f0f2f5;
}

.absence-teamcal__person--empty {
    height: auto;
    min-height: 72px;
    align-items: flex-start;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.absence-teamcal__empty-msg {
    font-size: 0.8rem;
    color: #8a93a3;
    line-height: 1.35;
}

.absence-teamcal__lane--empty {
    min-height: 72px;
    height: auto;
}

.absence-teamcal__avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--employiqo-accent) 12%, #fff);
    color: var(--employiqo-accent-ink);
    font-weight: 700;
    font-size: 0.72rem;
}

.absence-teamcal__person-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.12rem;
}

.absence-teamcal__name {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #222b40;
}

.absence-teamcal__job {
    font-size: 0.72rem;
    color: #8a93a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.absence-teamcal__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    min-width: 0;
}

.absence-teamcal__grid {
    --days: 31;
    --day-min: 2.45rem;
    width: 100%;
    min-width: calc(var(--days) * var(--day-min));
}

.absence-teamcal__header,
.absence-teamcal__lane,
.absence-teamcal__weeks {
    display: grid;
    width: 100%;
    /* Exactly N day columns that share available width — no trailing empty area */
    grid-template-columns: repeat(var(--days), minmax(0, 1fr));
    grid-template-rows: 1fr;
    grid-auto-columns: 0;
    grid-auto-rows: 0;
}

.absence-teamcal__colhead {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fafbfc;
}

.absence-teamcal__weeks {
    height: 28px;
    border-bottom: 1px solid #eef0f4;
    background: #f3f5f8;
}

.absence-teamcal__week {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7686;
    border-right: 1px solid #e4e7ec;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.absence-teamcal__header {
    height: 56px;
    border-bottom: 1px solid #eef0f4;
    background: #fafbfc;
}

.absence-teamcal__dayhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    border-right: 1px solid #f0f2f5;
    font-size: 0.68rem;
    min-width: 0;
}

.absence-teamcal__dayhead.is-weekend,
.absence-teamcal__cell.is-weekend {
    background: #f6f7f9;
}

.absence-teamcal__dayhead.is-today .absence-teamcal__daynum {
    background: var(--employiqo-accent);
    color: #fff;
    border-radius: 999px;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
}

.absence-teamcal__weekday {
    color: #8a93a3;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.01em;
}

.absence-teamcal__daynum {
    font-weight: 700;
    color: #222b40;
}

.absence-teamcal__lane {
    position: relative;
    height: 58px;
    border-bottom: 1px solid #f0f2f5;
    align-items: stretch;
}

.absence-teamcal__cell {
    grid-row: 1;
    border-right: 1px solid #f0f2f5;
}

.absence-teamcal__cell.is-today {
    box-shadow: inset 2px 0 0 0 var(--employiqo-accent);
}

.absence-teamcal__dayhead.is-today {
    box-shadow: inset 2px 0 0 0 var(--employiqo-accent);
}

.absence-teamcal__blackout {
    grid-row: 1;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 0.15rem;
    background:
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, #b42318 10%, transparent),
            color-mix(in srgb, #b42318 10%, transparent) 3px,
            color-mix(in srgb, #b42318 3%, transparent) 3px,
            color-mix(in srgb, #b42318 3%, transparent) 7px
        );
    pointer-events: none;
}

.absence-teamcal__blackout-label {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.15rem 0.4rem;
    border-radius: 0.3rem;
    background: color-mix(in srgb, #fff 82%, #b42318);
    border: 1px solid color-mix(in srgb, #b42318 28%, #eee);
    font-size: 0.68rem;
    font-weight: 600;
    color: #8a1f16;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.absence-teamcal__bar {
    grid-row: 1;
    z-index: 2;
    align-self: center;
    height: 1.7rem;
    margin: 0 0.15rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.absence-teamcal__bar--approved {
    background: #e8f5f1;
    color: #0f4c5c;
    border: 1px solid color-mix(in srgb, #2a9d8f 28%, #fff);
    border-left: 3px solid #2a9d8f;
}

.absence-teamcal__bar--pending {
    background: #fff4e5;
    color: #9a3412;
    border: 1px dashed color-mix(in srgb, #f59e0b 55%, #e5e7eb);
    border-left: 3px solid #f59e0b;
}

.absence-teamcal__bar--vacation.absence-teamcal__bar--approved {
    background: color-mix(in srgb, #2a9d8f 16%, #fff);
}

.absence-teamcal__bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.absence-teamcal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
}

.absence-teamcal__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.absence-teamcal__legend-swatch {
    width: 1.15rem;
    height: 0.75rem;
    border-radius: 0.25rem;
    display: inline-block;
}

.absence-teamcal__legend-swatch.absence-teamcal__bar--approved {
    background: #e8f5f1;
    border: 1px solid color-mix(in srgb, #2a9d8f 28%, #fff);
    border-left: 3px solid #2a9d8f;
}

.absence-teamcal__legend-swatch.absence-teamcal__bar--pending {
    background: #fff4e5;
    border: 1px dashed color-mix(in srgb, #f59e0b 55%, #e5e7eb);
    border-left: 3px solid #f59e0b;
}

.absence-teamcal__legend-blackout {
    background:
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, #b42318 18%, #fff),
            color-mix(in srgb, #b42318 18%, #fff) 3px,
            #fff 3px,
            #fff 6px
        );
    border: 1px solid color-mix(in srgb, #b42318 25%, #eee);
}

@media (max-width: 767.98px) {
    .absence-teamcal__board {
        grid-template-columns: minmax(148px, 168px) minmax(0, 1fr);
    }

    .absence-teamcal__person {
        padding: 0 0.55rem;
        gap: 0.4rem;
    }

    .absence-teamcal__job {
        display: none;
    }
}

/* Auto-dismiss flash alerts */
.alert-auto-dismiss {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

.alert-auto-dismiss.is-hiding {
    opacity: 0;
    transform: translateY(-0.35rem);
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0;
}

.alert-auto-dismiss__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    background: currentColor;
    opacity: 0.45;
    animation-name: alert-auto-dismiss-shrink;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    pointer-events: none;
}

.alert-success.alert-auto-dismiss__bar,
.alert-success .alert-auto-dismiss__bar {
    background: #0f5132;
}

.alert-danger .alert-auto-dismiss__bar,
.alert-error .alert-auto-dismiss__bar {
    background: #842029;
}

.alert-warning .alert-auto-dismiss__bar {
    background: #664d03;
}

.alert-info .alert-auto-dismiss__bar {
    background: #055160;
}

@keyframes alert-auto-dismiss-shrink {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Team meeting invitees: Bootstrap collapse + filter + columns */
.team-meeting-invitees__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--employiqo-accent, #1a1d2d);
    font-weight: 600;
    text-decoration: none;
}

.team-meeting-invitees__link:hover {
    color: var(--employiqo-accent, #1a1d2d);
    text-decoration: underline;
}

.team-meeting-invitees__count {
    background: var(--employiqo-accent, #1a1d2d);
    color: #fff;
    font-weight: 600;
    font-size: 0.7rem;
    min-width: 1.35rem;
}

.team-meeting-invitees__chevron {
    font-size: 0.7rem;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.team-meeting-invitees.is-open .team-meeting-invitees__chevron {
    transform: rotate(180deg);
}

.team-meeting-invitees__box {
    margin-top: 1.25rem;
    border: 1px solid rgba(26, 29, 45, 0.12);
    border-radius: var(--employiqo-card-radius, 0.375rem);
    box-shadow: none;
}

.team-meeting-invitees__toolbar {
    margin-bottom: 1rem;
}

.team-meeting-participants {
    column-count: 2;
    column-gap: 1.75rem;
}

@media (min-width: 992px) {
    .team-meeting-participants {
        column-count: 3;
    }
}

.team-meeting-participants .form-check {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 0.45rem;
}

.team-meeting-participants .form-check[hidden] {
    display: none !important;
}

/* Admin / Partner todo widget — right column: calendar + todos share height equally */
@media (min-width: 1200px) {
    .dash-ops-aside {
        align-self: stretch;
        min-height: 0;
        overflow: hidden;
    }

    /*
     * height:0 + min-height:100% keeps this column from expanding the row.
     * Row height is driven by the left column; calendar and todos share 50/50.
     */
    .dash-sidebar-stack {
        display: grid;
        /* Calendar larger than todos so ≥2 events (+ faded 3rd) stay visible */
        grid-template-rows: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: 1.5rem;
        width: 100%;
        flex: 1 1 auto;
        height: 0;
        min-height: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .dash-sidebar-stack > .team-meeting-calendar-wrap,
    .dash-sidebar-stack > turbo-frame#dashboard_calendar {
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    turbo-frame#dashboard_calendar {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
    }

    .dash-sidebar-stack #team-meetings-calendar,
    .dash-sidebar-stack .team-meeting-calendar-wrap {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    .dash-sidebar-stack .team-meeting-calendar {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .dash-sidebar-stack .team-meeting-calendar > .card-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .dash-sidebar-stack .team-meeting-calendar__events {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .dash-sidebar-stack .team-meeting-calendar__events-viewport {
        flex: 1 1 auto;
        min-height: calc(var(--tmc-event-row, 4.15rem) * 2.45);
        height: auto;
        overflow: hidden;
    }

    .dash-sidebar-stack .team-meeting-calendar__events-scroll {
        max-height: 100%;
        overflow-y: auto;
    }

    turbo-frame#dashboard_tickets,
    turbo-frame#dashboard_worksites {
        display: block;
        width: 100%;
    }

    .dash-sidebar-stack > .admin-todo-wrap {
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dash-sidebar-stack .admin-todo-card {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dash-sidebar-stack .admin-todo-card__body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dash-sidebar-stack .admin-todo-card__viewport {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .dash-sidebar-stack .admin-todo-card__scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }
}

@media (max-width: 1199.98px) {
    .dash-sidebar-stack {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .admin-todo-card__viewport {
        max-height: 18rem;
    }

    .admin-todo-card__scroll {
        max-height: 18rem;
        overflow-y: auto;
    }
}

.admin-todo-wrap {
    min-height: 0;
}

.admin-todo-card {
    --todo-accent: var(--employiqo-accent);
    --todo-accent-ink: #1a1d2d;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-todo-card > .card-header {
    flex-shrink: 0;
}

.admin-todo-card__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-todo-card__viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-todo-card__viewport.has-fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.55rem;
    bottom: 0;
    height: 2.75rem;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 45%,
        #fff 100%
    );
}

.admin-todo-card__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-right: -0.15rem;
    padding-right: 0.35rem;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--todo-accent) 45%, #999) color-mix(in srgb, var(--todo-accent) 10%, #f0f0f0);
}

.admin-todo-card__scroll::-webkit-scrollbar {
    width: 0.4rem;
}

.admin-todo-card__scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--todo-accent) 10%, #f0f0f0);
    border-radius: 999px;
}

.admin-todo-card__scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--todo-accent) 45%, #999);
    border-radius: 999px;
}

.admin-todo-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.admin-todo-item {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--todo-accent) 14%, #eee);
}

.admin-todo-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.admin-todo-item.is-done .admin-todo-item__title {
    text-decoration: line-through;
    color: #8a93a8;
}

.admin-todo-item__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.45rem;
}

.admin-todo-item__badge.is-open {
    background: #fff4e5;
    color: #b36b00;
}

.admin-todo-item__badge.is-done {
    background: #e0f7f4;
    color: #1a8f84;
}

.admin-todo-item__row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.admin-todo-item__handle {
    color: #8a93a8;
    cursor: grab;
    padding: 0.1rem 0.15rem 0 0;
    font-size: 0.95rem;
    line-height: 1.2;
    user-select: none;
    touch-action: none;
}

.admin-todo-item__handle:active {
    cursor: grabbing;
}

.admin-todo-list.is-sorting .admin-todo-item {
    transition: transform 0.12s ease;
}

.admin-todo-item.is-dragging {
    opacity: 0.55;
    background: color-mix(in srgb, var(--todo-accent) 8%, #fff);
    border-radius: 0.5rem;
    box-shadow: 0 4px 14px rgba(34, 43, 64, 0.12);
}

.admin-todo-list.is-saving {
    opacity: 0.85;
    pointer-events: none;
}

.admin-todo-item__check {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--todo-accent);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.admin-todo-item__check:hover {
    color: var(--todo-accent-ink);
}

.admin-todo-item__body {
    flex: 1;
    min-width: 0;
}

.admin-todo-item__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #222b40;
    word-break: break-word;
}

.admin-todo-item__shared {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--todo-accent-ink);
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    line-height: 1.35;
}

.admin-todo-item__shared i {
    margin-top: 0.15rem;
    opacity: 0.85;
}

.admin-todo-item.is-done .admin-todo-item__shared {
    color: #8a93a8;
}

.admin-todo-item__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.admin-todo-item__action {
    border: 0;
    background: transparent;
    padding: 0.15rem 0.35rem;
    color: #8a93a8;
    font-size: 0.8rem;
    line-height: 1;
    text-decoration: none;
}

.admin-todo-item__action:hover {
    color: var(--todo-accent-ink);
}

.admin-todo-item__action.is-delete:hover {
    color: #c0394a;
}

.admin-todo-item__meta {
    margin-top: 0.35rem;
    margin-left: 1.65rem;
    font-size: 0.72rem;
    color: #8a93a8;
}

/* Language switcher (top bar) — circular flags */
.locale-switcher-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    line-height: 1;
}

.locale-switcher-toggle:hover {
    background: rgba(34, 43, 64, 0.06);
}

.locale-flag {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(34, 43, 64, 0.14);
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.6) inset;
    background: #e8ecf2;
    vertical-align: middle;
}

.locale-flag__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.locale-switcher-menu {
    min-width: 10.5rem;
}

.locale-switcher-menu .dropdown-item {
    font-size: 0.875rem;
}

.locale-switcher-menu .dropdown-item.active {
    background-color: color-mix(in srgb, var(--employiqo-accent) 14%, #fff);
    color: var(--employiqo-accent-ink);
}

/* Auth pages (login / forgot / password-setup) */
.employiqo-auth-locale-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0.85rem 1rem 0;
}

.employiqo-auth-locale__toggle.locale-switcher-toggle {
    width: auto;
    height: auto;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem !important;
    text-decoration: none !important;
}

.employiqo-auth-locale__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--employiqo-accent-ink, #1a1d2d);
}

/* Notification bell (top bar) */
.notification-bell-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    line-height: 1;
    font-size: 1rem;
}

.notification-bell-toggle:hover {
    background: rgba(34, 43, 64, 0.06);
}

.notification-bell-badge {
    position: absolute;
    top: -0.15rem;
    right: -0.35rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: #c0394a;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

.notification-bell-menu {
    width: min(22rem, calc(100vw - 2rem));
    padding: 0;
    overflow: hidden;
}

.notification-bell-menu__header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(26, 29, 45, 0.08);
    font-size: 0.875rem;
}

.notification-bell-menu__empty {
    padding: 1rem;
    font-size: 0.85rem;
    color: #6c757d;
}

.notification-bell-menu__list {
    max-height: 18rem;
    overflow-y: auto;
}

.notification-bell-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    white-space: normal;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(26, 29, 45, 0.06);
}

.notification-bell-item.is-unread {
    background: color-mix(in srgb, var(--employiqo-accent, #1a1d2d) 6%, #fff);
}

.notification-bell-item__type {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
}

.notification-bell-item__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--employiqo-accent, #1a1d2d);
}

.notification-bell-item__time {
    font-size: 0.72rem;
    color: #8a93a8;
}

/* FAQ help centre */
.faq-toc__link {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--employiqo-accent, #1a1d2d) 6%, #fff);
    color: var(--employiqo-accent-ink, #1a1d2d) !important;
    font-size: 0.8125rem;
    text-decoration: none;
}

.faq-toc__link:hover,
.faq-toc__link:focus {
    background: color-mix(in srgb, var(--employiqo-accent, #1a1d2d) 12%, #fff);
    text-decoration: none;
}

.faq-section__title {
    scroll-margin-top: 5rem;
}

.faq-accordion__item {
    border: 1px solid rgba(26, 29, 45, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: #fff;
}

.faq-accordion__item .accordion-button {
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: none;
    background: #fff;
    color: var(--employiqo-accent-ink, #1a1d2d);
}

.faq-accordion__item .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--employiqo-accent, #1a1d2d) 5%, #fff);
    color: var(--employiqo-accent-ink, #1a1d2d);
}

.faq-accordion__item .accordion-body {
    font-size: 0.875rem;
    color: #475569;
}

.faq-screenshot__img {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid rgba(26, 29, 45, 0.1);
    background: #fff;
}

.faq-screenshot__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 9rem;
    padding: 1.25rem;
    border-radius: 0.5rem;
    border: 1px dashed rgba(26, 29, 45, 0.18);
    background: color-mix(in srgb, var(--employiqo-accent, #1a1d2d) 3%, #f8fafc);
    color: #64748b;
    text-align: center;
    font-size: 0.8125rem;
}

.faq-screenshot__placeholder i {
    font-size: 1.35rem;
    opacity: 0.7;
}

.faq-screenshot__hint {
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    opacity: 0.75;
}

.faq-screenshot__caption {
    margin-top: 0.45rem;
    font-size: 0.75rem;
    color: #64748b;
}