/* CSS Variables */
:root {
  /* Responsive Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1200px;

  /* Primary Brand Colors - Blue Family */
  --color-primary: #056dff;
  --color-primary-dark: #0052c6;
  --color-primary-darker: #002b66;
  --color-primary-hover: #0051c3;
  --color-primary-light: #dcebff;
  --color-primary-lighter: #79b1ff;
  --color-primary-focus: #086fff;
  --color-primary-muted: #003681;

  /* Text Colors (Hex) */
  --color-text-default: #313131;
  --color-text-muted: #595959;
  --color-text-light: #797979;

  /* Text Colors (OKLch) */
  --color-text-dark: oklch(14.5% 0 0);
  --color-text-medium-gray: oklch(43.9% 0 0);

  /* Border Colors (Hex) */
  --color-border-standard: #b6b6b6;
  --color-border-muted: #ccc;
  --color-border-subtle: rgb(203, 213, 224);
  --color-border-form: #797979;
  --color-border-neutral: #e5e5e5;

  /* Border Colors (OKLch) */
  --color-border-light: oklch(92.2% 0 0);
  --color-border-light-plus: oklch(70.8% 0 0);
  --color-border-hover: oklch(70% 0 0);

  /* Background Colors (Hex) */
  --color-bg-white: #fff;
  --color-bg-light-gray: #f7fafc;
  --color-bg-form-light: #fafafa;
  --color-bg-table-hover: #f8fafc;
  --color-bg-card-light: #f2f2f2;

  /* Background Colors (OKLch) */
  --color-bg-lightest: oklch(0.98 0 0);
  --color-bg-light: oklch(.96 0 0);

  /* Icon Colors (Hex) */
  --color-icon-medium: #4a4a4a;

  /* Icon Colors (OKLch) */
  --color-icon-base: oklch(22.0% 0 0);
  --color-icon-medium-oklch: oklch(30% 0 0);
  --color-icon-placeholder: oklch(60% 0 0);

  /* Danger/Error Colors */
  --color-danger: #eb1403;
  --color-danger-dark: #b51002;
  --color-danger-darker: #600801;
  --color-danger-light: #fee2e2;
  --color-danger-lighter: #fecaca;
  --color-danger-border: #b91c1c;
  --color-danger-alt: #c00;
  --color-danger-hover: #b91c1c;
  --color-danger-alt-dark: #b20f03;
  --color-danger-text: #991b1b;
  --color-danger-card: #dc2626;
  --color-purple: #7c3aed;
  --color-purple-light: #f3e8ff;
  --color-danger-button: #ef4444;

  /* Success/Green Colors */
  --color-success: #15803d;
  --color-success-light: #dcfce7;
  --color-success-lighter: #bbf7d0;
  --color-success-dark: #104122;
  --color-success-brand: #228b49;
  --color-success-text: #166534;
  --color-success-alt: #22c55e;

  /* Warning/Yellow Colors */
  --color-warning: #f59e0b;
  --color-warning-bg: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-lighter: #fde68a;
  --color-warning-bg-light: #fef3c7;
  --color-warning-lightest: #fef9c3;
  --color-warning-text: #92400e;
  --color-warning-text-dark: #a16207;

  /* Info/Blue Colors */
  --color-info: #0369a1;
  --color-info-light: #e0f2fe;
  --color-info-lightest: #dbeafe;
  --color-info-badge: #3730a3;
  --color-info-badge-light: #e0e7ff;
  --color-info-form: #3182ce;
  --color-info-form-light: #2563eb;
  --color-info-text: #06b6d4;

  /* Neutral/Gray Colors */
  --color-neutral-dark: #191919;
  --color-neutral-medium: #4a4a4a;
  --color-neutral-label: #374151;
  --color-neutral-text-muted: #6b7280;
  --color-neutral-gray: #555;
  --color-neutral-gray-light: #666;
  --color-neutral-gray-lighter: #aaa;
  --color-neutral-gray-lightest: #e5e5e5;
  --color-neutral-gray-button: #999;
  --color-neutral-gray-medium: #d9d9d9;

  /* Overlay & Shadow Colors */
  --color-overlay-light: rgba(0, 0, 0, 0.1);
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-shadow-light: rgba(0, 0, 0, 0.08);

  /* Special/Brand Colors */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1da851;
  --color-payment: #2c5282;

  /* Attendance Colors */
  --color-attendance-active: #0070f3;
  --color-attendance-inactive: #F4F4F5;
  --color-attendance-success: #f0fff4;
  --color-attendance-warning: #FFECC2;

  /* Component Specific Colors */
  --color-section-title: #4a4a4a;
  --color-badge-muted: #6b21a8;
  --color-badge-muted-light: #f3e8ff;
  --color-card-border: #1a365d;
  --color-form-label: #4a5568;
  --color-form-input-hover: #a0aec0;
  --color-card-border-subtle: #e2e8f0;
  --color-scrollbar-track: #f1f1f1;
  --color-scrollbar-thumb: #888;
  --color-toggle-unchecked: #3d3d3d;
  --color-stamp-urgent: #FF0000;
  --color-payment-bg-light: #f8f9fa;
  --color-payment-text-dark: #333333;
  --color-payment-border: #dddddd;
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Base typography */

body {
    font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: -.01em;
    color: var(--color-text-default);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-size: 1.5em;
    margin: 0 0 0.75rem;
}

h2 {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.5;
    margin: 0;
}

.subtitle {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.5;
    margin: 0;
}

.tab-header {
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.1em;
    margin: 0.75rem 0 0.375rem;
}


.box {
    border: 0.0625rem solid var(--color-border-standard);
    border-radius: 0.3125rem;
    padding: 1rem;
}

.helper-text {
    margin-bottom: 1rem;
    max-width: 35.625rem;
}

p,
ul,
ol {
    margin: 0 0 0.5rem;
}

ul,
ol {
    padding-left: 1.25rem;
}

/* Links */
a {
    color: var(--color-primary-hover);
    text-underline-offset: 0.25rem;
    transition: color 150ms;
}

a:visited {
    color: var(--color-primary-hover);
}

a:hover {
    color: var(--color-primary-muted);
}

a:focus {
    color: var(--color-primary-focus);
}

/* Forms */
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: -.01em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
    width: 100%;
    max-width: 37.5rem;
    height: 2.1875rem;
    padding: 0 0.75rem;
    box-sizing: border-box;
    border: 0.0625rem solid var(--color-border-form);
    border-radius: 0.3125rem;
    background-color: var(--color-bg-white);
    color: var(--color-text-default);
    outline: none;
    transition: border-color 0.2s;
}

