@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --xs-yellow: #f7d214;
    --xs-yellow-soft: #ffe45c;
    --xs-yellow-deep: #c99f00;

    --xs-black: #020707;
    --xs-ink: #071011;
    --xs-carbon: #0b1517;
    --xs-panel: rgba(9, 18, 20, 0.88);
    --xs-panel-strong: rgba(5, 12, 13, 0.96);
    --xs-panel-soft: rgba(255, 255, 255, 0.075);

    --xs-text: #f8faf8;
    --xs-muted: rgba(248, 250, 248, 0.66);
    --xs-muted-2: rgba(248, 250, 248, 0.48);

    --xs-light-bg: #f6f4e8;
    --xs-light-card: rgba(255, 255, 255, 0.82);
    --xs-light-text: #52686e;

    --xs-border: rgba(247, 210, 20, 0.18);
    --xs-border-soft: rgba(255, 255, 255, 0.09);

    --xs-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
    --xs-shadow-yellow: 0 20px 55px rgba(247, 210, 20, 0.20);

    --xs-radius-xl: 34px;
    --xs-radius-lg: 26px;
    --xs-radius-md: 18px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', sans-serif;
    color: var(--xs-text);
    background:
        radial-gradient(circle at 8% 4%, rgba(247, 210, 20, 0.23), transparent 26rem),
        radial-gradient(circle at 88% 2%, rgba(255, 228, 92, 0.14), transparent 24rem),
        linear-gradient(135deg, #020707 0%, #061112 38%, #10140c 100%);
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(247, 210, 20, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247, 210, 20, 0.18) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
    z-index: -1;
}

h1,
h2,
h3,
h4,
.brand-text,
.card-title,
.auth-badge,
.dashboard-kpi-card strong,
.registry-stat-chip strong,
.registry-insight-card strong {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.04em;
}

a {
    color: var(--xs-yellow);
}

a:hover {
    color: var(--xs-yellow-soft);
}

.content-gradient {
    background: transparent;
}

.content-wrapper {
    background: transparent !important;
}

.app-shell {
    min-height: 100vh;
}

.app-content-shell {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* TOP NAV */

.nav-frost {
    background: rgba(2, 7, 7, 0.72) !important;
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--xs-border-soft);
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.22);
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--xs-yellow);
}

.command-search-shell {
    min-width: 340px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--xs-yellow);
}

.command-search-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: white;
    font-size: 0.9rem;
}

.command-search-input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.nav-status-pill,
.hero-chip,
.toolbar-pill,
.table-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.nav-status-pill {
    background: rgba(247, 210, 20, 0.12);
    border: 1px solid rgba(247, 210, 20, 0.22);
    color: var(--xs-yellow-soft);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--xs-yellow);
    box-shadow: 0 0 0 7px rgba(247, 210, 20, 0.15);
}

.btn-ghost-topbar {
    border-radius: 999px;
    padding: 0.65rem 1rem;
    font-weight: 800;
    color: var(--xs-black);
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    border: 1px solid rgba(247, 210, 20, 0.38);
    box-shadow: var(--xs-shadow-yellow);
}

.btn-ghost-topbar:hover {
    color: var(--xs-black);
    filter: brightness(1.05);
}

/* SIDEBAR */

.sidebar-frost {
    background:
        radial-gradient(circle at 50% 0%, rgba(247, 210, 20, 0.18), transparent 18rem),
        linear-gradient(180deg, #020707 0%, #071112 48%, #040909 100%) !important;
    border-right: 1px solid var(--xs-border-soft);
}

.brand-fusion {
    min-height: 76px;
    border-bottom: 1px solid var(--xs-border-soft);
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--xs-black);
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    box-shadow: var(--xs-shadow-yellow);
    flex: 0 0 auto;
}

.brand-logo-wrap {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: #ffffff;
    padding: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--xs-shadow-yellow);
}

.brand-logo-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-text {
    color: white !important;
    font-weight: 800 !important;
    font-size: 1rem;
    white-space: normal;
    line-height: 1.05;
}

.sidebar-profile {
    margin: 1rem;
    padding: 1rem;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(247, 210, 20, 0.13), rgba(255, 255, 255, 0.045));
    border: 1px solid rgba(247, 210, 20, 0.15);
    display: flex;
    gap: 0.85rem;
    align-items: center;
}

.profile-avatar {
    width: 46px;
    height: 46px;
    border-radius: 18px;
    background: rgba(247, 210, 20, 0.18);
    color: var(--xs-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-title {
    color: white;
    font-weight: 800;
    line-height: 1.1;
}

.profile-meta,
.nav-header,
.text-muted-light {
    color: rgba(255, 255, 255, 0.54);
}

.nav-header {
    margin-top: 1.8rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 900;
}

.nav-modern .nav-link {
    margin: 0.22rem 0.75rem;
    border-radius: 17px;
    color: rgba(255, 255, 255, 0.74);
    transition: 0.22s ease;
    font-weight: 700;
}

.nav-modern .nav-link .nav-icon {
    color: rgba(247, 210, 20, 0.68);
}

.nav-modern .nav-link:hover {
    background: rgba(247, 210, 20, 0.1);
    color: white;
    transform: translateX(3px);
}

.nav-modern .nav-link.active {
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    color: var(--xs-black) !important;
    box-shadow: var(--xs-shadow-yellow);
}

.nav-modern .nav-link.active .nav-icon {
    color: var(--xs-black);
}

/* HERO */

.hero-header {
    padding: 1rem 0 0;
}

.hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--xs-radius-xl);
    padding: 2rem;
    min-height: 230px;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-end;
    color: white;
    background:
        linear-gradient(135deg, rgba(3, 8, 8, 0.96), rgba(12, 25, 25, 0.92)),
        radial-gradient(circle at 90% 16%, rgba(247, 210, 20, 0.32), transparent 18rem);
    border: 1px solid rgba(247, 210, 20, 0.16);
    box-shadow: var(--xs-shadow);
}

.hero-panel::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -95px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 210, 20, 0.33), transparent 66%);
    filter: blur(4px);
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: calc(var(--xs-radius-xl) - 10px);
    border: 1px solid rgba(255, 255, 255, 0.055);
    pointer-events: none;
}

.hero-panel > * {
    position: relative;
    z-index: 1;
}

.eyebrow-label,
.detail-eyebrow,
.auth-badge {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 1.72rem;
    font-weight: 900;
    color: var(--xs-yellow);
}

.hero-panel h1 {
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 0.92;
    margin: 0.48rem 0 0.9rem;
    max-width: 850px;
}

.hero-panel p {
    max-width: 70ch;
    margin-bottom: 0;
    color: var(--xs-muted);
    font-size: 1rem;
}

.hero-badges,
.detail-chip-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hero-chip,
.toolbar-pill,
.table-status-chip {
    background: rgba(247, 210, 20, 0.11);
    color: var(--xs-yellow-soft);
    border: 1px solid rgba(247, 210, 20, 0.2);
}

/* BUTTONS */

.btn-modern {
    border: 0;
    border-radius: 999px;
    padding: 0.18rem 0.18rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    color: var(--xs-black) !important;
    box-shadow: var(--xs-shadow-yellow);
}

.btn-modern:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.btn-outline-dark {
    border-radius: 999px;
    border: 1px solid rgba(9, 16, 17, 0.18);
    color: var(--xs-light-text);
    font-weight: 900;
    background: rgba(255, 255, 255, 0.35);
}

.btn-outline-dark:hover {
    background: var(--xs-black);
    border-color: var(--xs-black);
    color: var(--xs-yellow);
}

.btn-outline-danger {
    border-radius: 999px;
    border: 1px solid rgba(255, 65, 65, 0.45);
    color: #ffb3b3;
    font-weight: 800;
}

.btn-outline-danger:hover {
    background: rgba(255, 65, 65, 0.14);
    color: white;
}

/* EXECUTIVE DASHBOARD */

.dashboard-exec-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-exec-card {
    grid-column: span 3;
    position: relative;
    overflow: hidden;
    min-height: 240px;
    border-radius: 30px;
    padding: 1.5rem;
    box-shadow: var(--xs-shadow);
    border: 1px solid var(--xs-border-soft);
    margin-top: 15px;
}

.dashboard-exec-card span,
.dashboard-exec-card strong,
.dashboard-exec-card p,
.dashboard-exec-card a,
.dashboard-exec-detail {
    position: relative;
    z-index: 1;
}

.dashboard-exec-card::before {
    content: "";
    position: absolute;
    inset: auto -3rem -3rem auto;
    width: 10rem;
    height: 10rem;
    border-radius: 999px;
    background: rgba(247, 210, 20, 0.16);
    filter: blur(2px);
}

.dashboard-exec-card span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.6);
}

.dashboard-exec-card strong {
    display: block;
    margin-top: 0.8rem;
    font-size: clamp(2rem, 3.6vw, 3.55rem);
    line-height: 0.95;
}

.dashboard-exec-card p {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.84);
}

.dashboard-exec-detail {
    margin: 0.9rem 0 1.2rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.68);
}

.dashboard-exec-card-dark {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.2), transparent 10rem),
        linear-gradient(180deg, rgba(4, 9, 10, 0.97), rgba(12, 26, 27, 0.93));
    color: white;
}

.dashboard-exec-card-accent {
    background:
        linear-gradient(135deg, rgba(247, 210, 20, 0.98), rgba(255, 232, 120, 0.94));
    color: var(--xs-black);
    border-color: rgba(247, 210, 20, 0.42);
}

.dashboard-exec-card-accent span,
.dashboard-exec-card-accent p,
.dashboard-exec-card-accent .dashboard-exec-detail {
    color: rgba(2, 7, 7, 0.72);
}

.dashboard-exec-card-warm {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 229, 138, 0.22), transparent 10rem),
        linear-gradient(135deg, #2f1f09, #694310);
    color: white;
}

.dashboard-alert-panel {
    padding-bottom: 1rem;
}

.dashboard-alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.dashboard-alert-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dashboard-alert-copy strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

.dashboard-alert-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.dashboard-alert-side {
    min-width: 100px;
    text-align: right;
}

.dashboard-alert-side strong,
.dashboard-alert-side a {
    display: block;
}

.dashboard-alert-side strong {
    font-size: 1.25rem;
    margin-bottom: 0.45rem;
}

.dashboard-alert-side a {
    color: var(--xs-yellow);
    font-weight: 800;
    text-decoration: none;
}

.dashboard-alert-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    padding: 0.22rem 0.56rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    font-weight: 900;
}

.dashboard-alert-level-critical {
    background: rgba(255, 88, 88, 0.18);
    color: #ff8f8f;
}

.dashboard-alert-level-high {
    background: rgba(247, 210, 20, 0.16);
    color: #ffe37e;
}

.dashboard-alert-level-medium {
    background: rgba(117, 235, 184, 0.14);
    color: #a7f1cf;
}

.dashboard-alert-empty {
    color: rgba(255, 255, 255, 0.72);
}

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

