/* ============================================================
   DAR — Shared design theme (single source of truth)
   Loaded app-wide via base.html.twig AND by the standalone
   welcome / anmeldung / eltern screens.
   Self-hosted fonts (DSGVO-friendly, no CDN) + design tokens.
   Unified Button & Interactive Action System (.dar-btn).
   ============================================================ */

/* ---------------- Self-hosted variable fonts ---------------- */
/* Files live in wwwroot/fonts/ — served from /fonts/. Both are variable
   fonts, so a single file covers weights 400–700 via the weight axis. */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope.ttf") format("truetype-variations"),
         url("../fonts/Manrope.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/NotoSansArabic.ttf") format("truetype-variations"),
         url("../fonts/NotoSansArabic.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------- Design Tokens ---------------- */
:root {
    /* Brand Core */
    --dar-green: #1a8a57;
    --dar-green-dark: #14663f;
    --dar-green-deep: #144e33;
    --dar-green-accent: #38a374;
    --dar-green-soft: #e9f4ee;
    --dar-green-subtle: rgba(26, 138, 87, 0.10);
    --dar-green-glow: rgba(26, 138, 87, 0.25);

    /* Amber / Gold */
    --dar-yellow: #f6b70b;
    --dar-yellow-dark: #cf9400;
    --dar-yellow-deep: #8a5a00;
    --dar-yellow-contrast: #4a3b00;
    --dar-yellow-soft: #fdf4d9;
    --dar-yellow-subtle: rgba(246, 183, 11, 0.12);
    --dar-yellow-glow: rgba(246, 183, 11, 0.35);

    /* Destructive / Red */
    --dar-red: #dc2626;
    --dar-red-dark: #b91c1c;
    --dar-red-deep: #991b1b;
    --dar-red-soft: #fef2f2;
    --dar-red-subtle: rgba(220, 38, 38, 0.10);
    --dar-red-glow: rgba(220, 38, 38, 0.25);

    /* Auxiliary Blue */
    --dar-blue: #2563eb;
    --dar-blue-dark: #1d4ed8;
    --dar-blue-deep: #1e40af;
    --dar-blue-soft: #eff6ff;
    --dar-blue-subtle: rgba(37, 99, 235, 0.10);

    /* Neutrals & Surfaces */
    --dar-bg: #faf6ee;          /* warm off-white */
    --dar-surface: #ffffff;
    --dar-surface-muted: #f8faf9;
    --dar-surface-hover: #f1f5f3;
    --dar-text: #1f2923;
    --dar-text-muted: #5f7168;
    --dar-muted: #5f7168;
    --dar-border: #dbe4df;
    --dar-border-light: #edf2ef;
    --dar-hairline: rgba(20, 70, 45, 0.08);

    /* Border Radii */
    --dar-radius-card: 20px;
    --dar-radius-panel: 24px;
    --dar-radius-icon: 16px;
    --dar-radius-btn: 14px;
    --dar-radius-btn-sm: 10px;
    --dar-radius-btn-lg: 16px;
    --dar-radius-pill: 9999px;
    --dar-btn-radius-default: 14px;
    --dar-btn-radius-pill: 9999px;

    /* Button Sizing & Typography Tokens */
    --dar-btn-height-sm: 36px;
    --dar-btn-height-md: 44px;
    --dar-btn-height-lg: 52px;
    --dar-btn-padding-sm: 0.4rem 0.85rem;
    --dar-btn-padding-md: 0.65rem 1.25rem;
    --dar-btn-padding-lg: 0.85rem 1.6rem;
    --dar-btn-font-sm: 0.84rem;
    --dar-btn-font-md: 0.95rem;
    --dar-btn-font-lg: 1.05rem;
    --dar-btn-font-weight: 700;
    --dar-btn-font-weight-strong: 800;

    /* Elevation & Shadows */
    --dar-shadow-xs: 0 1px 2px rgba(20, 70, 45, 0.04);
    --dar-shadow-sm: 0 2px 4px rgba(20, 70, 45, 0.05), 0 1px 2px rgba(20, 70, 45, 0.03);
    --dar-shadow-md: 0 6px 16px rgba(20, 70, 45, 0.06), 0 2px 6px rgba(20, 70, 45, 0.04);
    --dar-shadow-lg: 0 12px 32px rgba(20, 70, 45, 0.08), 0 4px 12px rgba(20, 70, 45, 0.04);
    --dar-shadow-xl: 0 20px 48px rgba(20, 70, 45, 0.12);
    --dar-shadow: 0 10px 30px rgba(20, 70, 45, 0.08);
    --dar-shadow-hover: 0 16px 40px rgba(20, 70, 45, 0.14);
    --dar-shadow-card: 0 4px 20px rgba(20, 70, 45, 0.06);
    --dar-shadow-card-hover: 0 8px 28px rgba(20, 70, 45, 0.12);
    --dar-shadow-btn-primary: 0 4px 14px rgba(26, 138, 87, 0.28);
    --dar-shadow-btn-primary-hover: 0 6px 18px rgba(26, 138, 87, 0.38);
    --dar-shadow-btn-offer: 0 4px 14px rgba(246, 183, 11, 0.35);
    --dar-shadow-btn-danger: 0 4px 14px rgba(220, 38, 38, 0.28);

    /* Focus Rings */
    --dar-focus-ring-width: 3px;
    --dar-focus-ring-offset: 2px;
    --dar-focus-ring-green: 0 0 0 3px rgba(26, 138, 87, 0.30);
    --dar-focus-ring-yellow: 0 0 0 3px rgba(246, 183, 11, 0.40);
    --dar-focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.30);
    --dar-focus-ring-blue: 0 0 0 3px rgba(37, 99, 235, 0.30);
    --dar-btn-focus-ring-color: var(--dar-green);
    --dar-btn-focus-ring-offset: 2px;
    --dar-btn-focus-ring-width: 3px;

    /* Transitions & Motion */
    --dar-transition-btn: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --dar-transition-fast: all 0.15s ease;
    --dar-btn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography Fonts */
    --dar-font-latin: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dar-font-arabic: "Noto Sans Arabic", "Tajawal", Arial, sans-serif;
    --dar-font-display: var(--dar-font-latin);
}

[dir="rtl"] {
    --dar-font-display: var(--dar-font-arabic);
}

/* ============================================================
   DAR Unified Button Component System (.dar-btn)
   ============================================================ */

/* 1. Base Button Contract */
.dar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--dar-btn-padding-md, 0.65rem 1.25rem);
    min-height: var(--dar-btn-height-md, 44px);
    min-width: var(--dar-btn-height-md, 44px);
    font-family: inherit;
    font-size: var(--dar-btn-font-md, 0.95rem);
    font-weight: var(--dar-btn-font-weight, 700);
    line-height: 1.25;
    margin: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid transparent;
    border-radius: var(--dar-radius-pill, 9999px);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: var(--dar-transition-btn, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
}

.dar-btn:active {
    transform: translateY(0);
}

/* 2. Primary Actions */
.dar-btn-primary,
.dar-btn--primary {
    background-color: var(--dar-green);
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--dar-shadow-btn-primary);
}

.dar-btn-primary:hover:not(:disabled):not(.disabled),
.dar-btn--primary:hover:not(:disabled):not(.disabled) {
    background-color: var(--dar-green-dark);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--dar-shadow-btn-primary-hover);
}

.dar-btn-primary:active:not(:disabled):not(.disabled),
.dar-btn--primary:active:not(:disabled):not(.disabled) {
    background-color: var(--dar-green-deep);
    transform: translateY(0);
    box-shadow: var(--dar-shadow-sm);
}

.dar-btn-primary-gradient,
.dar-btn--primary-gradient {
    background: linear-gradient(135deg, var(--dar-green), var(--dar-green-deep));
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--dar-shadow-btn-primary);
}

.dar-btn-primary-gradient:hover:not(:disabled):not(.disabled),
.dar-btn--primary-gradient:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, var(--dar-green-accent), var(--dar-green-dark));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--dar-shadow-btn-primary-hover);
}

.dar-btn-primary-gradient:active:not(:disabled):not(.disabled),
.dar-btn--primary-gradient:active:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, var(--dar-green-dark), var(--dar-green-deep));
    transform: translateY(0);
    box-shadow: var(--dar-shadow-sm);
}