textarea {
    height: auto;
    padding: 0.5rem;
}

select {
    appearance: none;
    width: 100%;
    max-width: 37.5rem;
    height: 2.1875rem;
    padding: 0 2rem 0 0.75rem;
    border: 0.0625rem solid var(--color-border-form);
    border-radius: 0.3125rem;
    background-color: var(--color-bg-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    color: var(--color-text-default);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 150ms;
}

select:hover {
    border-color: var(--color-border-hover);
}

.label-form-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
    color: var(--color-text-muted);
    cursor: help;
    vertical-align: middle;
}

.label-form-help-icon svg {
    width: 0.75rem;
    height: 0.75rem;
}

.form-classroom-management .form-label,
.form-classroom-add-sidebar .form-label {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
    color: #4b5563;
}

input.field-classroom-form-control,
textarea.field-classroom-form-control,
select.field-classroom-form-control {
    width: 100%;
    max-width: none;
    min-height: 2.125rem;
    padding: 0.375rem 0.625rem;
    border: 0.0625rem solid #cfd8e6;
    border-radius: 0.5rem;
    background-color: var(--color-bg-white);
    font-size: 0.75rem;
    line-height: 1rem;
    color: #4b5563;
}

input.field-classroom-form-control:hover,
textarea.field-classroom-form-control:hover,
select.field-classroom-form-control:hover {
    border-color: #bcc8da;
}

input.field-classroom-form-control:focus-visible,
textarea.field-classroom-form-control:focus-visible,
select.field-classroom-form-control:focus-visible {
    border-color: #9bb4dd;
    box-shadow: 0 0 0 0.1875rem rgba(155, 180, 221, 0.22);
}

input.field-classroom-form-control::placeholder,
textarea.field-classroom-form-control::placeholder {
    color: #6b7280;
}

textarea.field-classroom-form-control.field-classroom-remarks {
    min-height: 6rem;
    resize: vertical;
}

.field-classroom-remarks {
    max-width: none;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover {
    border-color: var(--color-primary);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
textarea:focus-visible {
    border-color: transparent;
    box-shadow: var(--color-bg-white) 0 0 0 0.125rem, var(--color-primary) 0 0 0 0.25rem;
    transition: box-shadow 0.3s;
}

input[type="text"]:active,
input[type="email"]:active,
input[type="password"]:active,
input[type="number"]:active,
input[type="search"]:active,
input[type="tel"]:active,
input[type="url"]:active,
textarea:active {
    border-color: var(--color-primary);
}

input:autofill,
input:autofill:hover,
input:autofill:focus {
    background-color: var(--color-bg-white);
}

button,
input[type="submit"] {
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}

/* Buttons - Standardized to .filter-pill-rect style */
.btn,
.btn-primary,
.btn-outline,
.btn-gray,
.btn-destructive,
.btn-success,
.btn-warning,
.btn-info,
.btn-danger,
.btn-secondary,
.btn-sm,
a.btn,
a.btn-primary,
a.btn-outline,
a.btn-gray,
a.btn-primary:visited,
a.btn-outline:visited,
a.btn-gray:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border-neutral);
    border-radius: 0.25rem;
    background: var(--color-bg-white);
    color: var(--color-neutral-gray-light);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: all 200ms ease;
}

.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-gray:hover,
.btn-destructive:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-danger:hover,
.btn-secondary:hover,
a.btn:hover,
a.btn-primary:hover,
a.btn-outline:hover,
a.btn-gray:hover {
    background: var(--color-bg-light-gray);
    border-color: var(--color-border-standard);
}