.dashboard-mini-metrics div {
    padding: 1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.45);
}

.dashboard-mini-metrics span,
.dashboard-pipeline-row span,
.dashboard-section-head .eyebrow-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.7rem;
    font-weight: 900;
}

.dashboard-mini-metrics strong {
    display: block;
    margin-top: 0.4rem;
    font-size: 1.45rem;
}

.dashboard-exposure-card {
    padding: 1.15rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.34);
}

.dashboard-feed-list-tight li {
    padding-left: 0;
    padding-right: 0;
}

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

.dashboard-pipeline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dashboard-pipeline-row strong {
    font-size: 1.25rem;
}

.dashboard-pipeline-list-light .dashboard-pipeline-row {
    background: rgba(255, 255, 255, 0.46);
    border-color: rgba(9, 16, 17, 0.08);
}

.dashboard-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.dashboard-section-head h3 {
    margin: 0.25rem 0 0;
    color: white;
}

/* DASHBOARD KPI */

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-kpi-card {
    grid-column: span 2;
    position: relative;
    overflow: hidden;
    min-height: 185px;
    border-radius: 28px;
    padding: 1.35rem;
    color: white;
    box-shadow: var(--xs-shadow);
    border: 1px solid var(--xs-border-soft);
    transition: 0.22s ease;
    margin-top: 15px;
}

.dashboard-kpi-card:hover {
    transform: translateY(-4px);
    border-color: rgba(247, 210, 20, 0.28);
}

.dashboard-kpi-card::before {
    content: "";
    position: absolute;
    right: -42px;
    top: -42px;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    background: rgba(247, 210, 20, 0.18);
    filter: blur(2px);
}

.dashboard-kpi-card::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 42px;
    height: 42px;
    border-right: 4px solid rgba(247, 210, 20, 0.36);
    border-bottom: 4px solid rgba(247, 210, 20, 0.36);
    transform: rotate(45deg);
    opacity: 0.58;
}

.dashboard-kpi-card span,
.dashboard-kpi-card strong,
.dashboard-kpi-card p {
    position: relative;
    z-index: 1;
}

.dashboard-kpi-card span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.62);
}

.dashboard-kpi-card strong {
    display: block;
    margin: 0.52rem 0 0.58rem;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 0.95;
}

.dashboard-kpi-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
}

.dashboard-kpi-card-accent {
    background:
        linear-gradient(135deg, rgba(247, 210, 20, 0.95), rgba(255, 228, 92, 0.96));
    color: var(--xs-black);
    border-color: rgba(247, 210, 20, 0.44);
}

.dashboard-kpi-card-accent span,
.dashboard-kpi-card-accent p {
    color: rgba(2, 7, 7, 0.66);
}

.dashboard-kpi-card-accent::before {
    background: rgba(0, 0, 0, 0.12);
}

.dashboard-kpi-card-accent::after {
    border-color: rgba(0, 0, 0, 0.28);
}

.dashboard-kpi-card-dark {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.16), transparent 9rem),
        linear-gradient(135deg, rgba(3, 9, 9, 0.96), rgba(11, 24, 25, 0.92));
}

.dashboard-kpi-card-warm {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 228, 92, 0.18), transparent 9rem),
        linear-gradient(135deg, #141307, #41350b);
}

.dashboard-kpi-card-wide {
    grid-column: span 4;
}

@media (max-width: 1399.98px) {
    .dashboard-exec-card {
        grid-column: span 6;
    }

    .dashboard-kpi-card {
        grid-column: span 3;
    }
}

@media (max-width: 991.98px) {
    .dashboard-exec-card,
    .dashboard-kpi-card,
    .dashboard-kpi-card-wide {
        grid-column: span 12;
    }

    .dashboard-alert-list li,
    .dashboard-pipeline-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-alert-side {
        min-width: 0;
        text-align: left;
    }
}

@media (max-width: 767.98px) {
    .dashboard-mini-metrics {
        grid-template-columns: 1fr;
    }
}

/* PANELS */

.dashboard-panel-card,
.glass-card,
.side-panel-card,
.metric-card,
.delete-card-shell,
.auth-card-modern,
.auth-intro-panel {
    border-radius: var(--xs-radius-lg);
    box-shadow: var(--xs-shadow);
}

.dashboard-panel-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.15), transparent 14rem),
        linear-gradient(180deg, rgba(6, 14, 15, 0.94), rgba(10, 21, 22, 0.9));
    color: white;
    border: 1px solid var(--xs-border-soft);
}

.dashboard-panel-light {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.16), transparent 14rem),
        rgb(160 162 127 / 86%);
    backdrop-filter: blur(20px);
    color: var(--xs-light-text);
    border: 1px solid rgba(9, 16, 17, 0.08);
}

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

.dashboard-panel-header h3 {
    margin: 0.25rem 0 0;
    font-size: 1.45rem;
}

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

.dashboard-table thead th {
    border-top: 0;
    border-bottom: 1px solid rgba(247, 210, 20, 0.16);
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.dashboard-table tbody td {
    border-top: 1px solid rgba(255, 255, 255, 0.065);
    color: rgba(255, 255, 255, 0.9);
    vertical-align: middle;
}

.dashboard-table tbody tr:hover td {
    background: rgba(247, 210, 20, 0.055);
}

.dashboard-panel-light .dashboard-table thead th {
    border-bottom-color: rgba(9, 16, 17, 0.1);
    color: rgba(9, 16, 17, 0.52);
}

.dashboard-panel-light .dashboard-table tbody td {
    border-top-color: rgba(9, 16, 17, 0.08);
    color: var(--xs-light-text);
}

.dashboard-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.38rem 0.74rem;
    background: rgba(247, 210, 20, 0.14);
    border: 1px solid rgba(247, 210, 20, 0.22);
    color: var(--xs-yellow-soft);
    font-size: 0.73rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dashboard-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-feed-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(9, 16, 17, 0.08);
}

.dashboard-feed-list li:last-child {
    border-bottom: 0;
}

.dashboard-feed-list strong,
.dashboard-feed-meta strong {
    display: block;
    font-weight: 900;
}

.dashboard-feed-list span,
.dashboard-feed-meta span {
    color: rgba(9, 16, 17, 0.56);
    font-size: 0.9rem;
}

.dashboard-feed-meta {
    text-align: right;
}

.dashboard-empty-cell,
.dashboard-feed-empty {
    color: var(--xs-muted-2);
}

/* GENERIC CARDS / REGISTRY PAGES */

.glass-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.14), transparent 15rem),
        linear-gradient(180deg, rgba(6, 14, 15, 0.93), rgba(10, 21, 22, 0.9));
    color: white;
    border: 1px solid var(--xs-border-soft);
}

.toolbar-strip {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.registry-shell {
    display: grid;
    gap: 1.25rem;
}

.registry-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.25rem;
    padding: 1.5rem 1.65rem;
    border-radius: var(--xs-radius-xl);
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.2), transparent 18rem),
        linear-gradient(135deg, rgba(2, 7, 7, 0.96), rgba(12, 24, 25, 0.92));
    box-shadow: var(--xs-shadow);
    color: white;
    border: 1px solid var(--xs-border-soft);
    margin-top: 15px;
}

.registry-title-block h2 {
    margin: 0.3rem 0 0.5rem;
    font-size: clamp(1.8rem, 2.8vw, 3rem);
}

.registry-title-block p {
    max-width: 64ch;
    margin: 0;
    color: var(--xs-muted);
}

.registry-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.registry-stat-chip {
    padding: 0.95rem 1.1rem;
    border-radius: 20px;
    background: rgba(247, 210, 20, 0.11);
    border: 1px solid rgba(247, 210, 20, 0.18);
    min-width: 130px;
}

.registry-stat-chip span {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xs-muted);
    font-weight: 900;
}

.registry-stat-chip strong {
    display: block;
    margin-top: 0.3rem;
    font-size: 1.85rem;
}

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

.registry-insight-card {
    padding: 1.25rem 1.35rem;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--xs-light-text);
    box-shadow: var(--xs-shadow);
    border: 1px solid rgba(9, 16, 17, 0.07);
}

.registry-insight-card span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(9, 16, 17, 0.52);
    font-weight: 900;
}

.registry-insight-card strong {
    display: block;
    margin: 0.35rem 0 0.45rem;
    font-size: 1.85rem;
}

.registry-insight-card p {
    margin: 0;
    color: rgba(9, 16, 17, 0.58);
}

.registry-insight-card-accent {
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    color: var(--xs-black);
}

.registry-insight-card-accent span,
.registry-insight-card-accent p {
    color: rgba(2, 7, 7, 0.62);
}

.registry-insight-card-soft {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.22), transparent 10rem),
        rgba(255, 255, 255, 0.9);
}

.registry-card-full {
    width: 100%;
}

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

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

.registry-wide-table {
    min-width: 100%;
}

.registry-primary-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.registry-primary-cell strong {
    font-weight: 900;
}

.registry-primary-cell span {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.58);
}

.table-action-group {
    display: inline-flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.data-table-modern thead th {
    border-top: 0;
    border-bottom: 1px solid rgba(247, 210, 20, 0.16);
    color: rgba(255, 255, 255, 0.58);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 900;
}

.data-table-modern tbody td {
    border-top: 1px solid rgba(255, 255, 255, 0.065);
    color: rgba(255, 255, 255, 0.92);
    vertical-align: middle;
}

.empty-state-box {
    text-align: center;
    padding: 2.5rem 1rem;
}

.empty-state-box i,
.delete-icon-wrap i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--xs-yellow);
}

/* FORMS */

.form-grid-modern .form-group label,
.auth-form-grid .form-group label {
    color: var(--xs-light-text);
    font-weight: 900;
}

.form-grid-modern input,
.form-grid-modern select,
.form-grid-modern textarea,
.auth-form-grid input {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(27, 26, 26, 0.88);
    min-height: 52px;
    padding: 0.85rem 1rem;
    color: rgba(255, 255, 255, 0.942);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.form-grid-modern input:focus,
.form-grid-modern select:focus,
.form-grid-modern textarea:focus,
.auth-form-grid input:focus {
    border-color: rgba(247, 210, 20, 0.72);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(247, 210, 20, 0.16);
}

.form-grid-modern textarea {
    min-height: 140px;
}

.form-actions-modern {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.metric-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
    color: white;
    border: 1px solid var(--xs-border-soft);
}

.metric-card span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    opacity: 0.7;
    font-weight: 900;
}

.metric-card strong {
    display: block;
    font-size: 2rem;
    margin: 0.35rem 0 0.65rem;
}

