/* ============================
   Global styles & design tokens
   ============================ */

:root,
[data-theme="dark"] {
    --bg-body: #020617;
    --bg-surface: #020617;
    --bg-surface-alt: #020617;
    --bg-body-gradient: radial-gradient(circle at top, #0f172a 0, #020617 55%, #000 100%);

    --border-subtle: #1f2933;
    --border-strong: #4b5563;

    --text-main: #e5e7eb;
    --text-muted: #9ca3af;
    --text-soft: #6b7280;

    --accent: #0ea5e9;
    --accent-soft: rgba(14, 165, 233, 0.12);
    --accent-strong: #0284c7;

    --danger: #f97373;
    --danger-soft: rgba(248, 113, 113, 0.12);

    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, 0.12);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.35);

    --card-bg: radial-gradient(circle at top left,
                rgba(148, 163, 184, 0.12),
                rgba(15, 23, 42, 0.85)),
                #020617;
    --card-border: rgba(148, 163, 184, 0.35);
    --panel-bg: rgba(15, 23, 42, 0.6);
    --panel-border: rgba(148, 163, 184, 0.22);

    --topbar-bg: rgba(15, 23, 42, 0.75);
    --topbar-border: rgba(148, 163, 184, 0.2);
    --topbar-pill-bg: rgba(15, 23, 42, 0.6);
    --topbar-pill-border: rgba(148, 163, 184, 0.35);
    --topbar-pill-hover-bg: rgba(15, 23, 42, 0.85);
    --topbar-pill-active-bg: radial-gradient(circle at top left, rgba(56, 189, 248, 0.28), transparent 55%);
    --topbar-menu-bg: rgba(15, 23, 42, 0.95);
    --topbar-menu-border: rgba(148, 163, 184, 0.35);
    --topbar-mobile-bg: rgba(2, 6, 23, 0.9);

    --footer-bg: rgba(15, 23, 42, 0.95);
    --footer-border: rgba(148, 163, 184, 0.1);

    --scroll-track: rgba(15, 23, 42, 0.65);
    --scroll-thumb: linear-gradient(180deg, #0ea5e9, #6366f1);
    --scroll-thumb-border: rgba(15, 23, 42, 0.65);
    --color-scheme: dark;

    --font-base: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
}

[data-theme="light"] {
    --bg-body: #f5f7fb;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f1f5f9;
    --bg-body-gradient: radial-gradient(circle at top, #ffffff 0, #f5f7fb 52%, #e8eef6 100%);

    --border-subtle: #d1d9e3;
    --border-strong: #c7d2e1;

    --text-main: #0f172a;
    --text-muted: #334155;
    --text-soft: #475569;
    --link: #0b5fa8;

    --accent: #0284c7;
    --accent-soft: rgba(2, 132, 199, 0.1);
    --accent-strong: #0369a1;

    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.1);

    --success: #16a34a;
    --success-soft: rgba(22, 163, 74, 0.12);

    --shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.08);

    --card-bg: #ffffff;
    --card-border: rgba(148, 163, 184, 0.45);
    --panel-bg: rgba(248, 250, 252, 0.95);
    --panel-border: rgba(148, 163, 184, 0.35);

    --topbar-bg: rgba(255, 255, 255, 0.8);
    --topbar-border: rgba(148, 163, 184, 0.35);
    --topbar-pill-bg: rgba(255, 255, 255, 0.85);
    --topbar-pill-border: rgba(148, 163, 184, 0.45);
    --topbar-pill-hover-bg: #dbeafe;
    --topbar-pill-active-bg: #dbeafe;
    --topbar-menu-bg: #ffffff;
    --topbar-menu-border: rgba(148, 163, 184, 0.35);
    --topbar-mobile-bg: #ffffff;

    --footer-bg: rgba(248, 250, 252, 0.95);
    --footer-border: rgba(148, 163, 184, 0.2);

    --scroll-track: rgba(226, 232, 240, 0.9);
    --scroll-thumb: linear-gradient(180deg, #94a3b8, #64748b);
    --scroll-thumb-border: rgba(226, 232, 240, 0.9);
    --color-scheme: light;

    --surface: #ffffff;
    --surface-2: #f1f5f9;

    --status-success-bg: rgba(22, 163, 74, 0.16);
    --status-success-text: #0f3d25;
    --status-success-border: rgba(22, 163, 74, 0.45);
    --status-warning-bg: rgba(245, 158, 11, 0.18);
    --status-warning-text: #6b3a00;
    --status-warning-border: rgba(245, 158, 11, 0.5);
    --status-neutral-bg: rgba(148, 163, 184, 0.18);
    --status-neutral-text: #475569;
    --status-neutral-border: rgba(148, 163, 184, 0.5);
}

/* Navegadores viejos de golpe no respetan :root -> mejor asegurar body también */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    color-scheme: var(--color-scheme);
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-base);
    background: var(--bg-body-gradient);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    background-attachment: fixed;
}

[data-theme="light"] a {
    color: var(--link);
}

[data-theme="light"] a:hover {
    text-decoration: underline;
}

/* Themed scrollbars so the reserved gutter matches the dark UI */
* {
    scrollbar-width: thin;
    scrollbar-color: #334155 rgba(15, 23, 42, 0.65);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 12px;
}

*::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 12px;
    border: 2px solid var(--scroll-thumb-border);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #22d3ee, #818cf8);
}

/* ============================
   App shell
   ============================ */

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    border-bottom: 1px solid var(--topbar-border);
    background: var(--topbar-bg);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 50;
}

.app-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
}

/* Nav */

/* Premium topbar */

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.topbar__logo {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.35);
}

.topbar__brand-text {
    font-size: 0.95rem;
    display: none;
}

.topbar__nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar__left,
.topbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.topbar__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--topbar-pill-border);
    background: var(--topbar-pill-bg);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.topbar__pill:hover {
    border-color: rgba(56, 189, 248, 0.7);
    color: var(--text-main);
    background: var(--topbar-pill-hover-bg);
}

.topbar__pill.is-active {
    border-color: rgba(56, 189, 248, 0.8);
    color: var(--text-main);
    background: var(--topbar-pill-active-bg);
}

.topbar__pill--user {
    max-width: 220px;
}

.topbar__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.25);
    border: 1px solid rgba(56, 189, 248, 0.7);
    color: #e0f2fe;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.topbar__user-email {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__chevron {
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.topbar__group {
    position: relative;
    display: inline-flex;
}

.topbar__group.is-active > .topbar__pill {
    border-color: rgba(56, 189, 248, 0.65);
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.75);
}

.topbar__group.is-open .topbar__chevron {
    transform: rotate(180deg);
}

.topbar__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 220px;
    border-radius: 14px;
    border: 1px solid var(--topbar-menu-border);
    background: var(--topbar-menu-bg);
    padding: 0.6rem;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.35);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 40;
}

.topbar__group.is-open .topbar__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.topbar__menu--mega {
    min-width: min(760px, 90vw);
}

.topbar__menu--right {
    right: 0;
    left: auto;
}

.topbar__menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.topbar__menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.12s ease, color 0.12s ease;
    border: 1px solid transparent;
}

.topbar__menu-item:hover,
.topbar__menu-item:focus-visible {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-main);
}

.topbar__menu-item.is-active {
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(14, 165, 233, 0.2);
    color: #f8fafc;
}

.topbar__menu-button {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.topbar__menu-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.5);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}