.btn:focus,
.btn-primary:focus,
.btn-outline:focus,
.btn-gray:focus,
.btn-destructive:focus,
.btn-success:focus,
.btn-warning:focus,
.btn-info:focus,
.btn-danger:focus,
.btn-secondary:focus,
a.btn:focus,
a.btn-primary:focus,
a.btn-outline:focus,
a.btn-gray:focus {
    background: var(--color-bg-light-gray);
    border-color: var(--color-border-standard);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-gray:focus-visible,
.btn-destructive:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-info:focus-visible,
.btn-danger:focus-visible,
.btn-secondary:focus-visible {
    outline: 0.125rem solid var(--color-primary);
    outline-offset: 0.125rem;
}

.btn:active,
.btn-primary:active,
.btn-outline:active,
.btn-gray:active,
.btn-destructive:active,
.btn-success:active,
.btn-warning:active,
.btn-info:active,
.btn-danger:active,
.btn-secondary:active,
a.btn:active,
a.btn-primary:active,
a.btn-outline:active,
a.btn-gray:active {
    background: var(--color-text-default);
    color: var(--color-bg-white);
    border-color: var(--color-text-default);
}

/* Inline input with action button */
.inline-input-action {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.inline-input-action input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.inline-input-action .input-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-border-form);
    pointer-events: none;
    display: flex;
    z-index: 2;
}

.inline-input-action .input-icon+input {
    padding-left: 2rem;
}

.inline-input-action input:hover,
.inline-input-action input:focus-visible {
    z-index: 1;
}

.inline-input-action button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 0.0625rem solid var(--color-primary);
    border-radius: 0 0.25rem 0.25rem 0;
    background-color: var(--color-bg-white);
    color: var(--color-primary);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.inline-input-action button:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.inline-input-action button:focus {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.inline-input-action button:focus-visible {
    outline: 0.125rem solid var(--color-primary);
    outline-offset: 0.125rem;
}

.inline-input-action button:active {
    background-color: var(--color-primary-lighter);
    color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
}

/* Form layout */
.form-stack {
    max-width: 30rem;
}

.form-stack-tabular {
    width: 100%;
}

.form-field {
    margin-bottom: 1rem;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-field label {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.form-section {
    margin-bottom: 2rem;
}

.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-default);
    letter-spacing: -.01em;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
}

.field-error {
    color: var(--color-danger-alt);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Tables - Base */
table {
    width: auto;
    border-collapse: collapse;
}

th,
td {
    padding: 0.375rem 0.875rem;
    text-align: left;
    border-bottom: 0.0625rem solid var(--color-border-muted);
}

th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-dark);
    position: sticky;
    top: 0;
    background: var(--color-bg-white);
}

td {
    font-size: 0.75rem;
    color: var(--color-neutral-dark);
    line-height: 1.3125rem;
}

tbody tr {
    transition: background-color 150ms;
}

/* Reduce padding for table cells containing button groups to match allocate button */
/* Primary approach: Use :has() for modern browsers */
td:has(.btn-group) {
    padding: 0.375rem 0.5rem !important;
    vertical-align: middle;
}

/* Fallback: Target table cells with actions (typically last column) */
table tbody tr td:last-child {
    padding: 0.375rem 0.5rem;
    vertical-align: middle;
}

/* Additional fix: Remove extra margin from btn-group itself */
td .btn-group {
    display: inline-flex;
    gap: 0.25rem;
    margin: 0;
}

/* Utility class for action cells - can be added manually to td if needed */
.td-actions {
    padding: 0.375rem 0.5rem !important;
    vertical-align: middle;
}

/* Table: Key-Value (dense label/value pairs) */
.table-kv { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.table-kv td { padding: 0.3125rem 0.625rem; border: 0.0625rem solid var(--color-neutral-gray-lightest); vertical-align: middle; line-height: 1.4; }
.table-kv td:first-child { background: var(--color-bg-form-light); font-weight: 500; width: 6.875rem; color: var(--color-neutral-gray); }
.table-kv td:last-child { background: var(--color-bg-white); }
.table-kv .empty { color: var(--color-neutral-gray-lighter); }

/* Table: Data (lists, grids with headers) */
.table-data { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.table-data th { background: var(--color-bg-form-light); padding: 0.375rem 0.625rem; text-align: left; font-weight: 600; border: 0.0625rem solid var(--color-neutral-gray-lightest); color: var(--color-neutral-gray); position: static; }
.table-data td { padding: 0.375rem 0.625rem; border: 0.0625rem solid var(--color-neutral-gray-lightest); background: var(--color-bg-white); }
.table-data tbody tr:hover td { background: var(--color-bg-table-hover); }

/* Status badges */
.badge { display: inline-block; padding: 0.0625rem 0.375rem; border-radius: 0.1875rem; font-size: 0.6875rem; font-weight: 500; }
.badge-success { background: var(--color-success-light); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning-text); }
.badge-danger { background: var(--color-danger-light); color: var(--color-danger-text); }
.badge-info { background: var(--color-info-badge-light); color: var(--color-info-badge); }
.badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-dark { background: var(--color-neutral-dark); color: var(--color-bg-white); }
.badge-secondary { background: var(--color-neutral-gray-medium); color: var(--color-neutral-dark); }
.badge-muted { background: var(--color-badge-muted-light); color: var(--color-badge-muted); }
.badge-purple { background: var(--color-purple-light); color: var(--color-purple); }

/* Contact chip (phone with WhatsApp link) */
.contact-chip { display: inline-flex; align-items: center; gap: 0.375rem; }
.contact-chip .whatsapp { font-size: 0.625rem; padding: 0.0625rem 0.3125rem; background: var(--color-whatsapp); color: var(--color-bg-white); border-radius: 0.1875rem; text-decoration: none; }
.contact-chip .whatsapp:hover { background: var(--color-whatsapp-dark); }

/* Section header (uppercase label) */
.section-label { font-size: 0.75rem; font-weight: 600; color: var(--color-neutral-gray-light); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.03125rem; }

/* ============================================
   Tabs
   ============================================ */
.tabs-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border-neutral);
    border-radius: 0.25rem;
    background: var(--color-bg-white);
    color: var(--color-neutral-gray-light);
    font-size: 0.8125rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 200ms ease;
}