.metric-card-warm {
    background: linear-gradient(135deg, #41350b, #0c1008);
}

.metric-card-cool {
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    color: var(--xs-black);
}

.metric-card-dark {
    background: linear-gradient(135deg, #020707, #132224);
}

/* DETAIL / DELETE */

.detail-hero-card,
.side-panel-card,
.delete-card-shell {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
    color: var(--xs-light-text);
    border: 1px solid rgba(9, 16, 17, 0.08);
}

.side-panel-card {
    padding: 1.35rem;
}

.side-fact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-fact-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(9, 16, 17, 0.08);
}

.side-fact-list li span {
    color: rgba(9, 16, 17, 0.56);
}

.delete-card-shell {
    padding: 1rem;
}

.delete-icon-wrap {
    width: 84px;
    height: 84px;
    border-radius: 26px;
    margin: 0 auto 1rem;
    background: rgba(247, 210, 20, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* AUTH */

.auth-page-shell {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(247, 210, 20, 0.22), transparent 30rem),
        linear-gradient(135deg, #020707, #071112);
}

.auth-background-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0.45;
}

.orb-one {
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(247, 210, 20, 0.5), transparent 70%);
    top: -8rem;
    left: -6rem;
}

.orb-two {
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(255, 228, 92, 0.32), transparent 70%);
    right: -10rem;
    bottom: -10rem;
}

.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
    align-items: center;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.auth-intro-panel {
    padding: 3rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.16), transparent 18rem),
        linear-gradient(135deg, rgba(2, 7, 7, 0.96), rgba(12, 24, 25, 0.92));
    color: white;
    border: 1px solid var(--xs-border-soft);
}

.auth-intro-panel h1 {
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 0.95;
    margin: 0.45rem 0 0.9rem;
}

.auth-intro-panel p {
    max-width: 60ch;
    color: var(--xs-muted);
}

.auth-logo-cluster,
.auth-footer-logos {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.auth-logo-cluster {
    margin: 1.35rem 0 1.75rem;
}

.auth-logo-tile {
    min-height: 88px;
    min-width: 158px;
    padding: 1rem 1.15rem;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--xs-shadow);
}

.auth-logo-tile-dark {
    background: rgba(2, 7, 7, 0.86);
}

.auth-logo-tile-light {
    background: rgba(0, 0, 0, 0.92);
}

.auth-logo-image,
.auth-footer-logo {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.auth-logo-image {
    max-height: 54px;
}

.auth-logo-image-wide {
    max-height: 44px;
}

.auth-footer-logos {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(16, 32, 48, 0.08);
}

.auth-footer-logo {
    max-height: 34px;
}

.auth-footer-logo-wide {
    max-height: 28px;
}

.auth-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.auth-feature-card {
    padding: 1rem 1.1rem;
    border-radius: 24px;
    background: rgba(247, 210, 20, 0.09);
    border: 1px solid rgba(247, 210, 20, 0.14);
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.auth-card-panel {
    display: flex;
    justify-content: center;
}

.auth-card-modern {
    width: min(100%, 520px);
    background: rgba(221, 212, 212, 0.86);
    backdrop-filter: blur(24px);
    padding: 2rem;
    color: var(--xs-light-text);
    border: 1px solid rgba(255, 255, 255, 0.48);
}

.auth-card-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.input-shell {
    position: relative;
}

.input-shell i {
    position: absolute;
    top: 50%;
    left: 23rem;
    transform: translateY(-50%);
    color: rgba(9, 16, 17, 0.48);
}

.input-shell input {
    padding-left: 0.8rem;
}

.auth-footnote {
    margin-top: 1.25rem;
    color: rgba(9, 16, 17, 0.58);
    font-size: 0.9rem;
}

/* DROPDOWN / FOOTER / ALERTS */

.dropdown-glass {
    background: rgba(5, 12, 13, 0.94);
    backdrop-filter: blur(20px);
    color: white;
    border: 1px solid var(--xs-border-soft);
}

.dropdown-glass .dropdown-item {
    color: rgba(255, 255, 255, 0.78);
}

.dropdown-glass .dropdown-item:hover {
    background: rgba(247, 210, 20, 0.1);
    color: var(--xs-yellow);
}

.dropdown-glass .dropdown-header {
    color: var(--xs-yellow);
    font-weight: 900;
}

.footer-frost {
    background: rgba(2, 7, 7, 0.84) !important;
    backdrop-filter: blur(20px);
    color: rgba(255, 255, 255, 0.68);
    border-top: 1px solid var(--xs-border-soft);
}

.footer-frost strong {
    color: var(--xs-yellow);
}

.footer-separator {
    opacity: 0.4;
    margin: 0 0.35rem;
}

.messages-stack .alert {
    border-radius: 20px;
    border: 0;
}

/* RESPONSIVE */

@media (max-width: 1399.98px) {
    .dashboard-kpi-card {
        grid-column: span 3;
    }

    .dashboard-kpi-card-wide {
        grid-column: span 6;
    }
}

@media (max-width: 991.98px) {
    .hero-panel,
    .auth-layout {
        grid-template-columns: 1fr;
        display: grid;
    }

    .hero-panel {
        align-items: flex-start;
    }

    .auth-intro-panel {
        order: 2;
    }

    .auth-logo-tile {
        min-width: 132px;
        min-height: 76px;
    }

    .registry-topbar,
    .registry-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .registry-topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .registry-insight-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-card,
    .dashboard-kpi-card-wide {
        grid-column: span 6;
    }

    .command-search-shell {
        min-width: 240px;
    }
}

@media (max-width: 575.98px) {
    .app-content-shell {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .hero-panel {
        padding: 1.35rem;
        min-height: auto;
    }

    .hero-badges {
        justify-content: flex-start;
    }

    .dashboard-kpi-card,
    .dashboard-kpi-card-wide {
        grid-column: span 12;
    }

    .dashboard-panel-header,
    .dashboard-feed-list li {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-feed-meta {
        text-align: left;
    }

    .registry-topbar,
    .registry-insight-card,
    .dashboard-panel-card,
    .hero-panel {
        border-radius: 22px;
    }

    .command-search-shell {
        min-width: 0;
    }
}
.request-studio-form {
    width: 100%;
}

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

.request-main-column {
    display: grid;
    gap: 1.25rem;
}

.request-side-column {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 1rem;
}

.request-card,
.request-summary-card,
.request-actions-card {
    border-radius: 30px;
    box-shadow: var(--xs-shadow);
}

.request-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.16), transparent 16rem),
        linear-gradient(180deg, rgba(6, 14, 15, 0.95), rgba(10, 21, 22, 0.92));
    border: 1px solid rgba(247, 210, 20, 0.13);
    color: white;
}

.request-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.request-header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.request-header-actions .btn {
    padding: 0.72rem 1rem;
    border-radius: 999px;
    font-weight: 900;
}

.request-header-actions .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.18);
    color: white;
    background: rgba(255, 255, 255, 0.06);
}

.request-header-actions .btn-outline-light:hover {
    background: white;
    color: #020707;
}

.request-card-header h3,
.request-summary-card h3 {
    margin: 0.35rem 0 0.45rem;
    font-size: 1.65rem;
}

.request-card-header p,
.request-summary-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
}

.request-header-icon,
.summary-orb {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #020707;
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    box-shadow: var(--xs-shadow-yellow);
    flex: 0 0 auto;
}

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

.request-field-wide {
    grid-column: 1 / -1;
}

.request-field label {
    display: block;
    margin-bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 900;
    font-size: 0.84rem;
}

.request-field .xs-control {
    width: 100%;
    min-height: 54px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    padding: 0.85rem 1rem;
    outline: 0;
    transition: 0.2s ease;
}

/* ── Compact overrides scoped to slot cards ── */
.slot-card .request-field label {
    font-size: 0.64rem;
    margin-bottom: 0.22rem;
    letter-spacing: 0.04em;
}

.slot-card .request-field .xs-control {
    min-height: 36px;
    border-radius: 10px;
    padding: 0.38rem 0.55rem;
    font-size: 0.78rem;
}

.slot-card .request-field select.xs-control {
    padding: 0.3rem 0.55rem;
}

.request-field select.xs-control {
    color: #111;
    background: rgba(255, 255, 255, 0.92);
}

.request-field .xs-control:focus {
    border-color: rgba(247, 210, 20, 0.76);
    box-shadow: 0 0 0 4px rgba(247, 210, 20, 0.14);
    background: rgba(255, 255, 255, 0.12);
}

.request-field select.xs-control:focus {
    background: white;
}

.request-field .xs-textarea {
    min-height: 120px;
    resize: vertical;
}

.request-field .xs-slot-notes {
    min-height: 78px;
}

.request-field-error {
    margin-top: 0.4rem;
    color: #ffb4b4;
    font-size: 0.82rem;
    font-weight: 700;
}

.request-alert {
    border-radius: 24px;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    color: #fff;
    background: rgba(255, 65, 65, 0.16);
    border: 1px solid rgba(255, 65, 65, 0.3);
}

.request-bulk-card {
    margin-bottom: 1rem;
    padding: 0.85rem 0.9rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.14), transparent 12rem),
        rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(247, 210, 20, 0.14);
}

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

.request-bulk-head strong {
    display: block;
    color: white;
    font-size: 0.9rem;
    line-height: 1.1;
}

.bulk-hint {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    background: rgba(247, 210, 20, 0.1);
    border: 1px solid rgba(247, 210, 20, 0.16);
    color: var(--xs-yellow-soft);
    font-size: 0.68rem;
    font-weight: 900;
}

.bulk-preset-row,
.bulk-weekday-row,
.bulk-footer {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.bulk-preset-row {
    margin-bottom: 0.75rem;
}

.bulk-builder-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem;
}

.request-bulk-card .request-field label {
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
}

.request-bulk-card .request-field .xs-control {
    min-height: 46px;
    padding: 0.72rem 0.9rem;
}

.bulk-rate-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
}

.bulk-mini-action {
    min-height: 36px;
    border: 1px solid rgba(247, 210, 20, 0.2);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    background: rgba(247, 210, 20, 0.1);
    color: var(--xs-yellow-soft);
    font-size: 0.72rem;
    font-weight: 900;
    transition: 0.2s ease;
}

.bulk-mini-action:hover {
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    color: var(--xs-black);
}

.request-bulk-card .xs-textarea {
    min-height: 84px;
}

.bulk-day {
    position: relative;
    min-width: 56px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.76);
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 900;
    transition: 0.2s ease;
    cursor: pointer;
}

.bulk-day::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.42rem;
    background: rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.bulk-day.is-active,
.bulk-day:hover {
    border-color: rgba(247, 210, 20, 0.28);
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    color: var(--xs-black);
}

.bulk-day.is-active {
    box-shadow: 0 0 0 3px rgba(247, 210, 20, 0.14);
}

.bulk-day.is-active::before {
    background: #0d1605;
    box-shadow: 0 0 0 4px rgba(13, 22, 5, 0.12);
}

.bulk-day[aria-pressed="false"] {
    opacity: 0.72;
}