.topbar__menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.topbar__menu-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.topbar__menu-heading {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.topbar__lang-form {
    margin: 0;
}

.topbar__pill--lang {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.topbar__lang-divider {
    opacity: 0.5;
}

.topbar__lang-current {
    font-weight: 700;
}

.topbar__pill--theme {
    padding: 0.35rem 0.6rem;
}

.theme-icon {
    width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
}

.theme-icon svg {
    width: 18px;
    height: 18px;
}

html[data-theme="dark"] .theme-icon--dark,
html[data-theme="light"] .theme-icon--light {
    display: inline-flex;
}

.topbar__toggle {
    display: none;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
}

.topbar__toggle-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.topbar__toggle-icon span {
    width: 18px;
    height: 2px;
    background: #e2e8f0;
    border-radius: 999px;
    display: block;
}

.topbar__mobile {
    display: none;
    border-top: 1px solid var(--topbar-border);
    background: var(--topbar-mobile-bg);
    padding: 0.75rem 1rem 1rem;
}

.topbar__mobile-inner {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.topbar__mobile-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.topbar__mobile-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

.topbar__mobile-link {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}

.topbar__mobile-link.is-active {
    color: #e0f2fe;
}

.topbar__mobile-link-button {
    background: none;
    border: none;
    text-align: left;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.topbar__mobile-summary {
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.topbar__mobile-summary::-webkit-details-marker {
    display: none;
}

.topbar__mobile-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

@media (min-width: 1024px) {
    .topbar__brand-text {
        display: inline;
    }
}

@media (max-width: 1024px) {
    .app-header-inner {
        min-height: 56px;
    }

    .topbar__nav,
    .topbar__right {
        display: none;
    }

    .topbar__toggle {
        display: inline-flex;
    }

    .topbar__mobile.is-open {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar__menu,
    .topbar__pill,
    .topbar__chevron {
        transition: none;
    }
}

/* Layout main & footer */

.app-main {
    flex: 1;
    min-height: 0; /* allow overflow scrolling within the flex parent */
    padding: 1.5rem 1rem 2rem;
    overflow: auto;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Footer */

.app-footer {
    font-size: 0.8rem;
    color: var(--text-soft);
    text-align: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--footer-border);
    background: var(--footer-bg);
}


.app-footer .footer-link {
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  font-weight: 500;
  opacity: 0.9;
}

.app-footer .footer-link:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

.app-footer .footer-sep {
  opacity: 0.5;
}

/* --- Legal pages (Privacy/Cookies) --- */
/* If you wrap the policy content (next step), these help unify visuals */
.legal-policy a,
.legal-policy [data-custom-class="link"],
.legal-policy [data-custom-class="link"] * {
  text-decoration: none !important;
}

/* ============================
   Typography helpers
   ============================ */

.page-title {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.15rem;
}

.page-subtitle {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    color: var(--text-soft);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================
   Cards
   ============================ */

.card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1rem 1.1rem;
    margin-bottom: 1rem;
}

.summary-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.summary-card-meta {
    font-size: 0.82rem;
    color: var(--text-soft);
}

.card-narrow {
    max-width: 620px;
    margin: 1rem auto 0;
}

.card-left {
    margin-left: 0;
    margin-right: auto;
}


/* ============================
   Buttons
   ============================ */

.btn {
    border: none;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: transform 0.12s ease-out, box-shadow 0.18s ease-out,
                background 0.25s ease-out, color 0.2s ease-out,
                filter 0.25s ease-out;
    font-weight: 600;
}

.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
}

.btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #0b1120;
    box-shadow: 0 10px 22px rgba(8, 47, 73, 0.65);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(8, 47, 73, 0.9);
}

.btn-cta {
    background: linear-gradient(130deg, #22d3ee 0%, #6366f1 50%, #a855f7 100%);
    color: #0b1120;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(79, 70, 229, 0.45);
    filter: saturate(1.05);
}

.btn-cta:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 16px 36px rgba(99, 102, 241, 0.6);
    filter: brightness(1.02);
}

.btn-secondary {
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-main);
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.btn-secondary:hover {
    background: rgba(30, 41, 59, 0.95);
    transform: translateY(-1px);
}

.btn-clock {
    position: relative;
    overflow: hidden;
    color: #0b1120;
    background: linear-gradient(120deg, #22c55e, #0ea5e9);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.35);
    animation: clockPulse 3.4s ease-in-out infinite;
}

.btn-clock::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 55%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.btn-clock:hover::after {
    opacity: 0.18;
}

.btn-clock:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(14, 165, 233, 0.55);
}

.btn-clock.is-clocked-in {
    background: linear-gradient(120deg, #fb923c, #ef4444);
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.35);
    animation: clockPulseWarm 3.4s ease-in-out infinite;
}

@keyframes clockPulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.08); }
    100% { filter: brightness(1); }
}

@keyframes clockPulseWarm {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
    100% { filter: brightness(1); }
}

/* Por si sigues usando el inline class="btn btn-sm btn-secondary" en el logout */
button.btn,
input[type="submit"].btn {
    font-family: var(--font-base);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.65;
    cursor: not-allowed;
    filter: grayscale(0.2);
    transform: none;
    box-shadow: none;
}

.clock-card {
    margin-bottom: 1.5rem;
}

.clock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.clock-copy {
    flex: 1;
    margin: 0;
    min-width: 220px;
}

.clock-action {
    display: flex;
    align-items: center;
}

@media (max-width: 640px) {
    .clock-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .clock-action {
        width: 100%;
    }
}

/* ============================
   Forms
   ============================ */

.form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.form-actions {
    margin-top: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.form-input,
.form-select,
.form-textarea {
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-main);
    font-family: var(--font-base);
    font-size: 0.9rem;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4);
}

.form-textarea {
    resize: vertical;
}

.form-select-sm {
    padding: 0.3rem 0.45rem;
    font-size: 0.82rem;
}

.form-input-sm {
    padding: 0.3rem 0.45rem;
    font-size: 0.82rem;
    width: 88px;
}

/* Para inputs por defecto si tienen sólo estilos inline de antes */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    font-family: var(--font-base);
    font-size: 0.9rem;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
}

[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.6;
}

/* ============================
   Admin edit layouts
   ============================ */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-soft);
    margin-bottom: 0.45rem;
}

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

.breadcrumb a:hover {
    color: var(--text-main);
}

.breadcrumb-sep {
    opacity: 0.55;
}

.page-header .header-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.admin-contract-layout,
.admin-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.admin-contract-card,
.admin-edit-card {
    padding: 1.25rem 1.25rem 0.85rem;
}

.admin-contract-summary-card,
.admin-edit-summary-card {
    padding: 1.1rem;
}

.contract-form,
.admin-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contract-section,
.admin-edit-section {
    border-radius: var(--radius-lg);
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    padding: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contract-section-header,
.admin-edit-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.contract-section-title,
.admin-edit-section-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.contract-section-body,
.admin-edit-section-body {
    display: grid;
    gap: 0.9rem;
}

.contract-section-grid,
.admin-edit-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contract-inline-note {
    color: var(--text-soft);
    font-size: 0.8rem;
    margin-left: 0.35rem;
}

.contract-inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.contract-progress {
    margin-top: 0.5rem;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.contract-progress > span {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    transition: width 0.2s ease;
}

.contract-actions,
.admin-edit-actions {
    position: sticky;
    bottom: 0;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--panel-border);
    background: var(--card-bg);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    z-index: 2;
}

.contract-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.contract-time-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.contract-time-note {
    font-size: 0.8rem;
    color: var(--text-soft);
}

.contract-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface-alt);
    min-height: 44px;
}

.contract-toggle input {
    appearance: none;
    width: 38px;
    height: 20px;
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
    outline: none;
}

.contract-toggle input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--bg-surface);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
    transition: transform 0.2s ease;
}

.contract-toggle input:checked {
    background: var(--accent);
}

.contract-toggle input:checked::after {
    transform: translateX(18px);
}