.tab-btn:hover {
    background: var(--color-bg-light-gray);
    border-color: var(--color-border-standard);
}

.tab-btn.active {
    background: var(--color-text-default);
    color: var(--color-bg-white);
    border-color: var(--color-text-default);
}

/* ============================================
   Filter Pills (rounded variant)
   ============================================ */
.filter-pills {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border-neutral);
    border-radius: 1.25rem;
    background: var(--color-bg-white);
    color: var(--color-neutral-gray-light);
    font-size: 0.8125rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 200ms ease;
}

.filter-pill:hover {
    background: var(--color-bg-light-gray);
    border-color: var(--color-border-standard);
}

.filter-pill.is-active {
    background: var(--color-text-default);
    color: var(--color-bg-white);
    border-color: var(--color-text-default);
}

/* Rectangular variant for action buttons */
.filter-pill-rect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border-neutral);
    border-radius: 0.25rem;
    background: var(--color-bg-white);
    color: var(--color-neutral-gray-light);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all 200ms ease;
}

.filter-pill-rect:hover {
    background: var(--color-bg-light-gray);
    border-color: var(--color-border-standard);
}

.filter-pill-rect.is-active {
    background: var(--color-text-default);
    color: var(--color-bg-white);
    border-color: var(--color-text-default);
}

/* Allocation ID with ellipsis */
.allocation-id-link {
    display: inline-block;
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Fixed width Make-up button */
.btn-makeup {
    width: 8rem;
    text-align: center;
    white-space: nowrap;
}

/* Class Allocations Table Styles */
.bundle-discount-yes,
.bundle-discount-no {
    background: transparent;
    color: var(--color-text-default);
}

.status-text {
    background: transparent;
    font-weight: 500;
}

.status-pending-payment {
    color: #f59e0b;
}

.status-pending-confirmation {
    color: #3b82f6;
}

.status-confirmed {
    color: #10b981;
}

.status-withdrawn {
    color: #ef4444;
}

.status-transferred {
    color: #8b5cf6;
}

.status-completed {
    color: #00916E;
}

.status-default {
    color: var(--color-neutral-gray);
}

/* Makeup week pill - grey background with black text */
.makeup-week-pill {
    background: var(--color-neutral-gray-lightest);
    color: var(--color-text-default);
    font-size: 0.75rem;
    font-weight: 700;
    border: none;
    padding-top: 0.1875rem;
    padding-bottom: 0.1875rem;
    cursor: default;
    pointer-events: none;
}

.makeup-week-pill:hover {
    background: var(--color-neutral-gray-lightest);
    border: none;
}

.makeup-week-pill-upcoming,
.makeup-week-pill-upcoming:hover {
    background: var(--color-success-light);
    color: var(--color-success-text);
}

.makeup-week-pill-past,
.makeup-week-pill-past:hover {
    background: var(--color-neutral-gray-lightest);
    color: var(--color-text-muted);
}

/* Utilities */
.error {
    color: red;
}

.link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    cursor: pointer;
}

.link:hover {
    color: var(--color-primary-muted);
}

.is-hidden {
    display: none;
}

/* Back link */
.back-link {
    margin-bottom: 1rem;
}

/* Inline form (horizontal label/input groups) */
.inline-form-fields {
    display: flex;
    gap: 1.5rem;
}

.inline-form-field label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-text-default);
    margin-bottom: 0.25rem;
}

.inline-form-field input {
    width: auto;
}

/* Form grid layouts */
.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-field {
    flex: 1;
    margin-bottom: 1rem;
}

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