.bulk-footer {
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.bulk-helper {
    flex: 1 1 260px;
    min-height: 46px;
    border-radius: 18px;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
}

.slot-list {
    display: grid;
    gap: 0.45rem;
}

.slot-card {
    position: relative;
    border-radius: 16px;
    padding: 0.55rem 0.75rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.11), transparent 12rem),
        rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.slot-card.is-new {
    animation: slotPop 0.22s ease-out;
}

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

.slot-delete-holder {
    display: none;
}

.slot-card-top {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.slot-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.slot-kicker {
    display: inline-flex;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.6rem;
    font-weight: 900;
    color: var(--xs-yellow);
}

.slot-card-top strong {
    display: inline-flex;
    color: white;
    font-size: 0.8rem;
}

.slot-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.slot-quick,
.slot-remove {
    border: 0;
    outline: 0;
    border-radius: 999px;
    font-weight: 900;
    transition: 0.2s ease;
}

.slot-quick {
    padding: 0.22rem 0.5rem;
    background: rgba(247, 210, 20, 0.12);
    color: var(--xs-yellow-soft);
    border: 1px solid rgba(247, 210, 20, 0.2);
    font-size: 0.66rem;
}

.slot-quick:hover {
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    color: var(--xs-black);
}

.slot-remove {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 65, 65, 0.13);
    color: #ffb4b4;
    font-size: 0.72rem;
}

.slot-remove:hover {
    background: rgba(255, 65, 65, 0.24);
    color: white;
}

.slot-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.75fr 0.75fr 0.52fr 0.52fr 0.68fr 1.2fr;
    gap: 0.5rem;
    align-items: start;
}

.slot-notes-field {
    grid-column: auto;
}

.slot-notes-field .xs-slot-notes {
    min-height: 38px;
}

.request-summary-card {
    position: relative;
    overflow: hidden;
    padding: 1.35rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.2), transparent 14rem),
        linear-gradient(180deg, rgba(6, 14, 15, 0.96), rgba(10, 21, 22, 0.94));
    border: 1px solid rgba(247, 210, 20, 0.15);
    color: white;
}

.summary-orb {
    margin-bottom: 1rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}

.summary-grid div {
    border-radius: 20px;
    padding: 1rem;
    background: rgba(247, 210, 20, 0.1);
    border: 1px solid rgba(247, 210, 20, 0.16);
}

.summary-grid span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.56);
    font-weight: 900;
}

.summary-grid strong {
    display: block;
    margin-top: 0.35rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    line-height: 1;
}

.summary-note {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 0.9rem;
    border-radius: 18px;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.88rem;
}

.summary-note i {
    color: var(--xs-yellow);
    margin-top: 0.15rem;
}

.request-actions-card {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(18px);
}

.request-actions-card .btn {
    border-radius: 999px;
    font-weight: 900;
    padding: 0.9rem 1rem;
}

.request-actions-card .btn + .btn {
    margin-top: 0.65rem;
}

.request-actions-card .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.request-actions-card .btn-outline-light:hover {
    background: white;
    color: #020707;
}

@media (max-width: 1199.98px) {
    .request-studio-layout {
        grid-template-columns: 1fr;
    }

    .request-side-column {
        position: static;
        grid-template-columns: 1fr;
    }

    /* On mid-screens keep 4 time cols + notes fills the rest */
    .slot-grid {
        grid-template-columns: 1.1fr 0.75fr 0.75fr 0.52fr 0.52fr 0.68fr;
    }

    .slot-notes-field {
        grid-column: 1 / -1;
    }

    .slot-card .request-field .xs-control {
        min-height: 38px;
    }
}

@media (max-width: 767.98px) {
    .request-card,
    .request-summary-card,
    .request-actions-card {
        border-radius: 22px;
    }

    .request-card-header,
    .slot-card-top,
    .request-bulk-head,
    .bulk-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .request-field-grid,
    .slot-grid,
    .bulk-builder-grid {
        grid-template-columns: 1fr;
    }

    .request-field-wide,
    .slot-notes-field {
        grid-column: auto;
    }

    .slot-title-row {
        align-items: flex-start;
    }

    .slot-actions {
        justify-content: flex-start;
    }
}

.planning-command-shell {
    gap: 0.85rem;
}

.planning-toast-stack {
    position: fixed;
    right: 22px;
    top: 92px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    background: rgba(247, 210, 20, 0.12);
    border: 1px solid rgba(247, 210, 20, 0.16);
    color: var(--xs-yellow-soft);
    font-size: 0.68rem;
    font-weight: 900;
}

.planning-metric-chip strong {
    color: white;
}

.planning-metric-chip.is-alert {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.76);
}

.planning-metric-chip.is-match {
    background: rgba(69, 188, 107, 0.16);
    border-color: rgba(69, 188, 107, 0.24);
    color: #b9f3ca;
}

.planning-metric-chip.is-pending {
    background: rgba(247, 210, 20, 0.14);
    border-color: rgba(247, 210, 20, 0.2);
    color: var(--xs-yellow-soft);
}

.planning-board-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
}

.planning-calendar-rail {
    border-radius: 18px;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.planning-live-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.planning-live-card {
    padding: 0.72rem 0.85rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--xs-shadow);
}

.planning-live-card span {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.56);
}

.planning-live-card strong {
    display: block;
    margin-top: 0.22rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.45rem;
    color: white;
}

.planning-request-stack {
    display: grid;
    gap: 0.75rem;
}

.planning-request-card {
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.16), transparent 16rem),
        linear-gradient(180deg, rgba(6, 14, 15, 0.95), rgba(10, 21, 22, 0.92));
    border: 1px solid rgba(247, 210, 20, 0.13);
    box-shadow: var(--xs-shadow);
}

.planning-request-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.planning-request-toggle {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    color: var(--xs-black);
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    box-shadow: var(--xs-shadow-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.planning-request-toggle .planning-eye-close {
    display: none;
}

.planning-request-toggle[aria-expanded="true"] .planning-eye-open {
    display: none;
}

.planning-request-toggle[aria-expanded="true"] .planning-eye-close {
    display: inline-block;
}

.planning-request-title {
    flex: 1;
}

.planning-request-title p {
    margin: 0.18rem 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
}

.planning-request-title h3 {
    margin: 0.12rem 0 0;
    color: white;
    font-size: 1.05rem;
}

.planning-title-divider {
    opacity: 0.45;
    margin: 0 0.35rem;
}

.planning-request-metrics {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.planning-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    background: rgba(247, 210, 20, 0.12);
    border: 1px solid rgba(247, 210, 20, 0.16);
    color: var(--xs-yellow-soft);
    font-size: 0.68rem;
    font-weight: 900;
}

.planning-metric-chip strong {
    color: white;
}

.planning-metric-chip.is-alert {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.76);
}

.planning-board-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
}

.planning-calendar-rail {
    border-radius: 18px;
    padding: 0.95rem;
    background:
        radial-gradient(circle at top left, rgba(247, 210, 20, 0.12), transparent 10rem),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 0.8rem;
}

.planning-calendar-head h4 {
    margin: 0.18rem 0 0;
    color: white;
    font-size: 1rem;
}

.planning-calendar-head p {
    margin: 0.28rem 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
    line-height: 1.45;
}

.planning-calendar-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.planning-calendar-stat {
    padding: 0.68rem 0.72rem;
    border-radius: 16px;
    border: 1px solid rgba(247, 210, 20, 0.18);
    background: rgba(247, 210, 20, 0.08);
}

.planning-calendar-stat.is-alert {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.planning-calendar-stat span,
.planning-calendar-focus-label,
.planning-calendar-meta span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.58rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.54);
}

.planning-calendar-stat strong {
    display: block;
    margin-top: 0.2rem;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
}

.planning-calendar-focus {
    padding: 0.82rem 0.88rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.planning-calendar-focus strong {
    display: block;
    margin-top: 0.2rem;
    color: white;
    font-size: 0.92rem;
}

.planning-calendar-focus p {
    margin: 0.28rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    line-height: 1.45;
}

.planning-calendar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    align-content: start;
    max-height: 430px;
    overflow-y: auto;
    padding-right: 0.18rem;
}

.planning-calendar-month-card {
    padding: 0.72rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.planning-calendar-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.62rem;
}

.planning-calendar-month-head strong {
    color: white;
    font-size: 0.86rem;
}

.planning-calendar-month-head span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

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

.planning-calendar-weekdays {
    margin-bottom: 0.32rem;
}

.planning-calendar-weekdays span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.planning-calendar-cell {
    aspect-ratio: 1 / 1;
    min-height: 34px;
}

.planning-calendar-day {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 0.2s ease;
}

.planning-calendar-day-number {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 700;
}

.planning-calendar-day-count {
    display: block;
    margin-top: 0.16rem;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.76);
}

.planning-calendar-day.is-covered {
    border-color: rgba(69, 188, 107, 0.2);
    background: linear-gradient(180deg, rgba(69, 188, 107, 0.18), rgba(69, 188, 107, 0.08));
}

.planning-calendar-day.is-open {
    border-color: rgba(247, 210, 20, 0.2);
    background: linear-gradient(180deg, rgba(247, 210, 20, 0.22), rgba(247, 210, 20, 0.1));
    color: var(--xs-yellow-soft);
}

.planning-calendar-day:hover,
.planning-calendar-day.is-active {
    transform: translateY(-1px) scale(1.03);
    border-color: rgba(247, 210, 20, 0.28);
    background: linear-gradient(135deg, rgba(247, 210, 20, 0.2), rgba(255, 255, 255, 0.06));
    box-shadow: var(--xs-shadow-yellow);
}

.planning-calendar-day[aria-pressed="true"] {
    color: var(--xs-yellow-soft);
}

.planning-calendar-day.is-idle {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.34);
}

.planning-calendar-day.is-idle .planning-calendar-day-number {
    font-size: 0.82rem;
}

.planning-calendar-day.is-outside {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.planning-board-stage {
    min-width: 0;
}

.planning-date-group {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    display: none;
}

.planning-date-group.is-active {
    display: block;
}

.planning-date-band {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.planning-date-stamp {
    border-radius: 16px;
    padding: 0.52rem 0.35rem;
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    color: var(--xs-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--xs-shadow-yellow);
}

.planning-date-stamp span,
.planning-date-stamp em {
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.planning-date-stamp strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.45rem;
    line-height: 1;
}

.planning-date-copy h4 {
    margin: 0;
    color: white;
    font-size: 0.9rem;
}

.planning-date-copy p {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    background: rgba(247, 210, 20, 0.12);
    border: 1px solid rgba(247, 210, 20, 0.16);
    color: var(--xs-yellow-soft);
    font-size: 0.68rem;
    font-weight: 900;
}

.planning-metric-chip strong {
    color: white;
}

.planning-metric-chip.is-alert {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.76);
}

.planning-board-shell {
    display: grid;
    grid-template-columns: minmax(250px, 280px) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.8rem;
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
}

.planning-table tbody tr.is-assigned {
    background: rgba(69, 188, 107, 0.07);
}

.planning-table tbody tr.is-open {
    background: rgba(255, 255, 255, 0.02);
}

.planning-date-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.planning-date-cell strong {
    color: white;
}

.planning-date-cell span,
.planning-muted {
    display: block;
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.72rem;
}

.planning-assign-form,
.planning-modal-assign-form {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.planning-guard-select {
    min-width: 155px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(247, 210, 20, 0.22);
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    padding: 0.28rem 0.62rem;
    font-weight: 800;
    outline: 0;
    font-size: 0.78rem;
}

.planning-guard-select:focus {
    border-color: rgba(247, 210, 20, 0.76);
    box-shadow: 0 0 0 4px rgba(247, 210, 20, 0.14);
}

.planning-assignee-meta {
    margin-top: 0.22rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 700;
}

.calendar-modal-content {
    border-radius: 30px;
    color: white;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.22), transparent 18rem),
        linear-gradient(180deg, rgba(6, 14, 15, 0.98), rgba(10, 21, 22, 0.96));
    border: 1px solid rgba(247, 210, 20, 0.18);
    box-shadow: var(--xs-shadow);
}