.contract-toggle input:focus-visible {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
}

.contract-toggle-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.contract-chip,
.edit-chip {
    border-color: rgba(14, 165, 233, 0.45);
    background: var(--accent-soft);
    color: var(--text-main);
    font-weight: 600;
}

.contract-summary-header,
.impact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.contract-summary-list,
.impact-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.contract-summary-item,
.impact-item {
    border-radius: var(--radius-md);
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contract-summary-label,
.impact-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
}

.contract-summary-value,
.impact-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
}

.contract-summary-meta,
.impact-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.contract-form .form-input,
.contract-form .form-select,
.admin-edit-form .form-input,
.admin-edit-form .form-select {
    min-height: 44px;
}

.contract-form .form-input.is-disabled {
    opacity: 0.6;
}

.admin-edit-card .form-label {
    color: var(--text-main);
    font-weight: 600;
}

.admin-edit-card .form-input:focus,
.admin-edit-card .form-select:focus,
.admin-edit-card .form-textarea:focus {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4);
}

.admin-edit-card .form-textarea {
    min-height: 110px;
}

.admin-edit-card .form-hint {
    font-size: 0.82rem;
    color: var(--text-soft);
}

.impact-warning {
    border-radius: var(--radius-md);
    border: 1px solid rgba(248, 113, 113, 0.5);
    background: var(--danger-soft);
    color: var(--text-main);
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
}

.impact-warning strong {
    color: var(--danger);
}

.impact-note {
    font-size: 0.8rem;
    color: var(--text-soft);
    margin-top: 0.25rem;
}

.segmented {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface-alt);
}

.segmented-option {
    position: relative;
}

.segmented-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.segmented-option input:checked + span {
    background: var(--accent-soft);
    color: var(--text-main);
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.4);
}

.segmented-option input:focus-visible + span {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4);
}

.weekday-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.weekday-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.weekday-chip {
    position: relative;
}

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

.weekday-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
}

.weekday-chip input:checked + span {
    border-color: rgba(14, 165, 233, 0.65);
    background: var(--accent-soft);
    color: var(--text-main);
}

.weekday-chip input:focus-visible + span {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
}

.scope-panel {
    display: none;
    gap: 0.5rem;
    flex-direction: column;
}

.scope-panel.is-active {
    display: flex;
}

.auto-rule-layout .admin-edit-section-body {
    gap: 1rem;
}

@media (max-width: 980px) {
    .admin-contract-layout,
    .admin-edit-layout {
        grid-template-columns: 1fr;
    }

    .contract-section-grid,
    .admin-edit-section-grid {
        grid-template-columns: 1fr;
    }

    .contract-actions,
    .admin-edit-actions {
        position: static;
    }
}

@media (max-width: 640px) {
    .contract-time-row {
        align-items: flex-start;
    }
}

/* ============================
   Admin Password Reset
   ============================ */

.password-reset-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.password-reset-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.password-reset-search {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.password-reset-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.password-search-results {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(2, 6, 23, 0.8);
    max-height: 280px;
    overflow: auto;
}

.password-search-item {
    display: block;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: var(--text-main);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    transition: background 0.2s ease;
}

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

.password-search-item:hover {
    background: rgba(56, 189, 248, 0.12);
}

.password-search-name {
    font-weight: 600;
    font-size: 0.92rem;
}

.password-search-email {
    font-size: 0.82rem;
    color: var(--text-soft);
}

.password-search-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.password-search-empty {
    padding: 0.7rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.selected-user-panel {
    border-radius: var(--radius-md);
    border: 1px dashed rgba(148, 163, 184, 0.45);
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.65);
    margin-bottom: 0.75rem;
}

.selected-user-panel.has-selection {
    border-style: solid;
    border-color: rgba(56, 189, 248, 0.4);
}

.selected-user-name {
    font-size: 1rem;
    font-weight: 600;
}

.selected-user-email {
    font-size: 0.85rem;
    color: var(--text-soft);
}

.selected-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.password-reset-result {
    grid-column: 1 / -1;
}

.password-copy {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.08);
}

.password-copy code {
    font-size: 0.95rem;
    color: #e0f2fe;
    background: transparent;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-soft);
}

.btn-ghost:hover {
    border-color: rgba(56, 189, 248, 0.6);
    color: #e0f2fe;
}

@media (max-width: 980px) {
    .password-reset-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================
   Admin Features (Plan & Modules)
   ============================ */

.features-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chip-muted {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-soft);
}

.chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.features-card {
    position: relative;
}

.features-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
}

.feature-card {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-lg);
    padding: 0.9rem;
    background: rgba(2, 6, 23, 0.7);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.feature-card-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.feature-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.feature-key {
    font-size: 0.75rem;
    color: var(--text-soft);
}

.feature-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.feature-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}

.toggle-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.feature-note {
    font-size: 0.75rem;
    color: var(--text-soft);
}

.features-savebar {
    position: sticky;
    bottom: 0;
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    z-index: 2;
}

.features-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.features-save-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.unsaved-indicator {
    font-size: 0.82rem;
    color: var(--text-soft);
}

.unsaved-indicator.is-dirty {
    color: #fbbf24;
}