.form-row-tabular label {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.form-columns {
    display: flex;
    gap: 3rem;
}

.form-columns .form-section {
    flex: 1;
}

/* Layout helpers */
.particulars-grid {
    display: flex;
    gap: 2.5rem;
}

.particulars-col h3 {
    margin-top: 0;
}

/* Page header */
.page-header {
    margin-bottom: 1.5rem;
}

.section-title {
    color: var(--color-section-title);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.5;
    margin: 0;
    padding-bottom: 0.25rem;
}

.page-title {
    color: var(--color-text-default);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0;
}

/* Vertical tabs */
.vertical-tabs-layout {
    display: flex;
    margin-top: 1rem;
}

.vertical-tabs {
    width: 16em;
    margin-right: 2rem;
    flex-shrink: 0;
}

.vertical-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vertical-tabs li {
    width: 100%;
}

.vertical-tabs a {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    border-left: 0.125rem solid transparent;
    color: var(--color-text-default);
    text-decoration: none;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
}

.vertical-tabs a:visited {
    color: var(--color-text-default);
}

.vertical-tabs a:hover {
    color: var(--color-primary-hover);
}

.vertical-tabs a:focus {
    color: var(--color-text-default);
}

.vertical-tabs a.is-active {
    background-color: var(--color-bg-card-light);
    border-left-color: var(--color-primary-hover);
    font-weight: 600;
}

.vertical-tabs-content {
    flex: 1;
    min-width: 0;
}

/* Layout */
.main-layout {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.main-content main {
    flex: 1;
    width: 100%;
    margin: 0 0 2rem;
    padding: 1.5rem;
}

/* Toasts */
.toasts {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid var(--color-success);
    background-color: var(--color-success-light);
    color: var(--color-success);
    font-size: 0.875rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    animation: toast-in 0.3s ease;
}

.toast-error {
    border-color: var(--color-danger-border);
    background-color: var(--color-danger-light);
    color: var(--color-danger-border);
}

.toast-warning {
    border-color: var(--color-warning-text-dark);
    background-color: var(--color-warning-lightest);
    color: var(--color-warning-text-dark);
}

.toast-success {
    border-color: var(--color-success);
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.toast-info {
    border-color: var(--color-info-border);
    background-color: var(--color-info-light);
    color: var(--color-info-text);
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    margin-left: auto;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toggle Switch */
.toggle {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

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

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-text-muted);
    border: 0.0625rem solid var(--color-toggle-unchecked);
    border-radius: 1.5rem;
    transition: all 0.25s;
}

.toggle-slider::after {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--color-bg-white);
    border-radius: 50%;
    box-shadow: 0 0 0.125rem 0.0625rem var(--color-toggle-unchecked);
    transition: all 0.25s;
}

.toggle input:checked+.toggle-slider {
    background-color: var(--color-success-brand);
    border-color: var(--color-success-dark);
}

.toggle input:checked+.toggle-slider::after {
    transform: translateX(1.5rem);
    box-shadow: none;
}

.toggle input:focus-visible+.toggle-slider {
    box-shadow: var(--color-bg-white) 0 0 0 0.125rem, var(--color-primary) 0 0 0 0.25rem;
}

/* Additional classes for Bootstrap migration */

/* Cards */
.card {
    border: 0.0625rem solid var(--color-border-standard);
    border-radius: 0.5rem;
    padding: 0;
    background: var(--color-bg-white);
}

.card-header {
    padding: 0.75rem;
    border-bottom: 0.0625rem solid var(--color-border-standard);
}

.card-body {
    padding: 0.75rem;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Alerts */
.alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.alert-danger {
    border: 0.0625rem solid var(--color-danger-border);
    background-color: var(--color-danger-light);
    color: var(--color-danger-border);
}

.alert-success {
    border: 0.0625rem solid var(--color-success);
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.alert-info {
    border: 0.0625rem solid var(--color-info);
    background-color: var(--color-info-light);
    color: var(--color-info);
}

.alert-warning {
    border: 0.0625rem solid var(--color-warning-text-dark);
    background-color: var(--color-warning-lightest);
    color: var(--color-warning-text-dark);
}

/* Pagination */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 0.25rem;
    justify-content: center;
}

.page-item {
    display: inline-block;
}

.page-link {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border: 0.0625rem solid var(--color-border-form);
    border-radius: 0.25rem;
    color: var(--color-primary-hover);
    text-decoration: none;
    background: var(--color-bg-white);
    transition: background 150ms, border-color 150ms;
}

.page-link:hover {
    background: var(--color-bg-card-light);
    border-color: var(--color-primary-hover);
}

.page-item.active .page-link {
    background: var(--color-primary-hover);
    color: var(--color-bg-white);
    border-color: var(--color-primary-hover);
}

/* Button group */
.btn-group {
    display: inline-flex;
    gap: 0.25rem;
}

.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
}

/* Table responsive wrapper */
.table-responsive {
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* ==================== */
/* Reusable Utility Classes */
/* ==================== */

/* Text alignment */
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text color */
.text-muted { color: var(--color-text-muted); }

/* Text decoration */
.text-no-underline { text-decoration: none; }

/* Display */
.hidden { display: none; }

/* Form label utility */
.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-neutral-label);
    margin-bottom: 0.25rem;
}

/* ==================== */
/* Grid System */
/* ==================== */

.container {
    width: 100%;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.75rem;
}

.row .col {
    padding: 0 0.75rem;
}

.row .col-quarter {
    padding: 0 0.75rem;
    flex: 0 0 25%;
    max-width: 25%;
}

.row .col-third {
    padding: 0 0.75rem;
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

.row .col-half {
    padding: 0 0.75rem;
    flex: 0 0 50%;
    max-width: 50%;
}

.row .col-two-thirds {
    padding: 0 0.75rem;
    flex: 0 0 66.666%;
    max-width: 66.666%;
}

/* ==================== */
/* New Student Form Styles */
/* ==================== */

/* Main card container - light gray background */
.ns-card {
    border-radius: 0.75rem;
    background: var(--color-bg-light-gray);
    padding: 0.75rem 0.875rem 0.875rem;
    border: 0.0625rem solid var(--color-card-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ns-card + .ns-card {
    margin-top: 1rem;
}

/* White sections inside cards */
.ns-section {
    border-radius: 0.625rem;
    background: var(--color-bg-white);
    padding: 0.625rem 0.75rem 0.75rem;
    border: 0.0625rem solid var(--color-card-border-subtle);
}

/* Section titles */
.ns-section-title {
    margin: 0 0 0.625rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-card-border);
}

/* Grid layouts */
.ns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    gap: 0.5rem 0.625rem;
}

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

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

/* Responsive breakpoints */
@media (max-width: 48rem) {
    .ns-grid.ns-grid-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 30rem) {
    .ns-grid,
    .ns-grid.ns-grid-6 {
        grid-template-columns: 1fr;
    }
}

/* Form field groups */
.ns-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ns-form-group.full-width {
    grid-column: 1 / -1;
}

.ns-form-group label {
    font-size: 0.75rem;
    color: var(--color-form-label);
    font-weight: 400;
}

.ns-form-group input,
.ns-form-group select,
.ns-form-group textarea {
    border-radius: 0.5rem;
    border: 0.0625rem solid var(--color-border-subtle);
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
}

.ns-form-group input:focus,
.ns-form-group select:focus,
.ns-form-group textarea:focus {
    outline: none;
    border-color: var(--color-info-form);
    box-shadow: 0 0 0 0.125rem rgba(49, 130, 206, 0.2);
}

.ns-form-group input:hover,
.ns-form-group select:hover,
.ns-form-group textarea:hover {
    border-color: var(--color-form-input-hover);
}

/* Parent formset styles - flat layout matching mockup */
.ns-parent-row-flat {
    margin-bottom: 0.625rem;
}

.ns-parent-row-flat:first-child {
    margin-bottom: 0.75rem;
}

.ns-secondary-contact-row {
    margin-top: 0.5rem;
}

/* Add/Remove buttons for parent contacts */
.ns-add-contact-btn,
.ns-remove-contact-btn {
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
    border-radius: 0.25rem;
    border: 0.0625rem solid var(--color-border-muted);
    background: var(--color-bg-light);
    color: var(--color-text-default);
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s;
    width: 100%;
    display: block;
}

.ns-add-contact-btn:hover {
    background: var(--color-border-neutral);
    border-color: var(--color-neutral-gray-button);
}

.ns-remove-contact-btn {
    background: var(--color-danger-light);
    border-color: var(--color-danger-border);
    color: var(--color-danger-border);
}

.ns-remove-contact-btn:hover {
    background: var(--color-danger-lighter);
}

/* Phone number prefix + number inline layout
 * Widened to fit the shared searchable country dropdown (flag + name + code).
 * See ui/static/ui/css/phone-prefix.css for the canonical cell layout. */
.ns-phone-grid {
    display: grid;
    grid-template-columns: minmax(11rem, 13.75rem) minmax(0, 1fr);
    gap: 0.5rem;
}

/* Containers define typography for child spans */
/* Card headers - direct span children */
.card-header > span,
.payment-item-section-header > span,
.invoice-item-section-header > span,
.invoice-section-header > span,
.invoice-detail-section-header > span,
span.process-payment-section-title,
span.upload-title,
span.validation-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-section-title);
    letter-spacing: -.01em;
    line-height: 1.5;
    margin: 0;
}