.calendar-assignment-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1rem;
}

.calendar-date-tile {
    min-height: 210px;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    color: var(--xs-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--xs-shadow-yellow);
}

.calendar-date-tile span {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 900;
}

.calendar-date-tile strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.5rem;
    line-height: 0.9;
}

.calendar-date-tile em {
    font-style: normal;
    font-weight: 900;
    opacity: 0.7;
}

.calendar-shift-panel {
    display: grid;
    gap: 0.75rem;
}

.calendar-line,
.calendar-detail-grid div,
.calendar-notes {
    border-radius: 22px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.calendar-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.calendar-line span,
.calendar-detail-grid span,
.calendar-notes span {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 900;
}

.calendar-line strong,
.calendar-detail-grid strong {
    color: white;
    font-weight: 900;
}

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

.calendar-detail-grid div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.calendar-notes p {
    margin: 0.45rem 0 0;
    color: rgba(255, 255, 255, 0.76);
}

@media (max-width: 991.98px) {
    .planning-live-grid,
    .planning-request-head,
    .planning-assign-form,
    .planning-modal-assign-form {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .planning-board-shell {
        grid-template-columns: 1fr;
    }

    .planning-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .planning-date-band,
    .planning-request-head {
        grid-template-columns: 1fr;
    }

    .planning-request-toggle {
        align-self: flex-start;
    }

    .calendar-assignment-grid,
    .calendar-detail-grid {
        grid-template-columns: 1fr;
    }

    .planning-guard-select {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .planning-live-grid {
        grid-template-columns: 1fr;
    }

    .planning-calendar-grid {
        grid-template-columns: 1fr;
    }

    .planning-calendar-summary {
        grid-template-columns: 1fr;
    }

    .planning-toast-stack {
        left: 16px;
        right: 16px;
        top: 84px;
    }
}


.invoice-builder-shell,
.invoice-detail-shell {
    display: grid;
    gap: 1.25rem;
}

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

.invoice-main-column {
    display: grid;
    gap: 1.25rem;
}

.invoice-side-column {
    position: sticky;
    top: 92px;
}

.invoice-card,
.invoice-summary-card {
    border-radius: 30px;
    box-shadow: var(--xs-shadow);
    color: white;
    border: 1px solid rgba(247, 210, 20, 0.13);
}

.invoice-card {
    padding: 1.5rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.16), transparent 16rem),
        linear-gradient(180deg, rgba(6, 14, 15, 0.95), rgba(10, 21, 22, 0.92));
}

.invoice-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.invoice-card-header h3,
.invoice-summary-card h3 {
    margin: 0.35rem 0 0.45rem;
    font-size: 1.65rem;
}

.invoice-card-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
}

.invoice-card-header i {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #020707;
    background: linear-gradient(135deg, var(--xs-yellow), var(--xs-yellow-soft));
    box-shadow: var(--xs-shadow-yellow);
    flex: 0 0 auto;
}

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

.invoice-field-wide {
    grid-column: 1 / -1;
}

.invoice-field label {
    display: block;
    margin-bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 900;
    font-size: 0.84rem;
}

.invoice-field small {
    display: block;
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.48);
}

.invoice-control {
    width: 100%;
    min-height: 54px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    padding: 0.85rem 1rem;
    outline: 0;
    transition: 0.2s ease;
}

select.invoice-control {
    color: #111;
    background: rgba(255, 255, 255, 0.92);
}

.invoice-control:focus {
    border-color: rgba(247, 210, 20, 0.76);
    box-shadow: 0 0 0 4px rgba(247, 210, 20, 0.14);
    background: rgba(255, 255, 255, 0.12);
}

select.invoice-control:focus {
    background: white;
}

.invoice-textarea {
    min-height: 92px;
    resize: vertical;
}

.invoice-extra-line-stack {
    display: grid;
    gap: 1rem;
}

.invoice-extra-line-card {
    padding: 1rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.invoice-extra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 120px;
    gap: 1rem;
    margin-top: 1rem;
}

.invoice-delete-check {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.invoice-summary-card {
    padding: 1.35rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 210, 20, 0.2), transparent 14rem),
        linear-gradient(180deg, rgba(6, 14, 15, 0.96), rgba(10, 21, 22, 0.94));
}

.invoice-summary-grid,
.invoice-summary-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
}

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

.invoice-summary-grid div,
.invoice-summary-list div {
    border-radius: 20px;
    padding: 1rem;
    background: rgba(247, 210, 20, 0.1);
    border: 1px solid rgba(247, 210, 20, 0.16);
}

.invoice-summary-grid span,
.invoice-summary-list span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.56);
    font-weight: 900;
}

.invoice-summary-grid strong,
.invoice-summary-list strong {
    display: block;
    margin-top: 0.35rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.45rem;
    line-height: 1;
    color: white;
}

@media (max-width: 1199.98px) {
    .invoice-builder-layout,
    .invoice-detail-grid {
        grid-template-columns: 1fr;
    }

    .invoice-side-column {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .invoice-field-grid,
    .invoice-extra-grid {
        grid-template-columns: 1fr;
    }

    .invoice-field-wide {
        grid-column: auto;
    }

    .invoice-card,
    .invoice-summary-card {
        border-radius: 22px;
    }
}

.request-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 6, 23, 0.76);
    backdrop-filter: blur(10px);
}

.request-modal-backdrop.is-visible {
    display: flex;
}

.request-modal-panel {
    width: min(980px, 100%);
    max-height: 90vh;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
    color: #fff;
}

.request-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.request-modal-header h3 {
    margin: 4px 0 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.request-modal-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
}

.request-modal-close:hover {
    opacity: 1;
}

.request-modal-body {
    max-height: calc(90vh - 96px);
    overflow-y: auto;
    padding: 24px 28px 28px;
}

.request-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.request-detail-grid div {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.request-detail-grid span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.request-detail-grid strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
}

.request-modal-section {
    margin-top: 24px;
}

.request-modal-section h4 {
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 700;
}

.request-notes-box {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 1.6;
}

@media (max-width: 992px) {
    .request-detail-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 576px) {
    .request-detail-grid {
        grid-template-columns: 1fr;
    }

    .request-modal-header,
    .request-modal-body {
        padding-left: 18px;
        padding-right: 18px;
    }
}

    .toolbar-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

    .toolbar-pill {
        border: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        font-weight: 600;
        transition: all 0.25s ease;
    }

    .toolbar-pill:hover,
    .toolbar-pill.is-active {
        background: linear-gradient(135deg, #4f46e5, #06b6d4);
        color: #fff;
        transform: translateY(-1px);
    }

    .toolbar-content-wrapper {
        margin-top: 18px;
    }

    .toolbar-content-panel {
        display: none;
        padding: 22px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(14px);
    }

    .toolbar-content-panel.is-visible {
        display: block;
    }

    .panel-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }

    .panel-title h3 {
        margin: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
    }

    .panel-title p {
        margin: 4px 0 0;
        color: rgba(255, 255, 255, 0.65);
        font-size: 14px;
    }

    .overview-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 18px;
    }

    .overview-card,
    .chart-card,
    .audit-card {
        padding: 18px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .overview-card span {
        display: block;
        color: rgba(255, 255, 255, 0.62);
        font-size: 13px;
        margin-bottom: 8px;
    }

    .overview-card strong {
        color: #fff;
        font-size: 26px;
    }

    .charts-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .chart-stage {
        position: relative;
        height: 240px;
        min-height: 240px;
    }

    .chart-stage canvas,
    .chart-card > canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-height: 240px;
    }

    .chart-placeholder {
        min-height: 220px;
        border-radius: 16px;
        border: 1px dashed rgba(255, 255, 255, 0.24);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.68);
        text-align: center;
        padding: 18px;
    }

    .filter-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        align-items: end;
    }

    .filter-field label {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
        margin-bottom: 8px;
    }

    .filter-field input,
    .filter-field select {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 14px;
        padding: 11px 13px;
        color: #fff;
        background: rgb(22, 4, 4);
        outline: none;
    }

    .filter-field input::placeholder {
        color: rgba(255, 255, 255, 0.45);
    }

    .filter-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .audit-list {
        display: grid;
        gap: 12px;
    }

    .audit-card {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: flex-start;
    }

    .audit-card strong {
        display: block;
        color: #fff;
        margin-bottom: 6px;
    }

    .audit-card p {
        margin: 0;
        color: rgba(255, 255, 255, 0.64);
        font-size: 14px;
    }

    .audit-badge {
        white-space: nowrap;
        border-radius: 999px;
        padding: 7px 11px;
        background: rgba(34, 197, 94, 0.15);
        color: #86efac;
        font-size: 12px;
        font-weight: 700;
    }

    @media (max-width: 992px) {
        .overview-grid,
        .charts-grid,
        .filter-grid {
            grid-template-columns: 1fr;
        }

        .audit-card {
            flex-direction: column;
        }
    }


.guard-shell {
    display: grid;
    gap: 1rem;
}

.guard-calendar-card,
.guard-entry-card,
.guard-stamp-card {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(13, 21, 16, 0.98), rgba(8, 13, 10, 0.98));
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.24);
}

.guard-calendar-card {
    padding: 1rem;
    background:
        radial-gradient(circle at top right, rgba(44, 170, 96, 0.22), transparent 30%),
        linear-gradient(180deg, rgba(13, 21, 16, 0.98), rgba(8, 13, 10, 0.98));
}

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

.guard-title h3,
.guard-modal-head h4,
.guard-empty h4,
.guard-entry-head strong {
    margin: 0;
    color: #f3fff7;
}

.guard-title p,
.guard-modal-head p,
.guard-empty p,
.guard-entry-copy,
.guard-stamp-card,
.guard-upload-help {
    margin: 0;
    color: rgba(228, 240, 231, 0.72);
}

.guard-nav {
    display: inline-flex;
    gap: 0.5rem;
}

.guard-nav a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #f4fff8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.guard-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.95rem;
}