.features-users-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.features-users-tools {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.features-users-table td {
    vertical-align: middle;
}

.features-user-header {
    display: grid;
    gap: 0.75rem;
}

.features-user-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.features-user-hint {
    margin-top: -0.25rem;
}

.feature-base {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.feature-override-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.feature-locked {
    opacity: 0.7;
}

.user-features-grid .feature-card {
    min-height: 220px;
}

/* ============================
   Admin Documents
   ============================ */

.documents-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.documents-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.documents-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.documents-filter-form,
.documents-upload-form,
.documents-folder-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.documents-filter-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.chip-active {
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(56, 189, 248, 0.12);
    color: #e0f2fe;
}

.user-search-results {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(2, 6, 23, 0.8);
    max-height: 220px;
    overflow: auto;
}

.user-search-item {
    display: block;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
    color: var(--text-main);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    transition: background 0.2s ease;
}

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

.user-search-item:hover {
    background: rgba(56, 189, 248, 0.12);
}

.user-search-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.user-search-email {
    font-size: 0.8rem;
    color: var(--text-soft);
}

.user-search-empty {
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
    color: var(--text-soft);
}

.inline-check {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
}

.folder-list {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.folder-item {
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-md);
    background: rgba(148, 163, 184, 0.12);
    font-size: 0.82rem;
}

.documents-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.documents-table-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.documents-filter-buttons .btn.is-active {
    border-color: rgba(56, 189, 248, 0.8);
    color: #e0f2fe;
}

.documents-table .doc-title {
    font-weight: 600;
}

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

.empty-state {
    padding: 1rem 0;
    color: var(--text-soft);
}

@media (max-width: 980px) {
    .documents-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================
   Admin Worker Types
   ============================ */

.worker-types-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.worker-types-actions-left,
.worker-types-actions-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.worker-types-table .truncate {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.worker-types-table td {
    vertical-align: top;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
}

/* Admin shifts filters */
.admin-shifts-filters {
    margin-bottom: 1rem;
    position: sticky;
    top: 0.75rem;
    z-index: 3;
}

.admin-leaves-filters {
    margin-bottom: 1rem;
    position: sticky;
    top: 0.75rem;
    z-index: 3;
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.filters-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.date-field {
    position: relative;
    display: flex;
    align-items: center;
}

.date-icon {
    position: absolute;
    left: 0.55rem;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.date-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.date-input {
    padding-left: 2rem;
    min-width: 160px;
}

.date-presets {
    margin-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-bar {
    position: sticky;
    top: 84px;
    z-index: 8;
    backdrop-filter: blur(6px);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.chip-primary {
    color: #e0f2fe;
    border-color: rgba(14, 165, 233, 0.7);
    background: rgba(14, 165, 233, 0.16);
}

.chip-close {
    background: transparent;
    border: none;
    color: inherit;
    margin-left: 0.35rem;
    cursor: pointer;
    font-weight: 700;
}

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

.kpi-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: var(--radius-md);
    padding: 0.85rem;
}

.kpi-label {
    font-size: 0.78rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.table-sticky thead th {
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.96);
    z-index: 1;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--text-soft);
    font-size: 0.85rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.badge-warn {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.6);
    background: rgba(248, 113, 113, 0.15);
}

.warning {
    color: #fecaca;
}

.muted {
    color: var(--text-soft);
}

.sortable {
    cursor: pointer;
}

.sortable[data-sort-dir="asc"]::after {
    content: " ▲";
    font-size: 0.7rem;
    color: var(--text-soft);
}

.sortable[data-sort-dir="desc"]::after {
    content: " ▼";
    font-size: 0.7rem;
    color: var(--text-soft);
}

.validation-message {
    color: #fecaca;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

.month-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.summary-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.summary-search {
    flex: 1;
    min-width: 220px;
}

.summary-count {
    font-size: 0.85rem;
    color: var(--text-soft);
}

/* ============================
   Tables
   ============================ */

.table-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.table-fixed {
    table-layout: fixed;
}

.table thead {
    background: rgba(15, 23, 42, 0.95);
}

.table th,
.table td {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.9);
    text-align: left;
    vertical-align: top;
}

.table th {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    position: sticky;
    top: 0;
    z-index: 2;
}

.table tbody tr:nth-child(even) {
    background-color: rgba(15, 23, 42, 0.6);
}

.table tbody tr:hover {
    background-color: rgba(30, 64, 175, 0.08);
}

.table-leaves {
    table-layout: auto;
}

.table-leaves td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.table-leaves th {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.table-leaves .col-user {
    min-width: 200px;
}

.table-leaves .col-dates {
    min-width: 160px;
}

.table-leaves .col-actions {
    min-width: 190px;
}

.table-leaves .table-actions .btn {
    min-width: 88px;
}

.table-auto-rules th {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.rule-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.day-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.7);
}

.day-chip-all {
    color: #f8fafc;
    border-color: rgba(56, 189, 248, 0.6);
    background: rgba(56, 189, 248, 0.18);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-main);
}

.badge-type {
    border-color: rgba(59, 130, 246, 0.45);
    color: #93c5fd;
}

.badge-user {
    border-color: rgba(14, 165, 233, 0.45);
    color: #bae6fd;
}

.badge-all {
    border-color: rgba(148, 163, 184, 0.5);
    color: #e2e8f0;
}

.toggle-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    transition: background 0.2s ease;
    border: 1px solid rgba(148, 163, 184, 0.5);
}

.switch .slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 2px;
    background: #0f172a;
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.switch input:checked + .slider {
    background: rgba(56, 189, 248, 0.6);
    border-color: rgba(56, 189, 248, 0.8);
}

.switch input:checked + .slider::before {
    transform: translateX(20px);
    background: #f8fafc;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.status-pill-success {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.5);
    color: #bbf7d0;
}

[data-theme="light"] .status-pill-success {
    color: #166534;
}

.status-pill-muted {
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.5);
    color: var(--text-muted);
}

.dt-range {
    display: grid;
    gap: 0.2rem;
}

.dt-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dt-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.status-requested {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
}

.status-approved {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.35);
}

.status-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.35);
}

.status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
}

.status-cancelled {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5f5;
    border-color: rgba(148, 163, 184, 0.35);
}

.row-details {
    position: relative;
}

.row-details summary {
    list-style: none;
}

.row-details summary::-webkit-details-marker {
    display: none;
}

.row-details-body {
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.78rem;
    color: var(--text-soft);
    display: grid;
    gap: 0.25rem;
}

.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.table-toolbar-left,
.table-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.table-toolbar-right .pagination-form {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    padding: 0.3rem 0.5rem;
}

.table-toolbar-right .form-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.table-toolbar-right .form-select,
.table-toolbar-right .form-input {
    min-width: 80px;
}

@media (max-width: 1100px) {
    .table-toolbar {
        align-items: flex-start;
    }
}

.table-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

.dt-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dt-date {
    font-weight: 600;
    color: var(--text-main);
}

.dt-time {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.dt-empty {
    color: var(--text-muted);
}

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

.pagination-summary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pagination-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.pagination-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.page-ellipsis {
    color: var(--text-muted);
    padding: 0 0.2rem;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.pagination-button.is-disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: default;
}

.pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.page-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: var(--text-muted);
    text-decoration: none;
    background: rgba(15, 23, 42, 0.7);
    transition: transform 0.12s ease, border-color 0.15s ease, color 0.15s ease;
    font-weight: 600;
}

.page-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.6);
    color: #e5e7eb;
}

.page-chip-active {
    border-color: rgba(56, 189, 248, 0.8);
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.3), transparent 55%),
                radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.35), transparent 60%),
                #0f172a;
    color: #f8fafc;
}

/* ============================
   Flash messages
   ============================ */

.flash {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.flash-error {
    background: var(--danger-soft);
    border: 1px solid rgba(248, 113, 113, 0.8);
    color: #fecaca;
}

.flash-success {
    background: var(--success-soft);
    border: 1px solid rgba(34, 197, 94, 0.8);
    color: #bbf7d0;
}

.flash-info {
    background: var(--accent-soft);
    border: 1px solid rgba(56, 189, 248, 0.8);
    color: #e0f2fe;
}

/* ============================
   Misc helpers
   ============================ */

.text-muted {
    color: var(--text-soft);
    font-size: 0.85rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: var(--text-muted);
}

.chip-today {
    color: #f0f9ff;
    border-color: rgba(14, 165, 233, 0.8);
    background: rgba(14, 165, 233, 0.12);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================
   Status & priority chips
   ============================ */

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--text-muted);
    text-transform: uppercase;
}

.status-todo {
    border-color: rgba(148, 163, 184, 0.5);
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
}

.status-in-progress {
    border-color: rgba(14, 165, 233, 0.6);
    color: #bae6fd;
    background: rgba(14, 165, 233, 0.12);
}

.status-done {
    border-color: rgba(34, 197, 94, 0.7);
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.14);
}

.status-cancelled {
    border-color: rgba(248, 113, 113, 0.65);
    color: #fecaca;
    background: rgba(248, 113, 113, 0.14);
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid transparent;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18);
}

.status-dot.status-todo {
    background: rgba(148, 163, 184, 0.9);
    border-color: rgba(148, 163, 184, 0.8);
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18);
}

.status-dot.status-in-progress {
    background: rgba(250, 204, 21, 0.95);
    border-color: rgba(234, 179, 8, 0.9);
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.24);
}

.status-dot.status-done {
    background: rgba(34, 197, 94, 0.95);
    border-color: rgba(34, 197, 94, 0.85);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.24);
}

.status-dot.status-cancelled {
    background: rgba(249, 115, 22, 0.95);
    border-color: rgba(234, 88, 12, 0.85);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.24);
}

/* Legacy aliases used across templates */
.status-approved {
    border-color: rgba(34, 197, 94, 0.7);
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.14);
}

.status-rejected,
.status-cancelled {
    border-color: rgba(248, 113, 113, 0.65);
    color: #fecaca;
    background: rgba(248, 113, 113, 0.14);
}

.status-requested,
.status-in-progress {
    border-color: rgba(14, 165, 233, 0.6);
    color: #bae6fd;
    background: rgba(14, 165, 233, 0.12);
}

