:root {
    color-scheme: light;
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-line);
    --bs-primary: var(--app-primary);
    --bs-danger: var(--app-danger);
    --bs-warning: var(--app-warning);
    --bs-success: var(--app-success);
    --bs-info: var(--app-info);
    --app-bg: #f5f7fa;
    --app-surface: #ffffff;
    --app-surface-muted: #eef3f8;
    --app-text: #111827;
    --app-muted: #5f6b7a;
    --app-line: #d5dce7;
    --app-primary: #2563eb;
    --app-primary-dark: #1e40af;
    --app-accent: #059669;
    --app-danger: #dc2626;
    --app-danger-dark: #991b1b;
    --app-warning: #d97706;
    --app-warning-dark: #92400e;
    --app-info: #0ea5e9;
    --app-info-dark: #0369a1;
    --app-success: #059669;
    --app-success-dark: #047857;
    --app-on-primary: #ffffff;
    --app-disabled: #95a6ba;
    --app-focus: rgba(37, 99, 235, 0.25);
    --app-shadow-sm: 0 8px 18px rgba(17, 24, 39, 0.06);
    --app-shadow-md: 0 16px 36px rgba(17, 24, 39, 0.12);
    --app-nav-bg: #16324f;
    --app-nav-border: rgba(255, 255, 255, 0.1);
    --app-nav-text: #e6eef8;
    --app-nav-muted: rgba(230, 238, 248, 0.72);
    --app-nav-hover-bg: rgba(255, 255, 255, 0.1);
    --app-nav-active-bg: rgba(37, 99, 235, 0.34);
    --app-top-bg: #ffffff;
    --app-chart-bg: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    --app-chart-grid: #dce3ec;
    --app-chart-axis: #64748b;
    --app-chart-label: #475569;
    --app-success-bg: #ecfdf5;
    --app-success-line: #a7f3d0;
    --app-warning-bg: #fff7ed;
    --app-warning-line: #fed7aa;
    --app-danger-bg: #fef2f2;
    --app-danger-line: #fecaca;
    --app-info-bg: #eff6ff;
    --app-info-line: #bfdbfe;
}