/* Page header titles */
.page-header > span {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-default);
    letter-spacing: -.01em;
    line-height: 1.5;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Colored header backgrounds (white text with icons) */
.payment-header > span,
.payment-item-header > span,
.allocation-detail-header > span,
.invoice-detail-header > span,
.invoice-item-header > span,
.process-payment-header > span,
[class*="-detail-header"] > span,
[class*="-item-header"] > span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-bg-white);
    letter-spacing: -.01em;
    line-height: 1.5;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Card body subsections */
.card-body > span.section-subtitle,
.card-body > .subsection-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-section-title);
    letter-spacing: -.01em;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
    display: block;
}

/* Form sections */
.form-section > span,
.ns-section > span,
.ns-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-default);
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0 0 0.75rem 0;
}

/* Nested items (h6 replacements) */
span.item-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-default);
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: 0;
}

/* ==================== */
/* Sidebar Component */
/* ==================== */
.sidebar {
    width: 16.25rem;
    flex-shrink: 0;
    border-right: 0.0625rem solid var(--color-border-light);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.625rem;
    padding: 0 1rem;
    border-bottom: 0.0625rem solid var(--color-border-light);
}

.sidebar-logo {
    height: 1.625rem;
    display: block;
}

.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0 0.875rem;
}

.sidebar-nav li {
    margin: 0;
    padding: 0;
}

a.sidebar-link,
button.sidebar-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 2.125rem;
    padding: 0 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text-medium-gray);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1);
    line-height: calc(1 / 0.85);
}

a.sidebar-link:hover,
button.sidebar-link:hover,
a.sidebar-link.is-active {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
}