.priority-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #e5e7eb;
}

.priority-low {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.5);
    color: #bbf7d0;
}

.priority-medium {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.55);
    color: #bae6fd;
}

.priority-high {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.6);
    color: #fecaca;
}

/* ============================
   Calendar view
   ============================ */

.calendar-card {
    padding: 1.05rem;
}

.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.calendar-month-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.calendar-month-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.task-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.35);
    width: max-content;
}

.task-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.task-view-link.is-active {
    background: rgba(14, 165, 233, 0.25);
    color: #e0f2fe;
    border: 1px solid rgba(14, 165, 233, 0.7);
}

.calendar-month-label {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.calendar-month-subtitle {
    font-size: 0.9rem;
    color: var(--text-soft);
}

.calendar-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.calendar-filters .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 180px;
}

.calendar-filter-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
}

.calendar-cell {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-md);
    padding: 0.7rem;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.2s ease, transform 0.12s ease;
}

.calendar-cell:hover {
    border-color: rgba(56, 189, 248, 0.55);
    transform: translateY(-1px);
}

.calendar-cell-muted {
    opacity: 0.6;
}

.calendar-cell-today {
    border-color: rgba(14, 165, 233, 0.9);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.12);
    background: radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.16), transparent 40%),
                rgba(15, 23, 42, 0.8);
}

.calendar-cell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-cell-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.calendar-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-weight: 700;
    color: #bae6fd;
    border: 1px solid rgba(14, 165, 233, 0.5);
    background: rgba(14, 165, 233, 0.1);
    text-decoration: none;
    font-size: 0.9rem;
}

.calendar-day-number {
    font-weight: 700;
    font-size: 1rem;
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.calendar-event {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.45rem 0.5rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.2);
    word-break: break-word;
    overflow: hidden;
    text-align: left;
    color: inherit;
    border: 1px solid rgba(148, 163, 184, 0.2);
    cursor: pointer;
    width: 100%;
    font: inherit;
}

.calendar-event:hover {
    border-color: rgba(56, 189, 248, 0.55);
}

.event-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 0.25rem;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}

.priority-high .event-dot,
.event-dot.priority-high {
    background: #f97373;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.2);
}

.priority-medium .event-dot,
.event-dot.priority-medium {
    background: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16);
}

.priority-low .event-dot,
.event-dot.priority-low {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.calendar-event-body {
    min-width: 0;
}

.calendar-event-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
    color: #e5e7eb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-soft);
}

.calendar-assignee {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.calendar-time {
    color: #e0f2fe;
    font-weight: 600;
}

.calendar-empty {
    color: var(--text-soft);
    font-size: 0.8rem;
    opacity: 0.75;
}

.link-button {
    background: none;
    border: none;
    color: #7dd3fc;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.day-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
}

.day-modal[hidden] {
    display: none;
}

.day-modal-dialog {
    background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.14), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: var(--radius-lg);
    padding: 1rem;
    width: min(90vw, 720px);
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.day-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.day-modal-label {
    color: var(--text-soft);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.day-modal-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.day-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.day-modal-item {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    text-align: left;
    cursor: pointer;
    width: 100%;
    font: inherit;
}

.day-modal-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.day-modal-item-title {
    font-weight: 700;
    font-size: 1rem;
}

.day-modal-item-meta {
    color: var(--text-soft);
    font-size: 0.9rem;
    margin: 0.2rem 0;
}

.day-modal-item-desc {
    color: var(--text-main);
    font-size: 0.92rem;
    white-space: pre-wrap;
    margin-bottom: 0.5rem;
}

.day-modal-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.status-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.status-inline-label {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.form-select-compact {
    padding: 0.25rem 0.5rem;
    min-width: 140px;
}

/* ============================
   Task form layout
   ============================ */

.task-form-card {
    max-width: 1100px;
    margin: 0 auto;
}

.task-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.task-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1rem 1.25rem;
}

.task-form-main,
.task-form-side {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.task-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.task-form-actions {
    display: flex;
    gap: 0.6rem;
}

.task-form-divider {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.form-textarea-lg {
    min-height: 180px;
}

.form-input-sm {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

.btn-xs {
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
}

.quick-duration {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.quick-duration-label {
    font-size: 0.78rem;
    color: var(--text-soft);
}

.task-assignees-card {
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.25);
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.task-assignees-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.task-assignees-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.assignee-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.assignee-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    color: #e2e8f0;
    border: 1px solid rgba(14, 165, 233, 0.5);
    background: rgba(14, 165, 233, 0.12);
}

.assignee-chip-muted {
    border-color: rgba(148, 163, 184, 0.4);
    color: var(--text-soft);
    background: rgba(148, 163, 184, 0.12);
}

.assignee-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 260px;
    overflow: auto;
    padding-right: 0.25rem;
}

.assignee-item {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
}

.tasks-kpi-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.calendar-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.calendar-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #e0f2fe;
    background: rgba(14, 165, 233, 0.2);
    border: 1px solid rgba(14, 165, 233, 0.5);
}

.calendar-event-hidden {
    display: none;
}

/* ============================
   Task list (user view)
   ============================ */

.tasks-list-view {
    margin-top: 1rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.tasks-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.tasks-list-search {
    min-width: 220px;
    flex: 1;
}

.tasks-list-day {
    margin-bottom: 1rem;
}

.tasks-list-day-header {
    position: sticky;
    top: 84px;
    z-index: 4;
    background: rgba(2, 6, 23, 0.85);
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.25);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.tasks-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tasks-list-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    cursor: pointer;
}

.tasks-list-row:hover {
    border-color: rgba(56, 189, 248, 0.5);
}

.tasks-list-time {
    font-weight: 600;
    color: #e0f2fe;
    font-size: 0.85rem;
}

.tasks-list-title {
    font-weight: 600;
    color: #f8fafc;
}

.tasks-list-meta {
    font-size: 0.82rem;
    color: var(--text-soft);
}

.tasks-list-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 900px) {
    .tasks-list-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
}

/* ============================
   Profile
   ============================ */

.profile-root {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.profile-card {
    margin-bottom: 0;
}

.profile-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.65rem;
}

.profile-help {
    margin: 0.25rem 0 0;
}

.field-error {
    min-height: 1rem;
    font-size: 0.78rem;
    color: #fecaca;
    margin-top: 0.25rem;
}

.profile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.6);
}

.profile-status {
    font-size: 0.85rem;
    color: var(--text-soft);
}

.profile-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ============================
   Light theme overrides
   ============================ */

[data-theme="light"] .calendar-cell,
[data-theme="light"] .calendar-event,
[data-theme="light"] .tasks-list-row,
[data-theme="light"] .doc-row {
    background: var(--surface);
    border-color: var(--border-subtle);
}