.dar-btn-offer,
.dar-btn--offer,
.dar-btn-accent,
.dar-btn--accent {
    background-color: var(--dar-yellow);
    color: var(--dar-yellow-contrast, #4a3b00);
    font-weight: var(--dar-btn-font-weight-strong, 800);
    border-color: transparent;
    box-shadow: var(--dar-shadow-btn-offer);
}

.dar-btn-offer:hover:not(:disabled):not(.disabled),
.dar-btn--offer:hover:not(:disabled):not(.disabled),
.dar-btn-accent:hover:not(:disabled):not(.disabled),
.dar-btn--accent:hover:not(:disabled):not(.disabled) {
    background-color: #ebae00;
    color: var(--dar-yellow-contrast, #4a3b00);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(246, 183, 11, 0.45);
}

.dar-btn-offer:active:not(:disabled):not(.disabled),
.dar-btn--offer:active:not(:disabled):not(.disabled),
.dar-btn-accent:active:not(:disabled):not(.disabled),
.dar-btn--accent:active:not(:disabled):not(.disabled) {
    background-color: var(--dar-yellow-dark);
    transform: translateY(0);
    box-shadow: var(--dar-shadow-sm);
}

/* 3. Secondary & Outline Actions */
.dar-btn-secondary,
.dar-btn--secondary {
    background-color: var(--dar-surface);
    color: var(--dar-green-deep);
    border: 1.5px solid var(--dar-border);
    box-shadow: var(--dar-shadow-sm);
}

.dar-btn-secondary:hover:not(:disabled):not(.disabled),
.dar-btn--secondary:hover:not(:disabled):not(.disabled) {
    border-color: var(--dar-green);
    background-color: var(--dar-green-soft);
    color: var(--dar-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dar-btn-secondary:active:not(:disabled):not(.disabled),
.dar-btn--secondary:active:not(:disabled):not(.disabled) {
    background-color: #d8ecdf;
    transform: translateY(0);
}

.dar-btn-outline,
.dar-btn--outline {
    background-color: transparent;
    color: var(--dar-text);
    border: 1.5px solid var(--dar-border);
}

.dar-btn-outline:hover:not(:disabled):not(.disabled),
.dar-btn--outline:hover:not(:disabled):not(.disabled) {
    background-color: var(--dar-surface-hover);
    border-color: var(--dar-text-muted);
    color: var(--dar-text);
    transform: translateY(-1px);
}

.dar-btn-outline-primary,
.dar-btn--outline-primary,
.dar-btn-outline-green,
.dar-btn--outline-green {
    background-color: transparent;
    color: var(--dar-green);
    border: 1.5px solid var(--dar-green);
}

.dar-btn-outline-primary:hover:not(:disabled):not(.disabled),
.dar-btn--outline-primary:hover:not(:disabled):not(.disabled),
.dar-btn-outline-green:hover:not(:disabled):not(.disabled),
.dar-btn--outline-green:hover:not(:disabled):not(.disabled) {
    background-color: var(--dar-green);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--dar-shadow-btn-primary);
}

.dar-btn-outline-secondary,
.dar-btn--outline-secondary {
    background-color: transparent;
    color: var(--dar-text-muted);
    border: 1.5px solid var(--dar-border);
}

.dar-btn-outline-secondary:hover:not(:disabled):not(.disabled),
.dar-btn--outline-secondary:hover:not(:disabled):not(.disabled) {
    background-color: var(--dar-surface-hover);
    color: var(--dar-text);
    border-color: var(--dar-text-muted);
}

/* 4. Soft & Subtle Actions */
.dar-btn-subtle,
.dar-btn--subtle,
.dar-btn-soft,
.dar-btn--soft,
.dar-btn-soft-green,
.dar-btn--soft-green {
    background-color: var(--dar-green-soft);
    color: var(--dar-green-dark);
    border-color: transparent;
}

.dar-btn-subtle:hover:not(:disabled):not(.disabled),
.dar-btn--subtle:hover:not(:disabled):not(.disabled),
.dar-btn-soft:hover:not(:disabled):not(.disabled),
.dar-btn--soft:hover:not(:disabled):not(.disabled),
.dar-btn-soft-green:hover:not(:disabled):not(.disabled),
.dar-btn--soft-green:hover:not(:disabled):not(.disabled) {
    background-color: #d8ecdf;
    color: var(--dar-green-deep);
    transform: translateY(-1px);
}

.dar-btn-subtle:active:not(:disabled):not(.disabled),
.dar-btn--subtle:active:not(:disabled):not(.disabled),
.dar-btn-soft:active:not(:disabled):not(.disabled),
.dar-btn--soft:active:not(:disabled):not(.disabled),
.dar-btn-soft-green:active:not(:disabled):not(.disabled),
.dar-btn--soft-green:active:not(:disabled):not(.disabled) {
    background-color: #c9e4d2;
    transform: translateY(0);
}

.dar-btn-ghost,
.dar-btn--ghost {
    background-color: transparent;
    color: var(--dar-text);
    border-color: transparent;
}

.dar-btn-ghost:hover:not(:disabled):not(.disabled),
.dar-btn--ghost:hover:not(:disabled):not(.disabled) {
    background-color: var(--dar-green-subtle);
    color: var(--dar-green-dark);
    transform: translateY(-1px);
}

.dar-btn-accent-yellow,
.dar-btn--accent-yellow,
.dar-btn-soft-yellow,
.dar-btn--soft-yellow {
    background-color: var(--dar-yellow-soft);
    color: var(--dar-yellow-deep, #8a5a00);
    border-color: transparent;
}

.dar-btn-accent-yellow:hover:not(:disabled):not(.disabled),
.dar-btn--accent-yellow:hover:not(:disabled):not(.disabled),
.dar-btn-soft-yellow:hover:not(:disabled):not(.disabled),
.dar-btn--soft-yellow:hover:not(:disabled):not(.disabled) {
    background-color: #fcedbf;
    color: var(--dar-yellow-contrast, #4a3b00);
    transform: translateY(-1px);
}

.dar-btn-accent-yellow:active:not(:disabled):not(.disabled),
.dar-btn--accent-yellow:active:not(:disabled):not(.disabled),
.dar-btn-soft-yellow:active:not(:disabled):not(.disabled),
.dar-btn--soft-yellow:active:not(:disabled):not(.disabled) {
    background-color: #faeab8;
    transform: translateY(0);
}

.dar-btn-accent-blue,
.dar-btn--accent-blue,
.dar-btn-soft-blue,
.dar-btn--soft-blue {
    background-color: var(--dar-blue-soft);
    color: var(--dar-blue-dark, #1d4ed8);
    border-color: transparent;
}

.dar-btn-accent-blue:hover:not(:disabled):not(.disabled),
.dar-btn--accent-blue:hover:not(:disabled):not(.disabled),
.dar-btn-soft-blue:hover:not(:disabled):not(.disabled),
.dar-btn--soft-blue:hover:not(:disabled):not(.disabled) {
    background-color: #dbeafe;
    color: var(--dar-blue-deep, #1e40af);
    transform: translateY(-1px);
}

.dar-btn-accent-blue:active:not(:disabled):not(.disabled),
.dar-btn--accent-blue:active:not(:disabled):not(.disabled),
.dar-btn-soft-blue:active:not(:disabled):not(.disabled),
.dar-btn--soft-blue:active:not(:disabled):not(.disabled) {
    background-color: #bfdbfe;
    transform: translateY(0);
}

/* 5. Destructive Actions */
.dar-btn-danger,
.dar-btn--danger,
.dar-btn-destructive,
.dar-btn--destructive {
    background-color: var(--dar-red);
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--dar-shadow-btn-danger);
}

.dar-btn-danger:hover:not(:disabled):not(.disabled),
.dar-btn--danger:hover:not(:disabled):not(.disabled),
.dar-btn-destructive:hover:not(:disabled):not(.disabled),
.dar-btn--destructive:hover:not(:disabled):not(.disabled) {
    background-color: var(--dar-red-dark);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.38);
}

.dar-btn-danger:active:not(:disabled):not(.disabled),
.dar-btn--danger:active:not(:disabled):not(.disabled),
.dar-btn-destructive:active:not(:disabled):not(.disabled),
.dar-btn--destructive:active:not(:disabled):not(.disabled) {
    background-color: var(--dar-red-deep);
    transform: translateY(0);
    box-shadow: var(--dar-shadow-sm);
}

.dar-btn-danger-outline,
.dar-btn--danger-outline,
.dar-btn-outline-danger,
.dar-btn--outline-danger {
    background-color: #ffffff;
    color: var(--dar-red);
    border: 1.5px solid #fecaca;
}

.dar-btn-danger-outline:hover:not(:disabled):not(.disabled),
.dar-btn--danger-outline:hover:not(:disabled):not(.disabled),
.dar-btn-outline-danger:hover:not(:disabled):not(.disabled),
.dar-btn--outline-danger:hover:not(:disabled):not(.disabled) {
    background-color: var(--dar-red-soft);
    border-color: var(--dar-red);
    color: var(--dar-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.dar-btn-danger-outline:active:not(:disabled):not(.disabled),
.dar-btn--danger-outline:active:not(:disabled):not(.disabled),
.dar-btn-outline-danger:active:not(:disabled):not(.disabled),
.dar-btn--outline-danger:active:not(:disabled):not(.disabled) {
    background-color: #fee2e2;
    transform: translateY(0);
}

.dar-btn-danger-subtle,
.dar-btn--danger-subtle,
.dar-btn-ghost-danger,
.dar-btn--ghost-danger,
.dar-btn--ghost-destructive {
    background-color: var(--dar-red-soft);
    color: var(--dar-red);
    border-color: transparent;
}

.dar-btn-danger-subtle:hover:not(:disabled):not(.disabled),
.dar-btn--danger-subtle:hover:not(:disabled):not(.disabled),
.dar-btn-ghost-danger:hover:not(:disabled):not(.disabled),
.dar-btn--ghost-danger:hover:not(:disabled):not(.disabled),
.dar-btn--ghost-destructive:hover:not(:disabled):not(.disabled) {
    background-color: #fde8e8;
    color: var(--dar-red-dark);
    transform: translateY(-1px);
}

.dar-btn-danger-subtle:active:not(:disabled):not(.disabled),
.dar-btn--danger-subtle:active:not(:disabled):not(.disabled),
.dar-btn-ghost-danger:active:not(:disabled):not(.disabled),
.dar-btn--ghost-danger:active:not(:disabled):not(.disabled),
.dar-btn--ghost-destructive:active:not(:disabled):not(.disabled) {
    background-color: #fbd5d5;
    transform: translateY(0);
}

/* 6. Size Modifiers */
.dar-btn-sm,
.dar-btn--sm {
    padding: var(--dar-btn-padding-sm, 0.4rem 0.85rem);
    font-size: var(--dar-btn-font-sm, 0.84rem);
    min-height: var(--dar-btn-height-sm, 36px);
    min-width: var(--dar-btn-height-sm, 36px);
    gap: 0.35rem;
    border-radius: var(--dar-radius-pill, 9999px);
}

.dar-btn-md,
.dar-btn--md {
    padding: var(--dar-btn-padding-md, 0.65rem 1.25rem);
    font-size: var(--dar-btn-font-md, 0.95rem);
    min-height: var(--dar-btn-height-md, 44px);
    min-width: var(--dar-btn-height-md, 44px);
    gap: 0.5rem;
    border-radius: var(--dar-radius-pill, 9999px);
}

.dar-btn-lg,
.dar-btn--lg {
    padding: var(--dar-btn-padding-lg, 0.85rem 1.6rem);
    font-size: var(--dar-btn-font-lg, 1.05rem);
    min-height: var(--dar-btn-height-lg, 52px);
    min-width: var(--dar-btn-height-lg, 52px);
    gap: 0.6rem;
    border-radius: var(--dar-radius-pill, 9999px);
}

/* 7. Shape Modifiers */
.dar-btn-pill,
.dar-btn--pill {
    border-radius: var(--dar-radius-pill, 9999px) !important;
}

.dar-btn-block,
.dar-btn--block {
    display: flex;
    width: 100%;
}

.dar-btn-icon,
.dar-btn--icon,
.dar-btn-icon-only,
.dar-btn--icon-only {
    width: var(--dar-btn-height-md, 44px);
    height: var(--dar-btn-height-md, 44px);
    padding: 0;
    flex-shrink: 0;
    justify-content: center;
    border-radius: 12px;
}

.dar-btn-icon.dar-btn-sm,
.dar-btn--icon.dar-btn--sm,
.dar-btn-icon-only.dar-btn-sm,
.dar-btn--icon-only.dar-btn--sm {
    width: var(--dar-btn-height-sm, 36px);
    height: var(--dar-btn-height-sm, 36px);
    border-radius: 10px;
}

.dar-btn-icon.dar-btn-lg,
.dar-btn--icon.dar-btn--lg,
.dar-btn-icon-only.dar-btn-lg,
.dar-btn--icon-only.dar-btn--lg {
    width: var(--dar-btn-height-lg, 52px);
    height: var(--dar-btn-height-lg, 52px);
    border-radius: 14px;
}

.dar-btn-icon.dar-btn-pill,
.dar-btn--icon.dar-btn--pill,
.dar-btn-icon-only.dar-btn-pill,
.dar-btn--icon-only.dar-btn--pill {
    border-radius: 50% !important;
}

/* Bell icon and icon button pointer-events isolation for zero-flicker toggle */
.app-bellbtn *,
#dar-notification-bell *,
.dar-btn-icon * {
    pointer-events: none;
}

/* Offcanvas stacking above backdrop */
.app-offcanvas,
.offcanvas-end.app-offcanvas,
.offcanvas-start.app-offcanvas,
.offcanvas-bottom.app-offcanvas {
    z-index: 1060 !important;
}

.add-tile,
.dar-btn-add-tile,
.dar-btn--add-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1.5px dashed rgba(20, 70, 45, 0.22);
    border-radius: var(--dar-radius-card, 20px);
    padding: clamp(0.9rem, 3.5vw, 1.1rem);
    min-height: 48px;
    margin: 0;
    color: var(--dar-green);
    font-weight: 700;
    text-decoration: none;
    background-color: transparent;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    box-sizing: border-box;
}

.add-tile:hover,
.dar-btn-add-tile:hover,
.dar-btn--add-tile:hover {
    background-color: var(--dar-green-soft);
    border-color: var(--dar-green);
    color: var(--dar-green-dark);
    transform: translateY(-1px);
}

.add-tile:active,
.dar-btn-add-tile:active,
.dar-btn--add-tile:active {
    transform: translateY(0);
}

.add-tile:focus-visible,
.dar-btn-add-tile:focus-visible,
.dar-btn--add-tile:focus-visible {
    outline: var(--dar-focus-ring-width, 3px) solid var(--dar-green);
    outline-offset: var(--dar-focus-ring-offset, 2px);
}

/* 8. Icon Alignment & Spacing */
.dar-btn i,
.dar-btn svg {
    font-size: 1.15em;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.dar-btn-icon-start,
.dar-btn--icon-start {
    margin-inline-end: 0;
}

.dar-btn-icon-end,
.dar-btn--icon-end {
    margin-inline-start: 0;
}

.dar-btn:hover:not(:disabled):not(.disabled) i.bi-arrow-right,
.dar-btn:hover:not(:disabled):not(.disabled) i.bi-chevron-right {
    transform: translateX(2px);
}

/* 9. Focus-Visible Rings (Accessibility) */
.dar-btn:focus-visible {
    outline: var(--dar-focus-ring-width, 3px) solid var(--dar-btn-focus-ring-color, var(--dar-green));
    outline-offset: var(--dar-focus-ring-offset, 2px);
}

.dar-btn-offer:focus-visible,
.dar-btn--offer:focus-visible,
.dar-btn-accent:focus-visible,
.dar-btn--accent:focus-visible,
.dar-btn-accent-yellow:focus-visible,
.dar-btn--accent-yellow:focus-visible,
.dar-btn-soft-yellow:focus-visible,
.dar-btn--soft-yellow:focus-visible {
    outline: var(--dar-focus-ring-width, 3px) solid var(--dar-yellow-dark);
    outline-offset: var(--dar-focus-ring-offset, 2px);
}

.dar-btn-danger:focus-visible,
.dar-btn--danger:focus-visible,
.dar-btn-danger-outline:focus-visible,
.dar-btn--danger-outline:focus-visible,
.dar-btn-danger-subtle:focus-visible,
.dar-btn--danger-subtle:focus-visible,
.dar-btn-destructive:focus-visible,
.dar-btn--destructive:focus-visible {
    outline: var(--dar-focus-ring-width, 3px) solid var(--dar-red);
    outline-offset: var(--dar-focus-ring-offset, 2px);
}

.dar-btn-accent-blue:focus-visible,
.dar-btn--accent-blue:focus-visible,
.dar-btn-soft-blue:focus-visible,
.dar-btn--soft-blue:focus-visible {
    outline: var(--dar-focus-ring-width, 3px) solid var(--dar-blue);
    outline-offset: var(--dar-focus-ring-offset, 2px);
}

/* 10. Disabled & Loading States */
.dar-btn:disabled,
.dar-btn.disabled,
.dar-btn.is-disabled,
.dar-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed !important;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.dar-btn.is-busy,
.dar-btn.dar-btn-loading,
.dar-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.dar-btn.is-busy::after,
.dar-btn.dar-btn-loading::after,
.dar-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: darBtnSpin 0.75s linear infinite;
}

.dar-btn-secondary.is-busy::after,
.dar-btn--secondary.is-busy::after,
.dar-btn-outline.is-busy::after,
.dar-btn--outline.is-busy::after,
.dar-btn-subtle.is-busy::after,
.dar-btn--subtle.is-busy::after,
.dar-btn-soft.is-busy::after,
.dar-btn--soft.is-busy::after,
.dar-btn-ghost.is-busy::after,
.dar-btn--ghost.is-busy::after {
    border-color: rgba(26, 138, 87, 0.2);
    border-top-color: var(--dar-green);
}

.dar-btn-offer.is-busy::after,
.dar-btn--offer.is-busy::after,
.dar-btn-accent-yellow.is-busy::after,
.dar-btn--accent-yellow.is-busy::after,
.dar-btn-soft-yellow.is-busy::after,
.dar-btn--soft-yellow.is-busy::after {
    border-color: rgba(74, 59, 0, 0.2);
    border-top-color: var(--dar-yellow-contrast);
}

.dar-btn-danger-outline.is-busy::after,
.dar-btn--danger-outline.is-busy::after,
.dar-btn-danger-subtle.is-busy::after,
.dar-btn--danger-subtle.is-busy::after {
    border-color: rgba(220, 38, 38, 0.2);
    border-top-color: var(--dar-red);
}

@keyframes darBtnSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 11. Bidirectional RTL Direction Rules */
[dir="rtl"] .dar-btn i.bi-arrow-right,
[dir="rtl"] .dar-btn i.bi-chevron-right,
[dir="rtl"] .dar-btn i.bi-box-arrow-right,
[dir="rtl"] .dar-btn i.bi-arrow-left,
[dir="rtl"] .dar-btn i.bi-chevron-left,
[dir="rtl"] .dar-btn i.bi-box-arrow-up-right,
[dir="rtl"] .dar-btn svg.bi-arrow-right,
[dir="rtl"] .dar-btn svg.bi-chevron-right,
[dir="rtl"] .dar-btn svg.bi-arrow-left,
[dir="rtl"] .dar-btn svg.bi-chevron-left {
    transform: scaleX(-1);
}

[dir="rtl"] .dar-btn:hover:not(:disabled):not(.disabled) i.bi-arrow-right,
[dir="rtl"] .dar-btn:hover:not(:disabled):not(.disabled) i.bi-chevron-right {
    transform: scaleX(-1) translateX(2px);
}

/* ============================================================
   DAR Design System — Backward-Compatibility Alias Bridge
   Ensures legacy button classes across Dashboard, Schedule, 
   Vacations, Homeworks, Profile, Offer, Membership, Volunteering,
   Registration, Classes, and Applications inherit unified .dar-btn
   styling before template migrations.
   ============================================================ */

/* 1. Legacy Base Button Resets & Common Typography */
.cc-btn,
.btn-lesson-action,
.btn-apply-vacation,
.btn-cancel-vacation,
.quick-sat-pill,
.vacation-tab-btn,
.homeworks-tab-btn,
.hw-class-pill,
.class-pill,
.offer-btn,
.pf-btn,
.mb-btn,
.vc-btn,
.vc-scope .vc-btn,
.app-cancel,
.hero-btn,
.btn-hw-action,
.registration-btn,
.anmeldung-btn,
.existing-account__btn,
.classes-state-card__btn,
.ca-vac-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    line-height: 1.25;
    margin: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid transparent;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: var(--dar-transition-btn, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
}

/* 2. Specific Dimension & Shape Overrides for Legacy Types */
.cc-btn {
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.42rem 0.75rem;
    min-height: 36px;
    border-radius: var(--dar-radius-pill, 9999px);
    background-color: var(--dar-surface-muted, #f8faf9);
    color: var(--dar-text, #1f2923);
}

.cc-btn i {
    font-size: 0.95rem;
}

.btn-lesson-action {
    font-size: 0.86rem;
    font-weight: 600;
    padding: 8px 18px;
    min-height: 40px;
    border-radius: var(--dar-radius-pill, 9999px);
    box-shadow: var(--dar-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
}

.btn-apply-vacation {
    height: 48px;
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: var(--dar-radius-pill, 9999px);
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--dar-green), var(--dar-green-deep));
    color: #ffffff;
    box-shadow: var(--dar-shadow-btn-primary);
}

.btn-cancel-vacation {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.95rem;
    min-height: 36px;
    border-radius: var(--dar-radius-pill, 9999px);
    background-color: var(--dar-surface);
    border: 1.5px solid #fecaca;
    color: var(--dar-red);
}

.quick-sat-pill,
.hw-class-pill,
.class-pill {
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    min-height: 36px;
    border-radius: var(--dar-radius-pill, 9999px);
    background-color: var(--dar-surface-muted, #f8faf9);
    border: 1.5px solid var(--dar-border);
    color: var(--dar-text);
}

.vacation-tab-btn,
.homeworks-tab-btn {
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    min-height: 40px;
    border-radius: var(--dar-radius-pill, 9999px);
    background: transparent;
    border: none;
    color: var(--dar-text-muted);
}

.offer-btn,
.pf-btn,
.mb-btn,
.vc-btn,
.vc-scope .vc-btn,
.registration-btn,
.anmeldung-btn,
.existing-account__btn {
    font-size: 0.95rem;
    font-weight: 800;
    padding: 12px 24px;
    min-height: 44px;
    border-radius: var(--dar-radius-pill, 9999px);
}

.hero-btn {
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    min-height: 40px;
    border-radius: var(--dar-radius-pill, 9999px);
}

.btn-hw-action {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 7px 18px;
    min-height: 38px;
    border-radius: var(--dar-radius-pill, 9999px);
}

.pf-btn--sm {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    min-height: 34px;
    border-radius: var(--dar-radius-pill, 9999px);
}

.classes-state-card__btn {
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.45rem 1rem;
    min-height: 36px;
    border-radius: var(--dar-radius-pill, 9999px);
}

.ca-vac-del,
.app-cancel {
    font-size: 1.05rem;
    padding: 6px 10px;
    min-height: 36px;
    min-width: 36px;
    border-radius: var(--dar-radius-pill, 9999px);
    background: transparent;
    color: var(--dar-red, #dc2626);
    border: none;
}

.pf-copy-btn {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--dar-green-soft);
    color: var(--dar-green-dark);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pf-copy-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

.pf-copy-btn:hover {
    background: var(--dar-green);
    color: #ffffff;
}

.hw-tool-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--dar-text, #1f2923);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hw-tool-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

.hw-tool-btn:hover {
    background: #e2e8e5;
    color: var(--dar-green-deep, #144e33);
}

/* Touch Target Minimums on Mobile / Coarse Pointer Devices */
@media (pointer: coarse), (max-width: 768px) {
    .dar-btn-sm,
    .dar-btn--sm,
    .cc-btn,
    .btn-lesson-action,
    .btn-cancel-vacation,
    .quick-sat-pill,
    .hw-class-pill,
    .class-pill,
    .vacation-tab-btn,
    .homeworks-tab-btn,
    .hero-btn,
    .btn-hw-action,
    .pf-btn--sm,
    .classes-state-card__btn,
    .ca-vac-del,
    .app-cancel {
        min-height: 44px;
        min-width: 44px;
    }

    .pf-copy-btn,
    .hw-tool-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* 3. Primary Solid & Gradient Actions */
.cc-btn--register,
.cc-btn--homework,
.offer-btn--primary,
.pf-btn--primary,
.mb-btn--primary,
.vc-btn--primary,
.vc-scope .vc-btn--primary,
.registration-btn--primary,
.anmeldung-btn--primary,
.hero-btn,
.btn-hw-save {
    background: linear-gradient(135deg, var(--dar-green, #1a8a57), var(--dar-green-deep, #144e33));
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: var(--dar-shadow-btn-primary);
}

.cc-btn--register i,
.cc-btn--homework i {
    color: #ffffff !important;
}

.cc-btn--register:hover,
.cc-btn--homework:hover,
.offer-btn--primary:hover,
.pf-btn--primary:hover,
.mb-btn--primary:hover,
.vc-btn--primary:hover,
.vc-scope .vc-btn--primary:hover,
.registration-btn--primary:hover,
.anmeldung-btn--primary:hover,
.hero-btn:hover,
.btn-hw-save:hover {
    background: linear-gradient(135deg, var(--dar-green-accent, #38a374), var(--dar-green-dark, #14663f));
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: var(--dar-shadow-btn-primary-hover);
}

.cc-btn--register:active,
.cc-btn--homework:active,
.offer-btn--primary:active,
.pf-btn--primary:active,
.mb-btn--primary:active,
.vc-btn--primary:active,
.vc-scope .vc-btn--primary:active,
.registration-btn--primary:active,
.anmeldung-btn--primary:active,
.hero-btn:active,
.btn-hw-save:active {
    background: linear-gradient(135deg, var(--dar-green-dark), var(--dar-green-deep));
    color: #ffffff !important;
    transform: translateY(0);
    box-shadow: var(--dar-shadow-sm);
}

.btn-lesson-action--attendance,
.quick-sat-pill.is-selected,
.hw-class-pill.is-active,
.class-pill.is-active {
    background: linear-gradient(135deg, var(--dar-green), var(--dar-green-deep));
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--dar-shadow-btn-primary);
}

.btn-lesson-action--attendance:hover,
.btn-apply-vacation:hover,
.quick-sat-pill.is-selected:hover,
.hw-class-pill.is-active:hover,
.class-pill.is-active:hover {
    background: linear-gradient(135deg, var(--dar-green-accent), var(--dar-green-dark));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--dar-shadow-btn-primary-hover);
}

/* 4. Secondary & Outline Actions */
.btn-lesson-action--students,
.vc-btn--secondary,
.vc-scope .vc-btn--secondary,
.offer-btn--ghost,
.pf-btn--ghost,
.mb-btn--ghost,
.registration-btn--ghost,
.anmeldung-btn--ghost,
.btn-hw-edit,
.existing-account__btn--secondary {
    background-color: var(--dar-surface);
    color: var(--dar-green-dark, #14663f);
    border: 1.5px solid var(--dar-border);
    box-shadow: var(--dar-shadow-sm);
}

.btn-lesson-action--students:hover,
.quick-sat-pill:hover,
.hw-class-pill:hover,
.class-pill:hover,
.vc-btn--secondary:hover,
.vc-scope .vc-btn--secondary:hover,
.offer-btn--ghost:hover,
.pf-btn--ghost:hover,
.mb-btn--ghost:hover,
.registration-btn--ghost:hover,
.anmeldung-btn--ghost:hover,
.btn-hw-edit:hover,
.existing-account__btn--secondary:hover {
    border-color: var(--dar-green);
    background-color: var(--dar-green-soft);
    color: var(--dar-green-deep, #144e33);
    transform: translateY(-1px);
}

.btn-lesson-action--students:active,
.vc-btn--secondary:active,
.vc-scope .vc-btn--secondary:active,
.offer-btn--ghost:active,
.pf-btn--ghost:active,
.mb-btn--ghost:active,
.registration-btn--ghost:active,
.anmeldung-btn--ghost:active,
.btn-hw-edit:active,
.existing-account__btn--secondary:active {
    background-color: #d8ecdf;
    transform: translateY(0);
}

/* 5. Soft & Subtle Actions */
.cc-btn--member,
.pf-btn--soft,
.classes-state-card__btn {
    background-color: var(--dar-green-soft);
    color: var(--dar-green-dark);
    border-color: transparent;
}

.cc-btn--member:hover,
.pf-btn--soft:hover,
.classes-state-card__btn:hover {
    background-color: var(--dar-green);
    color: #ffffff;
    transform: translateY(-1px);
}

.cc-btn--absence {
    background-color: var(--dar-yellow-soft);
    color: var(--dar-yellow-deep, #8a5a00);
    border-color: transparent;
}

.cc-btn--absence:hover {
    background-color: #fcedbf;
    color: var(--dar-yellow-contrast, #4a3b00);
    transform: translateY(-1px);
}

.cc-btn--volunteer {
    background-color: var(--dar-blue-soft, #eff6ff);
    color: var(--dar-blue-dark, #1d4ed8);
    border-color: transparent;
}

.cc-btn--volunteer:hover {
    background-color: #dbeafe;
    color: #1e40af;
    transform: translateY(-1px);
}

/* 6. Destructive Actions */
.cc-btn--withdraw,
.pf-btn--ghost-danger,
.offer-btn--danger-ghost,
.ca-vac-del {
    background-color: var(--dar-red-soft);
    color: var(--dar-red);
    border-color: transparent;
}

.cc-btn--withdraw:hover,
.pf-btn--ghost-danger:hover,
.offer-btn--danger-ghost:hover,
.ca-vac-del:hover {
    background-color: #fde8e8;
    color: var(--dar-red-dark);
    transform: translateY(-1px);
}

.btn-cancel-vacation:hover,
.app-cancel:hover {
    background-color: var(--dar-red-soft);
    border-color: var(--dar-red);
    color: var(--dar-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.offer-btn--danger {
    background-color: var(--dar-red);
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--dar-shadow-btn-danger);
}

.offer-btn--danger:hover {
    background-color: var(--dar-red-dark);
    color: #ffffff;
    transform: translateY(-1px);
}

/* 7. Neutral Cancel Actions */
.btn-hw-cancel {
    background-color: #f3f4f6;
    color: #4b5563;
    border: 1px solid transparent;
}

.btn-hw-cancel:hover {
    background-color: #e5e7eb;
    color: #1f2937;
    transform: translateY(-1px);
}

.btn-hw-cancel:active {
    transform: translateY(0);
}

/* 8. Full-Width CTAs */
.cc-btn--offer,
.cc-btn--future,
.existing-account__btn--primary {
    background-color: var(--dar-yellow);
    color: var(--dar-yellow-contrast, #4a3b00);
    font-weight: 800;
    border-color: transparent;
    box-shadow: var(--dar-shadow-btn-offer);
}

.cc-btn--offer,
.existing-account__btn {
    padding: 0.65rem 1rem;
    min-height: 44px;
    border-radius: var(--dar-radius-pill, 9999px);
    flex-basis: 100%;
    width: 100%;
    justify-content: center;
}

.cc-btn--offer:hover,
.cc-btn--future:hover,
.existing-account__btn--primary:hover {
    background-color: #ebae00;
    color: var(--dar-yellow-contrast, #4a3b00);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(246, 183, 11, 0.45);
}

.cc-btn--finalize {
    background-color: var(--dar-green);
    color: #ffffff;
    font-weight: 800;
    padding: 0.65rem 1rem;
    min-height: 44px;
    border-radius: var(--dar-radius-pill, 9999px);
    flex-basis: 100%;
    width: 100%;
    justify-content: center;
    border-color: transparent;
    box-shadow: var(--dar-shadow-btn-primary);
}

.cc-btn--finalize:hover {
    background-color: var(--dar-green-dark);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--dar-shadow-btn-primary-hover);
}

/* 9. Tab Active & Interactive States */
.vacation-tab-btn:hover,
.homeworks-tab-btn:hover {
    color: var(--dar-green-deep);
}

.vacation-tab-btn.is-active,
.homeworks-tab-btn.is-active {
    background: var(--dar-surface);
    color: var(--dar-green-deep);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 10. Focus-Visible & Accessibility Rings */
.cc-btn:focus-visible,
.btn-lesson-action:focus-visible,
.btn-apply-vacation:focus-visible,
.offer-btn:focus-visible,
.offer-btn--ghost:focus-visible,
.pf-btn:focus-visible,
.mb-btn:focus-visible,
.mb-btn--ghost:focus-visible,
.vc-btn:focus-visible,
.vc-scope .vc-btn:focus-visible,
.quick-sat-pill:focus-visible,
.vacation-tab-btn:focus-visible,
.homeworks-tab-btn:focus-visible,
.hw-class-pill:focus-visible,
.class-pill:focus-visible,
.hero-btn:focus-visible,
.registration-btn:focus-visible,
.registration-btn--ghost:focus-visible,
.anmeldung-btn:focus-visible,
.anmeldung-btn--ghost:focus-visible,
.btn-hw-action:focus-visible,
.btn-hw-edit:focus-visible,
.btn-hw-save:focus-visible,
.classes-state-card__btn:focus-visible,
.existing-account__btn--secondary:focus-visible {
    outline: var(--dar-focus-ring-width, 3px) solid var(--dar-green);
    outline-offset: var(--dar-focus-ring-offset, 2px);
}

.cc-btn--offer:focus-visible,
.cc-btn--absence:focus-visible,
.cc-btn--future:focus-visible,
.existing-account__btn--primary:focus-visible {
    outline: var(--dar-focus-ring-width, 3px) solid var(--dar-yellow-dark);
    outline-offset: var(--dar-focus-ring-offset, 2px);
}

.btn-cancel-vacation:focus-visible,
.cc-btn--withdraw:focus-visible,
.offer-btn--danger:focus-visible,
.offer-btn--danger-ghost:focus-visible,
.pf-btn--ghost-danger:focus-visible,
.app-cancel:focus-visible,
.ca-vac-del:focus-visible {
    outline: var(--dar-focus-ring-width, 3px) solid var(--dar-red);
    outline-offset: var(--dar-focus-ring-offset, 2px);
}

/* 11. Disabled States */
.cc-btn.is-disabled,
.cc-btn:disabled,
.cc-btn[aria-disabled="true"],
.btn-apply-vacation:disabled,
.offer-btn[disabled],
.offer-btn.disabled,
.offer-btn:disabled,
.pf-btn:disabled,
.pf-btn.disabled,
.mb-btn:disabled,
.mb-btn.disabled,
.vc-btn:disabled,
.vc-btn.disabled,
.vc-scope .vc-btn:disabled,
.vc-scope .vc-btn.disabled,
.registration-btn:disabled,
.registration-btn.disabled,
.anmeldung-btn:disabled,
.anmeldung-btn.disabled,
.btn-hw-save:disabled,
.classes-state-card__btn:disabled,
.classes-state-card__btn.disabled,
.add-tile:disabled,
.add-tile.is-disabled,
.add-tile[aria-disabled="true"],
.dar-btn-add-tile:disabled,
.dar-btn-add-tile.is-disabled,
.dar-btn-add-tile[aria-disabled="true"],
.app-cancel:disabled {
    opacity: 0.55;
    cursor: not-allowed !important;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================
   DAR Surface Polish — Modern Card Elevation & Badge Contours
   ============================================================ */

.card,
.dash-card,
.pf-card,
.settings-card,
.classes-state-card,
.activity-card,
.participant-card,
.vacation-card,
.lesson-card,
.schedule-card,
.ph-hw-card,
.ph-main-card,
.volunteer-card,
.mb-card,
.offer-card,
.tier-card,
.membership-plan-card,
.cm-card {
    border-radius: var(--dar-radius-card, 20px);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
}

.dash-card:hover,
.pf-card--interactive:hover,
.activity-card:hover,
.volunteer-card:hover,
.membership-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dar-shadow-hover, 0 16px 40px rgba(20, 70, 45, 0.14));
}

/* Smooth Badge Contours */
.badge,
.dar-badge,
.ph-badge,
.vc-badge,
.teacher-badge,
.time-badge,
.lesson-time-badge,
.school-year-header__badge,
.vacations-stats-badge,
.activities-stats-badge {
    border-radius: var(--dar-radius-pill, 9999px);
    font-weight: 600;
    letter-spacing: 0.015em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.25;
}

/* ============================================================
   DAR Unified Status Pill Component System (.dar-status-pill)
   Semantic, accessible status pills with standardized OK / WAIT / BAD / NEUTRAL states.
   ============================================================ */
.dar-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--dar-radius-pill, 9999px);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

/* OK / Success / Completed / Active / Confirmed / Enrolled */
.dar-status-pill--ok {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

/* WAIT / Pending / In Review / Draft / Modified / Warning */
.dar-status-pill--wait {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

/* BAD / Rejected / Cancelled / Error / Danger / Expired */
.dar-status-pill--bad {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* NEUTRAL / Secondary / Fallback / Info */
.dar-status-pill--neutral,
.dar-status-pill--info {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* ============================================================
   DAR Design System — Dark Mode Theme Overrides [data-theme="dark"]
   Single source of truth for dark surfaces, typography, borders,
   elevations, and all core components (cards, forms, tables, nav, modals).
   ============================================================ */

[data-theme="dark"] {
    /* --- Dark Neutrals & Surfaces --- */
    --dar-bg: #0f1712;                 /* Deep forest black/dark green */
    --dar-surface: #19231d;            /* Primary dark surface (cards, modals) */
    --dar-surface-muted: #151d18;      /* Recessed surface (inputs, striped rows) */
    --dar-surface-hover: #223028;      /* Active / hover surface state */
    --dar-text: #eaf2ed;               /* High contrast bright text */
    --dar-text-muted: #94a79d;         /* Secondary legible muted text */
    --dar-muted: #73847b;              /* Tertiary icons & disabled text */
    --dar-border: #2c3c32;             /* Crisp container borders */
    --dar-border-light: #202d26;       /* Subtle dividers */
    --dar-hairline: rgba(255, 255, 255, 0.08);

    /* --- Dark Brand Core (Green) --- */
    --dar-green: #1a8a57;
    --dar-green-dark: #22a065;
    --dar-green-deep: #144e33;
    --dar-green-accent: #38a374;
    --dar-green-soft: #143526;
    --dar-green-subtle: rgba(56, 163, 116, 0.15);
    --dar-green-glow: rgba(56, 163, 116, 0.35);

    /* --- Dark Amber / Gold --- */
    --dar-yellow: #f6b70b;
    --dar-yellow-dark: #cf9400;
    --dar-yellow-deep: #ffd768;
    --dar-yellow-contrast: #ffd768;
    --dar-yellow-soft: #382c0a;
    --dar-yellow-subtle: rgba(246, 183, 11, 0.15);
    --dar-yellow-glow: rgba(246, 183, 11, 0.35);

    /* --- Dark Destructive / Red --- */
    --dar-red: #ef4444;
    --dar-red-dark: #dc2626;
    --dar-red-deep: #f87171;
    --dar-red-soft: #381414;
    --dar-red-subtle: rgba(239, 68, 68, 0.15);
    --dar-red-glow: rgba(239, 68, 68, 0.30);

    /* --- Dark Auxiliary Blue --- */
    --dar-blue: #3b82f6;
    --dar-blue-dark: #2563eb;
    --dar-blue-deep: #60a5fa;
    --dar-blue-soft: #142442;
    --dar-blue-subtle: rgba(59, 130, 246, 0.15);

    /* --- Dark Elevation & Shadows --- */
    --dar-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.25);
    --dar-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
    --dar-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40);
    --dar-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);
    --dar-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.65);
    --dar-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --dar-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.60);
    --dar-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
    --dar-shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.50);
    --dar-shadow-btn-primary: 0 4px 14px rgba(26, 138, 87, 0.40);
    --dar-shadow-btn-primary-hover: 0 6px 18px rgba(56, 163, 116, 0.50);
    --dar-shadow-btn-offer: 0 4px 14px rgba(246, 183, 11, 0.30);
    --dar-shadow-btn-danger: 0 4px 14px rgba(239, 68, 68, 0.40);

    /* --- Dark Focus Rings --- */
    --dar-focus-ring-green: 0 0 0 3px rgba(56, 163, 116, 0.40);
    --dar-focus-ring-yellow: 0 0 0 3px rgba(246, 183, 11, 0.40);
    --dar-focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.40);
    --dar-focus-ring-blue: 0 0 0 3px rgba(59, 130, 246, 0.40);
    --dar-btn-focus-ring-color: var(--dar-green-accent);

    /* --- Bootstrap 5 Native Variable Bridge --- */
    --bs-body-bg: var(--dar-bg);
    --bs-body-color: var(--dar-text);
    --bs-emphasis-color: var(--dar-text);
    --bs-secondary-color: var(--dar-text-muted);
    --bs-tertiary-color: var(--dar-muted);
    --bs-border-color: var(--dar-border);
    --bs-border-color-translucent: var(--dar-hairline);
    --bs-tertiary-bg: var(--dar-surface-muted);
    --bs-secondary-bg: var(--dar-surface-hover);
    --bs-card-bg: var(--dar-surface);
    --bs-card-border-color: var(--dar-border);
    --bs-card-color: var(--dar-text);
    --bs-modal-bg: var(--dar-surface);
    --bs-modal-border-color: var(--dar-border);
    --bs-modal-color: var(--dar-text);
    --bs-offcanvas-bg: var(--dar-surface);
    --bs-offcanvas-border-color: var(--dar-border);
    --bs-offcanvas-color: var(--dar-text);
    --bs-list-group-bg: var(--dar-surface);
    --bs-list-group-border-color: var(--dar-border);
    --bs-list-group-color: var(--dar-text);
    --bs-table-bg: var(--dar-surface);
    --bs-table-color: var(--dar-text);
    --bs-dropdown-bg: var(--dar-surface);
    --bs-dropdown-color: var(--dar-text);
    --bs-dropdown-link-color: var(--dar-text);
    --bs-dropdown-link-hover-bg: var(--dar-surface-hover);
    --bs-dropdown-border-color: var(--dar-border);
}

/* ---------------- 1. Body & HTML Shell ---------------- */
[data-theme="dark"] body,
[data-theme="dark"] body.v2,
[data-theme="dark"] html {
    background-color: var(--dar-bg) !important;
    color: var(--dar-text) !important;
    color-scheme: dark;
}

/* ---------------- 2. Top App Bar & Navigation ---------------- */
[data-theme="dark"] .top-app-bar {
    background: rgba(25, 35, 29, 0.88) !important;
    border-bottom: 1px solid var(--dar-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .app-backbtn,
[data-theme="dark"] .app-iconbtn,
[data-theme="dark"] .app-edgebtn,
[data-theme="dark"] .app-bellbtn {
    background: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .app-backbtn:hover,
[data-theme="dark"] .app-iconbtn:hover,
[data-theme="dark"] .app-edgebtn:hover,
[data-theme="dark"] .app-bellbtn:hover {
    background: var(--dar-surface-hover) !important;
    border-color: var(--dar-green-accent) !important;
    color: #34d399 !important;
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.25) !important;
}

[data-theme="dark"] .app-lang-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--dar-border) !important;
}

[data-theme="dark"] .app-lang-pill__item {
    color: var(--dar-text-muted) !important;
}

[data-theme="dark"] .app-lang-pill__item:hover {
    color: var(--dar-text) !important;
}

[data-theme="dark"] .app-lang-pill__item.is-active {
    background: var(--dar-surface) !important;
    color: var(--dar-green-accent) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* ---------------- 3. Bottom Tab Bar ---------------- */
[data-theme="dark"] .bottom-tab-bar {
    background: rgba(25, 35, 29, 0.92) !important;
    border-top: 1px solid var(--dar-border) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35) !important;
}

@media (min-width: 768px) {
    [data-theme="dark"] .bottom-tab-bar {
        border: 1px solid var(--dar-border) !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
    }
}

[data-theme="dark"] .tab-item {
    color: #b3c5bb !important;
}

[data-theme="dark"] .tab-item .tab-icon-wrap {
    color: #c2d4ca !important;
}

[data-theme="dark"] .tab-item:hover,
[data-theme="dark"] .tab-item:focus-visible {
    color: var(--dar-green-accent) !important;
}

[data-theme="dark"] .tab-item:hover .tab-icon-wrap {
    background: var(--dar-green-subtle) !important;
    color: var(--dar-green-accent) !important;
}

[data-theme="dark"] .tab-item.active {
    color: #34d399 !important;
}

[data-theme="dark"] .tab-item.active .tab-icon-wrap {
    background: rgba(52, 211, 153, 0.20) !important;
    color: #34d399 !important;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.35);
}

[data-theme="dark"] .tab-badge-dot {
    border-color: var(--dar-surface) !important;
}

/* ---------------- 4. Cards & Dashboard Containers ---------------- */
[data-theme="dark"] .card,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .pf-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .classes-state-card {
    background-color: var(--dar-surface) !important;
    border: 1px solid var(--dar-border) !important;
    color: var(--dar-text) !important;
    box-shadow: var(--dar-shadow) !important;
}

/* Menu & Dashboard SVG Card Icons in Dark Mode */
[data-theme="dark"] .dash-card img,
[data-theme="dark"] .app-offcanvas .dash-card img,
[data-theme="dark"] .app-offcanvas .card img,
[data-theme="dark"] .quick-nav-card img,
[data-theme="dark"] .menu-card img,
[data-theme="dark"] .card img.mx-auto {
    filter: brightness(0) invert(0.92) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
    transition: filter 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .dash-card:hover img,
[data-theme="dark"] .app-offcanvas .dash-card:hover img,
[data-theme="dark"] .dash-card:active img,
[data-theme="dark"] .app-offcanvas .dash-card:active img {
    filter: brightness(0) saturate(100%) invert(78%) sepia(35%) saturate(650%) hue-rotate(95deg) brightness(102%) contrast(96%) drop-shadow(0 4px 14px rgba(52, 211, 153, 0.5));
    transform: scale(1.06);
}

[data-theme="dark"] .app-offcanvas .dash-card {
    background: var(--dar-surface) !important;
    border: 1.5px solid var(--dar-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .app-offcanvas .dash-card:hover {
    background: var(--dar-surface-hover) !important;
    border-color: var(--dar-green-accent) !important;
    box-shadow: 0 8px 24px rgba(26, 138, 87, 0.3) !important;
}

[data-theme="dark"] .card-header {
    background-color: var(--dar-surface) !important;
    border-bottom: 1px solid var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .card-footer {
    background-color: var(--dar-surface-muted) !important;
    border-top: 1px solid var(--dar-border) !important;
    color: var(--dar-text-muted) !important;
}

[data-theme="dark"] .pf-hero {
    background: linear-gradient(180deg, var(--dar-surface-muted) 0%, var(--dar-surface) 100%) !important;
    border: 1px solid var(--dar-border) !important;
}

[data-theme="dark"] .pf-hero__name,
[data-theme="dark"] .pf-card__head h2,
[data-theme="dark"] .dash-card .fw-bold,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--dar-text) !important;
}

/* ---------------- 5. Forms & Inputs ---------------- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] .pf-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea {
    background-color: var(--dar-surface-muted) !important;
    border: 1.5px solid var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] select.form-control:focus,
[data-theme="dark"] .pf-input:focus {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-green-accent) !important;
    color: var(--dar-text) !important;
    box-shadow: 0 0 0 3px rgba(56, 163, 116, 0.28) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .pf-input::placeholder {
    color: var(--dar-muted) !important;
    opacity: 0.85;
}

[data-theme="dark"] .form-select,
[data-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23eaf2ed' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .form-check-input {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--dar-green-accent) !important;
    border-color: var(--dar-green-accent) !important;
}

[data-theme="dark"] .form-check-label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .pf-label,
[data-theme="dark"] .pf-value {
    color: var(--dar-text) !important;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text-muted) !important;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .pf-input:disabled {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: var(--dar-text-muted) !important;
    border-color: var(--dar-border-light) !important;
    opacity: 0.75;
}

/* ---------------- 6. Modals & Offcanvas Sheets ---------------- */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .app-offcanvas,
[data-theme="dark"] .offcanvas-bottom.app-offcanvas,
[data-theme="dark"] .offcanvas-end.app-offcanvas,
[data-theme="dark"] .offcanvas-start.app-offcanvas {
    background-color: var(--dar-surface) !important;
    color: var(--dar-text) !important;
    border: 1px solid var(--dar-border) !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .offcanvas-end.app-offcanvas {
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"][dir="rtl"] .offcanvas-end.app-offcanvas {
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .offcanvas-start.app-offcanvas {
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"][dir="rtl"] .offcanvas-start.app-offcanvas {
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .app-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--dar-border) !important;
}

[data-theme="dark"] .modal-footer {
    border-top: 1px solid var(--dar-border) !important;
    background-color: var(--dar-surface-muted) !important;
}

[data-theme="dark"] .modal-title,
[data-theme="dark"] .app-offcanvas .offcanvas-title {
    color: var(--dar-text) !important;
}

[data-theme="dark"] .offcanvas-handle {
    background: #475569 !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%) !important;
}

/* ---------------- 7. Dropdowns & List Groups ---------------- */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--dar-surface) !important;
    border: 1px solid var(--dar-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--dar-text) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--dar-surface-hover) !important;
    color: var(--dar-green-accent) !important;
}

[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
    background-color: var(--dar-green-soft) !important;
    color: var(--dar-green-accent) !important;
}

[data-theme="dark"] .dropdown-divider {
    border-top: 1px solid var(--dar-border) !important;
}

[data-theme="dark"] .list-group-item {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

/* ---------------- 8. Tables & Lists ---------------- */
[data-theme="dark"] .table {
    background-color: var(--dar-surface) !important;
    color: var(--dar-text) !important;
    border-color: var(--dar-border) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-bottom: 1px solid var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .table thead th {
    background-color: var(--dar-surface-muted) !important;
    color: var(--dar-green-accent) !important;
    border-bottom: 1px solid var(--dar-border) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--dar-surface-muted) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--dar-surface-hover) !important;
}

@media only screen and (max-width: 800px) {
    [data-theme="dark"] .table-responsive tr {
        border-color: var(--dar-border) !important;
        background-color: var(--dar-surface) !important;
    }
    [data-theme="dark"] .table-responsive td {
        border-bottom-color: var(--dar-border) !important;
    }
    [data-theme="dark"] .table-responsive .collapsible:not(.non-clickable) {
        background-color: var(--dar-surface-muted) !important;
    }
}

/* ---------------- 9. Buttons & Interactive Controls ---------------- */
[data-theme="dark"] .dar-btn-secondary,
[data-theme="dark"] .dar-btn--secondary,
[data-theme="dark"] .btn-secondary {
    background-color: var(--dar-surface) !important;
    color: var(--dar-text) !important;
    border: 1.5px solid var(--dar-border) !important;
}

[data-theme="dark"] .dar-btn-secondary:hover,
[data-theme="dark"] .dar-btn--secondary:hover,
[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--dar-surface-hover) !important;
    border-color: var(--dar-green-accent) !important;
    color: var(--dar-green-accent) !important;
}

[data-theme="dark"] .dar-btn-outline,
[data-theme="dark"] .dar-btn--outline,
[data-theme="dark"] .btn-outline-secondary {
    background-color: transparent !important;
    color: var(--dar-text) !important;
    border-color: var(--dar-border) !important;
}

[data-theme="dark"] .dar-btn-outline:hover,
[data-theme="dark"] .dar-btn--outline:hover {
    background-color: var(--dar-surface-hover) !important;
    border-color: var(--dar-text-muted) !important;
}

[data-theme="dark"] .dar-btn-danger-outline,
[data-theme="dark"] .btn-cancel-vacation {
    background-color: var(--dar-surface) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .dar-btn-danger-outline:hover,
[data-theme="dark"] .btn-cancel-vacation:hover {
    background-color: var(--dar-red-soft) !important;
    border-color: var(--dar-red) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .quick-sat-pill,
[data-theme="dark"] .hw-class-pill,
[data-theme="dark"] .class-pill,
[data-theme="dark"] .cc-btn {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .vacation-tab-btn.is-active,
[data-theme="dark"] .homeworks-tab-btn.is-active {
    background: var(--dar-surface) !important;
    color: var(--dar-green-accent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .add-tile,
[data-theme="dark"] .dar-btn-add-tile {
    border-color: rgba(56, 163, 116, 0.35) !important;
    color: var(--dar-green-accent) !important;
}

[data-theme="dark"] .add-tile:hover,
[data-theme="dark"] .dar-btn-add-tile:hover {
    background-color: var(--dar-green-soft) !important;
    border-color: var(--dar-green-accent) !important;
}

/* ---------------- 10. Alerts, Badges & Utilities ---------------- */
[data-theme="dark"] .alert-success,
[data-theme="dark"] .pf-alert--success {
    background-color: var(--dar-green-soft) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(56, 163, 116, 0.3) !important;
}

[data-theme="dark"] .alert-danger,
[data-theme="dark"] .pf-alert--warn {
    background-color: var(--dar-red-soft) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .alert-info {
    background-color: var(--dar-blue-soft) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .alert-warning {
    background-color: var(--dar-yellow-soft) !important;
    color: #ffd768 !important;
    border: 1px solid rgba(246, 183, 11, 0.3) !important;
}

[data-theme="dark"] .pf-badge--member {
    background-color: var(--dar-green-soft) !important;
    color: var(--dar-green-accent) !important;
    border: 1px solid rgba(56, 163, 116, 0.3) !important;
}

[data-theme="dark"] .pf-badge--none {
    background-color: var(--dar-surface-muted) !important;
    color: var(--dar-text-muted) !important;
    border: 1px solid var(--dar-border) !important;
}

[data-theme="dark"] .pf-badge--warn,
[data-theme="dark"] .pf-chip--yellow {
    background-color: var(--dar-yellow-soft) !important;
    color: #ffd768 !important;
    border: 1px solid rgba(246, 183, 11, 0.3) !important;
}

[data-theme="dark"] .badge-light,
[data-theme="dark"] .bg-light {
    background-color: var(--dar-surface-muted) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .badge-dark,
[data-theme="dark"] .bg-dark {
    background-color: #0b110d !important;
    color: var(--dar-text) !important;
    border: 1px solid var(--dar-border) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--dar-surface) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
    color: var(--dar-text-muted) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--dar-text) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--dar-border) !important;
}

/* Fallback utilities and Notification Center drawer components in dark mode */
[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
}

[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(26, 138, 87, 0.15) !important;
    border-color: rgba(26, 138, 87, 0.35) !important;
}

[data-theme="dark"] .text-success-emphasis {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .bg-light-subtle {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .dar-notif-item {
    border-color: var(--dar-border) !important;
}

[data-theme="dark"] .dar-notif-item:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .dar-notif-item--unread {
    background-color: rgba(26, 138, 87, 0.12) !important;
    border-inline-start: 3px solid var(--dar-green-accent) !important;
}

[data-theme="dark"] .dar-notif-item--read {
    opacity: 0.75;
}

[data-theme="dark"] #dar-notif-optin-card,
[data-bs-theme="dark"] #dar-notif-optin-card {
    background-color: rgba(26, 138, 87, 0.15) !important;
    border-color: rgba(26, 138, 87, 0.35) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] #dar-notif-optin-card p,
[data-bs-theme="dark"] #dar-notif-optin-card p {
    color: var(--dar-muted, #9ca3af) !important;
}

/* Section Icons, Hero Badges, and Chips in Dark Mode */
[data-theme="dark"] .pf-sec-ico--green,
[data-theme="dark"] .settings-hero__icon {
    background: rgba(52, 211, 153, 0.16) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.25) !important;
}

[data-theme="dark"] .pf-sec-ico--yellow {
    background: rgba(246, 183, 11, 0.16) !important;
    color: #ffd768 !important;
    border: 1px solid rgba(246, 183, 11, 0.25) !important;
}

[data-theme="dark"] .pf-sec-ico--red {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

[data-theme="dark"] .pf-sec-ico--blue {
    background: rgba(2, 132, 199, 0.18) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(2, 132, 199, 0.25) !important;
}

[data-theme="dark"] .pf-card__desc {
    color: var(--dar-muted) !important;
}

[data-theme="dark"] .dar-chip {
    background: var(--dar-surface) !important;
    color: var(--dar-text) !important;
    border-color: var(--dar-border) !important;
}

[data-theme="dark"] .dar-chip--active {
    background: rgba(52, 211, 153, 0.20) !important;
    color: #34d399 !important;
    border-color: #34d399 !important;
}

/* ---------------- 11. Third-Party Plugins & PWA Modals ---------------- */
[data-theme="dark"] .datepicker {
    background-color: var(--dar-surface) !important;
    color: var(--dar-text) !important;
    border: 1px solid var(--dar-border) !important;
    box-shadow: var(--dar-shadow) !important;
}

[data-theme="dark"] .datepicker table tr td,
[data-theme="dark"] .datepicker table tr th {
    color: var(--dar-text) !important;
}

[data-theme="dark"] .datepicker table tr td.day:hover,
[data-theme="dark"] .datepicker table tr td.focused {
    background: var(--dar-surface-hover) !important;
}

[data-theme="dark"] .datepicker table tr td.active,
[data-theme="dark"] .datepicker table tr td.active:hover {
    background: var(--dar-green) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .datepicker table tr td.today,
[data-theme="dark"] .datepicker table tr td.today:hover {
    background-color: var(--dar-green-soft) !important;
    color: var(--dar-green-accent) !important;
}

[data-theme="dark"] .datepicker table tr th:hover {
    background-color: var(--dar-surface-hover) !important;
}

[data-theme="dark"] .datepicker table tr td.old,
[data-theme="dark"] .datepicker table tr td.new {
    color: var(--dar-muted) !important;
}

[data-theme="dark"] .datepicker-dropdown:after,
[data-theme="dark"] .datepicker-dropdown.datepicker-orient-bottom:after,
[data-theme="dark"] .datepicker-dropdown.datepicker-orient-top:after {
    border-bottom-color: var(--dar-surface) !important;
    border-top-color: var(--dar-surface) !important;
}

[data-theme="dark"] .datepicker-dropdown:before,
[data-theme="dark"] .datepicker-dropdown.datepicker-orient-bottom:before,
[data-theme="dark"] .datepicker-dropdown.datepicker-orient-top:before {
    border-bottom-color: var(--dar-border) !important;
    border-top-color: var(--dar-border) !important;
}

[data-theme="dark"] .ui-datepicker {
    background-color: var(--dar-surface) !important;
    border: 1px solid var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .ui-datepicker-header {
    background-color: var(--dar-surface-muted) !important;
    border-bottom: 1px solid var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .sticky {
    background-color: var(--dar-surface) !important;
    box-shadow: 0px 2px 8px rgba(0,0,0,.6) !important;
}

[data-theme="dark"] #dar-pwa-banner,
[data-theme="dark"] #dar-ios-pwa-modal {
    background-color: var(--dar-surface) !important;
    border: 1px solid var(--dar-border) !important;
    color: var(--dar-text) !important;
}

/* ---------------- 12. Switches, Radios & Checkboxes ---------------- */
[data-theme="dark"] .pf-switch__track {
    background: #2c3c32 !important;
}

[data-theme="dark"] .pf-switch__input:checked + .pf-switch__track {
    background: var(--dar-green-accent) !important;
}

[data-theme="dark"] .pf-radio,
[data-theme="dark"] .ac-radio {
    border-color: var(--dar-border) !important;
    background-color: var(--dar-surface-muted) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .pf-invite--pending {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-yellow-soft) !important;
}

/* ---------------- 13. Module Overrides: Activities ---------------- */
[data-theme="dark"] .childcare-addon-box,
[data-theme="dark"] .childcare-stepper,
[data-theme="dark"] .orders-table-wrapper,
[data-theme="dark"] .activities-modal,
[data-theme="dark"] .dar-modal,
[data-theme="dark"] .ac-card,
[data-theme="dark"] .act-item,
[data-theme="dark"] .activity-card,
[data-theme="dark"] .participant-card,
[data-theme="dark"] .view-switch-btn,
[data-theme="dark"] .activities-empty,
[data-theme="dark"] .activities-empty-state,
[data-theme="dark"] .activities-stats-badge {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .orders-table th,
[data-theme="dark"] .order-number-pill,
[data-theme="dark"] .order-participant-pill,
[data-theme="dark"] .order-item,
[data-theme="dark"] .dar-modal__close,
[data-theme="dark"] .activities-modal__close,
[data-theme="dark"] .dar-modal__footer,
[data-theme="dark"] .activities-modal__footer,
[data-theme="dark"] .activities-tabs {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .orders-table td,
[data-theme="dark"] .childcare-addon-title,
[data-theme="dark"] .childcare-addon-price,
[data-theme="dark"] .order-activity-title,
[data-theme="dark"] .order-participants-label,
[data-theme="dark"] .order-item__name,
[data-theme="dark"] .order-total-amount,
[data-theme="dark"] .dar-modal__title,
[data-theme="dark"] .activities-modal__title {
    color: var(--dar-text) !important;
}

[data-theme="dark"] .installment-toggle-row {
    background-color: var(--dar-yellow-soft) !important;
    border-color: rgba(246, 183, 11, 0.3) !important;
    color: #ffd768 !important;
}

[data-theme="dark"] .dar-chip--consent {
    background-color: var(--dar-yellow-soft) !important;
    color: #ffd768 !important;
    border-color: rgba(246, 183, 11, 0.3) !important;
}

[data-theme="dark"] .childcare-stepper__btn:disabled {
    background-color: var(--dar-surface-muted) !important;
    color: var(--dar-muted) !important;
}

/* ---------------- 14. Module Overrides: Attendance ---------------- */
[data-theme="dark"] .attendance-hero,
[data-theme="dark"] .student-att-card,
[data-theme="dark"] .att-status-btn,
[data-theme="dark"] .summary-pill,
[data-theme="dark"] .student-table,
[data-theme="dark"] .att-skeleton-card,
[data-theme="dark"] .btn-quick-action,
[data-theme="dark"] .attendance-date-badge,
[data-theme="dark"] .attendance-pill,
[data-theme="dark"] .attendance-card {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .status-toggle-group,
[data-theme="dark"] .attendance-chip--room,
[data-theme="dark"] .attendance-chip--count,
[data-theme="dark"] .counter-pill--total {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text-muted) !important;
}

[data-theme="dark"] .attendance-chip--lesson {
    background-color: var(--dar-blue-soft) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .counter-pill--attended {
    background-color: var(--dar-green-soft) !important;
    color: #6ee7b7 !important;
    border-color: rgba(56, 163, 116, 0.4) !important;
}

[data-theme="dark"] .counter-pill--permissioned {
    background-color: var(--dar-yellow-soft) !important;
    color: #ffd768 !important;
    border-color: rgba(246, 183, 11, 0.4) !important;
}

[data-theme="dark"] .counter-pill--absent {
    background-color: var(--dar-red-soft) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

[data-theme="dark"] .att-skeleton-line,
[data-theme="dark"] .skeleton-shimmer {
    background: linear-gradient(90deg, #19231d 25%, #25332b 50%, #19231d 75%) !important;
    background-size: 200% 100% !important;
}

/* ---------------- 15. Module Overrides: Homeworks ---------------- */
[data-theme="dark"] .homework-card,
[data-theme="dark"] .school-year-box,
[data-theme="dark"] .subject-pill,
[data-theme="dark"] .hw-desc-box,
[data-theme="dark"] .homeworks-toolbar,
[data-theme="dark"] .hw-school-year-group,
[data-theme="dark"] .homeworks-stats-badge,
[data-theme="dark"] .homeworks-empty {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .homeworks-tabs,
[data-theme="dark"] .homeworks-tab-badge,
[data-theme="dark"] .hw-class-badge,
[data-theme="dark"] .hw-toolbar,
[data-theme="dark"] .hw-textarea,
[data-theme="dark"] .hw-input,
[data-theme="dark"] .hw-school-year-header:hover,
[data-theme="dark"] .hw-school-year-header__badge,
[data-theme="dark"] .homeworks-empty__icon {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}


/* ---------------- 16. Module Overrides: Vacations ---------------- */
[data-theme="dark"] .vacation-card,
[data-theme="dark"] .vacation-apply-card,
[data-theme="dark"] .vacation-date-box,
[data-theme="dark"] .vacation-status-pill,
[data-theme="dark"] .school-year-group,
[data-theme="dark"] .vacations-stats-badge,
[data-theme="dark"] .vacations-empty {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .vacation-card--past {
    background-color: var(--dar-surface-muted) !important;
    opacity: 0.9;
}

[data-theme="dark"] .vacations-tabs,
[data-theme="dark"] .vacation-input-field,
[data-theme="dark"] .school-year-header__badge {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .vacation-apply-card__header-icon,
[data-theme="dark"] .vacation-tag--upcoming {
    background-color: var(--dar-green-soft) !important;
    color: var(--dar-green-accent) !important;
    border-color: rgba(56, 163, 116, 0.3) !important;
}

[data-theme="dark"] .vacation-tag--past {
    background-color: var(--dar-surface-muted) !important;
    color: var(--dar-text-muted) !important;
    border-color: var(--dar-border) !important;
}

[data-theme="dark"] .vacation-tag--relative {
    background-color: var(--dar-blue-soft) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* ---------------- 17. Module Overrides: Classes ---------------- */
[data-theme="dark"] .parent-box,
[data-theme="dark"] .class-card,
[data-theme="dark"] .student-row,
[data-theme="dark"] .teacher-badge,
[data-theme="dark"] .hero-chip,
[data-theme="dark"] .class-hero,
[data-theme="dark"] .classes-state-card,
[data-theme="dark"] .class-member-card {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .parent-box,
[data-theme="dark"] .hero-chip,
[data-theme="dark"] .search-input {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

/* ---------------- 18. Module Overrides: Schedule ---------------- */
[data-theme="dark"] .lesson-card,
[data-theme="dark"] .schedule-card,
[data-theme="dark"] .time-badge,
[data-theme="dark"] .schedule-date-pill,
[data-theme="dark"] .lesson-time-badge {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .lesson-meta-pill--room {
    background-color: var(--dar-surface-muted) !important;
    color: var(--dar-text-muted) !important;
}

[data-theme="dark"] .lesson-meta-pill--subject {
    background-color: var(--dar-blue-soft) !important;
    color: #93c5fd !important;
}

/* ---------------- 19. Module Overrides: Parent Homework ---------------- */
[data-theme="dark"] .ph-hw-card__body,
[data-theme="dark"] .saturday-pill,
[data-theme="dark"] .ph-badge,
[data-theme="dark"] .ph-sat-pill {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .ph-hw-card__header,
[data-theme="dark"] .ph-hw-card__footer,
[data-theme="dark"] .ph-child-avatar,
[data-theme="dark"] .ph-empty-state__icon--muted {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text-muted) !important;
}

[data-theme="dark"] .ph-hw-status-pill--draft {
    background-color: var(--dar-yellow-soft) !important;
    color: #ffd768 !important;
    border-color: rgba(246, 183, 11, 0.3) !important;
}

/* ---------------- 20. Module Overrides: Volunteering ---------------- */
[data-theme="dark"] .vc-scope .vc-confirm,
[data-theme="dark"] .volunteer-card,
[data-theme="dark"] .ts-entry,
[data-theme="dark"] .vc-badge,
[data-theme="dark"] .timesheet.card,
[data-theme="dark"] .volunteer-strip {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .vc-scope .vc-confirm,
[data-theme="dark"] .ts-entry {
    background-color: var(--dar-surface-muted) !important;
}

/* ---------------- 21. Module Overrides: Membership & Offer ---------------- */
[data-theme="dark"] .mb-card,
[data-theme="dark"] .offer-card,
[data-theme="dark"] .tier-card,
[data-theme="dark"] .benefit-item,
[data-theme="dark"] .offer-input,
[data-theme="dark"] .membership-plan-card {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .offer-input {
    background-color: var(--dar-surface-muted) !important;
}

/* ---------------- 22. Module Overrides: Child Manager & Applications ---------------- */
[data-theme="dark"] .cm-card,
[data-theme="dark"] .child-pill,
[data-theme="dark"] .cm-info-box,
[data-theme="dark"] .ac-card,
[data-theme="dark"] .ac-seg__btn,
[data-theme="dark"] .ac-loc,
[data-theme="dark"] .seg__btn,
[data-theme="dark"] .anmeldung .location-option,
[data-theme="dark"] .addchild-scope .form-control,
[data-theme="dark"] .addchild-scope .ac-school__field .form-select,
[data-theme="dark"] .ac-textarea {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .addchild-scope .btn-group .btn-outline-success {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .addchild-scope .btn-group .btn-check:checked + .btn-outline-success {
    background-color: var(--dar-green) !important;
    color: #ffffff !important;
    border-color: var(--dar-green) !important;
}

[data-theme="dark"] .addchild-scope .ac-head__icon--warn {
    background-color: var(--dar-red-soft) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .apps-scope .app-card,
[data-theme="dark"] .apps-scope .app-item {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .apps-scope .apps-note--warn,
[data-theme="dark"] .apps-scope .app-item__icon--wait,
[data-theme="dark"] .apps-scope .app-badge--wait {
    background-color: var(--dar-yellow-soft) !important;
    color: #ffd768 !important;
    border-color: rgba(246, 183, 11, 0.3) !important;
}

[data-theme="dark"] .apps-scope .app-item__icon--bad,
[data-theme="dark"] .apps-scope .app-badge--bad {
    background-color: var(--dar-red-soft) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .pf-card--nav {
    background-color: var(--dar-surface) !important;
    border-color: var(--dar-hairline) !important;
}

[data-theme="dark"] .pf-card--nav:hover {
    border-color: rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .pf-card__nav-action .dar-btn {
    background: linear-gradient(135deg, var(--dar-green), var(--dar-green-deep)) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ---------------- 23. Custom Modals, Nav-Tabs & Form Feedback ---------------- */
[data-theme="dark"] #spouse-modal .modal-content,
[data-theme="dark"] #withdrawal_modal .modal-content,
[data-theme="dark"] #create_vacation_modal .modal-content,
[data-theme="dark"] #applyform .modal-content,
[data-theme="dark"] #videoModal .modal-content {
    background-color: var(--dar-surface) !important;
    border: 1px solid var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--dar-border) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--dar-text-muted) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--dar-surface) !important;
    color: var(--dar-green-accent) !important;
    border-color: var(--dar-border) var(--dar-border) transparent !important;
}

[data-theme="dark"] .bg-secondary-subtle {
    background-color: var(--dar-surface-muted) !important;
    color: var(--dar-text-muted) !important;
    border-color: var(--dar-border) !important;
}

[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--dar-surface-hover) !important;
    color: var(--dar-text) !important;
    border: 1px solid var(--dar-border) !important;
}

[data-theme="dark"] .copy-btn,
[data-theme="dark"] .btn-copy {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text) !important;
}

[data-theme="dark"] .copy-btn:hover,
[data-theme="dark"] .btn-copy:hover {
    background-color: var(--dar-surface-hover) !important;
    border-color: var(--dar-green-accent) !important;
    color: var(--dar-green-accent) !important;
}

/* ---------------- 18. Unified Status Pills (Dark Theme) ---------------- */
[data-theme="dark"] .dar-status-pill--ok,
[data-bs-theme="dark"] .dar-status-pill--ok {
    background-color: var(--dar-green-soft) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}

[data-theme="dark"] .dar-status-pill--wait,
[data-bs-theme="dark"] .dar-status-pill--wait {
    background-color: var(--dar-yellow-soft) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fde68a !important;
}

[data-theme="dark"] .dar-status-pill--bad,
[data-bs-theme="dark"] .dar-status-pill--bad {
    background-color: var(--dar-red-soft) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .dar-status-pill--neutral,
[data-theme="dark"] .dar-status-pill--info,
[data-bs-theme="dark"] .dar-status-pill--neutral,
[data-bs-theme="dark"] .dar-status-pill--info {
    background-color: var(--dar-surface-muted) !important;
    border-color: var(--dar-border) !important;
    color: var(--dar-text-muted) !important;
}