a.sidebar-link:hover .sidebar-icon,
a.sidebar-link.is-active .sidebar-icon {
    opacity: 100%;
}

.sidebar-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    stroke-width: 1;
    color: var(--color-icon-base);
    opacity: 50%;
}

.sidebar-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--color-border-light-plus);
    margin-right: -0.0625rem;
    transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1);
}

.sidebar-subnav {
    list-style: none;
    margin: 0 0 0 1.25rem;
    padding: 0.25rem 0 0.25rem 0.5rem;
    border-left: 0.0625rem solid var(--color-border-light);
}

.sidebar-subnav .sidebar-link {
    min-height: 1.875rem;
    padding-left: 0.9375rem;
}

.sidebar-search {
    position: relative;
    padding: 1rem 1rem 0.5rem;
}

.sidebar-search input {
    width: 100%;
    max-width: none;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border: 0.0625rem solid var(--color-border-light);
    border-radius: 0.5rem;
    background: var(--color-bg-white);
    font-size: 0.8125rem;
}

.sidebar-search input::placeholder {
    color: var(--color-icon-placeholder);
}

.sidebar-search-icon {
    position: absolute;
    left: 1.625rem;
    top: calc(50% + 0.25rem);
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-icon-placeholder);
    pointer-events: none;
}

/* Lead Panel Form */
.lead-panel-form-root {
    font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==================== */
/* Mobile Responsive (<=64rem / 1024px) */
/* ==================== */

@media (max-width: 64rem) {
    /* Hide desktop sidebar on mobile/tablet */
    .sidebar {
        display: none;
    }

    /* Expand main content to full width */
    .main-content {
        width: 100%;
    }

    /* Reduce navbar padding on mobile */
    .navbar {
        padding: 0 1rem;
    }

    /* Reduce main content padding */
    .main-content main {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 48rem) {

    /* Stack form rows vertically */
    .form-row,
    .form-columns {
        flex-direction: column;
        gap: 1rem;
    }

    /* Full-width form fields on mobile */
    .form-row .form-field {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Grid system: all columns go full-width */
    .row .col,
    .row .col-quarter,
    .row .col-third,
    .row .col-half,
    .row .col-two-thirds {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* Allocation grid single column */
    .allocation-grid {
        grid-template-columns: 1fr;
    }

    /* Table responsive wrapper - enable horizontal scroll */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce font sizes slightly for mobile */
    .page-title {
        font-size: 1.5rem;
    }

    h1 {
        font-size: 1.25rem;
    }

    h2 {
        font-size: 1.125rem;
    }
}

/* =============================
   Leave Application list (HR)
   ============================= */
.leave-app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.leave-app-header-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.relief-dashboard-header {
    margin-bottom: 1rem;
}

.relief-dashboard-header .leave-app-header-title {
    letter-spacing: -0.01em;
    line-height: 1.5;
}

.relief-dashboard-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 0.0625rem solid var(--color-border-light);
}

a.relief-dashboard-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border: none;
    border-bottom: 0.125rem solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: -0.0625rem;
    transition: all 0.2s ease;
}

a.relief-dashboard-tab:not(.is-active),
a.relief-dashboard-tab:not(.is-active):visited {
    color: var(--color-text-muted);
}

a.relief-dashboard-tab:hover {
    color: var(--color-text-default);
    background: var(--color-bg-light-gray);
    text-decoration: none;
}

a.relief-dashboard-tab.is-active,
a.relief-dashboard-tab.is-active:visited {
    color: var(--color-primary);
    font-weight: 700;
    border-bottom-color: var(--color-primary);
    background: transparent;
}

.relief-dashboard-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.relief-dashboard-filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.relief-dashboard-filter-options,
.relief-dashboard-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.relief-dashboard-filter-options {
    flex: 0 1 auto;
}

.relief-dashboard-filter-toolbar {
    justify-content: flex-start;
}

.relief-dashboard-filter-toggle,
.relief-dashboard-filter-clear,
.relief-dashboard-filter-clear:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 2.125rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid var(--color-border-subtle);
    background: var(--color-bg-white);
    color: var(--color-text-default);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.relief-dashboard-filter-toggle:hover,
.relief-dashboard-filter-clear:hover {
    background: var(--color-bg-light);
    color: var(--color-text-default);
    text-decoration: none;
}

.relief-dashboard-filter-toggle.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.relief-dashboard-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-bg-white);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
}

.relief-dashboard-filter-collapsible {
    display: none;
    margin-top: 0.1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--color-bg-light-gray);
}

.relief-dashboard-filter-collapsible.is-open {
    display: block;
}

.relief-dashboard-filter-grid {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.relief-dashboard-filter-grid--three-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
}

.relief-dashboard-filter-field {
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10rem;
}

.relief-dashboard-filter-grid--three-fields .relief-dashboard-filter-field {
    flex: none;
    min-width: 0;
}

.relief-dashboard-filter-field label {
    margin: 0;
    color: var(--color-neutral-label);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
}

.relief-dashboard-filter-select {
    border-color: var(--color-border-subtle);
    min-width: 12rem;
    height: 2.125rem;
}

.relief-dashboard-filter-field .relief-dashboard-filter-select,
.relief-dashboard-filter-field .relief-filter-search-select {
    width: 100%;
    min-width: 0;
}