[data-theme="light"] .calendar-cell-today {
    border-color: rgba(14, 165, 233, 0.7);
    background: rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .calendar-empty {
    color: #64748b;
}

[data-theme="light"] .kpi-card {
    background: var(--surface);
    border-color: var(--border-subtle);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .summary-card-meta {
    color: var(--text-muted);
}

[data-theme="light"] .chip {
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

[data-theme="light"] .chip-active,
[data-theme="light"] .chip-primary {
    background: rgba(2, 132, 199, 0.14);
    color: #0b2b4b;
    border-color: rgba(2, 132, 199, 0.45);
}

[data-theme="light"] .task-modal-dialog,
[data-theme="light"] .day-modal-dialog,
[data-theme="light"] .leave-modal-dialog,
[data-theme="light"] .doc-modal-dialog {
    background: var(--surface);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

[data-theme="light"] .topbar__menu-item:hover,
[data-theme="light"] .topbar__menu-item:focus-visible {
    background: rgba(148, 163, 184, 0.18);
}

[data-theme="light"] .topbar__menu-item.is-active {
    background: rgba(14, 165, 233, 0.14);
    color: #0369a1;
    font-weight: 600;
}

[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.25);
}

[data-theme="light"] .btn-primary:hover {
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.35);
}

[data-theme="light"] .btn-secondary {
    background: #ffffff;
    color: var(--text-main);
    border-color: var(--border-subtle);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .btn-secondary:hover {
    background: var(--surface-2);
}

[data-theme="light"] .btn-ghost {
    color: var(--text-muted);
    border-color: var(--border-subtle);
}

[data-theme="light"] .btn-ghost:hover {
    color: var(--text-main);
    background: var(--surface-2);
}

[data-theme="light"] .doc-viewer-frame {
    background: var(--bg-surface-alt);
    border-color: var(--border-subtle);
}

[data-theme="light"] .doc-row {
    border-color: var(--border-subtle);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .doc-row:hover {
    border-color: rgba(2, 132, 199, 0.45);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .doc-row.is-pending {
    border-color: var(--status-warning-border);
    box-shadow: inset 3px 0 0 var(--status-warning-border);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), transparent 60%);
}

[data-theme="light"] .doc-title {
    color: var(--text-main);
}

[data-theme="light"] .doc-meta,
[data-theme="light"] .doc-view-meta {
    color: var(--text-muted);
}

[data-theme="light"] .doc-folder,
[data-theme="light"] .doc-view-folder {
    color: var(--text-muted);
}

[data-theme="light"] .doc-dot {
    color: var(--text-soft);
}

[data-theme="light"] .doc-banner,
[data-theme="light"] .doc-banner-success {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-text);
}

[data-theme="light"] .status-approved {
    background: var(--status-success-bg);
    color: var(--status-success-text);
    border-color: var(--status-success-border);
}

[data-theme="light"] .status-warning {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
    border-color: var(--status-warning-border);
}

[data-theme="light"] .status-neutral,
[data-theme="light"] .status-cancelled {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
    border-color: var(--status-neutral-border);
}

[data-theme="light"] .status-requested {
    background: rgba(59, 130, 246, 0.16);
    color: #1e3a8a;
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="light"] .status-rejected {
    background: rgba(220, 38, 38, 0.14);
    color: #7f1d1d;
    border-color: rgba(220, 38, 38, 0.35);
}

[data-theme="light"] .doc-view-toolbar {
    background: var(--surface);
    border-color: var(--border-subtle);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .doc-gate-meta {
    background: var(--surface-2);
    border-color: var(--border-subtle);
}

[data-theme="light"] .doc-gate-value {
    color: var(--text-main);
}

/* --- Tables: blue header, light rows --- */

[data-theme="light"] .table thead {
    background: #1e3a5f;
}

[data-theme="light"] .table th {
    color: #ffffff;
    border-bottom-color: #1e3a5f;
}

[data-theme="light"] .table th,
[data-theme="light"] .table td {
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

[data-theme="light"] .table tbody tr:hover {
    background-color: rgba(14, 165, 233, 0.06);
}

/* --- Pagination --- */

[data-theme="light"] .page-chip {
    background: #ffffff;
    border-color: #d1d9e3;
    color: var(--text-main);
}

[data-theme="light"] .page-chip:hover {
    border-color: #0284c7;
    color: #0284c7;
}

[data-theme="light"] .page-chip-active {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

/* --- Navbar pills --- */

[data-theme="light"] .topbar__pill:hover,
[data-theme="light"] .topbar__pill.is-active,
[data-theme="light"] .topbar__group.is-active > .topbar__pill,
[data-theme="light"] .topbar__group.is-open > .topbar__pill {
    background: #dbeafe;
    border-color: rgba(2, 132, 199, 0.55);
    color: #0c4a6e;
}

[data-theme="light"] .topbar__user-email {
    color: #0f172a;
}

[data-theme="light"] .topbar__avatar {
    background: rgba(2, 132, 199, 0.25);
    border-color: rgba(2, 132, 199, 0.6);
    color: #0c4a6e;
}

/* --- Dropdown menu --- */

[data-theme="light"] .topbar__menu {
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

/* --- Language toggle --- */

[data-theme="light"] .topbar__lang-divider {
    color: var(--text-soft);
}

[data-theme="light"] .topbar__lang-current {
    color: var(--text-main);
}

/* --- Search results & placeholders: light blue --- */

[data-theme="light"] .password-search-results,
[data-theme="light"] .user-search-results {
    background: #f0f7ff;
    border-color: #bfdbfe;
}

[data-theme="light"] .password-search-item:hover,
[data-theme="light"] .user-search-item:hover {
    background: rgba(14, 165, 233, 0.1);
}

[data-theme="light"] .selected-user-panel {
    background: #f0f7ff;
    border-color: #bfdbfe;
}

[data-theme="light"] .selected-user-panel.has-selection {
    border-color: rgba(14, 165, 233, 0.5);
    background: #f0f9ff;
}

/* --- Badges: stronger colors for light mode --- */

[data-theme="light"] .badge-type {
    color: #1e40af;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.12);
}

[data-theme="light"] .badge-user {
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.5);
    background: rgba(14, 165, 233, 0.12);
}

[data-theme="light"] .badge-all {
    color: #475569;
    border-color: rgba(148, 163, 184, 0.5);
    background: rgba(148, 163, 184, 0.15);
}

[data-theme="light"] .badge-warn {
    color: #991b1b;
    border-color: rgba(220, 38, 38, 0.5);
    background: rgba(220, 38, 38, 0.1);
}

/* --- Priority chips: stronger colors --- */

[data-theme="light"] .priority-high {
    color: #991b1b;
    border-color: rgba(220, 38, 38, 0.5);
    background: rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .priority-medium {
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.12);
}

[data-theme="light"] .priority-low {
    color: #065f46;
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.12);
}

/* --- Task list: visible titles --- */

[data-theme="light"] .task-list-title {
    color: var(--text-main);
}

[data-theme="light"] .tasks-list-title {
    color: var(--text-main);
}

[data-theme="light"] .tasks-list-time {
    color: #0369a1;
}

[data-theme="light"] .tasks-list-row {
    background: #ffffff;
    border-color: var(--border-subtle);
}

[data-theme="light"] .tasks-list-day-header {
    background: #f0f7ff;
    border-color: #bfdbfe;
    color: var(--text-main);
}

/* --- Calendar events: visible titles --- */

[data-theme="light"] .calendar-event-title {
    color: var(--text-main);
}

[data-theme="light"] .calendar-event {
    background: #ffffff;
    border-color: var(--border-subtle);
}

/* --- Calendar times --- */

[data-theme="light"] .calendar-time {
    color: #0369a1;
}

[data-theme="light"] .calendar-event-meta {
    color: var(--text-muted);
}

/* --- Direction chip (IN/OUT) --- */

[data-theme="light"] .direction-chip {
    color: #0c4a6e;
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(2, 132, 199, 0.4);
}

/* --- Secondary button active state --- */

[data-theme="light"] .btn-secondary.is-active {
    background: rgba(14, 165, 233, 0.14);
    color: #0c4a6e;
    border-color: rgba(2, 132, 199, 0.5);
}

/* --- Task view toggle --- */

[data-theme="light"] .task-view-link {
    color: var(--text-muted);
}

[data-theme="light"] .task-view-link.is-active {
    background: rgba(14, 165, 233, 0.18);
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.5);
}

/* --- Day chips --- */

[data-theme="light"] .day-chip {
    background: #f1f5f9;
    border-color: #d1d9e3;
    color: var(--text-muted);
}

[data-theme="light"] .day-chip-all {
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.5);
    background: rgba(14, 165, 233, 0.1);
}

/* --- Flash messages --- */

[data-theme="light"] .flash-error {
    color: #991b1b;
    border-color: rgba(220, 38, 38, 0.5);
    background: rgba(220, 38, 38, 0.08);
}

[data-theme="light"] .flash-success {
    color: #14532d;
    border-color: rgba(22, 163, 74, 0.5);
    background: rgba(22, 163, 74, 0.08);
}

[data-theme="light"] .flash-info {
    color: #0c4a6e;
    border-color: rgba(14, 165, 233, 0.5);
    background: rgba(14, 165, 233, 0.08);
}

/* --- Validation / warning --- */

[data-theme="light"] .validation-message {
    color: #dc2626;
}

[data-theme="light"] .warning {
    color: #dc2626;
}

/* --- Assignee name --- */

[data-theme="light"] .assignee-name {
    color: var(--text-main);
}

/* --- Folder items --- */

[data-theme="light"] .folder-item {
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.2);
}

/* --- Status chips --- */

[data-theme="light"] .status-todo {
    color: #475569;
    border-color: rgba(148, 163, 184, 0.5);
    background: rgba(148, 163, 184, 0.15);
}

/* --- CTA button in light mode --- */

[data-theme="light"] .btn-cta {
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}

/* --- Leave/absence dates in light blue --- */

[data-theme="light"] .leave-range-main {
    color: #0369a1;
}

.assignee-item:hover {
    border-color: rgba(56, 189, 248, 0.5);
}

.assignee-item input {
    margin-top: 0.2rem;
}

.assignee-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.assignee-name {
    font-weight: 600;
    color: #f8fafc;
}

.assignee-email {
    font-size: 0.82rem;
    color: var(--text-soft);
}

/* ============================
   Task list + modal
   ============================ */

.task-list-table {
    margin-top: 0.25rem;
}

.task-list-title {
    font-weight: 600;
    color: #f8fafc;
}

.task-list-meta {
    font-size: 0.85rem;
    color: var(--text-soft);
}

.task-list-date {
    font-weight: 600;
}

.task-list-time {
    font-size: 0.85rem;
    color: var(--text-soft);
}

.task-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.task-modal[hidden] {
    display: none;
}

.task-modal-dialog {
    background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.14), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: var(--radius-lg);
    padding: 1rem;
    width: min(92vw, 560px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.task-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.task-modal-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.task-modal-label {
    font-size: 0.75rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.task-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-modal-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.task-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    font-size: 0.9rem;
}

.task-modal-desc {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-main);
    white-space: pre-wrap;
}

.task-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.btn-danger {
    border-color: rgba(248, 113, 113, 0.6);
    color: #fecaca;
}

/* Responsive tweaks */

@media (max-width: 768px) {
    .app-header-inner {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .app-main {
        padding: 1rem 0.75rem 1.5rem;
    }

    .card {
        padding: 0.85rem 0.8rem 0.95rem;
    }

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

    .calendar-card {
        padding: 0.85rem;
    }

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

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

.app-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: #e5e7eb;
}

.app-logo-icon {
    height: 28px;     /* tweak as you like */
    width: auto;
    border-radius: 6px; /* or 0 if you prefer sharp */
}

/* ============================
   Login page
   ============================ */


.login-page {
    min-height: calc(100vh - 140px); /* header + footer area */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card {
    max-width: 980px;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    gap: 2.5rem;
    align-items: stretch;
}

/* Left panel with logo + tilt */
.login-visual {
    position: relative;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.4), transparent 55%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.55), transparent 60%),
        #020617;
    border: 1px solid rgba(148, 163, 184, 0.5);
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    transition:
        transform 180ms ease-out,
        box-shadow 180ms ease-out,
        border-color 180ms ease-out;
    box-shadow: 0 25px 50px -15px rgba(15, 23, 42, 0.85);
}