.guard-legend-chip,
.guard-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.guard-legend-chip.is-done,
.guard-status-chip.is-done {
    background: rgba(39, 158, 91, 0.2);
    color: #9af3bf;
}

.guard-legend-chip.is-missing,
.guard-status-chip.is-missing {
    background: rgba(190, 56, 56, 0.2);
    color: #ffb1b1;
}

.guard-legend-chip.is-future,
.guard-status-chip.is-future {
    background: rgba(220, 144, 22, 0.2);
    color: #ffd287;
}

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

.guard-weekdays {
    margin-bottom: 0.55rem;
}

.guard-weekdays span {
    text-align: center;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(228, 240, 231, 0.5);
}

.guard-day-button {
    min-height: 90px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f5fff8;
    display: grid;
    justify-items: start;
    align-content: space-between;
    gap: 0.2rem;
    padding: 0.65rem 0.5rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.guard-day-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.guard-day-button:disabled {
    opacity: 0.36;
    cursor: default;
}

.guard-day-button.is-done {
    background: linear-gradient(180deg, rgba(33, 123, 71, 0.52), rgba(15, 54, 31, 0.74));
}

.guard-day-button.is-missing {
    background: linear-gradient(180deg, rgba(128, 26, 26, 0.46), rgba(62, 13, 13, 0.74));
}

.guard-day-button.is-future {
    background: linear-gradient(180deg, rgba(184, 116, 18, 0.42), rgba(80, 49, 8, 0.74));
}

.guard-day-button.is-idle {
    background: rgba(255, 255, 255, 0.025);
}

.guard-day-button.is-today {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.guard-day-button.is-outside {
    opacity: 0.28;
}

.guard-day-number {
    font-size: 0.96rem;
    font-weight: 800;
}

.guard-day-count {
    font-size: 0.68rem;
}

.guard-empty {
    padding: 1.1rem;
    text-align: center;
}

.guard-modal-dialog {
    max-width: 760px;
}

.guard-picker-dialog {
    max-width: 620px;
}

.guard-modal-content {
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(8, 13, 10, 0.99), rgba(13, 21, 16, 0.99));
    color: #f3fff7;
}

.guard-modal-body {
    max-height: 74vh;
    overflow: auto;
    display: grid;
    gap: 0.8rem;
}

.guard-picker-body {
    display: grid;
    gap: 0.8rem;
}

.guard-picker-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #f3fff7;
}

.guard-picker-card strong,
.guard-picker-card p {
    margin: 0;
}

.guard-picker-card p {
    color: rgba(228, 240, 231, 0.72);
    font-size: 0.78rem;
    line-height: 1.4;
}

.guard-picker-arrow {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #9af3bf;
    flex: 0 0 auto;
}

.guard-entry-card,
.guard-stamp-card {
    padding: 0.9rem;
}

.guard-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.guard-entry-copy {
    font-size: 0.8rem;
    line-height: 1.4;
}

.guard-photo-list {
    display: grid;
    gap: 0.6rem;
}

.guard-photo-list h5 {
    margin: 0;
    color: #f3fff7;
    font-size: 0.82rem;
}

.guard-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.6rem;
}

.guard-photo-item {
    display: grid;
    gap: 0.3rem;
}

.guard-photo-item img {
    width: 50%;
    height: 50px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.guard-photo-item span {
    font-size: 0.68rem;
    color: rgba(228, 240, 231, 0.72);
    line-height: 1.3;
}

.guard-report-form {
    display: grid;
    gap: 0.7rem;
}

.guard-upload-input,
.guard-comment-input {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    color: #f4fff7;
    padding: 0.85rem 0.95rem;
}

.guard-comment-input {
    min-height: 94px;
    resize: vertical;
}

.guard-upload-help,
.guard-stamp-card {
    font-size: 0.74rem;
    line-height: 1.45;
}

.guard-detail-dialog {
    max-width: 1120px;
}

.guard-detail-content {
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(9, 14, 11, 0.995), rgba(15, 23, 18, 0.995));
    color: #f3fff7;
    max-height: calc(100vh - 2rem);
}

.guard-detail-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    height: min(760px, calc(100vh - 2rem));
}

.guard-detail-nav {
    padding: 1rem 0.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.guard-detail-nav-btn {
    width: 30%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.78rem 0.82rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: rgba(228, 240, 231, 0.72);
    text-align: left;
    font-size: 0.83rem;
    font-weight: 700;
}

.guard-detail-nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f4fff8;
}

.guard-detail-nav-btn.is-active {
    background: rgba(39, 158, 91, 0.16);
    color: #aef7ca;
}

.guard-detail-nav-btn i {
    width: 16px;
    text-align: center;
    font-size: 0.78rem;
}

.guard-detail-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.guard-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.guard-detail-title-wrap h4,
.guard-detail-title-wrap p {
    margin: 0;
}

.guard-detail-title-wrap h4 {
    margin-top: 0.18rem;
    font-size: 1.34rem;
    font-weight: 800;
    color: #f4fff8;
}

.guard-detail-title-wrap p {
    margin-top: 0.28rem;
    color: rgba(228, 240, 231, 0.72);
    font-size: 0.82rem;
}

.guard-detail-statuses {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.guard-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #eefaf2;
    font-size: 0.69rem;
    font-weight: 700;
}

.guard-pill.is-live {
    background: rgba(39, 158, 91, 0.17);
    color: #aef7ca;
}

.guard-pill.is-missing {
    background: rgba(190, 56, 56, 0.18);
    color: #ffb1b1;
}

.guard-pill.is-future {
    background: rgba(220, 144, 22, 0.16);
    color: #ffd287;
}

.guard-pill.is-muted {
    color: rgba(228, 240, 231, 0.72);
}

.guard-detail-scroll {
    padding: 1rem 1.1rem 1.1rem;
    overflow: auto;
    min-height: 0;
}

.guard-detail-section {
    display: none;
    flex-direction: column;
    gap: 0.9rem;
}

.guard-detail-section.is-active {
    display: flex;
}

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

.guard-detail-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 0.75rem;
}

.guard-detail-card {
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.guard-detail-card.is-full {
    grid-column: 1 / -1;
}

.guard-detail-card h5 {
    margin: 0 0 0.75rem;
    font-size: 0.77rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(228, 240, 231, 0.62);
}

.guard-detail-list {
    display: grid;
    gap: 0.65rem;
}

.guard-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

.guard-detail-item span {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(228, 240, 231, 0.48);
}

.guard-detail-item strong,
.guard-detail-copy {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #f2fbf5;
}

.guard-detail-copy {
    color: rgba(228, 240, 231, 0.72);
}

.guard-detail-copy a,
.guard-detail-item a {
    color: #9af3bf;
}

.guard-map-card {
    overflow: hidden;
}

.guard-mini-map {
    width: 100%;
    height: 190px;
    border: 0;
    border-radius: 14px;
    display: block;
    background: rgba(255, 255, 255, 0.03);
}

.guard-map-meta {
    margin-top: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.guard-map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #9af3bf;
    font-size: 0.76rem;
    font-weight: 700;
}

.guard-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.45rem;
}

.guard-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #eefaf2;
}

.guard-checklist i {
    margin-top: 0.18rem;
    color: #9af3bf;
}

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