.relief-dashboard-filter-field .relief-filter-search-select .ss-wrapper {
    max-width: none;
}

.relief-dashboard-filter-field .relief-filter-search-select .ss-trigger {
    height: 2.125rem;
}

.relief-dashboard-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.relief-dashboard-filter-grid--three-fields .relief-dashboard-filter-actions {
    align-self: end;
}

.relief-dashboard-filter-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.125rem;
    padding: 0 0.875rem;
    border: 0.0625rem solid var(--color-primary);
    border-radius: 0.5rem;
    background: var(--color-primary);
    color: var(--color-bg-white);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

.relief-dashboard-filter-apply:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

a.relief-dashboard-filter-pill,
a.relief-dashboard-filter-pill:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.125rem;
    background: var(--color-bg-table-hover);
    border: 0.0625rem solid var(--color-border-subtle);
    color: var(--color-text-default);
    border-radius: 0.25rem;
    padding: 0 0.85rem;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.3;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

a.relief-dashboard-filter-pill:hover {
    border-color: var(--color-primary-light);
    background: var(--color-info-lightest);
    color: var(--color-info-form-light);
    text-decoration: none;
}

a.relief-dashboard-filter-pill.is-active,
a.relief-dashboard-filter-pill.is-active:visited {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 700;
}

.relief-dashboard-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.relief-dashboard-filter-count-all {
    background: var(--color-bg-white);
    color: var(--color-primary);
}

.relief-dashboard-filter-count-critical {
    background: var(--color-danger-lighter);
    color: var(--color-danger-text);
}

.relief-dashboard-filter-count-urgent {
    background: var(--color-warning-lighter);
    color: var(--color-warning-text);
}

.relief-dashboard-filter-count-advanced {
    background: var(--color-success-lighter);
    color: var(--color-success-text);
}

a.relief-dashboard-filter-pill-critical.is-active,
a.relief-dashboard-filter-pill-critical.is-active:visited {
    border-color: var(--color-danger-border);
    background: var(--color-danger-light);
    color: var(--color-danger-text);
}

a.relief-dashboard-filter-pill-urgent.is-active,
a.relief-dashboard-filter-pill-urgent.is-active:visited {
    border-color: var(--color-warning);
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

a.relief-dashboard-filter-pill-advanced.is-active,
a.relief-dashboard-filter-pill-advanced.is-active:visited {
    border-color: var(--color-success);
    background: var(--color-success-light);
    color: var(--color-success-text);
}

.relief-dashboard-list-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-left: auto;
    margin-bottom: 0;
}

.relief-dashboard-selection-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
    cursor: pointer;
}

.relief-dashboard-selection-checkbox input {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
    cursor: pointer;
}

@media (max-width: 48rem) {
    .relief-dashboard-filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    .relief-dashboard-filter-options,
    .relief-dashboard-filter-toolbar {
        width: 100%;
    }

    .relief-dashboard-filter-toolbar {
        justify-content: flex-start;
        margin-left: 0;
    }

    .relief-dashboard-list-controls {
        margin-left: 0;
    }

    .relief-dashboard-filter-grid--three-fields {
        grid-template-columns: 1fr;
    }

    .relief-dashboard-filter-grid--three-fields .relief-dashboard-filter-actions,
    .relief-dashboard-filter-apply {
        width: 100%;
    }
}

.leave-app-filters {
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.leave-app-urgency {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.leave-app-filter-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.form-select-auto {
    width: auto;
}

.badge-critical {
    background: var(--color-danger-light);
    color: var(--color-danger-text);
}

.badge-urgent {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.badge-advanced {
    background: var(--color-success-light);
    color: var(--color-success-text);
}

.urgency-critical {
    border-left: 4px solid #dc3545;
}

.urgency-urgent {
    border-left: 4px solid #fd7e14;
}

.urgency-advanced {
    border-left: 4px solid #198754;
}

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

/* Reusable loading skeleton */
.shimmer-skeleton {
    --shimmer-skeleton-width: 100%;
    --shimmer-skeleton-height: 1rem;
    --shimmer-skeleton-radius: 0.375rem;
    --shimmer-skeleton-base: var(--color-bg-card-light);
    --shimmer-skeleton-highlight: rgba(255, 255, 255, 0.78);
    --shimmer-skeleton-duration: 1.35s;

    display: block;
    width: var(--shimmer-skeleton-width);
    max-width: 100%;
    height: var(--shimmer-skeleton-height);
    border-radius: var(--shimmer-skeleton-radius);
    background:
        linear-gradient(90deg, transparent, var(--shimmer-skeleton-highlight), transparent) no-repeat,
        var(--shimmer-skeleton-base);
    background-size: 14rem 100%, 100% 100%;
    background-position: -14rem 0, 0 0;
    overflow: hidden;
    animation: shimmer-skeleton var(--shimmer-skeleton-duration) ease-in-out infinite;
}

.shimmer-skeleton--circle {
    --shimmer-skeleton-radius: 999px;
}

@keyframes shimmer-skeleton {
    100% {
        background-position: calc(100% + 14rem) 0, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shimmer-skeleton {
        animation: none;
        background-image: none;
    }
}