.login-logo {
    display: block;
    height: 80px;
    width: auto;
    margin-bottom: 1rem;
}

.login-brand {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.login-tagline {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-soft);
}

/* Right side: bigger form */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-form .form-field,
.login-form .form-row {
    width: 100%;
}

.login-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.login-actions .btn {
    min-width: 140px;
}

/* Stack on smaller screens */
@media (max-width: 900px) {
    .login-card {
        max-width: 640px;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .login-visual {
        order: -1;
        text-align: center;
    }

    .login-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .login-actions {
        justify-content: stretch;
    }

    .login-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================
   Error pages
   ============================ */

.error-page {
    min-height: calc(100vh - 140px); /* header + footer area */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.error-card {
    text-align: center;
    padding: 2.25rem 2rem 2.5rem;
}

.error-code {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.error-title {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.error-text {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    color: var(--text-soft);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

@media (max-width: 640px) {
    .error-card {
        padding: 1.75rem 1.4rem 2rem;
    }

    .error-code {
        font-size: 3rem;
    }
}

/* ============================
   Admin Users
   ============================ */

.admin-users-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.admin-users-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.action-menu {
    position: relative;
}

.action-menu-toggle {
    min-width: 44px;
    text-align: center;
    font-weight: 700;
}

.action-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    min-width: 190px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-md);
    padding: 0.35rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
    display: none;
    z-index: 10;
}

.action-menu.is-open .action-menu-list {
    display: block;
}

.action-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
}

.action-menu-item:hover {
    background: rgba(56, 189, 248, 0.12);
    color: #f8fafc;
}

.action-menu-form {
    margin: 0;
}

/* ============================
   Admin Infractions
   ============================ */

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.system-control-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.system-control-main {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.system-control-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.system-control-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    min-width: 220px;
}

.system-control-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.system-control-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.system-control-state {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.system-control-save {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.system-control-card .form-hint {
    font-size: 0.78rem;
    color: var(--text-soft);
}

.switch.switch-lg {
    width: 64px;
    height: 34px;
}

.switch.switch-lg .slider::before {
    width: 26px;
    height: 26px;
    top: 3px;
    left: 3px;
}

.switch.switch-lg input:checked + .slider::before {
    transform: translateX(28px);
}

.switch input:focus-visible + .slider {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5);
}

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

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

.kpi-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 0.35rem;
    color: var(--text-main);
}

.kpi-meta {
    font-size: 0.82rem;
    color: var(--text-soft);
}

.rules-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.rules-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rules-table {
    margin-bottom: 0.5rem;
}

.rules-cards {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}

.rule-card {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    padding: 0.9rem;
    background: var(--panel-bg);
    box-shadow: var(--shadow-soft);
}

.rule-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.rule-card-title {
    font-size: 1rem;
    font-weight: 600;
}

.rule-card-meta {
    margin-top: 0.35rem;
}

.rule-card-body {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.5rem;
}

.rule-card-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.88rem;
}

.rule-card-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rule-card-value {
    color: var(--text-main);
    text-align: right;
    flex: 1;
}

.empty-state {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
}

.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
}

.empty-state-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.empty-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.input-lg {
    min-height: 44px;
    padding: 0.5rem 0.9rem;
}

@media (max-width: 900px) {
    .rules-table {
        display: none;
    }

    .rules-cards {
        display: flex;
    }
}

@media (max-width: 700px) {
    .system-control-card {
        align-items: flex-start;
    }

    .system-control-actions,
    .system-control-toggle {
        align-items: flex-start;
    }

    .rule-card-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .rule-card-value {
        text-align: left;
    }
}

.user-lock {
    margin-left: 0.35rem;
    font-size: 0.8rem;
    opacity: 0.75;
}

/* ============================
   My Shifts
   ============================ */

.my-shifts-hero {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .my-shifts-hero {
        grid-template-columns: 1fr;
    }
}

.clock-widget {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.clock-widget-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.clock-widget-time {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.clock-widget-elapsed {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1rem;
}

.clock-widget-elapsed-value {
    font-size: 1.2rem;
    font-weight: 700;
}

.clock-widget-meta {
    font-size: 0.85rem;
    color: var(--text-soft);
}

.progress-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
    margin: 0.5rem 0;
}

.progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.7), rgba(34, 211, 238, 0.7));
    transition: width 0.2s ease;
}