html[data-theme="gray-sky"],
html[data-theme="slate-teal"] {
    --app-bg: #f6f8f9;
    --app-surface: #ffffff;
    --app-surface-muted: #edf4f3;
    --app-text: #17212b;
    --app-muted: #5f6b73;
    --app-line: #d5dde2;
    --app-primary: #0f766e;
    --app-primary-dark: #115e59;
    --app-accent: #2563eb;
    --app-danger: #b91c1c;
    --app-danger-dark: #7f1d1d;
    --app-warning: #b45309;
    --app-warning-dark: #78350f;
    --app-info: #2563eb;
    --app-info-dark: #1d4ed8;
    --app-success: #16a34a;
    --app-success-dark: #15803d;
    --app-focus: rgba(15, 118, 110, 0.25);
    --app-shadow-sm: 0 8px 18px rgba(31, 41, 55, 0.06);
    --app-shadow-md: 0 16px 36px rgba(31, 41, 55, 0.13);
    --app-nav-bg: #1f2937;
    --app-nav-border: rgba(255, 255, 255, 0.1);
    --app-nav-text: #e5edf0;
    --app-nav-muted: rgba(229, 237, 240, 0.72);
    --app-nav-hover-bg: rgba(255, 255, 255, 0.1);
    --app-nav-active-bg: rgba(20, 184, 166, 0.25);
    --app-top-bg: #ffffff;
    --app-chart-bg: linear-gradient(180deg, #ffffff 0%, #eef6f5 100%);
    --app-chart-grid: #d7e5e3;
    --app-chart-axis: #60716f;
    --app-chart-label: #455451;
}

html[data-theme="royal-navy"],
html[data-theme="navy-gold"] {
    --app-bg: #f7f7f4;
    --app-surface: #ffffff;
    --app-surface-muted: #f0f1ec;
    --app-text: #111827;
    --app-muted: #686860;
    --app-line: #dddace;
    --app-primary: #1d4ed8;
    --app-primary-dark: #1e3a8a;
    --app-accent: #b7791f;
    --app-danger: #b91c1c;
    --app-danger-dark: #7f1d1d;
    --app-warning: #b7791f;
    --app-warning-dark: #7c4a0b;
    --app-info: #2563eb;
    --app-info-dark: #1d4ed8;
    --app-success: #15803d;
    --app-success-dark: #166534;
    --app-focus: rgba(29, 78, 216, 0.24);
    --app-shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.06);
    --app-shadow-md: 0 16px 36px rgba(15, 23, 42, 0.13);
    --app-nav-bg: #0f172a;
    --app-nav-border: rgba(255, 255, 255, 0.1);
    --app-nav-text: #eef2ff;
    --app-nav-muted: rgba(238, 242, 255, 0.72);
    --app-nav-hover-bg: rgba(255, 255, 255, 0.1);
    --app-nav-active-bg: rgba(183, 121, 31, 0.28);
    --app-top-bg: #ffffff;
    --app-chart-bg: linear-gradient(180deg, #ffffff 0%, #f4f2e8 100%);
    --app-chart-grid: #e2decf;
    --app-chart-axis: #6f6b5f;
    --app-chart-label: #535048;
}

html[data-theme="union-green"],
html[data-theme="union-solidarity"] {
    --app-bg: #f4f7f5;
    --app-surface: #ffffff;
    --app-surface-muted: #eaf3ee;
    --app-text: #17251f;
    --app-muted: #607069;
    --app-line: #d7e2db;
    --app-primary: #047857;
    --app-primary-dark: #065f46;
    --app-accent: #1d4ed8;
    --app-danger: #dc2626;
    --app-danger-dark: #991b1b;
    --app-warning: #d97706;
    --app-warning-dark: #92400e;
    --app-info: #2563eb;
    --app-info-dark: #1d4ed8;
    --app-success: #16a34a;
    --app-success-dark: #15803d;
    --app-focus: rgba(4, 120, 87, 0.25);
    --app-shadow-sm: 0 8px 18px rgba(23, 37, 31, 0.06);
    --app-shadow-md: 0 16px 36px rgba(23, 37, 31, 0.13);
    --app-nav-bg: #12343b;
    --app-nav-border: rgba(255, 255, 255, 0.1);
    --app-nav-text: #e6f2ed;
    --app-nav-muted: rgba(230, 242, 237, 0.72);
    --app-nav-hover-bg: rgba(255, 255, 255, 0.1);
    --app-nav-active-bg: rgba(4, 120, 87, 0.35);
    --app-top-bg: #ffffff;
    --app-chart-bg: linear-gradient(180deg, #ffffff 0%, #eef7f1 100%);
    --app-chart-grid: #d9e8df;
    --app-chart-axis: #5f7169;
    --app-chart-label: #485952;
}

html[data-theme="red-land"],
html[data-theme="social-vigilance"] {
    --app-bg: #f6f7f9;
    --app-surface: #ffffff;
    --app-surface-muted: #f1f3f5;
    --app-text: #1f2328;
    --app-muted: #66717a;
    --app-line: #d8dde3;
    --app-primary: #7f1d1d;
    --app-primary-dark: #5f1515;
    --app-accent: #2563eb;
    --app-danger: #b91c1c;
    --app-danger-dark: #7f1d1d;
    --app-warning: #b45309;
    --app-warning-dark: #78350f;
    --app-info: #2563eb;
    --app-info-dark: #1d4ed8;
    --app-success: #15803d;
    --app-success-dark: #166534;
    --app-focus: rgba(127, 29, 29, 0.22);
    --app-shadow-sm: 0 8px 18px rgba(38, 50, 56, 0.06);
    --app-shadow-md: 0 16px 36px rgba(38, 50, 56, 0.13);
    --app-nav-bg: #263238;
    --app-nav-border: rgba(255, 255, 255, 0.1);
    --app-nav-text: #edf2f4;
    --app-nav-muted: rgba(237, 242, 244, 0.72);
    --app-nav-hover-bg: rgba(255, 255, 255, 0.1);
    --app-nav-active-bg: rgba(127, 29, 29, 0.35);
    --app-top-bg: #ffffff;
    --app-chart-bg: linear-gradient(180deg, #ffffff 0%, #f2f4f6 100%);
    --app-chart-grid: #d8dde3;
    --app-chart-axis: #66717a;
    --app-chart-label: #4d565f;
}

html[data-theme="dark-mode"] {
    color-scheme: dark;
    --app-bg: #0f141b;
    --app-surface: #171d26;
    --app-surface-muted: #212a36;
    --app-text: #eef2f7;
    --app-muted: #a8b3c2;
    --app-line: #334050;
    --app-primary: #38bdf8;
    --app-primary-dark: #0ea5e9;
    --app-accent: #34d399;
    --app-danger: #f87171;
    --app-danger-dark: #ef4444;
    --app-warning: #fbbf24;
    --app-warning-dark: #f59e0b;
    --app-info: #60a5fa;
    --app-info-dark: #3b82f6;
    --app-success: #34d399;
    --app-success-dark: #10b981;
    --app-on-primary: #07111d;
    --app-disabled: #536273;
    --app-focus: rgba(56, 189, 248, 0.28);
    --app-shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.28);
    --app-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.38);
    --app-nav-bg: #090d14;
    --app-nav-border: rgba(255, 255, 255, 0.1);
    --app-nav-text: #e6edf6;
    --app-nav-muted: rgba(230, 237, 246, 0.72);
    --app-nav-hover-bg: rgba(255, 255, 255, 0.08);
    --app-nav-active-bg: rgba(56, 189, 248, 0.22);
    --app-top-bg: #141a23;
    --app-chart-bg: linear-gradient(180deg, #171d26 0%, #111827 100%);
    --app-chart-grid: #2d3847;
    --app-chart-axis: #7f8ea3;
    --app-chart-label: #cbd5e1;
    --app-success-bg: #0d2b22;
    --app-success-line: #17684f;
    --app-warning-bg: #33240a;
    --app-warning-line: #8a5a12;
    --app-danger-bg: #351515;
    --app-danger-line: #8d2a2a;
    --app-info-bg: #102640;
    --app-info-line: #255986;
}

html,
body {
    background: linear-gradient(180deg, var(--app-bg) 0%, var(--app-surface-muted) 100%);
    color: var(--app-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

a,
.btn-link {
    color: var(--app-primary);
}

.btn {
    border-radius: 6px;
    font-weight: 600;
}

.btn-primary {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-on-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--app-primary-dark);
    border-color: var(--app-primary-dark);
    color: var(--app-on-primary);
}

.btn-primary:disabled {
    background-color: var(--app-disabled);
    border-color: var(--app-disabled);
}

.btn-success,
.btn-action-save {
    background-color: var(--app-success);
    border-color: var(--app-success);
    color: var(--app-on-primary);
}

.btn-success:hover,
.btn-success:focus,
.btn-action-save:hover,
.btn-action-save:focus {
    background-color: var(--app-success-dark);
    border-color: var(--app-success-dark);
    color: var(--app-on-primary);
}

.btn-danger,
.btn-action-danger {
    background-color: var(--app-danger);
    border-color: var(--app-danger);
    color: var(--app-on-primary);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-action-danger:hover,
.btn-action-danger:focus {
    background-color: var(--app-danger-dark);
    border-color: var(--app-danger-dark);
    color: var(--app-on-primary);
}

.btn-warning,
.btn-action-warning {
    background-color: var(--app-warning);
    border-color: var(--app-warning);
    color: var(--app-on-primary);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-action-warning:hover,
.btn-action-warning:focus {
    background-color: var(--app-warning-dark);
    border-color: var(--app-warning-dark);
    color: var(--app-on-primary);
}

.btn-info,
.btn-action-info {
    background-color: var(--app-info);
    border-color: var(--app-info);
    color: var(--app-on-primary);
}

.btn-info:hover,
.btn-info:focus,
.btn-action-info:hover,
.btn-action-info:focus {
    background-color: var(--app-info-dark);
    border-color: var(--app-info-dark);
    color: var(--app-on-primary);
}

.btn-outline-danger {
    border-color: var(--app-danger);
    color: var(--app-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--app-danger);
    border-color: var(--app-danger);
    color: var(--app-on-primary);
}

.btn-outline-warning {
    border-color: var(--app-warning);
    color: var(--app-warning-dark);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: var(--app-warning);
    border-color: var(--app-warning);
    color: var(--app-on-primary);
}

.btn-outline-success {
    border-color: var(--app-primary);
    color: var(--app-primary-dark);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-on-primary);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem var(--app-focus);
}

.form-control,
.form-select,
input,
select,
textarea {
    background-color: var(--app-surface);
    border-color: var(--app-line);
    color: var(--app-text);
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: var(--app-surface);
    border-color: var(--app-primary);
    color: var(--app-text);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--app-muted);
    opacity: 0.78;
}

.content {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

h1:focus {
    outline: none;
}

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

.page-header.compact {
    align-items: center;
}

.page-header h1 {
    font-size: clamp(1.6rem, 2vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 0;
    margin: 0;
}

.page-intro {
    color: var(--app-muted);
    margin: 0.5rem 0 0;
    max-width: 760px;
}

.eyebrow {
    color: var(--app-accent);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

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

.metric-card,
.work-panel,
.table-panel {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    box-shadow: var(--app-shadow-sm);
}

.settings-panel,
.chart-card,
.page-feedback-panel,
.app-modal,
.read-only-detail {
    border-color: var(--app-line);
}

.metric-card {
    text-align: center;
}

.metric-card strong {
    display: block;
    text-align: center;
}

.appointments-metrics .metric-card strong {
    font-size: 1.85rem;
}

.appointment-calendar-grid,
.appointment-calendar-columns {
    display: grid;
    gap: 0.75rem;
    overflow-x: auto;
    padding-top: 0.5rem;
}

.appointment-calendar-grid {
    grid-template-columns: repeat(7, minmax(12rem, 1fr));
}

.appointment-view-region {
    display: block;
}

.appointment-calendar-columns {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.appointment-day,
.appointment-admin-day,
.appointment-new-requests {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    min-height: 10rem;
    padding: 0.75rem;
}

.appointment-calendar-layout {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 2fr) minmax(14rem, 0.7fr);
    margin-top: 0.75rem;
}

.appointment-new-requests {
    max-height: calc(100vh - 22rem);
    overflow-y: auto;
}

.appointment-calendar-assignees,
.appointment-policy-panel {
    align-items: center;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
}

.appointment-calendar-assignees label,
.appointment-policy-panel label {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
    margin: 0;
}

.appointment-policy-panel .form-control {
    max-width: 6rem;
}

.appointment-calendar-nav {
    align-items: center;
    border-top: 1px solid var(--app-line);
    display: flex;
    gap: 0.65rem;
    justify-content: center;
    margin-top: 0.35rem;
    padding-top: 0.75rem;
}

.appointment-hour-row {
    border-top: 1px solid var(--app-line);
    display: grid;
    gap: 0.45rem;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    padding: 0.45rem 0;
}

.appointment-hour-row:first-of-type {
    border-top: 0;
}

.appointment-hour-label {
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.appointment-hour-content {
    display: grid;
    gap: 0.4rem;
}

.appointment-drop-slot {
    border-radius: 8px;
    min-height: 2.25rem;
}

.appointment-slot-available {
    background: var(--app-success-bg);
    border: 1px dashed var(--app-success-line);
    border-radius: 6px;
    color: var(--app-success-dark);
    font-size: 0.78rem;
    font-weight: 800;
    min-height: 2rem;
    width: 100%;
}

.appointment-slot-available:hover,
.appointment-slot-available:focus {
    background: var(--app-success-line);
}

.appointment-create-hint {
    align-self: center;
}

.appointment-day h3,
.appointment-admin-day h3,
.appointment-new-requests h3,
.appointment-board h3,
.appointment-action-panel h3,
.appointment-history h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
}

.appointment-calendar-item,
.appointment-board-item {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-left: 4px solid var(--app-info);
    border-radius: 6px;
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    padding: 0.6rem;
    text-align: left;
    width: 100%;
}

.appointment-calendar-item.accepted,
.appointment-board-item.accepted {
    border-left-color: var(--app-primary);
}

.appointment-calendar-item.proposed,
.appointment-board-item.proposed {
    border-left-color: var(--app-warning);
}

.appointment-calendar-item.refused,
.appointment-calendar-item.memberrefused,
.appointment-calendar-item.cancelled,
.appointment-board-item.refused,
.appointment-board-item.memberrefused,
.appointment-board-item.cancelled {
    border-left-color: var(--app-danger);
}

.appointment-calendar-item:hover,
.appointment-calendar-item:focus,
.appointment-board-item:hover,
.appointment-board-item:focus {
    background: var(--app-surface-muted);
    border-color: var(--app-primary);
}

.appointment-calendar-item strong,
.appointment-board-item span {
    color: var(--app-primary-dark);
    font-size: 0.8rem;
}

.appointment-calendar-item span,
.appointment-board-item strong {
    color: var(--app-text);
    font-size: 0.95rem;
}

.appointment-calendar-item small {
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.appointment-board {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.appointment-board section,
.appointment-action-panel,
.appointment-history {
    border-top: 1px solid var(--app-line);
    margin-top: 1rem;
    padding-top: 1rem;
}

.appointments-workspace > .table-panel,
.appointments-workspace > .settings-panel {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
}

@media (max-width: 960px) {
    .appointment-calendar-layout {
        grid-template-columns: 1fr;
    }
}

.appointment-history ol {
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.appointment-history li {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    padding: 0.75rem;
}

.appointment-history li span {
    color: var(--app-muted);
    display: block;
    font-size: 0.82rem;
}

.appointment-history li p {
    color: var(--app-muted);
    margin: 0.25rem 0 0;
}

.metric-card {
    display: grid;
    gap: 0.25rem;
    min-height: 132px;
    padding: 1rem;
}

.metric-link-card {
    color: inherit;
    position: relative;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.metric-link-card::after {
    align-items: center;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 999px;
    color: var(--app-primary-dark);
    content: ">";
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 900;
    height: 1.5rem;
    justify-content: center;
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
    width: 1.5rem;
}

.metric-link-card:hover,
.metric-link-card:focus-visible {
    border-color: var(--app-primary);
    box-shadow: 0 14px 28px rgba(31, 41, 38, 0.12);
    color: inherit;
    transform: translateY(-1px);
}

.metric-link-card:hover::after,
.metric-link-card:focus-visible::after {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #fff;
}

.metric-card strong {
    color: var(--app-primary-dark);
    font-size: 2rem;
    line-height: 1;
}

.dashboard-insights {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-filter-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.dashboard-toggle {
    align-items: center;
    color: var(--app-muted);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 800;
    gap: 0.45rem;
    margin: 0;
}

.dashboard-chart-selector-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dashboard-chart-selector {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    box-shadow: var(--app-shadow-sm);
    color: var(--app-text);
    display: grid;
    gap: 0.75rem;
    min-height: 13.25rem;
    min-width: 0;
    overflow: hidden;
    padding: 0.85rem;
    text-align: left;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-chart-selector:hover,
.dashboard-chart-selector:focus-visible,
.dashboard-chart-selector.selected {
    border-color: var(--app-primary);
    box-shadow: var(--app-shadow-md);
}

.dashboard-chart-selector.selected {
    outline: 3px solid var(--app-focus);
}

.chart-selector-top {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    min-width: 0;
}

.chart-selector-top strong,
.chart-selector-top small {
    display: block;
    min-width: 0;
}

.chart-selector-top strong {
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.chart-selector-top small {
    color: var(--app-muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.chart-selector-icon {
    align-items: center;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 900;
    height: 2.15rem;
    justify-content: center;
    width: 2.15rem;
}

.chart-selector-line {
    background: #164e63;
}

.chart-selector-line::before {
    content: "LN";
}

.chart-selector-pie {
    background: #2563eb;
}

.chart-selector-pie::before {
    content: "PI";
}

.chart-selector-bar {
    background: #0f766e;
}

.chart-selector-bar::before {
    content: "BR";
}

.chart-selector-sector {
    background: #7c3aed;
}

.chart-selector-sector::before {
    content: "SC";
}

.chart-selector-column {
    background: #14532d;
}

.chart-selector-column::before {
    content: "CL";
}

.mini-empty {
    align-self: center;
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 800;
    justify-self: center;
    text-align: center;
}

.mini-line-chart {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    height: 5.3rem;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.mini-line-chart path,
.line-chart-wrap path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.line-chart-wrap .member-line {
    opacity: 0.95;
}

.line-point {
    cursor: crosshair;
    opacity: 0.9;
    stroke: var(--app-surface);
    stroke-width: 0.65;
    transition: opacity 120ms ease, stroke-width 120ms ease;
    vector-effect: non-scaling-stroke;
}

.line-point:hover,
.line-point:focus {
    opacity: 1;
    stroke: var(--app-text);
    stroke-width: 0.9;
}

.compact-pie-layout {
    align-items: center;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    min-width: 0;
}

.pie-mini {
    aspect-ratio: 1 / 1;
    border: 4px solid var(--app-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--app-line);
    display: block;
    width: 4.6rem;
}

.compact-rate-list,
.compact-bar-list {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.compact-rate-list span {
    align-items: center;
    color: var(--app-muted);
    display: flex;
    font-size: 0.78rem;
    font-weight: 850;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-rate-list i {
    border-radius: 999px;
    flex: 0 0 auto;
    height: 0.55rem;
    width: 0.55rem;
}

.compact-bar-list span {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.compact-bar-list em {
    border-radius: 999px;
    display: block;
    height: 0.55rem;
    min-width: 0.3rem;
}

.compact-bar-list strong {
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-expanded-chart {
    animation: dashboardExpand 220ms ease-out;
    background: var(--app-surface);
    border: 1px solid var(--app-primary);
    border-radius: 8px;
    box-shadow: var(--app-shadow-md);
    display: grid;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
    padding: 1rem;
}

.expanded-chart-header {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-width: 0;
}

.expanded-chart-header h3 {
    font-size: 1.05rem;
    font-weight: 850;
    margin: 0;
}

.expanded-chart-header p {
    color: var(--app-muted);
    margin: 0.25rem 0 0;
}

.chart-tool-row,
.chart-select-field {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.chart-tool-row label,
.chart-select-field {
    color: var(--app-muted);
    font-size: 0.8rem;
    font-weight: 850;
}

.chart-tool-row input {
    max-width: 8rem;
}

.chart-select-field {
    display: grid;
    min-width: min(100%, 15rem);
}

.line-chart-wrap {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    overflow: hidden;
}

.line-chart-wrap svg {
    background: var(--app-chart-bg);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    height: clamp(16rem, 40vh, 25rem);
    min-width: 0;
    width: 100%;
}

.line-chart-wrap.compact svg {
    height: 6rem;
}

.chart-grid-line {
    stroke: var(--app-chart-grid);
    stroke-width: 0.35;
    vector-effect: non-scaling-stroke;
}

.chart-axis-line,
.chart-axis-tick {
    stroke: var(--app-chart-axis);
    stroke-width: 0.55;
    vector-effect: non-scaling-stroke;
}

.line-axis-label {
    fill: var(--app-chart-label);
    font-size: 2.65px;
    font-weight: 850;
    letter-spacing: 0;
    paint-order: stroke;
    stroke: var(--app-surface);
    stroke-width: 0.2;
}

.x-axis-label {
    text-anchor: middle;
}

.y-axis-label {
    text-anchor: end;
}

.pie-chart-layout {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(11rem, 0.55fr) minmax(0, 1fr);
    min-width: 0;
}

.pie-chart-layout.expanded {
    gap: 0.75rem;
    grid-template-columns: minmax(13rem, 0.45fr) minmax(0, 1fr);
}

.pie-chart {
    aspect-ratio: 1 / 1;
    border: 8px solid var(--app-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-shadow-sm);
    justify-self: center;
    max-width: min(100%, 22rem);
    width: 100%;
}

.chart-legend.horizontal {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
}

.chart-legend.horizontal li {
    justify-content: flex-start;
}

.pie-chart-layout.expanded .chart-legend {
    justify-self: start;
    max-width: 24rem;
    width: 100%;
}

.pie-chart-layout.expanded .chart-legend li {
    gap: 0.5rem;
    justify-content: flex-start;
}

.horizontal-bar-chart {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.horizontal-bar-row {
    align-items: center;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: minmax(9rem, 0.85fr) minmax(10rem, 2fr) minmax(8rem, auto);
    min-width: 0;
}

.horizontal-bar-row strong {
    font-weight: 850;
    min-width: 0;
    overflow-wrap: anywhere;
}

.horizontal-bar-row div {
    background: var(--app-surface-muted);
    border-radius: 999px;
    height: 1rem;
    overflow: hidden;
}

.horizontal-bar-row span {
    border-radius: inherit;
    display: block;
    height: 100%;
}

.horizontal-bar-row em {
    color: var(--app-muted);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 850;
    text-align: right;
}

.age-range-editor {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.age-range-field {
    background: #f7faf8;
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.65rem;
}

.age-range-field label {
    color: var(--app-muted);
    display: grid;
    font-size: 0.76rem;
    font-weight: 850;
    gap: 0.25rem;
}

.age-column-chart {
    align-items: end;
    background: linear-gradient(180deg, #fbfdfc 0%, #f4f8f5 100%);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    min-height: 18rem;
    min-width: 0;
    overflow: hidden;
    padding: 1rem 0.8rem 0.8rem;
}

.age-column-chart.compact {
    background: transparent;
    border: 0;
    gap: 0.35rem;
    min-height: 5.6rem;
    padding: 0;
}

.age-column-group {
    align-items: end;
    display: grid;
    gap: 0.4rem;
    height: 100%;
    min-width: 0;
}

.age-column-bars {
    align-items: end;
    display: flex;
    gap: 0.18rem;
    height: 100%;
    justify-content: center;
    min-height: 4rem;
}

.age-bar {
    align-items: start;
    border-radius: 6px 6px 2px 2px;
    display: flex;
    justify-content: center;
    min-height: 0.35rem;
    min-width: 0.7rem;
    width: min(42%, 1.8rem);
}

.age-column-chart.compact .age-bar {
    width: min(42%, 1rem);
}

.age-bar em {
    color: #fff;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 850;
    padding-top: 0.2rem;
}

.age-column-group small {
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 850;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.dashboard-insight-card {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(31, 41, 38, 0.05);
    display: grid;
    gap: 0.75rem;
    min-height: 15rem;
    padding: 0.9rem;
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.dashboard-insight-card.expanded {
    animation: dashboardExpand 220ms ease-out;
    box-shadow: 0 16px 36px rgba(31, 41, 38, 0.12);
    grid-column: 1 / -1;
}

.insight-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    gap: 0.7rem;
    padding: 0;
    text-align: left;
}

.insight-trigger strong,
.insight-trigger small {
    display: block;
}

.insight-trigger strong {
    font-size: 0.98rem;
    font-weight: 800;
}

.insight-trigger small {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.insight-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.insight-icon::before {
    color: white;
    font-size: 1.05rem;
    font-weight: 900;
}

.trend-icon {
    background: #1f7a5a;
}

.trend-icon::before {
    content: "UP";
    font-size: 0.72rem;
}

.ratio-icon {
    background: #276fbf;
}

.ratio-icon::before {
    content: "%";
}

.nationality-icon {
    background: #d1663f;
}

.nationality-icon::before {
    content: "N";
}

.resolution-icon {
    background: #b8870b;
}

.resolution-icon::before {
    content: "OK";
    font-size: 0.72rem;
}

.sector-icon {
    background: #6f5ea8;
}

.sector-icon::before {
    content: "S";
}

.category-icon {
    background: #53606a;
}

.category-icon::before {
    content: "C";
}

.insight-content {
    display: grid;
    gap: 0.75rem;
}

.trend-chart {
    align-items: end;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: 11rem;
}

.trend-column {
    align-items: center;
    display: grid;
    gap: 0.35rem;
    height: 100%;
}

.trend-bar {
    align-items: start;
    background: linear-gradient(180deg, #1f7a5a 0%, #6db38b 100%);
    border-radius: 6px 6px 3px 3px;
    display: flex;
    justify-content: center;
    min-height: 0.6rem;
    width: 100%;
}

.trend-bar i {
    color: white;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
    padding-top: 0.2rem;
}

.trend-column small {
    color: var(--app-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.chart-note {
    color: var(--app-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.75rem;
}

.ratio-strip {
    background: var(--app-surface-muted);
    border-radius: 999px;
    display: flex;
    height: 1rem;
    overflow: hidden;
}

.ratio-strip span {
    min-width: 0.45rem;
}

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

.chart-legend li {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    justify-content: space-between;
}

.chart-legend li > span {
    border-radius: 999px;
    flex: 0 0 auto;
    height: 0.65rem;
    width: 0.65rem;
}

.chart-legend strong {
    color: var(--app-muted);
    font-size: 0.78rem;
    margin-left: auto;
}

.bar-row-list,
.resolution-list {
    display: grid;
    gap: 0.7rem;
}

.bar-row,
.resolution-row {
    align-items: center;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(8rem, 1.2fr) minmax(8rem, 2fr) auto;
}

.bar-row > span,
.resolution-row strong {
    font-weight: 800;
}

.bar-row em,
.resolution-row small {
    color: var(--app-muted);
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
}

.bar-row > strong,
.resolution-row > em {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
    text-align: right;
}

.progress-meter {
    background: var(--app-surface-muted);
    border-radius: 999px;
    height: 0.8rem;
    overflow: hidden;
}

.progress-meter span {
    border-radius: inherit;
    display: block;
    height: 100%;
}

@keyframes dashboardExpand {
    from {
        opacity: 0.82;
        transform: scale(0.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.metric-label {
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.metric-note {
    color: var(--app-muted);
    font-size: 0.82rem;
}

.workspace-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
}

.workspace-grid.resizable-workspace {
    align-items: start;
    gap: 0.65rem;
    grid-template-columns: minmax(260px, var(--workspace-left-width, 1.2fr)) 18px minmax(320px, 1fr) !important;
}

.workspace-resizer {
    align-self: stretch;
    background: transparent;
    border: 0;
    cursor: col-resize;
    min-height: 3rem;
    padding: 0;
    position: relative;
    touch-action: none;
}

.workspace-resizer::before {
    background: #c9d6ce;
    border-radius: 999px;
    content: "";
    inset: 0.8rem 7px;
    position: absolute;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.workspace-resizer span {
    background:
        radial-gradient(circle, var(--app-primary-dark) 0 1.5px, transparent 1.6px) center 38% / 6px 6px,
        radial-gradient(circle, var(--app-primary-dark) 0 1.5px, transparent 1.6px) center 50% / 6px 6px,
        radial-gradient(circle, var(--app-primary-dark) 0 1.5px, transparent 1.6px) center 62% / 6px 6px;
    border: 1px solid #b9c9bf;
    border-radius: 999px;
    height: 3rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    width: 0.95rem;
}

.workspace-resizer:hover::before,
.workspace-resizer:focus-visible::before {
    background: var(--app-primary);
    box-shadow: 0 0 0 0.18rem var(--app-focus);
}

.workspace-resizer:hover span,
.workspace-resizer:focus-visible span {
    background-color: #e6f2ec;
    border-color: var(--app-primary);
}

.is-resizing-layout {
    cursor: col-resize;
    user-select: none;
}

.workspace-grid.single-row {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-grid.single-row > .work-panel {
    max-width: 100%;
    min-width: min(760px, 100%);
    overflow: auto;
    resize: horizontal;
}

.work-panel,
.table-panel {
    padding: 1rem;
}

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

.panel-heading h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.segmented-control {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.segmented-control button,
.btn-icon {
    align-items: center;
    aspect-ratio: 1;
    display: inline-flex;
    height: 2.35rem;
    justify-content: center;
    padding: 0;
    width: 2.35rem;
}

.segmented-control button {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 6px;
    color: var(--app-muted);
}

.segmented-control button.active,
.segmented-control button:hover,
.segmented-control button:focus {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-on-primary);
}

.view-icon {
    background: currentColor;
    display: inline-block;
    height: 1.1rem;
    width: 1.1rem;
}

.view-icon-list {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 3h12v2H2V3Zm0 4h12v2H2V7Zm0 4h12v2H2v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 3h12v2H2V3Zm0 4h12v2H2V7Zm0 4h12v2H2v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.view-icon-calendar {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4 1h2v2h4V1h2v2h2v12H2V3h2V1Zm9 6H3v7h10V7ZM3 5v1h10V5H3Z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4 1h2v2h4V1h2v2h2v12H2V3h2V1Zm9 6H3v7h10V7ZM3 5v1h10V5H3Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.view-icon-board {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 2h3.5v12H2V2Zm5.25 0h3.5v12h-3.5V2ZM12.5 2H14v12h-1.5V2Z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 2h3.5v12H2V2Zm5.25 0h3.5v12h-3.5V2ZM12.5 2H14v12h-1.5V2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.view-icon-left {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M10.8 3 6 8l4.8 5H8.1L3.3 8l4.8-5h2.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M10.8 3 6 8l4.8 5H8.1L3.3 8l4.8-5h2.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.view-icon-right {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='m5.2 3 4.8 5-4.8 5h2.7l4.8-5-4.8-5H5.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='m5.2 3 4.8 5-4.8 5h2.7l4.8-5-4.8-5H5.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.status-pill {
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-line);
    border-radius: 999px;
    color: var(--app-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
}

.status-pill.muted {
    background: var(--app-surface-muted);
    border-color: var(--app-line);
    color: var(--app-muted);
}

.status-pill.success {
    background: var(--app-success-bg);
    border-color: var(--app-success-line);
    color: var(--app-success-dark);
}

.status-pill.warning {
    background: var(--app-warning-bg);
    border-color: var(--app-warning-line);
    color: var(--app-warning-dark);
}

.status-pill.danger {
    background: var(--app-danger-bg);
    border-color: var(--app-danger-line);
    color: var(--app-danger-dark);
}

.task-list {
    color: var(--app-text);
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding-left: 1.25rem;
}

.stack-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.stack-list div {
    border-left: 3px solid var(--app-primary);
    padding-left: 0.75rem;
}

.stack-list dt {
    font-weight: 700;
}

.stack-list dd {
    color: var(--app-muted);
    margin: 0;
}

.app-table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-line);
    --bs-table-striped-bg: var(--app-surface-muted);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: var(--app-info-bg);
    --bs-table-hover-color: var(--app-text);
    margin-bottom: 0;
}

.app-table th {
    color: var(--app-muted);
    font-size: 0.78rem;
    position: relative;
    text-transform: uppercase;
}

.table-panel,
.work-panel,
.settings-panel,
.metric-card {
    overflow-x: auto;
}

.table-panel .table-responsive,
.work-panel .table-responsive,
.settings-panel .table-responsive,
.metric-card .table-responsive {
    overflow: visible;
}

.table-panel .app-table thead th,
.work-panel .app-table thead th,
.settings-panel .app-table thead th,
.metric-card .app-table thead th {
    background: var(--app-surface);
    box-shadow:
        inset 0 -1px 0 var(--app-line),
        0 0.2rem 0.55rem rgba(31, 41, 38, 0.08);
    position: sticky;
    top: 0;
    z-index: 4;
}

.table-panel .app-table thead th .table-column-resizer,
.work-panel .app-table thead th .table-column-resizer,
.settings-panel .app-table thead th .table-column-resizer,
.metric-card .app-table thead th .table-column-resizer {
    z-index: 5;
}

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

.app-table.resizable-table th,
.app-table.resizable-table td {
    overflow-wrap: anywhere;
}

.table-column-resizer {
    bottom: 0.3rem;
    cursor: col-resize;
    position: absolute;
    right: -0.25rem;
    top: 0.3rem;
    touch-action: none;
    width: 0.5rem;
    z-index: 2;
}

.table-column-resizer::after {
    background: #d1ded6;
    border-radius: 999px;
    bottom: 0;
    content: "";
    left: 0.22rem;
    position: absolute;
    top: 0;
    transition: background-color 0.15s ease;
    width: 0.12rem;
}

.table-column-resizer:hover::after,
.table-column-resizer:focus-visible::after {
    background: var(--app-primary);
}

.table-subtext {
    color: var(--app-muted);
    display: block;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.table-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    white-space: nowrap;
}

.table-pager {
    align-items: center;
    border-top: 1px solid var(--app-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.table-pager label {
    align-items: center;
    color: var(--app-muted);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.45rem;
    margin: 0;
}

.table-page-size {
    min-width: 5rem;
}

.table-page-status {
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.table-page-actions {
    display: inline-flex;
    gap: 0.4rem;
}

.access-toolbar {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(12rem, 1fr));
    margin-bottom: 0.85rem;
}

.access-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

.access-toolbar-actions .btn {
    min-width: 8.5rem;
}

.access-matrix-panel {
    max-height: calc(100vh - 10.5rem);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.access-reason-field {
    margin-bottom: 0.85rem;
}

.access-row-protected {
    background: var(--app-surface-muted);
}

.access-row-protected input {
    cursor: not-allowed;
}

.access-empty-cell {
    background: color-mix(in srgb, var(--app-surface-muted) 55%, transparent);
    min-width: 3rem;
}

.access-row-dirty-action {
    box-shadow: 0 0 0 0.14rem var(--app-focus);
}

.btn-action-save.access-row-dirty-action:disabled {
    background-color: var(--app-success);
    border-color: var(--app-success);
    color: var(--app-on-primary);
    opacity: 1;
}

.access-matrix-table th:last-child,
.access-matrix-table td:last-child {
    min-width: 11.5rem;
    width: 11.5rem;
}

.access-actions-cell {
    white-space: nowrap;
}

.access-row-actions {
    display: inline-flex;
    gap: 0.45rem;
}

.access-row-reason-header,
.access-row-reason-cell {
    min-width: 18rem;
    width: 22rem;
}

.access-row-reason-hidden {
    display: none;
}

.access-row-reason-editor {
    display: grid;
    gap: 0.45rem;
}

.access-system-reason {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 6px;
    color: var(--app-ink);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.45rem 0.55rem;
    white-space: normal;
}

.access-row-remark-required {
    color: var(--app-danger);
    font-weight: 700;
}

.go-top-button {
    align-items: center;
    background: var(--app-primary);
    border: 1px solid var(--app-primary-dark);
    border-radius: 999px;
    bottom: 1.1rem;
    box-shadow: 0 12px 28px rgba(31, 41, 38, 0.22);
    display: inline-flex;
    height: 2.7rem;
    justify-content: center;
    position: fixed;
    right: 1.1rem;
    width: 2.7rem;
    z-index: 900;
}

.go-top-button:hover,
.go-top-button:focus {
    background: var(--app-primary-dark);
}

.go-top-button span {
    background: #fff;
    display: block;
    height: 1.1rem;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a.75.75 0 0 1 .53.22l4.25 4.25a.75.75 0 0 1-1.06 1.06L8.75 4.56V13a.75.75 0 0 1-1.5 0V4.56L4.28 7.53a.75.75 0 0 1-1.06-1.06L7.47 2.22A.75.75 0 0 1 8 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a.75.75 0 0 1 .53.22l4.25 4.25a.75.75 0 0 1-1.06 1.06L8.75 4.56V13a.75.75 0 0 1-1.5 0V4.56L4.28 7.53a.75.75 0 0 1-1.06-1.06L7.47 2.22A.75.75 0 0 1 8 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
    width: 1.1rem;
}

.page-feedback-panel {
    align-items: center;
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 0.85rem;
}

.page-feedback-panel-completed {
    animation: feedback-fade-away 2s ease forwards;
    justify-content: center;
}

@keyframes feedback-fade-away {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    75% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-0.35rem);
    }
}

.page-feedback-main,
.page-feedback-actions,
.page-feedback-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-feedback-main strong,
.page-feedback-rating legend {
    color: var(--app-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.page-feedback-rating {
    align-items: center;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
}

.page-feedback-rating legend {
    float: none;
    margin: 0 0.15rem 0 0;
    width: auto;
}

.page-feedback-rating label,
.feedback-question-list label {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    margin: 0;
}

.page-feedback-rating input,
.feedback-question-list input {
    accent-color: var(--app-primary);
}

.page-feedback-links .btn-link {
    font-size: 0.86rem;
    font-weight: 800;
    padding: 0;
    text-decoration: none;
}

.page-feedback-message {
    border-radius: 6px;
    flex: 1 1 100%;
    font-size: 0.84rem;
    font-weight: 800;
    margin: 0;
    padding: 0.45rem 0.6rem;
}

.page-feedback-message.success {
    background: var(--app-success-bg);
    color: var(--app-success-dark);
}

.page-feedback-message.warning {
    background: var(--app-warning-bg);
    color: var(--app-warning-dark);
}

.page-feedback-message.error {
    background: var(--app-danger-bg);
    color: var(--app-danger-dark);
}

.feedback-modal {
    max-width: 680px;
    width: min(100%, 680px);
}

.feedback-modal-rating {
    margin-bottom: 0.9rem;
}

.feedback-modal .page-feedback-message {
    margin-bottom: 0.85rem;
}

.feedback-question-list {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.feedback-question-list fieldset {
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    margin: 0;
    padding: 0.75rem;
}

.feedback-question-list legend {
    color: var(--app-text);
    float: none;
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
    width: 100%;
}

.feedback-textarea {
    min-height: 7rem;
    resize: vertical;
}

.feedback-settings {
    align-items: end;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: minmax(8rem, 1fr) 5.75rem minmax(8.75rem, auto);
    max-width: min(100%, 30rem);
    min-width: 0;
}

.feedback-settings label {
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 800;
    grid-column: 1 / -1;
}

.feedback-settings .btn {
    font-size: 0.86rem;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.feedback-workspace {
    grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.8fr);
}

.feedback-list-panel {
    max-height: calc(100vh - 16rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@supports (height: 100dvh) {
    .feedback-list-panel {
        max-height: calc(100dvh - 16rem);
    }
}

.feedback-filter-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.6fr) minmax(10rem, 0.6fr);
    margin-bottom: 0.85rem;
}

.feedback-detail-panel {
    min-width: 0;
}

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

.feedback-detail-grid dt {
    color: var(--app-muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.feedback-detail-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.announcements-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
}

.announcement-list-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.announcement-viewed-toggle {
    margin: 0;
}

.announcement-viewed-toggle span {
    font-size: 0.8rem;
    white-space: nowrap;
}

.announcement-form-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.announcement-message-box {
    min-height: 10rem;
    resize: vertical;
}

.announcement-targets {
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem;
}

.announcement-targets legend {
    color: var(--app-muted);
    float: none;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    width: 100%;
}

.announcement-targets label {
    align-items: center;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 999px;
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
}

.announcement-origin-countries {
    align-items: flex-start;
}

.announcement-origin-countries .form-hint {
    flex-basis: 100%;
}

.announcement-origin-countries label {
    border-radius: 12px;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 8.5rem;
}

.announcement-origin-countries label input {
    align-self: flex-start;
}

.announcement-origin-countries small {
    color: var(--app-muted);
    font-size: 0.72rem;
}

.announcement-message-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.announcement-message-tabs .member-tab.translation-required {
    border-color: var(--app-danger);
    color: var(--app-danger);
}

.translation-required-field {
    border-color: var(--app-danger) !important;
    box-shadow: 0 0 0 0.12rem rgba(220, 53, 69, 0.16);
}

.announcements-list-panel,
.announcements-detail-panel {
    max-height: calc(100vh - 10.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@supports (height: 100dvh) {
    .announcements-list-panel,
    .announcements-detail-panel {
        max-height: calc(100dvh - 10.5rem);
    }
}

.announcements-detail-panel {
    min-width: 0;
}

.announcement-detail-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--app-line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.announcement-detail-header h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 0.45rem;
}

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

.announcement-detail-grid dt {
    color: var(--app-muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.announcement-detail-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.announcement-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 10rem;
}

.announcement-reactions span {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 999px;
    font-weight: 700;
    padding: 0.2rem 0.48rem;
}

.announcement-reactions.compact {
    min-width: 0;
}

.announcement-reaction-actions {
    border-top: 1px solid var(--app-line);
    display: grid;
    gap: 0.55rem;
    padding-top: 0.75rem;
}

.announcement-reaction-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.announcement-reaction-button {
    align-items: center;
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 999px;
    color: var(--app-text);
    display: inline-flex;
    font-weight: 800;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
}

.announcement-reaction-button:hover,
.announcement-reaction-button:focus-visible {
    border-color: var(--app-primary);
    color: var(--app-primary-dark);
}

.announcement-reaction-button.active {
    background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface));
    border-color: var(--app-primary);
    color: var(--app-primary-dark);
}

.announcement-reaction-button:disabled {
    opacity: 0.65;
}

.announcement-tabs {
    margin-bottom: 1rem;
}

.announcement-engagement-card,
.announcement-schedule-card {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 14px;
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 1rem;
}

.announcement-engagement-card {
    align-items: center;
    grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
}

.announcement-engagement-card strong {
    display: block;
    font-size: 1.5rem;
}

.announcement-schedule-card h4 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
}

.announcement-schedule-card p {
    color: var(--app-muted);
    margin: 0;
}

.announcement-history-table-wrap {
    max-height: 24rem;
    overflow-y: auto;
}

.announcement-history-table th,
.announcement-history-table td {
    vertical-align: top;
}

.announcements-dashboard-panel {
    max-height: 28rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.warning-text {
    color: var(--app-warning-dark);
}

.toast-stack {
    display: grid;
    gap: 0.6rem;
    max-width: min(360px, calc(100vw - 2rem));
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 1100;
}

.app-toast {
    align-items: start;
    animation: toast-fade-away 5s ease forwards;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 41, 38, 0.16);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.8rem 0.9rem;
}

@keyframes toast-fade-away {
    0%,
    82% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-0.35rem);
    }
}

.app-toast span {
    font-weight: 700;
}

.app-toast button {
    background: transparent;
    border: 0;
    color: inherit;
    font-weight: 900;
    line-height: 1;
    padding: 0.15rem;
}

.app-toast-success {
    background: var(--app-success-bg);
    border: 1px solid var(--app-success-line);
    color: var(--app-success-dark);
}

.app-toast-error {
    background: var(--app-danger-bg);
    border: 1px solid var(--app-danger-line);
    color: var(--app-danger-dark);
}

.app-toast-info {
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-line);
    color: var(--app-info-dark);
}

.app-toast-warning {
    background: var(--app-warning-bg);
    border: 1px solid var(--app-warning-line);
    color: var(--app-warning-dark);
}

.busy-overlay {
    align-items: center;
    background: rgba(31, 41, 38, 0.34);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 1250;
}

.client-busy-overlay[hidden] {
    display: none !important;
}

.client-busy-overlay:not([hidden]) {
    display: flex !important;
}

.busy-panel {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    justify-items: center;
    max-width: min(10rem, calc(100vw - 2rem));
    padding: 0;
    text-align: center;
}

.busy-loader-frame {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(31, 41, 38, 0.08);
    border-radius: 1rem;
    box-shadow: 0 10px 24px rgba(31, 41, 38, 0.1);
    display: inline-flex;
    height: auto;
    justify-content: center;
    overflow: hidden;
    padding: 0.35rem;
    width: min(9rem, 48vw);
}

.busy-loader-video {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    width: 100%;
}

.app-modal-backdrop {
    align-items: center;
    background: rgba(31, 41, 38, 0.36);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 1200;
}

.session-timeout-backdrop[hidden] {
    display: none !important;
}

.session-timeout-backdrop:not([hidden]) {
    display: flex !important;
}

.session-timeout-modal form {
    margin: 0;
}

.concurrent-session-backdrop[hidden] {
    display: none !important;
}

.concurrent-session-backdrop:not([hidden]) {
    display: flex !important;
}

.concurrent-session-alert-message {
    color: var(--app-danger) !important;
    font-weight: 800;
}

.concurrent-session-alert-detail {
    color: var(--app-muted);
    font-size: 0.9rem;
    margin-top: 0.45rem !important;
}

.app-modal {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    box-shadow: 0 24px 56px rgba(31, 41, 38, 0.26);
    max-width: 460px;
    padding: 1rem;
    width: min(100%, 460px);
}

.app-modal h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.app-modal p {
    color: var(--app-muted);
    margin: 0;
}

.app-modal::before {
    border-radius: 999px;
    content: "";
    display: block;
    height: 0.32rem;
    margin-bottom: 0.85rem;
    width: 4rem;
}

.app-modal-info::before {
    background: #387ba8;
}

.app-modal-success::before {
    background: var(--app-primary);
}

.app-modal-warning::before {
    background: var(--app-accent);
}

.app-modal-error::before,
.app-modal-danger::before {
    background: var(--app-danger);
}

.app-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.union-group-workspace {
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
}

.company-list-panel {
    max-height: calc(100vh - 10.5rem);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@supports (height: 100dvh) {
    .access-matrix-panel,
    .company-list-panel {
        max-height: calc(100dvh - 10.5rem);
    }
}

.union-group-select-table tbody tr {
    cursor: pointer;
}

.master-detail-table tbody tr {
    cursor: pointer;
}

.union-group-select-table tbody tr:hover,
.union-group-select-table tbody tr.selected,
.master-detail-table tbody tr:hover,
.master-detail-table tbody tr.selected {
    background: var(--app-info-bg);
}

.union-group-logo-thumb {
    --logo-x: 50%;
    --logo-y: 50%;
    --logo-zoom: 1;
    align-items: center;
    background: linear-gradient(135deg, #f7faf8, #e9f0ec);
    border: 1px solid var(--app-line);
    border-radius: 6px;
    display: flex;
    height: 42px;
    justify-content: center;
    overflow: hidden;
    width: 64px;
}

.union-group-logo-thumb img,
.detail-logo-frame img,
.logo-preview-frame img {
    height: 100%;
    object-fit: contain;
    object-position: var(--logo-x) var(--logo-y);
    transform: scale(var(--logo-zoom));
    transform-origin: var(--logo-x) var(--logo-y);
    width: 100%;
}

.union-group-logo-thumb span {
    color: var(--app-primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
}

.detail-logo-frame,
.logo-preview-frame {
    --logo-x: 50%;
    --logo-y: 50%;
    --logo-zoom: 1;
    align-items: center;
    background: linear-gradient(135deg, #f7faf8, #e9f0ec);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.logo-preview-empty {
    color: var(--app-primary-dark);
    font-size: 1.15rem;
    font-weight: 800;
}

.union-group-detail-panel {
    min-width: 0;
}

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

.detail-actions.form-actions {
    justify-content: flex-start;
    margin-top: 1rem;
}

.read-only-detail {
    display: grid;
    gap: 1rem;
}

.detail-logo-frame {
    aspect-ratio: 2.4 / 1;
    min-height: 126px;
    width: 100%;
}

.read-only-detail dl {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.read-only-detail dt {
    color: var(--app-muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.read-only-detail dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.union-group-logo-editor {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
}

.logo-editor-heading {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
}

.logo-editor-heading h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
}

.logo-preview-frame {
    aspect-ratio: 2.4 / 1;
    min-height: 126px;
    width: 100%;
}

.logo-remove-note {
    background: var(--app-warning-bg);
    border: 1px solid var(--app-warning-line);
    border-radius: 6px;
    color: var(--app-warning-dark);
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0.5rem 0.65rem;
}

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

.logo-control-grid .form-field {
    margin-bottom: 0;
}

.logo-control-grid output {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.member-detail-panel {
    min-width: 0;
}

.member-list-panel,
.member-detail-panel {
    max-height: calc(100vh - 10.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@supports (height: 100dvh) {
    .member-list-panel,
    .member-detail-panel {
        max-height: calc(100dvh - 10.5rem);
    }
}

.member-profile-header {
    align-items: center;
    border-bottom: 1px solid var(--app-line);
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.member-profile-header h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
}

.member-meta-row {
    color: var(--app-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 0.75rem;
}

.member-photo-frame,
.member-photo-preview-frame {
    --photo-x: 50%;
    --photo-y: 50%;
    --photo-zoom: 1;
    align-items: center;
    background: linear-gradient(135deg, #f7faf8, #e9f0ec);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.member-photo-frame {
    flex-basis: 86px;
    height: 86px;
    max-height: 86px;
    max-width: 86px;
    min-height: 86px;
    min-width: 86px;
    width: 86px;
}

.member-photo-preview-frame {
    aspect-ratio: 1 / 1;
    justify-self: start;
    max-width: 100%;
    width: 220px;
}

.member-photo-frame img,
.member-photo-preview-frame img {
    height: 100%;
    object-fit: cover;
    object-position: var(--photo-x) var(--photo-y);
    transform: scale(var(--photo-zoom));
    transform-origin: var(--photo-x) var(--photo-y);
    width: 100%;
}

.member-photo-frame span,
.member-photo-empty {
    color: var(--app-primary-dark);
    font-weight: 800;
}

.member-photo-frame span {
    font-size: 1.35rem;
}

.member-photo-empty {
    font-size: 1rem;
}

.member-photo-editor {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
}

.member-tabs {
    border-bottom: 1px solid var(--app-line);
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.member-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--app-muted);
    font-weight: 800;
    padding: 0.65rem 0.75rem;
}

.member-tab.active {
    border-bottom-color: var(--app-primary);
    color: var(--app-primary-dark);
}

.member-tab-panel {
    padding-top: 0.25rem;
}

.member-list-tools {
    align-items: end;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(14rem, 24rem) auto;
    justify-content: start;
    margin-bottom: 0.85rem;
}

.member-list-tools .split-action {
    justify-self: start;
}

.member-list-tools .form-control {
    max-width: 24rem;
}

.complaints-list-tools {
    align-items: end;
    grid-template-columns: repeat(2, minmax(14rem, 24rem));
    justify-content: start;
}

.complaints-list-tools .split-action {
    justify-self: start;
}

.complaints-list-tools .split-action > .btn {
    min-width: 8.5rem;
    width: auto;
}

.complaints-workspace {
    align-items: start;
}

.complaints-list-panel,
.complaints-detail-panel {
    max-height: calc(100vh - 10.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@supports (height: 100dvh) {
    .complaints-list-panel,
    .complaints-detail-panel {
        max-height: calc(100dvh - 10.5rem);
    }
}

.member-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.member-export-actions .btn {
    flex: 1 1 120px;
}

.member-export-dropdown > .btn {
    min-width: 7.5rem;
    width: auto;
}

.member-list-table th,
.member-list-table td {
    vertical-align: middle;
}

.login-info-table th,
.login-info-table td {
    min-width: 130px;
}

.login-info-empty {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

.split-action {
    position: relative;
}

.action-menu {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
    display: grid;
    min-width: 190px;
    padding: 0.35rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 12;
}

.action-menu button {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--app-text);
    font-weight: 700;
    padding: 0.55rem 0.65rem;
    text-align: left;
}

.action-menu button:hover {
    background: var(--app-surface-muted);
}

.document-import-panel {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
}

.document-import-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.document-import-heading h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
}

.document-import-file {
    color: var(--app-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.employment-current-row {
    background: var(--app-success-bg);
}

.editable-table td {
    min-width: 140px;
    vertical-align: middle;
}

.editable-table td:last-child {
    min-width: 84px;
    white-space: nowrap;
}

.tab-actions {
    justify-content: flex-start;
    margin-bottom: 0.85rem;
}

.plus-icon {
    display: inline-block;
    font-weight: 900;
    line-height: 1;
    margin-right: 0.25rem;
}

.upload-document-button {
    cursor: pointer;
}

.document-viewer {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.85rem;
}

.document-viewer-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.document-viewer-heading h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
}

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

.document-frame {
    background: #fff;
    border: 1px solid var(--app-line);
    border-radius: 6px;
    min-height: 420px;
    width: 100%;
}

.document-image-preview {
    background: #fff;
    border: 1px solid var(--app-line);
    border-radius: 6px;
    max-height: 520px;
    object-fit: contain;
    width: 100%;
}

.document-video-preview {
    background: #000;
    border: 1px solid var(--app-line);
    border-radius: 6px;
    max-height: 520px;
    width: 100%;
}

.document-video-fallback {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.2rem 0;
}

.document-video-fallback p {
    margin: 0;
    color: var(--app-muted);
}

.legal-reader-toolbar {
    align-items: end;
    display: flex;
    gap: 0.75rem;
}

.legal-reader-toolbar label {
    color: var(--app-muted);
    display: grid;
    font-size: 0.84rem;
    font-weight: 800;
    gap: 0.35rem;
    min-width: 13rem;
}

.legal-original-source-link {
    color: var(--app-primary-dark);
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 850;
    margin: 0.25rem 0 0.35rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.legal-original-source-link:hover,
.legal-original-source-link:focus-visible {
    color: var(--app-primary);
}

.legal-source-strip {
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-line);
    border-radius: 8px;
    color: var(--app-info-dark);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 0.65rem 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
}

.legal-reader-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
}

.legal-reader-index,
.legal-reader-panel {
    max-height: calc(100vh - 13rem);
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@supports (height: 100dvh) {
    .legal-reader-index,
    .legal-reader-panel {
        max-height: calc(100dvh - 13rem);
    }
}

.legal-search-field {
    padding: 0 0.85rem;
}

.legal-translation-progress {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 12px;
    box-shadow: var(--app-shadow-sm);
    display: grid;
    margin: 0.75rem 0.85rem;
    overflow: hidden;
}

.legal-progress-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--app-text);
    cursor: pointer;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    padding: 0.72rem 0.75rem;
    text-align: left;
    width: 100%;
}

.legal-progress-toggle:hover,
.legal-progress-toggle:focus-visible {
    background: var(--app-surface-muted);
    outline: none;
}

.legal-progress-toggle-text {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.legal-progress-toggle-text strong {
    font-size: 0.92rem;
    font-weight: 900;
}

.legal-progress-toggle-text small {
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.legal-progress-toggle-meta {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.35rem;
}

.legal-progress-toggle-action {
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 900;
}

.legal-progress-chevron {
    align-items: center;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 900;
    height: 1.55rem;
    justify-content: center;
    line-height: 1;
    width: 1.55rem;
}

.legal-progress-body {
    border-top: 1px solid var(--app-line);
    display: grid;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem 0.75rem;
}

.legal-progress-language-list {
    display: grid;
    gap: 0.4rem;
}

.legal-progress-language {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: grid;
    gap: 0.25rem;
    padding: 0.55rem 0.65rem;
}

.legal-progress-language.active {
    border-left: 4px solid var(--app-primary);
}

.legal-progress-language div {
    align-items: baseline;
    display: flex;
    gap: 0.45rem;
    justify-content: space-between;
}

.legal-progress-language strong {
    font-size: 0.84rem;
}

.legal-progress-language span,
.legal-progress-language small {
    color: var(--app-muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.legal-section-list {
    display: grid;
    gap: 0.35rem;
    padding: 0 0.85rem 0.85rem;
}

.legal-part-heading {
    color: var(--app-accent);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.2rem 0.2rem;
    text-transform: uppercase;
}

.legal-section-link {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--app-text);
    display: grid;
    gap: 0.2rem;
    padding: 0.58rem 0.65rem;
    text-align: left;
    width: 100%;
}

.legal-section-link:hover,
.legal-section-link:focus-visible,
.legal-section-link.active {
    background: var(--app-surface-muted);
    border-color: var(--app-line);
}

.legal-section-link.active {
    border-left: 4px solid var(--app-primary);
}

.legal-section-link span {
    color: var(--app-primary-dark);
    font-size: 0.78rem;
    font-weight: 900;
}

.legal-section-link strong {
    font-size: 0.9rem;
    line-height: 1.25;
}

.legal-section-status {
    justify-self: start;
    margin-top: 0.15rem;
}

.legal-reader-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
}

.legal-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.legal-section-actions .btn {
    background: var(--app-info-bg);
    border-color: var(--app-primary);
    color: var(--app-primary-dark);
    font-weight: 800;
    min-height: 2.4rem;
    min-width: 7rem;
}

.legal-section-actions .btn:hover,
.legal-section-actions .btn:focus {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-on-primary);
}

.legal-section-actions .btn:disabled {
    background: var(--app-surface-muted);
    border-color: var(--app-line);
    color: var(--app-muted);
}

.legal-amendment-form {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
}

.legal-amendment-form textarea {
    line-height: 1.5;
    min-height: 14rem;
    resize: vertical;
}

.legal-amendment-form .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.legal-reader-notice {
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 800;
    padding: 0.65rem 0.75rem;
}

.legal-reader-notice.warning {
    background: var(--app-warning-bg);
    border: 1px solid var(--app-warning-line);
    color: var(--app-warning-dark);
}

.legal-reader-notice.info {
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-line);
    color: var(--app-info-dark);
}

.legal-reader-content {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    padding: clamp(1rem, 2vw, 1.6rem);
}

.legal-reader-content article {
    margin: 0 auto;
    max-width: 74ch;
}

.legal-section-header {
    border-bottom: 1px solid var(--app-line);
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
}

.legal-section-header span,
.legal-section-header small {
    color: var(--app-muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
}

.legal-section-header h2 {
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0.25rem 0;
}

.legal-reader-content p {
    font-size: 1rem;
    line-height: 1.72;
    margin: 0 0 1rem;
    overflow-wrap: anywhere;
}

.legal-tts-button {
    align-items: center;
    background: var(--app-primary);
    border: 1px solid var(--app-primary-dark);
    border-radius: 999px;
    box-shadow: var(--app-shadow-md);
    color: var(--app-on-primary);
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 900;
    height: 2.25rem;
    justify-content: center;
    position: fixed;
    width: 2.25rem;
    z-index: 1080;
}

.legal-tts-button:hover,
.legal-tts-button:focus-visible {
    background: var(--app-primary-dark);
}

.install-icon {
    display: inline-block;
    height: 1.1rem;
    vertical-align: middle;
    width: 1.1rem;
}

.install-icon.installed {
    background: var(--app-primary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM6.97 11.03l5-5a.75.75 0 0 0-1.06-1.06L6.5 9.44 4.53 7.47a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM6.97 11.03l5-5a.75.75 0 0 0-1.06-1.06L6.5 9.44 4.53 7.47a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.install-icon.pending {
    background: var(--app-accent);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 3.75a.75.75 0 0 0-.75.75v4a.75.75 0 0 0 1.5 0v-4A.75.75 0 0 0 8 3.75Zm0 8.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 3.75a.75.75 0 0 0-.75.75v4a.75.75 0 0 0 1.5 0v-4A.75.75 0 0 0 8 3.75Zm0 8.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.language-workspace {
    grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
}

.language-select-table tbody tr {
    cursor: pointer;
}

.language-select-table tbody tr:hover,
.language-select-table tbody tr.selected {
    background: var(--app-info-bg);
}

.language-detail-panel {
    min-width: 0;
}

.language-tabs {
    margin-bottom: 1rem;
}

.language-translation-toolbar {
    max-width: 240px;
}

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

.metric-card.compact {
    min-height: auto;
    padding: 0.75rem;
}

.language-translation-list {
    max-height: 62vh;
    overflow: auto;
}

.language-translation-table th,
.language-translation-table td {
    vertical-align: top;
}

.language-translation-table td:nth-child(2),
.language-translation-table td:nth-child(5) {
    font-size: 0.82rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.technician-console-workspace {
    align-items: start;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.technician-governance-workspace {
    align-items: start;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
}

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

.technician-audit-workspace {
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.technician-device-history-panel {
    grid-column: 1 / -1;
}

.technician-main-tabs {
    margin: 1rem 0;
}

.technician-tabs {
    margin-bottom: 0.85rem;
}

.technician-targets-panel,
.technician-access-alerts-panel,
.technician-action-audit-panel,
.technician-device-history-panel {
    max-height: calc(100vh - 16rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@supports (height: 100dvh) {
    .technician-targets-panel,
    .technician-access-alerts-panel,
    .technician-action-audit-panel,
    .technician-device-history-panel {
        max-height: calc(100dvh - 16rem);
    }
}

.technician-filter-row {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(180px, 1fr) auto;
    margin-bottom: 0.85rem;
}

.technician-filter-row .form-field {
    margin-bottom: 0;
}

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

.technician-action-grid .btn {
    width: 100%;
}

.translation-textarea {
    min-height: 4.2rem;
    min-width: 220px;
    resize: vertical;
}

.empty-state {
    color: var(--app-muted);
    padding: 2rem 0.75rem !important;
    text-align: center;
}

.login-shell {
    display: grid;
    min-height: calc(100vh - 7rem);
    place-items: center;
}

.login-panel {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 41, 38, 0.08);
    max-width: 460px;
    padding: 1.25rem;
    width: min(100%, 460px);
}

.login-header {
    margin-bottom: 1rem;
}

.login-title-row {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.login-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.icon-button {
    align-items: center;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    border-radius: 6px;
    display: inline-flex;
    height: 2.3rem;
    justify-content: center;
    width: 2.3rem;
}

.icon-button:hover {
    background: var(--app-surface-muted);
}

.language-icon {
    background: var(--app-primary-dark);
    display: inline-block;
    height: 1.1rem;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545Zm1.634-.736L5.5 3.956h-.049l-.679 2.022h1.407Z'/%3E%3Cpath d='M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2Zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.653 1.621-2.758H14V8h-3v1h.88c-.313.731-.736 1.347-1.262 1.847A6.034 6.034 0 0 1 9.875 10h-.737Z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545Zm1.634-.736L5.5 3.956h-.049l-.679 2.022h1.407Z'/%3E%3Cpath d='M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2Zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.653 1.621-2.758H14V8h-3v1h.88c-.313.731-.736 1.347-1.262 1.847A6.034 6.034 0 0 1 9.875 10h-.737Z'/%3E%3C/svg%3E") center/contain no-repeat;
    width: 1.1rem;
}

.language-button {
    flex: 0 0 auto;
}

.language-picker {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 0.35rem;
}

.language-select {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 6px;
    color: var(--app-text);
    font-size: 0.86rem;
    font-weight: 700;
    height: 2.3rem;
    max-width: 8.5rem;
    padding: 0 0.55rem;
}

.form-field {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.form-field label {
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

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

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

.field-tool-actions.compact {
    margin-left: 0.5rem;
}

.text-tool-preview {
    background: #f3f7f4;
    border: 1px solid #d5e4db;
    border-radius: 6px;
    color: var(--app-text);
    display: grid;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0.65rem 0.75rem;
}

.text-tool-preview p {
    margin: 0;
}

.speech-listening-note {
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.full-span {
    grid-column: 1 / -1;
}

.settings-subpanel {
    border-top: 1px solid var(--app-line);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.settings-subpanel h3,
.compact-heading h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
}

.form-control {
    border-color: var(--app-line);
    border-radius: 6px;
}

.login-alert {
    border-radius: 6px;
    font-weight: 700;
    margin-bottom: 0.9rem;
    padding: 0.7rem 0.8rem;
}

.login-alert.error {
    background: var(--app-danger-bg);
    border: 1px solid var(--app-danger-line);
    color: var(--app-danger-dark);
}

.login-alert.success {
    background: var(--app-success-bg);
    border: 1px solid var(--app-success-line);
    color: var(--app-success-dark);
}

.login-alert.warning {
    background: var(--app-warning-bg);
    border: 1px solid var(--app-warning-line);
    color: var(--app-warning-dark);
}

.login-button {
    width: 100%;
}

.member-registration-review {
    display: grid;
    gap: 0.25rem;
    margin: 0 0 1rem;
}

.validation-summary {
    color: var(--app-danger-dark);
    margin-bottom: 0.8rem;
}

.test-accounts {
    background: var(--app-surface-muted);
    border-radius: 8px;
    margin-top: 1rem;
    padding: 0.9rem;
}

.test-accounts h2 {
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.test-accounts dl {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.test-accounts div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.test-accounts dt {
    font-weight: 700;
}

.test-accounts dd {
    color: var(--app-muted);
    font-family: Consolas, "Courier New", monospace;
    margin: 0;
}

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

.settings-panel {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(31, 41, 38, 0.05);
    padding: 1rem;
}

.settings-panel-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.settings-panel-summary span,
.settings-readonly-value {
    background: #eef8f4;
    border: 1px solid #c8eadc;
    border-radius: 999px;
    color: var(--app-primary-dark);
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
}

.settings-section-heading {
    color: var(--app-primary-dark);
    font-size: 0.95rem;
    margin: 1rem 0 0.65rem;
}

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

.color-input-group {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.color-input {
    max-width: 5rem;
    min-height: 2.4rem;
    padding: 0.2rem;
}

.color-swatch-label,
.form-field small {
    color: var(--app-muted);
    font-size: 0.85rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background-color: #b32121;
    color: white;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

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

    .metric-grid,
    .workspace-grid,
    .workspace-grid.single-row {
        grid-template-columns: 1fr;
    }

    .workspace-grid.resizable-workspace {
        grid-template-columns: 1fr !important;
    }

    .workspace-grid.single-row > .work-panel {
        min-width: 0;
        resize: none;
    }

    .workspace-resizer {
        display: none;
    }
}

@media (max-width: 640px) {
    .technician-governance-workspace,
    .technician-governance-grid {
        grid-template-columns: 1fr;
    }

    .page-header,
    .page-header.compact {
        align-items: stretch;
        flex-direction: column;
    }

    .page-header .btn {
        width: 100%;
    }

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

    .feedback-filter-grid,
    .feedback-settings,
    .access-toolbar,
    .member-list-tools,
    .complaints-list-tools {
        grid-template-columns: 1fr;
    }

    .member-list-tools .form-control,
    .member-export-dropdown > .btn {
        max-width: none;
        width: 100%;
    }

    .logo-control-grid {
        grid-template-columns: 1fr;
    }

    .read-only-detail dl {
        grid-template-columns: 1fr;
    }

    .bar-row,
    .resolution-row,
    .horizontal-bar-row,
    .pie-chart-layout,
    .pie-chart-layout.expanded {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .bar-row > strong,
    .resolution-row > em,
    .horizontal-bar-row em {
        text-align: left;
    }

    .trend-chart {
        gap: 0.25rem;
    }

    .expanded-chart-header {
        flex-direction: column;
    }

    .chart-tool-row {
        justify-content: flex-start;
        width: 100%;
    }

    .dashboard-chart-selector {
        min-height: 11.5rem;
    }

    .compact-pie-layout {
        grid-template-columns: 3.8rem minmax(0, 1fr);
    }

    .pie-mini {
        width: 3.8rem;
    }

    .age-range-field {
        grid-template-columns: 1fr;
    }
}

.calculator-workspace {
    align-items: start;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

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

.calculator-actions {
    justify-content: flex-start;
    margin-top: 1rem;
}

.calculator-note {
    color: var(--app-muted);
    font-size: 0.9rem;
    margin: 1rem 0 0;
}

.calculator-result-hero {
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-accent) 100%);
    border-radius: 8px;
    color: var(--app-on-primary);
    display: grid;
    gap: 0.3rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
}

.calculator-result-hero strong {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    letter-spacing: 0;
}

.calculator-result-hero small {
    color: rgba(255, 255, 255, 0.82);
}

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

.calculator-difference,
.calculator-taxable {
    border: 1px solid var(--app-line);
    border-radius: 8px;
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.9rem;
}

.calculator-difference.higher {
    background: var(--app-warning-bg);
    border-color: var(--app-warning-line);
}

.calculator-difference.lower {
    background: var(--app-info-bg);
    border-color: var(--app-info-line);
}

.calculator-difference.neutral {
    background: var(--app-success-bg);
    border-color: var(--app-success-line);
}

.calculator-difference span,
.calculator-taxable span {
    color: var(--app-muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.calculator-difference strong,
.calculator-taxable strong {
    font-size: 1.35rem;
}

.calculator-difference small {
    color: var(--app-muted);
}

.calculator-breakdown {
    border: 1px solid var(--app-line);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.calculator-breakdown-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.85rem 1rem;
}

.calculator-breakdown-row + .calculator-breakdown-row {
    border-top: 1px solid var(--app-line);
}

@media (max-width: 900px) {
    .calculator-workspace,
    .calculator-input-grid,
    .calculator-summary-grid {
        grid-template-columns: 1fr;
    }
}

.salary-calculator-panel {
    overflow: visible;
    position: relative;
}

.salary-grid-shell {
    overflow-x: auto;
}

.salary-settings-row {
    align-items: end;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0.75rem 0 1rem;
    padding: 0.75rem;
}

.salary-settings-row label {
    color: var(--app-text);
    font-weight: 800;
    margin: 0;
}

.salary-settings-input {
    max-width: 12rem;
    min-width: 9rem;
    text-align: right;
}

.salary-grid {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(16rem, 1.15fr) minmax(12rem, 0.9fr) minmax(12rem, 0.95fr);
    min-width: 48rem;
}

.salary-grid-head {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-line);
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    padding: 0.65rem 0.75rem;
    text-transform: uppercase;
}

.salary-grid-section {
    align-items: center;
    background: var(--app-nav-bg);
    border: 1px solid var(--app-nav-bg);
    color: #ffffff;
    display: flex;
    gap: 0.45rem;
    grid-column: 1 / -1;
    padding: 0.7rem 0.85rem;
}

.salary-grid-section span {
    color: var(--app-nav-muted);
    font-weight: 800;
}

.salary-grid-cell {
    align-items: center;
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    display: flex;
    min-height: 3.15rem;
    padding: 0.55rem 0.65rem;
}

.salary-row-disabled {
    background: var(--app-surface-muted);
    color: var(--app-muted);
}

.salary-row-disabled .salary-row-label,
.salary-row-disabled .salary-checkbox-label {
    color: var(--app-muted);
}

.salary-row-disabled input,
.salary-row-disabled select {
    opacity: 0.65;
}

.salary-label-cell {
    gap: 0.5rem;
    justify-content: space-between;
}

.salary-label-stack {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.salary-row-label {
    color: var(--app-text);
    font-weight: 700;
    line-height: 1.25;
}

.salary-hours-field {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    overflow: visible;
    position: relative;
}

.salary-hours-input {
    font-size: 0.82rem;
    max-width: 7.25rem;
    min-height: 1.9rem;
    padding: 0.25rem 0.45rem;
    text-align: right;
    width: 7.25rem;
}

.salary-hours-bubble {
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-line);
    border-radius: 999px;
    box-shadow: var(--app-shadow-sm);
    color: var(--app-info-dark);
    font-size: 0.74rem;
    font-weight: 800;
    padding: 0.22rem 0.55rem;
    pointer-events: none;
    position: absolute;
    bottom: calc(100% + 0.45rem);
    right: 0;
    white-space: nowrap;
    z-index: 8;
}

.salary-hours-bubble::after {
    border-left: 0.38rem solid transparent;
    border-right: 0.38rem solid transparent;
    border-top: 0.42rem solid var(--app-info-bg);
    content: "";
    position: absolute;
    right: 0.85rem;
    top: 100%;
}

.salary-control {
    min-height: 2.2rem;
}

.salary-amount-input {
    text-align: right;
}

.salary-custom-label-cell {
    background: var(--app-surface-muted);
}

.salary-custom-label-input {
    width: 100%;
}

.salary-checkbox-label {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    margin: 0;
}

.salary-result-cell {
    justify-content: flex-end;
}

.salary-calculated-value {
    font-weight: 800;
}

.salary-help-button {
    align-items: center;
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-line);
    border-radius: 999px;
    color: var(--app-info-dark);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 900;
    height: 1.35rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 1.35rem;
}

.salary-grid-add-row {
    align-items: center;
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    min-height: 3rem;
    padding: 0.5rem 0.65rem;
}

.salary-add-line-button {
    min-width: 11rem;
}

.salary-grid-section .salary-help-button {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.salary-compare-orange {
    background: var(--app-warning-bg);
    border-color: var(--app-warning-line);
}

.salary-compare-green {
    background: var(--app-success-bg);
    border-color: var(--app-success-line);
}

.salary-compare-blue {
    background: var(--app-info-bg);
    border-color: var(--app-info-line);
}

.salary-help-backdrop {
    align-items: center;
    background: rgba(15, 23, 42, 0.44);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.25rem;
    position: fixed;
    z-index: 1050;
}

.salary-help-modal {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    box-shadow: var(--app-shadow-md);
    max-width: 42rem;
    padding: 1rem;
    width: min(100%, 42rem);
}

.salary-help-modal p {
    color: var(--app-text);
    margin: 0.75rem 0 0;
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .salary-grid {
        grid-template-columns: minmax(13rem, 1.1fr) minmax(10rem, 0.9fr) minmax(10rem, 0.9fr);
        min-width: 38rem;
    }
}