@media (max-width: 767px) {
    .guard-topbar,
    .guard-entry-head,
    .guard-picker-card,
    .guard-detail-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .guard-day-button {
        min-height: 76px;
        padding: 0.5rem 0.4rem;
    }

    .guard-detail-shell {
        grid-template-columns: 1fr;
        height: calc(100vh - 2rem);
    }

    .guard-detail-nav {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        gap: 0.18rem;
        padding: 0.45rem 0.5rem;
    }

    .guard-detail-nav-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        gap: 0.4rem;
        padding: 0.52rem 0.62rem;
        border-radius: 11px;
        font-size: 0.74rem;
    }

    .guard-detail-nav-btn i {
        width: 13px;
        font-size: 0.68rem;
    }

    .guard-detail-statuses,
    .guard-detail-grid,
    .guard-detail-split {
        justify-content: flex-start;
        grid-template-columns: 1fr;
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   SCHEDULE
   ═══════════════════════════════════════════════════════════════════════ */
.sc-shell { display:flex; flex-direction:column; gap:0.85rem; padding-bottom:3rem; }

/* View-mode tabs */
.sc-view-tabs { display:flex; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); overflow:hidden; width:fit-content;margin-top:20px }
.sc-view-tab { padding:0.38rem 1.1rem; font-size:0.74rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#7a9ab2; text-decoration:none; transition:background .14s,color .14s; display:flex; align-items:center; gap:0.35rem; }
.sc-view-tab:hover { background:rgba(255,255,255,0.06); color:#ecf3f8; text-decoration:none; }
.sc-view-tab.is-active { background:rgba(99,179,237,0.14); color:#63b3ed; }

/* Topbar nav */
.sc-topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; }
.sc-nav { display:flex; align-items:center; gap:0.45rem; }
.sc-nav-btn { width:32px; height:32px; border-radius:9px; border:1px solid rgba(255,255,255,0.11); background:rgba(255,255,255,0.04); color:#aec6d8; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .14s,color .14s; flex-shrink:0; }
.sc-nav-btn:hover { background:rgba(255,255,255,0.1); color:#fff; text-decoration:none; }
.sc-nav-label { font-size:0.88rem; font-weight:700; letter-spacing:0.03em; min-width:170px; text-align:center; color:#ecf3f8; }
.sc-today-btn { height:32px; padding:0 0.75rem; border-radius:9px; border:1px solid rgba(255,255,255,0.11); background:rgba(255,255,255,0.04); color:#aec6d8; font-size:0.72rem; font-weight:600; text-decoration:none; display:flex; align-items:center; transition:background .14s,color .14s; }
.sc-today-btn:hover { background:rgba(255,255,255,0.1); color:#fff; text-decoration:none; }

/* KPI strip */
.sc-kpi-strip { display:flex; gap:0.45rem; flex-wrap:wrap; }
.sc-kpi { padding:0.28rem 0.65rem; border-radius:8px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); font-size:0.68rem; color:#aec6d8; display:flex; align-items:center; gap:0.28rem; }
.sc-kpi strong { color:#ecf3f8; font-size:0.8rem; }

/* Filter bar */
.sc-filter-bar-wrap { overflow-x:auto; padding-bottom:2px; }
.sc-filter-bar { display:flex; gap:0.4rem; flex-wrap:nowrap; align-items:center; min-width:max-content; }
.sc-filter-bar input, .sc-filter-bar select { height:32px; padding:0 0.55rem; border-radius:9px; border:1px solid rgba(255,255,255,0.11); background:rgba(11,18,24,0.92); color:#ecf3f8; font-size:0.72rem; }
.sc-filter-bar input:focus, .sc-filter-bar select:focus { outline:none; border-color:rgba(99,179,237,0.45); }
.sc-filter-bar input { width:170px; }
.sc-filter-bar select { width:128px; }

/* Grid wrapper */
.sc-grid-wrap { overflow-x:auto; border-radius:14px; border:1px solid rgba(255,255,255,0.07); }

/* Table */
.sc-table { width:100%; border-collapse:separate; border-spacing:0; }
.sc-table.is-week  { min-width:900px; }
.sc-table.is-month { min-width:1600px; }

/* Header */
.sc-table thead th { background:rgba(8,15,22,0.97); border-bottom:1px solid rgba(255,255,255,0.08); padding:0; vertical-align:bottom; position:sticky; top:0; z-index:10; }
.sc-th-site { width:210px; min-width:190px; padding:0.65rem 0.85rem; text-align:left; }
.sc-th-site span { font-size:0.63rem; letter-spacing:0.13em; text-transform:uppercase; color:#7a9ab2; }

/* Week header day */
.sc-th-day-week { text-align:center; padding:0.45rem 0.35rem 0.55rem; border-left:1px solid rgba(255,255,255,0.05); min-width:115px; }
.sc-th-day-week .day-name { font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase; color:#7a9ab2; margin-bottom:0.12rem; }
.sc-th-day-week .day-num  { font-size:1.0rem; font-weight:800; color:#ecf3f8; line-height:1; }
.sc-th-day-week.is-today .day-name, .sc-th-day-week.is-today .day-num { color:#63b3ed; }
.sc-th-day-week .day-stats { display:flex; justify-content:center; gap:0.25rem; margin-top:0.25rem; flex-wrap:wrap; }
.day-stat { font-size:0.56rem; padding:0.1rem 0.3rem; border-radius:4px; background:rgba(255,255,255,0.06); color:#aec6d8; white-space:nowrap; }
.day-stat.is-ok   { background:rgba(56,161,105,0.18); color:#68d391; }
.day-stat.is-open { background:rgba(229,62,62,0.14);  color:#fc8181; }
.day-stat.is-hrs  { background:rgba(99,179,237,0.12); color:#63b3ed; }

/* Month header day */
.sc-th-day-month { text-align:center; padding:0.35rem 0.1rem 0.4rem; border-left:1px solid rgba(255,255,255,0.04); min-width:44px; }
.sc-th-day-month .day-name { font-size:0.52rem; letter-spacing:0.08em; text-transform:uppercase; color:#5a7a92; }
.sc-th-day-month .day-num  { font-size:0.78rem; font-weight:700; color:#c0d6e8; line-height:1; }
.sc-th-day-month.is-today .day-name, .sc-th-day-month.is-today .day-num { color:#63b3ed; }
.sc-th-day-month.is-weekend .day-num { color:#7a9ab2; }

/* Body rows */
.sc-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); }
.sc-table tbody tr:last-child { border-bottom:none; }
.sc-table tbody td { background:rgba(10,17,25,0.6); vertical-align:top; padding:0; }
.sc-table tbody tr:hover td { background:rgba(255,255,255,0.02); }

/* Site info cell */
.sc-site-cell { padding:0.6rem 0.85rem; border-right:1px solid rgba(255,255,255,0.06); position:sticky; left:0; z-index:2; background:rgba(8,15,22,0.97); }
.sc-site-name { font-size:0.77rem; font-weight:700; color:#ecf3f8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:188px; }
.sc-site-client { font-size:0.65rem; color:#7a9ab2; margin-top:0.08rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:188px; }
.sc-site-company { font-size:0.58rem; color:#5a7a92; margin-top:0.06rem; }
.sc-site-stats { display:flex; gap:0.28rem; margin-top:0.35rem; flex-wrap:wrap; }
.sc-site-stat { font-size:0.58rem; padding:0.08rem 0.3rem; border-radius:4px; background:rgba(255,255,255,0.05); color:#aec6d8; }
.sc-site-stat.is-ok    { background:rgba(56,161,105,0.18); color:#68d391; }
.sc-site-stat.is-alert { background:rgba(229,62,62,0.14);  color:#fc8181; }

/* Week day cell */
.sc-day-cell-week { padding:0.35rem; border-left:1px solid rgba(255,255,255,0.05); min-height:58px; vertical-align:top; position:relative; }
.sc-day-cell-week.is-today-col { background:rgba(99,179,237,0.04); }

/* Shift cards */
.sc-shift-stack { display:flex; flex-direction:column; gap:0.25rem; }
.sc-shift-card { border-radius:7px; padding:0.28rem 0.4rem; font-size:0.66rem; line-height:1.3; border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.04); cursor:pointer; transition:background .12s; position:relative; }
.sc-shift-card:hover { background:rgba(255,255,255,0.08); }
.sc-shift-card.is-assigned { background:rgba(56,161,105,0.1); border-color:rgba(56,161,105,0.2); }
.sc-shift-card.is-open     { background:rgba(229,62,62,0.06); border-color:rgba(229,62,62,0.18); }
.sc-shift-time  { font-weight:700; font-size:0.68rem; color:#ecf3f8; white-space:nowrap; }
.sc-shift-guard { font-size:0.6rem; color:#7a9ab2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }
.sc-shift-card.is-assigned .sc-shift-guard { color:#68d391; }
.sc-shift-card.is-open     .sc-shift-guard { color:#fc8181; }
.sc-shift-dot { position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:50%; background:#fc8181; }
.sc-shift-card.is-assigned .sc-shift-dot { background:#68d391; }

/* Month day cell */
.sc-day-cell-month { padding:0.2rem 0.15rem; border-left:1px solid rgba(255,255,255,0.04); min-height:52px; vertical-align:top; position:relative; }
.sc-day-cell-month.is-today-col { background:rgba(99,179,237,0.05); }
.sc-day-cell-month.is-weekend   { background:rgba(255,255,255,0.01); }
.sc-month-dots  { display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:2px; }
.sc-month-dot   { width:8px; height:8px; border-radius:50%; background:#fc8181; flex-shrink:0; }
.sc-month-dot.is-assigned { background:#68d391; }
.sc-month-badge { font-size:0.55rem; font-weight:700; padding:0.08rem 0.22rem; border-radius:4px; background:rgba(56,161,105,0.2); color:#68d391; white-space:nowrap; }
.sc-month-badge.has-open { background:rgba(229,62,62,0.18); color:#fc8181; }

/* Request badge on shift card */
.sc-shift-req { font-size:0.53rem; color:rgba(255,255,255,0.35); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:96px; margin-top:1px; letter-spacing:0.02em; }
.sc-shift-card.is-assigned .sc-shift-req { color:rgba(104,211,145,0.55); }
.sc-shift-card.is-open     .sc-shift-req { color:rgba(252,129,129,0.5); }

/* Add-shift (+) button */
.sc-add-btn { width:22px; height:22px; border-radius:6px; border:1px dashed rgba(255,255,255,0.2); background:transparent; color:rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; font-size:0.7rem; cursor:pointer; transition:all .14s; margin-top:0.2rem; flex-shrink:0; }
.sc-day-cell-week:hover .sc-add-btn, .sc-day-cell-month:hover .sc-add-btn { border-color:rgba(99,179,237,0.55); color:#63b3ed; background:rgba(99,179,237,0.08); }
.sc-day-cell-month .sc-add-btn { width:18px; height:18px; font-size:0.6rem; margin:2px auto 0; }

/* Quick-add modal */
.sc-qa-body   { display:flex; flex-direction:column; gap:0.9rem; }
.sc-qa-meta   { display:grid; grid-template-columns:1fr 1fr; gap:0.55rem; padding:0.6rem 0.8rem; border-radius:10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); }
.sc-qa-meta-item { display:flex; flex-direction:column; gap:0.06rem; }
.sc-qa-meta-item span   { font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:#7a9ab2; }
.sc-qa-meta-item strong { font-size:0.8rem; color:#ecf3f8; }
.sc-qa-fields  { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.sc-qa-field   { display:flex; flex-direction:column; gap:0.25rem; }
.sc-qa-field label { font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:#7a9ab2; }
.sc-qa-field input, .sc-qa-field select { height:34px; padding:0 0.65rem; border-radius:9px; border:1px solid rgba(255,255,255,0.12); background:rgba(11,18,24,0.92); color:#ecf3f8; font-size:0.78rem; }
.sc-qa-field input:focus, .sc-qa-field select:focus { outline:none; border-color:rgba(99,179,237,0.45); }
.sc-qa-field.is-full { grid-column:1 / -1; }

/* Assign modal meta */
.sc-modal-meta { display:grid; grid-template-columns:1fr 1fr; gap:0.55rem; }
.sc-modal-meta-item { display:flex; flex-direction:column; gap:0.06rem; }
.sc-modal-meta-item span   { font-size:0.63rem; letter-spacing:0.1em; text-transform:uppercase; color:#7a9ab2; }
.sc-modal-meta-item strong { font-size:0.8rem; color:#ecf3f8; }

/* Shift detail modal */
.sc-detail-shell { display:grid; grid-template-columns:210px minmax(0, 1fr); min-height:560px; border-radius:18px; overflow:hidden; background:linear-gradient(180deg, rgba(14,23,33,0.98) 0%, rgba(9,16,24,0.98) 100%); border:1px solid rgba(255,255,255,0.07); }
.sc-detail-nav { padding:1rem 0.75rem; background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border-right:1px solid rgba(255,255,255,0.07); display:flex; flex-direction:column; gap:0.3rem; }
.sc-detail-nav-btn { width:100%; display:flex; align-items:center; gap:0.65rem; padding:0.72rem 0.8rem; border:0; border-radius:12px; background:transparent; color:#90a8bc; font-size:0.83rem; font-weight:600; text-align:left; transition:background .14s,color .14s; }
.sc-detail-nav-btn:hover { background:rgba(255,255,255,0.05); color:#f6fbff; }
.sc-detail-nav-btn.is-active { background:rgba(99,179,237,0.12); color:#8ed0ff; }
.sc-detail-nav-btn i { width:16px; text-align:center; font-size:0.78rem; }
.sc-detail-main { min-width:0; display:flex; flex-direction:column; }
.sc-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 1.1rem 0.85rem; border-bottom:1px solid rgba(255,255,255,0.07); }
.sc-detail-title-wrap { min-width:0; }
.sc-detail-kicker { font-size:0.72rem; letter-spacing:0.11em; text-transform:uppercase; color:#7a9ab2; }
.sc-detail-title { margin:.2rem 0 0; font-size:1.38rem; font-weight:800; color:#f3f8fc; line-height:1.1; }
.sc-detail-subtitle { margin:.28rem 0 0; font-size:0.82rem; color:#8ea7ba; }
.sc-detail-statuses { display:flex; gap:0.45rem; flex-wrap:wrap; justify-content:flex-end; }
.sc-pill { display:inline-flex; align-items:center; gap:0.35rem; padding:0.34rem 0.7rem; border-radius:999px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); color:#dfeaf1; font-size:0.69rem; font-weight:700; letter-spacing:0.02em; }
.sc-pill.is-open { color:#ffb3b3; border-color:rgba(229,62,62,0.24); background:rgba(229,62,62,0.12); }
.sc-pill.is-assigned, .sc-pill.is-approved { color:#86e6b0; border-color:rgba(40,199,111,0.24); background:rgba(40,199,111,0.12); }
.sc-pill.is-pending { color:#fbd164; border-color:rgba(251,189,35,0.22); background:rgba(251,189,35,0.12); }
.sc-pill.is-muted { color:#9bb1c3; }
.sc-detail-scroll { padding:1rem 1.1rem 1.1rem; overflow:auto; }
.sc-detail-section { display:none; flex-direction:column; gap:0.9rem; }
.sc-detail-section.is-active { display:flex; }
.sc-detail-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.75rem; }
.sc-detail-card { border-radius:14px; padding:0.9rem 1rem; background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.07); }
.sc-detail-card.is-full { grid-column:1 / -1; }
.sc-detail-card h6 { margin:0 0 0.7rem; font-size:0.76rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#7a9ab2; }
.sc-detail-list { display:flex; flex-direction:column; gap:0.65rem; }
.sc-detail-item { display:flex; flex-direction:column; gap:0.16rem; }
.sc-detail-item span { font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase; color:#6f8aa0; }
.sc-detail-item strong, .sc-detail-item p { margin:0; font-size:0.84rem; color:#edf5fa; line-height:1.45; }
.sc-detail-item p { color:#b8c7d3; }
.sc-detail-item a { color:#8ed0ff; }
.sc-detail-empty { margin:0; font-size:0.78rem; color:#7f98ab; line-height:1.5; }
.sc-detail-checklist { display:grid; gap:0.45rem; margin:0; padding:0; list-style:none; }
.sc-detail-check { display:flex; align-items:flex-start; gap:0.5rem; color:#dce7ef; font-size:0.8rem; }
.sc-detail-check i { margin-top:0.18rem; color:#63b3ed; }
.sc-detail-split { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:0.75rem; }
.sc-detail-footer { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; flex-wrap:wrap; padding:0.9rem 1.1rem 1.05rem; border-top:1px solid rgba(255,255,255,0.07); background:rgba(7,13,20,0.8); }
.sc-detail-assign { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.sc-detail-assign select { width:190px; height:34px; padding:0 .6rem; border-radius:9px; border:1px solid rgba(255,255,255,.12); background:rgba(11,18,24,.92); color:#ecf3f8; font-size:.76rem; }

/* Report section inside assign modal */
.sc-modal-reports { border-top:1px solid rgba(255,255,255,.07); padding-top:.75rem; margin-top:.75rem; }
.sc-modal-att { display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:#aec6d8; margin-bottom:.6rem; flex-wrap:wrap; }
.sc-modal-att .lbl { font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:#7a9ab2; }
.sc-modal-att .val { font-weight:600; color:#ecf3f8; }
.sc-rpt-header { display:flex; justify-content:space-between; align-items:center; font-size:.63rem; text-transform:uppercase; letter-spacing:.08em; color:#7a9ab2; margin-bottom:.4rem; gap:.6rem; }
.sc-rpt-header-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.sc-rpt-header .sc-rpt-progress { font-weight:700; }
.sc-rpt-progress.ok  { color:#28c76f; }
.sc-rpt-progress.bad { color:#ea5455; }
.sc-rpt-pdf-btn { display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; }
.sc-rpt-toolbar { display:flex; gap:.45rem; flex-wrap:wrap; margin:0 0 .7rem; }
.sc-rpt-bulk-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .65rem; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#d9e6ef; font-size:.67rem; font-weight:700; letter-spacing:.02em; }
.sc-rpt-bulk-btn:hover { color:#fff; text-decoration:none; background:rgba(255,255,255,.08); }
.sc-rpt-list { display:flex; flex-direction:column; gap:.55rem; max-height:360px; overflow-y:auto; }
.sc-rpt-card { display:grid; gap:.55rem; padding:.55rem; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); transition:opacity .14s ease, transform .14s ease; }
.sc-rpt-card.is-busy { opacity:.6; pointer-events:none; transform:scale(.995); }
.sc-rpt-card.is-collapsed { display:flex; align-items:center; gap:.65rem; padding:.42rem .55rem; }
.sc-rpt-card.is-collapsed .sc-rpt-card-top { flex:1 1 auto; align-items:center; min-width:0; }
.sc-rpt-card.is-collapsed .sc-rpt-card-meta { flex:1 1 auto; min-width:0; }
.sc-rpt-card.is-collapsed .sc-rpt-field-grid,
.sc-rpt-card.is-collapsed .sc-rpt-quick,
.sc-rpt-card.is-collapsed [data-role="report-save-button"] { display:none; }
.sc-rpt-card.is-collapsed .sc-rpt-actions { margin-left:auto; justify-content:flex-end; flex:0 0 auto; }
.sc-rpt-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.55rem; }
.sc-rpt-card-meta { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; min-width:0; }
.sc-rpt-badge { font-size:.61rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.12rem .4rem; border-radius:5px; white-space:nowrap; }
.sc-rpt-pending  .sc-rpt-badge { background:rgba(251,189,35,.15); color:#fbbd23; }
.sc-rpt-approved .sc-rpt-badge { background:rgba(40,199,111,.15);  color:#28c76f; }
.sc-rpt-rejected .sc-rpt-badge { background:rgba(234,84,85,.15);   color:#ea5455; }
.sc-rpt-waived   .sc-rpt-badge { background:rgba(122,154,178,.15); color:#aec6d8; }
.sc-rpt-time, .sc-rpt-guard { color:#7a9ab2; font-size:.72rem; white-space:nowrap; }
.sc-rpt-photo-thumb { width:58px; height:58px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); display:block; flex:0 0 auto; }
.sc-rpt-photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sc-rpt-card.is-collapsed .sc-rpt-photo-thumb,
.sc-rpt-card.is-collapsed .sc-rpt-no-photo { width:42px; height:42px; border-radius:8px; }
.sc-rpt-no-photo { width:58px; height:58px; border-radius:10px; border:1px dashed rgba(255,255,255,.12); color:#7a9ab2; font-size:.64rem; display:grid; place-items:center; text-align:center; padding:.25rem; flex:0 0 auto; }
.sc-rpt-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.sc-rpt-field-grid select,
.sc-rpt-field-grid input,
.sc-rpt-field-grid textarea { width:100%; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(11,18,24,.92); color:#ecf3f8; font-size:.75rem; }
.sc-rpt-field-grid select,
.sc-rpt-field-grid input { height:34px; padding:0 .65rem; }
.sc-rpt-field-grid textarea { min-height:64px; padding:.5rem .65rem; resize:vertical; line-height:1.4; }
.sc-rpt-field-grid .is-full { grid-column:1 / -1; }
.sc-rpt-actions { display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sc-rpt-quick { display:flex; gap:.4rem; flex-wrap:wrap; }
.sc-rpt-quick-btn { display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .58rem; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:#cfe0eb; font-size:.66rem; font-weight:700; }
.sc-rpt-quick-btn:hover { color:#fff; background:rgba(255,255,255,.08); }
.sc-rpt-quick-btn.is-approve { border-color:rgba(40,199,111,.26); color:#86e6b0; }
.sc-rpt-quick-btn.is-reject { border-color:rgba(234,84,85,.26); color:#ff9e9f; }
.sc-rpt-quick-btn.is-waive { border-color:rgba(251,189,35,.22); color:#fbd164; }
.sc-rpt-toggle-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .58rem; border-radius:999px; border:1px solid rgba(99,179,237,.22); background:rgba(99,179,237,.08); color:#9fd2ff; font-size:.66rem; font-weight:700; }
.sc-rpt-toggle-btn:hover { color:#fff; background:rgba(99,179,237,.14); }
.sc-rpt-empty { font-size:.72rem; color:#7a9ab2; text-align:center; padding:.4rem 0; }

/* Inline-edit modal */
.sc-edit-fields { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.sc-edit-field  { display:flex; flex-direction:column; gap:0.25rem; }
.sc-edit-field label { font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:#7a9ab2; }
.sc-edit-field input, .sc-edit-field select, .sc-edit-field textarea { padding:0 0.65rem; border-radius:9px; border:1px solid rgba(255,255,255,0.12); background:rgba(11,18,24,0.92); color:#ecf3f8; font-size:0.78rem; }
.sc-edit-field input, .sc-edit-field select { height:34px; }
.sc-edit-field textarea { padding:0.45rem 0.65rem; resize:vertical; min-height:60px; line-height:1.4; }
.sc-edit-field input:focus, .sc-edit-field select:focus, .sc-edit-field textarea:focus { outline:none; border-color:rgba(99,179,237,0.45); }
.sc-edit-field.is-full { grid-column:1 / -1; }
.sc-edit-meta { display:grid; grid-template-columns:1fr 1fr; gap:0.45rem; padding:0.55rem 0.75rem; border-radius:9px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); margin-bottom:0.85rem; }
.sc-edit-meta-item { display:flex; flex-direction:column; gap:0.04rem; }
.sc-edit-meta-item span   { font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:#7a9ab2; }
.sc-edit-meta-item strong { font-size:0.78rem; color:#ecf3f8; }

/* Toast */
.sc-toast-stack { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:0.45rem; pointer-events:none; }
.sc-toast { padding:0.5rem 1rem; border-radius:9px; background:rgba(56,161,105,0.92); color:#fff; font-size:0.76rem; font-weight:600; pointer-events:none; opacity:0; transform:translateY(8px); transition:opacity .17s,transform .17s; box-shadow:0 4px 18px rgba(0,0,0,.35); }
.sc-toast.is-visible { opacity:1; transform:translateY(0); }
.sc-toast.is-error   { background:rgba(229,62,62,0.92); }

@media (max-width: 767px) {
    .sc-detail-shell { grid-template-columns:1fr; min-height:auto; }
    .sc-detail-nav { border-right:none; border-bottom:1px solid rgba(255,255,255,0.07); overflow-x:auto; flex-direction:row; padding:0.75rem; }
    .sc-detail-nav-btn { flex:0 0 auto; white-space:nowrap; }
    .sc-detail-head { flex-direction:column; }
    .sc-detail-statuses { justify-content:flex-start; }
    .sc-detail-grid, .sc-detail-split { grid-template-columns:1fr; }
    .sc-detail-footer { align-items:stretch; }
    .sc-detail-assign { width:100%; }
    .sc-detail-assign select { width:100%; }
    .sc-rpt-field-grid { grid-template-columns:1fr; }
    .sc-rpt-card-top { flex-direction:column; }
    .sc-rpt-actions { align-items:stretch; }
    .sc-rpt-card.is-collapsed { display:grid; }
    .sc-rpt-card.is-collapsed .sc-rpt-card-top { align-items:flex-start; }
    .sc-rpt-card.is-collapsed .sc-rpt-actions { margin-left:0; }
}