.kpi-note {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.shift-row {
    cursor: pointer;
}

.shift-row:hover {
    background: rgba(30, 41, 59, 0.6);
}

.shift-row.is-open {
    background: rgba(15, 23, 42, 0.8);
}

.shift-details-row {
    display: none;
}

.shift-details-row.is-open {
    display: table-row;
}

.shift-details {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.8);
    font-size: 0.85rem;
    color: var(--text-soft);
    display: grid;
    gap: 0.35rem;
}

.direction-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #bae6fd;
    border: 1px solid rgba(14, 165, 233, 0.4);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ============================
   Admin Leaves: Create modal
   ============================ */

.admin-leaves-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.leave-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.leave-modal.is-open,
.leave-modal:target {
    display: flex;
}

.leave-modal-dialog {
    background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.14), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: var(--radius-lg);
    padding: 1rem;
    width: min(92vw, 560px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.leave-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.leave-modal-label {
    font-size: 0.75rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.leave-modal-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.leave-user-picker {
    position: relative;
}

.leave-user-results {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    padding: 0.35rem;
    display: none;
    max-height: 220px;
    overflow: auto;
    z-index: 2;
}

.leave-user-results.is-open {
    display: block;
}

.leave-user-result {
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 0.9rem;
}

.leave-user-result:hover {
    background: rgba(56, 189, 248, 0.12);
}

.leave-user-selected {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.leave-create-error {
    display: none;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.15);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.35);
    font-size: 0.85rem;
}

.leave-create-error.is-visible {
    display: block;
}

/* ============================
   User Leaves
   ============================ */

.leaves-balance-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.leaves-cta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
}

.leaves-progress {
    margin-top: 0.5rem;
}

.leaves-note {
    margin-top: 0.35rem;
}

.leave-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.leave-range-main {
    font-weight: 600;
    color: var(--text-main);
}

.leave-relative {
    display: block;
    font-size: 0.75rem;
    color: var(--text-soft);
    margin-top: 0.15rem;
}

.leave-new-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.2fr) minmax(260px, 0.8fr);
    gap: 1rem;
}

.leave-new-form {
    align-self: start;
}

.leave-summary {
    align-self: start;
    position: sticky;
    top: 100px;
}

.leave-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

.leave-summary-label {
    color: var(--text-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.leave-summary-status {
    margin: 0.6rem 0;
}

.leave-step {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.leave-step:last-child {
    border-bottom: none;
}

.leave-step-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.leave-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.leave-inline-error {
    display: none;
    margin-top: 0.45rem;
    font-size: 0.82rem;
    color: #fecaca;
}

.leave-inline-error.is-visible {
    display: block;
}

/* ============================
   My Documents
   ============================ */

.my-docs-header {
    align-items: flex-start;
}

.my-docs-kpis .kpi-card {
    min-height: 96px;
}

.my-docs-filter {
    padding: 0.85rem 1rem;
}

.my-docs-filter-inner {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.my-docs-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.my-docs-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.my-docs-search {
    min-width: 220px;
    flex: 1;
}

.my-docs-list-card {
    padding-top: 0.75rem;
}

.doc-banner {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.doc-banner-success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #bbf7d0;
}

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.doc-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 180px auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.6);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.doc-row:hover {
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
}

.doc-row.is-pending {
    border-color: rgba(245, 158, 11, 0.6);
    background: rgba(15, 23, 42, 0.75);
}

.doc-title {
    font-weight: 600;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.82rem;
    color: var(--text-soft);
}

.doc-folder {
    font-weight: 600;
    color: #cbd5f5;
}

.doc-dot {
    color: rgba(148, 163, 184, 0.8);
}

.doc-actions {
    display: flex;
    gap: 0.45rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.doc-status {
    display: flex;
    justify-content: flex-start;
}

.status-neutral {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.35);
}

.my-docs-pagination {
    margin-top: 0.85rem;
}

.doc-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-modal[hidden] {
    display: none;
}

.doc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
}

.doc-modal-dialog {
    position: relative;
    background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.14), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: var(--radius-lg);
    padding: 1rem;
    width: min(92vw, 520px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.doc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.doc-modal-label {
    font-size: 0.75rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.doc-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.doc-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.doc-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .doc-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .doc-actions {
        justify-content: flex-start;
    }
}

/* ============================
   Document viewer
   ============================ */

.doc-view-header {
    margin-bottom: 0.75rem;
}

.doc-view-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doc-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    color: var(--text-soft);
    font-size: 0.85rem;
}

.doc-view-folder {
    font-weight: 600;
    color: #cbd5f5;
}

.doc-viewer-card {
    padding: 0.75rem;
}

.doc-viewer-frame {
    width: 100%;
    height: 70vh;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: var(--radius-md);
    background: rgba(2, 6, 23, 0.6);
}

.doc-viewer-image {
    max-width: 100%;
    height: auto;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: var(--radius-md);
}

.doc-view-toolbar {
    position: sticky;
    bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    margin-bottom: 1rem;
}

.doc-view-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.doc-view-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.doc-gate-card {
    padding: 1rem;
}

.doc-gate-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.doc-gate-body {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.doc-gate-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.65);
}

.doc-gate-value {
    font-weight: 600;
    color: #f8fafc;
    text-align: right;
}

.doc-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.doc-gate-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 720px) {
    .doc-view-toolbar {
        position: static;
    }
}

@media (max-width: 960px) {
    .leave-new-grid {
        grid-template-columns: 1fr;
    }

    .leave-summary {
        position: static;
    }

    .leaves-cta {
        align-items: flex-start;
    }
}

/* ============================
   My documents
   ============================ */

.my-docs-filter {
    padding: 0.9rem 1rem;
}

.my-docs-filter-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.my-docs-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 260px;
}

.my-docs-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.my-docs-search {
    min-width: 220px;
    max-width: 280px;
}

.my-docs-list-card {
    margin-top: 0.5rem;
}

.doc-banner {
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md);
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #bbf7d0;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.doc-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 180px 220px;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.55);
    transition: border-color 0.2s ease, transform 0.12s ease;
}

.doc-row:hover {
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
}

.doc-row.is-pending {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
}

.doc-title {
    font-weight: 600;
    color: #f8fafc;
}

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-soft);
    margin-top: 0.2rem;
}

.doc-dot {
    opacity: 0.6;
}

.doc-status {
    display: flex;
    justify-content: flex-start;
}

.doc-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.status-neutral {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5f5;
    border-color: rgba(148, 163, 184, 0.35);
}

.doc-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-modal[hidden] {
    display: none;
}

.doc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
}

.doc-modal-dialog {
    position: relative;
    z-index: 1;
    background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.14), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: var(--radius-lg);
    padding: 1rem;
    width: min(92vw, 520px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.doc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.doc-modal-label {
    font-size: 0.75rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.doc-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.doc-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.doc-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .my-docs-filter-inner {
        align-items: stretch;
    }

    .my-docs-search {
        max-width: none;
    }

    .doc-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .doc-actions {
        justify-content: flex-start;
    }
}

/* --- Links: clickable but not underlined (global) --- */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Accessible focus without underline */
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 8px;
}