/* ==========================================================================
   Shafiean — Modern dashboard / page-shell shared styles.
   Used by superAdmin dashboard.php, groups.php, sessions.php,
   allStudentsAbsence.php — and any future page that wants the same look.

   Color system anchored on the brand primary (--primary: #008374) defined
   in sb-admin-2.css, with tone-shifted variants for dark mode that read
   from the --dm-* tokens in dark-theme.css.
   ========================================================================== */

.dash-wrap {
    /* Surfaces */
    --dash-card-bg: #ffffff;
    --dash-card-border: rgba(0, 0, 0, .06);
    --dash-card-shadow: 0 .15rem 1.25rem 0 rgba(58, 59, 69, .08);
    --dash-card-shadow-hover: 0 .35rem 1.75rem 0 rgba(58, 59, 69, .14);
    --dash-text: #3a3b45;
    --dash-text-muted: #858796;
    --dash-divider: rgba(0, 0, 0, .07);
    --dash-input-bg: #ffffff;
    --dash-input-border: #d1d3e2;
    --dash-input-border-focus: #008374;
    --dash-hover-soft: rgba(0, 131, 116, .06);

    /* Brand palette — primary anchored on #008374 (Shafiean teal) */
    --dash-primary: #008374;
    --dash-primary-dark: #006b5e;
    --dash-primary-light: #00a896;
    --dash-primary-soft: rgba(0, 131, 116, .12);
    --dash-primary-soft-strong: rgba(0, 131, 116, .22);

    --dash-success: #1cc88a;
    --dash-info: #36b9cc;
    --dash-warning: #f6c23e;
    --dash-danger: #e74a3b;
    --dash-secondary: #858796;

    /* Gender accents (for KPI splits) */
    --dash-male: #4e73df;
    --dash-female: #e83e8c;

    /* Gradients */
    --dash-grad-primary: linear-gradient(135deg, #00a896 0%, #008374 60%, #006b5e 100%);
    --dash-grad-success: linear-gradient(135deg, #1cc88a, #13855c);
    --dash-grad-info: linear-gradient(135deg, #36b9cc, #258391);
    --dash-grad-warning: linear-gradient(135deg, #f6c23e, #c69108);
    --dash-grad-danger: linear-gradient(135deg, #e74a3b, #b02a1c);
    --dash-grad-secondary: linear-gradient(135deg, #858796, #555661);

    padding: 1rem .25rem 3rem;
    color: var(--dash-text);
}

.dark-mode .dash-wrap {
    --dash-card-bg: var(--dm-bg-surface, #25282d);
    --dash-card-border: var(--dm-border, #3a3d42);
    --dash-card-shadow: 0 .15rem 1.25rem 0 rgba(0, 0, 0, .35);
    --dash-card-shadow-hover: 0 .35rem 1.75rem 0 rgba(0, 0, 0, .55);
    --dash-text: var(--dm-text-primary, #e4e6eb);
    --dash-text-muted: var(--dm-text-secondary, #b0b3b8);
    --dash-divider: var(--dm-border, #3a3d42);
    --dash-input-bg: var(--dm-bg-elevated, #2e3238);
    --dash-input-border: var(--dm-border-strong, #4a4d52);
    --dash-hover-soft: rgba(22, 168, 153, .12);

    /* Brighten brand for dark surfaces — keeps AAA-ish contrast on dm-bg-surface */
    --dash-primary: #16a899;
    --dash-primary-dark: #008374;
    --dash-primary-light: #2bc3b3;
    --dash-primary-soft: rgba(22, 168, 153, .16);
    --dash-primary-soft-strong: rgba(22, 168, 153, .26);

    /* Brighten secondaries similarly */
    --dash-success: #2ed4a0;
    --dash-info: #4dc8da;
    --dash-warning: #ffc94f;
    --dash-danger: #ff6457;
    --dash-secondary: #9ea0aa;

    --dash-male: #6ea8fe;
    --dash-female: #ff77b0;

    --dash-grad-primary: linear-gradient(135deg, #16a899 0%, #008374 60%, #005048 100%);
    --dash-grad-success: linear-gradient(135deg, #2ed4a0, #13855c);
    --dash-grad-info: linear-gradient(135deg, #4dc8da, #258391);
    --dash-grad-warning: linear-gradient(135deg, #ffc94f, #b48309);
    --dash-grad-danger: linear-gradient(135deg, #ff6457, #b02a1c);
    --dash-grad-secondary: linear-gradient(135deg, #9ea0aa, #555661);
}

/* ==========================================================================
   Hero greeting (dashboard only)
   ========================================================================== */
.dash-hero {
    background: var(--dash-grad-primary);
    color: #fff;
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 131, 116, .25);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.dash-hero::after {
    content: "";
    position: absolute;
    top: -40px; left: -40px;
    width: 220px; height: 220px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
}
.dash-hero::before {
    content: "";
    position: absolute;
    bottom: -60px; right: 30%;
    width: 280px; height: 280px;
    background: rgba(255, 255, 255, .05);
    border-radius: 50%;
}
.dash-hero__greeting { font-size: 1.55rem; font-weight: 700; margin: 0; position: relative; z-index: 1; color: #fff; }
.dash-hero__name { color: #ffe27a; }
.dash-hero__date { font-size: .95rem; opacity: .92; margin-top: .35rem; position: relative; z-index: 1; color: #fff; }
.dash-hero__date i { margin-left: .35rem; }
.dark-mode .dash-hero {
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .55);
}

/* ==========================================================================
   Page header (lighter than hero — used by interior pages)
   ========================================================================== */
.dash-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 1rem;
    padding: 1.1rem 1.5rem;
    box-shadow: var(--dash-card-shadow);
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}
.dash-page-header::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 6px;
    background: var(--dash-grad-primary);
}
.dash-page-header__icon {
    width: 3rem; height: 3rem;
    border-radius: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--dash-grad-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 .35rem .75rem rgba(0, 131, 116, .25);
}
.dark-mode .dash-page-header__icon { box-shadow: 0 .35rem .75rem rgba(0, 0, 0, .45); }
.dash-page-header__title { font-size: 1.25rem; font-weight: 800; margin: 0; color: var(--dash-text); }
.dash-page-header__sub { font-size: .85rem; color: var(--dash-text-muted); margin: .15rem 0 0; }
.dash-page-header__sub strong { color: var(--dash-text); font-weight: 700; }
.dash-page-header__sub .text-muted { color: var(--dash-text-muted) !important; }
.dash-page-header__spacer { flex: 1; }

/* ==========================================================================
   Section header
   ========================================================================== */
.dash-section { margin-top: 2rem; }
.dash-section__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--dash-divider);
}
.dash-section__icon {
    width: 2.6rem; height: 2.6rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}
.dash-section__icon--primary { background: var(--dash-grad-primary); }
.dash-section__icon--success { background: var(--dash-grad-success); }
.dash-section__icon--info { background: var(--dash-grad-info); }
.dash-section__icon--warning { background: var(--dash-grad-warning); }
.dash-section__icon--danger { background: var(--dash-grad-danger); }
.dash-section__icon--secondary { background: var(--dash-grad-secondary); }
.dash-section__title { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--dash-text); }
.dash-section__sub { font-size: .85rem; color: var(--dash-text-muted); margin: 0; }
.dash-section__sub a { color: var(--dash-primary); font-weight: 600; }
.dark-mode .dash-section__sub a { color: var(--dash-primary-light); }

/* ==========================================================================
   KPI grid + card
   ========================================================================== */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.dash-kpi {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: .85rem;
    padding: 1.1rem 1.15rem;
    box-shadow: var(--dash-card-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    overflow: hidden;
}
.dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-card-shadow-hover);
}
.dash-kpi::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 5px; height: 100%;
    background: var(--accent, var(--dash-primary));
}
.dash-kpi--primary { --accent: var(--dash-primary); }
.dash-kpi--success { --accent: var(--dash-success); }
.dash-kpi--info { --accent: var(--dash-info); }
.dash-kpi--warning { --accent: var(--dash-warning); }
.dash-kpi--danger { --accent: var(--dash-danger); }
.dash-kpi--secondary { --accent: var(--dash-secondary); }

.dash-kpi__header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .35rem;
}
.dash-kpi__icon {
    width: 2.25rem; height: 2.25rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .dash-kpi__icon { background: rgba(0, 131, 116, .12); }
    .dash-kpi--success .dash-kpi__icon { background: rgba(28, 200, 138, .12); }
    .dash-kpi--info .dash-kpi__icon { background: rgba(54, 185, 204, .12); }
    .dash-kpi--warning .dash-kpi__icon { background: rgba(246, 194, 62, .15); }
    .dash-kpi--danger .dash-kpi__icon { background: rgba(231, 74, 59, .12); }
    .dash-kpi--secondary .dash-kpi__icon { background: rgba(133, 135, 150, .15); }
    .dark-mode .dash-kpi__icon { background: rgba(22, 168, 153, .18); }
    .dark-mode .dash-kpi--success .dash-kpi__icon { background: rgba(46, 212, 160, .18); }
    .dark-mode .dash-kpi--info .dash-kpi__icon { background: rgba(77, 200, 218, .18); }
    .dark-mode .dash-kpi--warning .dash-kpi__icon { background: rgba(255, 201, 79, .2); }
    .dark-mode .dash-kpi--danger .dash-kpi__icon { background: rgba(255, 100, 87, .18); }
    .dark-mode .dash-kpi--secondary .dash-kpi__icon { background: rgba(158, 160, 170, .2); }
}
.dash-kpi__title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--dash-text-muted);
    text-decoration: none;
    line-height: 1.25;
}
a.dash-kpi__title:hover { color: var(--accent); text-decoration: underline; }
.dash-kpi__value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--dash-text);
    line-height: 1.1;
    margin: .25rem 0 .5rem;
}
.dash-kpi__progress {
    background: var(--dash-divider);
    height: 6px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: .25rem;
}
.dash-kpi__progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width .6s ease;
}
.dash-kpi__progress-label {
    font-size: .75rem;
    color: var(--dash-text-muted);
    text-align: left;
    margin-bottom: .35rem;
}
.dash-kpi__split {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}
.dash-kpi__split-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    background: var(--tag-bg, rgba(78, 115, 223, .1));
    color: var(--tag-fg, var(--dash-male));
}
.dash-kpi__split-tag strong { font-weight: 700; }
.dash-kpi__split-tag small { color: var(--dash-text-muted); font-weight: 600; }
.dash-kpi__split-tag--m { --tag-bg: rgba(78, 115, 223, .12); --tag-fg: var(--dash-male); }
.dash-kpi__split-tag--f { --tag-bg: rgba(232, 62, 140, .12); --tag-fg: var(--dash-female); }
.dark-mode .dash-kpi__split-tag--m { --tag-bg: rgba(110, 168, 254, .18); }
.dark-mode .dash-kpi__split-tag--f { --tag-bg: rgba(255, 119, 176, .18); }
.dash-kpi__split-bar {
    display: flex;
    height: 4px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--dash-divider);
    margin-top: .55rem;
}
.dash-kpi__split-bar-m { background: var(--dash-male); height: 100%; }
.dash-kpi__split-bar-f { background: var(--dash-female); height: 100%; }
.dash-kpi__sub {
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--dash-divider);
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .82rem;
    color: var(--dash-text-muted);
}
.dash-kpi__sub strong { color: var(--dash-text); }

/* ==========================================================================
   Goal hero card
   ========================================================================== */
.dash-goal {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    box-shadow: var(--dash-card-shadow);
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
}
.dash-goal__title { font-size: 1rem; font-weight: 700; color: var(--dash-text-muted); margin-bottom: .5rem; }
.dash-goal__title i { color: var(--dash-success); margin-left: .35rem; }
.dash-goal__numbers {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    margin-bottom: .85rem;
}
.dash-goal__current { font-size: 2.4rem; font-weight: 800; color: var(--dash-text); line-height: 1; }
.dash-goal__sep { font-size: 1.1rem; color: var(--dash-text-muted); }
.dash-goal__target { font-size: 1.4rem; font-weight: 700; color: var(--dash-text-muted); }
.dash-goal__bar {
    background: var(--dash-divider);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.dash-goal__bar-fill {
    height: 100%;
    background: var(--dash-grad-success);
    border-radius: 6px;
    transition: width .8s ease;
}
.dash-goal__legend { display: flex; justify-content: space-between; font-size: .82rem; color: var(--dash-text-muted); margin-top: .35rem; }
.dash-goal__legend strong { color: var(--dash-success); font-weight: 700; }
.dash-goal__pct {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dash-success);
    line-height: 1;
    text-align: center;
    border-right: 2px solid var(--dash-divider);
    padding: 0 1rem 0 .5rem;
}
.dash-goal__pct small { font-size: 1rem; color: var(--dash-text-muted); display: block; font-weight: 600; }
@media (max-width: 575.98px) {
    .dash-goal { grid-template-columns: 1fr; }
    .dash-goal__pct { border-right: none; border-top: 2px solid var(--dash-divider); padding: .75rem 0 0; }
}

/* ==========================================================================
   Quick actions (dashboard)
   ========================================================================== */
.dash-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}
.dash-action {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: .85rem;
    padding: 1rem .85rem;
    text-align: center;
    text-decoration: none;
    color: var(--dash-text);
    box-shadow: var(--dash-card-shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}
.dash-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-card-shadow-hover);
    border-color: var(--accent, var(--dash-primary));
    color: var(--accent, var(--dash-primary));
    text-decoration: none;
}
.dash-action__icon {
    width: 3rem; height: 3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    background: var(--accent, var(--dash-primary));
}
.dash-action__label { font-size: .9rem; font-weight: 700; }
.dash-action--primary { --accent: var(--dash-primary); }
.dash-action--success { --accent: var(--dash-success); }
.dash-action--info { --accent: var(--dash-info); }
.dash-action--warning { --accent: var(--dash-warning); }
.dash-action--danger { --accent: var(--dash-danger); }
.dash-action--secondary { --accent: var(--dash-secondary); }

/* ==========================================================================
   Chart card wrapper
   ========================================================================== */
.dash-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.dash-chart-card {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: .85rem;
    padding: 1.1rem 1.15rem;
    box-shadow: var(--dash-card-shadow);
}
.dash-chart-card__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.dash-chart-card__title i { color: var(--dash-text-muted); }
.dash-chart-card canvas {
    max-width: 100%;
    max-height: 360px;
}
.dark-mode .dash-chart-card canvas { filter: brightness(.95); }

/* ==========================================================================
   Year pill (used by dashboard year-scoped sections)
   ========================================================================== */
.dash-section__year-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--dash-primary-soft);
    color: var(--dash-primary);
    padding: .15rem .65rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    margin-right: .5rem;
}
.dark-mode .dash-section__year-pill {
    background: var(--dash-primary-soft);
    color: var(--dash-primary-light);
}

/* ==========================================================================
   Pill-tab nav (groups page; reusable)
   ========================================================================== */
.dash-tabs {
    display: flex;
    gap: .5rem;
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: .85rem;
    padding: .4rem;
    box-shadow: var(--dash-card-shadow);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: wrap;
}
.dash-tab {
    flex: 1 1 auto;
    min-width: 9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .6rem .9rem;
    border-radius: .65rem;
    color: var(--dash-text-muted);
    background: transparent;
    border: 0;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.dash-tab:hover {
    background: var(--dash-primary-soft);
    color: var(--dash-primary);
    text-decoration: none;
}
.dash-tab i { font-size: 1rem; }
.dash-tab.active {
    background: var(--dash-grad-primary);
    color: #fff;
    box-shadow: 0 .25rem .65rem rgba(0, 131, 116, .35);
}
.dash-tab.active:hover { color: #fff; }
.dark-mode .dash-tab.active { box-shadow: 0 .25rem .65rem rgba(0, 0, 0, .55); }
@media (max-width: 575.98px) {
    .dash-tab { min-width: auto; padding: .55rem .7rem; }
}

/* ==========================================================================
   Form section cards (groups: "Add new group")
   ========================================================================== */
.dash-form { display: flex; flex-direction: column; gap: 1rem; }
.dash-form-card {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: .85rem;
    padding: 1.15rem 1.25rem;
    box-shadow: var(--dash-card-shadow);
}
.dash-form-card__head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--dash-divider);
}
.dash-form-card__icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dash-primary-soft);
    color: var(--dash-primary);
    font-size: .95rem;
    flex-shrink: 0;
}
.dash-form-card__icon--success { background: rgba(28, 200, 138, .12); color: var(--dash-success); }
.dash-form-card__icon--info { background: rgba(54, 185, 204, .12); color: var(--dash-info); }
.dash-form-card__icon--warning { background: rgba(246, 194, 62, .15); color: #b48309; }
.dash-form-card__icon--danger { background: rgba(231, 74, 59, .12); color: var(--dash-danger); }
.dark-mode .dash-form-card__icon--success { background: rgba(46, 212, 160, .18); color: var(--dash-success); }
.dark-mode .dash-form-card__icon--info { background: rgba(77, 200, 218, .18); color: var(--dash-info); }
.dark-mode .dash-form-card__icon--warning { background: rgba(255, 201, 79, .2); color: var(--dash-warning); }
.dark-mode .dash-form-card__icon--danger { background: rgba(255, 100, 87, .18); color: var(--dash-danger); }
.dash-form-card__title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--dash-text); }
.dash-form-card__sub { font-size: .82rem; color: var(--dash-text-muted); margin: 0; }
.dash-form-card label.form-label,
.dash-form-card label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--dash-text);
    margin-bottom: .35rem;
}

/* sticky-style footer with the submit button */
.dash-form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .65rem;
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: .85rem;
    padding: .9rem 1.15rem;
    box-shadow: var(--dash-card-shadow);
    position: sticky;
    bottom: 1rem;
    z-index: 5;
}

/* ==========================================================================
   Form-control polish (scoped to .dash-wrap so we don't touch other pages)
   ========================================================================== */
.dash-wrap .form-control,
.dash-wrap .form-select,
.dash-wrap input.form-control,
.dash-wrap select.form-control,
.dash-wrap textarea.form-control {
    background-color: var(--dash-input-bg);
    border: 1px solid var(--dash-input-border);
    border-radius: .5rem;
    color: var(--dash-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dash-wrap .form-control:focus,
.dash-wrap .form-select:focus,
.dash-wrap input.form-control:focus,
.dash-wrap select.form-control:focus,
.dash-wrap textarea.form-control:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 .2rem var(--dash-primary-soft);
    outline: 0;
}
.dash-wrap .form-control::placeholder { color: var(--dash-text-muted); }
.dark-mode .dash-wrap .form-control,
.dark-mode .dash-wrap .form-select,
.dark-mode .dash-wrap select.form-control,
.dark-mode .dash-wrap input.form-control,
.dark-mode .dash-wrap textarea.form-control {
    background-color: var(--dash-input-bg);
    border-color: var(--dash-input-border);
    color: var(--dash-text);
}
.dark-mode .dash-wrap .form-control:focus,
.dark-mode .dash-wrap .form-select:focus {
    background-color: var(--dash-input-bg);
    border-color: var(--dash-primary);
    color: var(--dash-text);
}
/* Override the per-page text-danger rule that was forcing keyword inputs red */
.dash-wrap .form-control.text-danger { color: var(--dash-text); }
.dash-wrap .form-control.text-danger::placeholder { color: var(--dash-text-muted); }

/* ==========================================================================
   Filter card — used by sessions, allStudentsAbsence, and others
   ========================================================================== */
.dash-filters {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: .9rem;
    box-shadow: var(--dash-card-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
}
.dash-filters__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--dash-divider);
    background: linear-gradient(180deg, var(--dash-primary-soft) 0%, transparent 100%);
}
.dark-mode .dash-filters__head {
    background: linear-gradient(180deg, var(--dash-primary-soft) 0%, transparent 100%);
}
.dash-filters__icon {
    width: 2.25rem; height: 2.25rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dash-grad-primary);
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0;
    box-shadow: 0 .25rem .5rem rgba(0, 131, 116, .25);
}
.dark-mode .dash-filters__icon { box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .45); }
.dash-filters__title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--dash-text); }
.dash-filters__sub { font-size: .8rem; color: var(--dash-text-muted); margin: 0; }
.dash-filters__spacer { flex: 1; }
.dash-filters__clear {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: .5rem;
    border: 1px solid var(--dash-input-border);
    background: var(--dash-card-bg);
    color: var(--dash-danger);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.dash-filters__clear:hover {
    background: rgba(231, 74, 59, .08);
    border-color: var(--dash-danger);
    color: var(--dash-danger);
    text-decoration: none;
}
.dash-filters__clear i { font-size: .85rem; }
.dash-filters__body {
    padding: 1rem 1.15rem 1.25rem;
}

/* The filter rows above the table are RTL (each row sets dir="rtl" itself in
   the table-include).  The TABLE itself, its pagination, and any
   <br>/load-overlay wrappers between them stay LTR so column order and
   numeric/date cells render naturally — matching the original
   `card-body text-left style="direction: ltr;"` behavior.  Selectors are
   intentionally non-direct-child so AJAX-injected
   <div class="table-responsive filteredData">…</div> blocks (returned by
   *.filtered.table.php and dropped into #*DataContainer) also pick up LTR. */
.dash-filters__body .table-responsive,
.dash-filters__body .allData,
.dash-filters__body .filteredData,
.dash-filters__body .table,
.dash-filters__body .pagination,
.dash-filters__body nav[aria-label*="page"] {
    direction: ltr;
    text-align: left;
}
.dash-filters__body .table thead th { text-align: center; }
.dash-filters__body .table tbody td { text-align: center; }

/* Make the existing Bootstrap row/col + form-group filter markup look clean
   without rewriting it. The tables include their filters already as
   <div class="row"><div class="col-..."><div class="form-group"> structure;
   we only style what comes through. */
.dash-filters__body .row,
.dash-filters__body > .row { margin: 0; }
.dash-filters__body .form-group {
    margin-bottom: .85rem;
}
.dash-filters__body label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: .35rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.dash-filters__body label i {
    color: var(--dash-primary);
    font-size: .8rem;
}

/* Active-filter pills (optional row at the top of the body). */
.dash-filters__active {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .9rem;
}
.dash-filters__active-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--dash-primary-soft);
    color: var(--dash-primary);
    font-size: .78rem;
    font-weight: 600;
}
.dark-mode .dash-filters__active-pill { color: var(--dash-primary-light); }

/* Inline checkbox filter that lives alongside other filter inputs.
   The existing markup is a flex pair; we style it nicely. */
.dash-filters__body .d-flex.align-items-center > input[type="checkbox"] {
    width: 1.15rem !important;
    height: 1.15rem !important;
    accent-color: var(--dash-primary);
    cursor: pointer;
}
.dash-filters__body .d-flex.align-items-center > label {
    font-size: .9rem !important;
    margin: 0 !important;
    cursor: pointer;
    color: var(--dash-text);
}

/* "إلغاء الفلتر" link inside the filter rows — replaced visually but the
   id (#clearXxxFilterLink) must still be present in the markup for the
   existing JS handlers. We hide the legacy <img> + adjacent text and let
   the dash-filters__clear button (rendered in the head) own that role. */
.dash-filters__body a[id$="FilterLink"] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: .5rem;
    border: 1px dashed var(--dash-input-border);
    background: transparent;
    color: var(--dash-text-muted) !important;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none !important;
}
.dash-filters__body a[id$="FilterLink"]:hover {
    background: var(--dash-hover-soft);
    border-color: var(--dash-primary);
    color: var(--dash-primary) !important;
}
.dash-filters__body a[id$="FilterLink"] img { display: none; }
.dash-filters__body a[id$="FilterLink"]::before {
    content: "\f057"; /* fa-times-circle */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    margin-left: .35rem;
}

/* ==========================================================================
   Table card (wraps the table-responsive block)
   ========================================================================== */
.dash-table-card {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: .9rem;
    box-shadow: var(--dash-card-shadow);
    overflow: hidden;
}
.dash-table-card__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--dash-divider);
}
.dash-table-card__icon {
    width: 2.1rem; height: 2.1rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dash-primary-soft);
    color: var(--dash-primary);
    font-size: .9rem;
    flex-shrink: 0;
}
.dark-mode .dash-table-card__icon { color: var(--dash-primary-light); }
.dash-table-card__title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--dash-text); }
.dash-table-card__sub { font-size: .8rem; color: var(--dash-text-muted); margin: 0; }
.dash-table-card__body { padding: 1rem 1.15rem 1.25rem; }
.dash-table-card .table { margin-bottom: 0; }
.dash-table-card .table-responsive { border: 1px solid var(--dash-divider); border-radius: .6rem; }
.dark-mode .dash-table-card .table-responsive { border-color: var(--dash-divider); }
.dash-table-card .pagination { margin-bottom: 0; }

/* ==========================================================================
   Info header — entity identity card used by studentInfo.php / groupInfo.php
   across portals (super admin, teacher, student).
   ========================================================================== */
.dash-info-header {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 1rem;
    box-shadow: var(--dash-card-shadow);
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.dash-info-header::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 6px;
    background: var(--dash-grad-primary);
}
.dash-info-header__avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.75rem;
    background: var(--dash-grad-primary);
    box-shadow: 0 .35rem .85rem rgba(0, 131, 116, .25);
    flex-shrink: 0;
}
.dash-info-header__avatar--female {
    background: linear-gradient(135deg, #ff77b0 0%, #e83e8c 60%, #b32872 100%);
    box-shadow: 0 .35rem .85rem rgba(232, 62, 140, .25);
}
.dash-info-header__avatar--male {
    background: linear-gradient(135deg, #6ea8fe 0%, #4e73df 60%, #224abe 100%);
    box-shadow: 0 .35rem .85rem rgba(78, 115, 223, .25);
}
.dark-mode .dash-info-header__avatar,
.dark-mode .dash-info-header__avatar--male,
.dark-mode .dash-info-header__avatar--female {
    box-shadow: 0 .35rem .85rem rgba(0, 0, 0, .55);
}
.dash-info-header__main { min-width: 0; }
.dash-info-header__name {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 .35rem;
    color: var(--dash-text);
    line-height: 1.2;
    word-break: break-word;
}
.dash-info-header__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    color: var(--dash-text-muted);
    margin-bottom: .65rem;
}
.dash-info-header__id {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--dash-divider);
    color: var(--dash-text-muted);
    padding: .15rem .55rem;
    border-radius: .35rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 600;
}
.dash-info-header__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.dash-info-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--dash-primary-soft);
    color: var(--dash-primary);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.dark-mode .dash-info-pill {
    background: var(--dash-primary-soft);
    color: var(--dash-primary-light);
}
.dash-info-pill i { font-size: .75rem; opacity: .85; }
.dash-info-pill--info { background: rgba(54, 185, 204, .14); color: #258391; }
.dash-info-pill--warning { background: rgba(246, 194, 62, .18); color: #b48309; }
.dark-mode .dash-info-pill--info { background: rgba(77, 200, 218, .18); color: var(--dash-info); }
.dark-mode .dash-info-pill--warning { background: rgba(255, 201, 79, .2); color: var(--dash-warning); }

.dash-info-header__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: .65rem 1.25rem;
    border-right: 1px solid var(--dash-divider);
    padding-right: 1.25rem;
    min-width: 14rem;
}
.dash-info-meta-item { display: flex; flex-direction: column; gap: .15rem; }
.dash-info-meta-item__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dash-text-muted);
    font-weight: 600;
}
.dash-info-meta-item__value {
    font-size: .92rem;
    font-weight: 700;
    color: var(--dash-text);
}
.dash-info-meta-item__value i { color: var(--dash-primary); margin-left: .25rem; }
.dark-mode .dash-info-meta-item__value i { color: var(--dash-primary-light); }

@media (max-width: 767.98px) {
    .dash-info-header {
        grid-template-columns: auto 1fr;
        padding: 1rem 1.15rem;
    }
    .dash-info-header__meta {
        grid-column: 1 / -1;
        border-right: 0;
        border-top: 1px solid var(--dash-divider);
        padding-right: 0;
        padding-top: .85rem;
        min-width: 0;
    }
    .dash-info-header__name { font-size: 1.15rem; }
    .dash-info-header__avatar { width: 3.5rem; height: 3.5rem; font-size: 1.4rem; }
}

/* ==========================================================================
   Status badges (used by info-header and tables)
   ========================================================================== */
.dash-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    background: var(--dash-divider);
    color: var(--dash-text-muted);
    white-space: nowrap;
}
.dash-status-badge i { font-size: .65rem; }
.dash-status-badge--success { background: rgba(28, 200, 138, .15); color: #0e7e57; }
.dash-status-badge--warning { background: rgba(246, 194, 62, .2); color: #997107; }
.dash-status-badge--danger  { background: rgba(231, 74, 59, .15); color: #a3271c; }
.dash-status-badge--info    { background: rgba(54, 185, 204, .18); color: #1f6f7d; }
.dash-status-badge--primary { background: var(--dash-primary-soft); color: var(--dash-primary); }
.dash-status-badge--secondary { background: rgba(133, 135, 150, .2); color: #555661; }
.dark-mode .dash-status-badge--success { background: rgba(46, 212, 160, .2); color: var(--dash-success); }
.dark-mode .dash-status-badge--warning { background: rgba(255, 201, 79, .22); color: var(--dash-warning); }
.dark-mode .dash-status-badge--danger  { background: rgba(255, 100, 87, .2); color: var(--dash-danger); }
.dark-mode .dash-status-badge--info    { background: rgba(77, 200, 218, .2); color: var(--dash-info); }
.dark-mode .dash-status-badge--primary { background: var(--dash-primary-soft); color: var(--dash-primary-light); }
.dark-mode .dash-status-badge--secondary { background: rgba(158, 160, 170, .22); color: var(--dash-secondary); }

/* ==========================================================================
   Scoped retheme of inner SB-Admin nested cards on info pages.
   The studentInfo / groupInfo templates have a long sequence of nested
   <div class="card"><div class="card-body"><h3>Section</h3>...</div></div>
   sub-cards. Without rewriting all that markup, scoped CSS gives them
   a cleaner, modern look.
   ========================================================================== */
.dash-wrap .card-body > h3:first-child,
.dash-wrap .card > .card-body > h3:first-child {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dash-text);
    padding-bottom: .55rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--dash-divider);
    position: relative;
}
.dash-wrap .card-body > h3:first-child::before,
.dash-wrap .card > .card-body > h3:first-child::before {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 3rem;
    height: 2px;
    background: var(--dash-grad-primary);
    border-radius: 1px;
}
.dash-wrap h5.text-center.text-primary {
    color: var(--dash-primary) !important;
    font-size: 1.05rem;
    font-weight: 700;
    padding: .65rem 1rem;
    margin: .5rem 0 1rem;
    background: var(--dash-primary-soft);
    border-radius: .55rem;
    display: inline-block;
}
.dark-mode .dash-wrap h5.text-center.text-primary {
    color: var(--dash-primary-light) !important;
    background: var(--dash-primary-soft);
}
.dash-wrap h4.text-center.text-primary {
    color: var(--dash-text) !important;
    font-size: 1.15rem;
    font-weight: 800;
    margin: .5rem 0 1rem;
}

/* The nested .card boxes inside tab panes — soften the borders, modern radius */
.dash-wrap .tab-pane .card {
    border-radius: .75rem;
    border: 1px solid var(--dash-card-border);
    box-shadow: 0 .1rem .5rem rgba(0, 0, 0, .04);
    background: var(--dash-card-bg);
}
.dash-wrap .tab-pane .card .card {
    border-radius: .65rem;
    box-shadow: none;
    border: 1px solid var(--dash-divider);
}
.dark-mode .dash-wrap .tab-pane .card,
.dark-mode .dash-wrap .tab-pane .card .card {
    background: var(--dash-card-bg);
    border-color: var(--dash-card-border);
}

/* Legacy duplicated SVG-icon nav (desktop slot + mobile slot) — superseded by
   the visible .dash-tabs nav at the top of every info page.  We can't always
   delete the markup safely (some templates have intricate nesting) so we hide
   it here. The legacy `#icon-*` IDs the manual tab handler relies on are
   re-exposed via the hidden mirror `<ul class="nav d-none">` rendered next to
   the visible .dash-tabs in each template. */
.dash-wrap .row-md-3.d-none.d-md-block { display: none !important; }
.dash-wrap .card-header.d-md-none .nav.nav-tabs.card-header-tabs { display: none !important; }
.dash-wrap .card > .card-header.d-md-none:has(.nav.nav-tabs.card-header-tabs) { display: none !important; }

/* The outer page card that originally wrapped the entire tab-content */
.dash-wrap > .ml-6 > .row > .col-md-12 > .card {
    border-radius: 1rem;
    border: 1px solid var(--dash-card-border);
    background: var(--dash-card-bg);
    box-shadow: var(--dash-card-shadow);
    overflow: hidden;
}
.dark-mode .dash-wrap > .ml-6 > .row > .col-md-12 > .card { background: var(--dash-card-bg); }

/* Disabled inputs (read-only ID/name fields in info pages) */
.dash-wrap .form-control:disabled,
.dash-wrap .form-control[readonly] {
    background-color: var(--dash-divider);
    color: var(--dash-text-muted);
    border-color: var(--dash-divider);
    opacity: 1;
    cursor: not-allowed;
}
.dark-mode .dash-wrap .form-control:disabled,
.dark-mode .dash-wrap .form-control[readonly] {
    background-color: var(--dm-bg-base, #1a1d21);
    color: var(--dash-text-muted);
}

/* Save/edit toolbar buttons inside info pages — the templates use plain
   .btn .btn-primary etc.  Consistent pill rounding + sticky placement when
   inside a form-card-like wrapper. */
.dash-wrap .btn { border-radius: .5rem; }

/* The info page also embeds tables (sessions, students, supervision) inside
   tab-panes.  Make them inherit the same cleaner border + radius. */
.dash-wrap .tab-pane .table-responsive {
    border: 1px solid var(--dash-divider);
    border-radius: .6rem;
    overflow-x: auto;
}

/* Defensive tab-pane visibility — Bootstrap's own rules
   (`.tab-content > .tab-pane { display: none }`) cover this, but on slow
   mobile networks Bootstrap CSS sometimes lands later than dash-modern.css
   and the user momentarily sees every pane stacked.  Duplicating the
   rules here under .dash-wrap (one class higher in specificity) means the
   correct visibility is locked in as soon as our cache-busted CSS loads. */
.dash-wrap .tab-pane { display: none; }
.dash-wrap .tab-pane.active { display: block; }


/* ==========================================================================
   Group card grid (teacher's groups page; reusable for any group listing).
   Renders one card per group instead of a 10-column table.
   ========================================================================== */
.dash-group-grid {
    display: grid;
    /* min(100%, 300px) prevents 300px-wide cards from overflowing on
       narrow phones (≤375px) — the column collapses to viewport width
       there and the grid degrades to a single-column layout cleanly. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
}

.dash-group-card {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: .9rem;
    box-shadow: var(--dash-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dash-group-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-card-shadow-hover);
}
.dash-group-card__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.15rem .85rem;
    border-bottom: 1px solid var(--dash-divider);
    position: relative;
}
.dash-group-card__head::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 5px; bottom: 0;
    background: var(--accent, var(--dash-grad-primary));
}
.dash-group-card--memorizing {
    --accent: var(--dash-grad-primary);
    --accent-color: var(--dash-primary);
    --accent-hover-soft: rgba(0, 131, 116, .09);
}
.dash-group-card--reading {
    --accent: var(--dash-grad-info);
    --accent-color: var(--dash-info);
    --accent-hover-soft: rgba(54, 185, 204, .1);
}
.dark-mode .dash-group-card--memorizing { --accent-hover-soft: rgba(22, 168, 153, .14); }
.dark-mode .dash-group-card--reading    { --accent-hover-soft: rgba(77, 200, 218, .14); }

.dash-group-card__icon {
    width: 2.4rem; height: 2.4rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 .25rem .55rem rgba(0, 0, 0, .12);
}
.dark-mode .dash-group-card__icon { box-shadow: 0 .25rem .55rem rgba(0, 0, 0, .45); }
.dash-group-card__title-wrap { min-width: 0; flex: 1; }
.dash-group-card__title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    color: var(--dash-text);
    text-decoration: none;
    /* Wrap long Arabic group names across at most 2 lines instead of
       truncating with an ellipsis — better legibility on narrow phones. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}
.dash-group-card__title:hover { color: var(--accent-color, var(--dash-primary)); text-decoration: none; }
.dash-group-card__sub {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .2rem;
    font-size: .76rem;
    color: var(--dash-text-muted);
}
.dash-group-card__id {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--dash-divider);
    padding: .1rem .45rem;
    border-radius: .35rem;
    font-weight: 600;
}
.dash-group-card__type-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent-color, var(--dash-primary)) 15%, transparent);
    color: var(--accent-color, var(--dash-primary));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .dash-group-card--memorizing .dash-group-card__type-pill { background: rgba(0, 131, 116, .14); }
    .dash-group-card--reading    .dash-group-card__type-pill { background: rgba(54, 185, 204, .14); }
    .dark-mode .dash-group-card--memorizing .dash-group-card__type-pill { background: rgba(22, 168, 153, .2); }
    .dark-mode .dash-group-card--reading    .dash-group-card__type-pill { background: rgba(77, 200, 218, .2); }
}

.dash-group-card__body { padding: .9rem 1.15rem; flex: 1; }
.dash-group-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .85rem;
}

.dash-group-card__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem .85rem;
}
.dash-group-card__metric { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dash-group-card__metric-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dash-text-muted);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.dash-group-card__metric-label i { color: var(--accent-color, var(--dash-primary)); font-size: .72rem; }
.dark-mode .dash-group-card__metric-label i { color: var(--dash-primary-light); }
.dash-group-card__metric-value {
    font-size: .92rem;
    font-weight: 700;
    color: var(--dash-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-group-card__metric-value--good { color: var(--dash-success); }
.dash-group-card__metric-value--low  { color: var(--dash-danger); }
.dark-mode .dash-group-card__metric-value--good { color: var(--dash-success); }
.dark-mode .dash-group-card__metric-value--low  { color: var(--dash-danger); }
.dash-group-card__metric-value small {
    font-size: .8rem;
    color: var(--dash-text-muted);
    font-weight: 600;
}

.dash-group-card__foot {
    display: flex;
    gap: .4rem;
    padding: .75rem 1.15rem .9rem;
    border-top: 1px dashed var(--dash-divider);
    flex-wrap: wrap;
}
.dash-group-card__action {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .65rem;
    border-radius: .55rem;
    border: 1px solid var(--dash-input-border);
    background: var(--dash-card-bg);
    color: var(--dash-text);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.dash-group-card__action:hover {
    background: var(--accent-hover-soft, var(--dash-hover-soft));
    color: var(--accent-color, var(--dash-primary));
    border-color: var(--accent-color, var(--dash-primary));
    text-decoration: none;
}
.dash-group-card__action--primary {
    background: var(--accent, var(--dash-grad-primary));
    color: #fff;
    border-color: transparent;
}
.dash-group-card__action--primary:hover {
    /* Keep the gradient on hover (the base hover above would otherwise replace
       it with a soft tint, since both selectors share the same specificity).
       Brightness shifts the gradient subtly so there's still a hover signal. */
    background: var(--accent, var(--dash-grad-primary));
    color: #fff;
    border-color: transparent;
    filter: brightness(1.08);
    box-shadow: 0 .35rem .75rem rgba(0, 0, 0, .15);
}
.dark-mode .dash-group-card__action--primary:hover {
    box-shadow: 0 .35rem .75rem rgba(0, 0, 0, .55);
}
.dash-group-card__action--telegram {
    background: rgba(34, 158, 217, .12);
    color: #1c7eb0;
    border-color: rgba(34, 158, 217, .35);
}
.dash-group-card__action--telegram:hover {
    background: #229ed9;
    color: #fff;
    border-color: #229ed9;
}
.dark-mode .dash-group-card__action--telegram {
    background: rgba(56, 173, 230, .18);
    color: #6ec5f0;
    border-color: rgba(56, 173, 230, .35);
}
.dark-mode .dash-group-card__action--telegram:hover { color: #fff; }

/* Mobile polish (≤575.98px): tighten padding, allow header to wrap so the
   type pill drops to its own row instead of overflowing, and shrink the
   avatar/title sizes a touch. The metrics grid stays 2-column because each
   value is short (day name, time, count) and 2 columns reads more compactly
   on narrow screens than 4 stacked rows. */
@media (max-width: 575.98px) {
    .dash-group-grid { gap: .75rem; }

    .dash-group-card__head {
        flex-wrap: wrap;
        padding: .85rem 1rem .7rem;
        gap: .55rem;
    }
    .dash-group-card__title-wrap { flex: 1 1 60%; min-width: 0; }
    .dash-group-card__type-pill { order: 3; }

    .dash-group-card__icon { width: 2.1rem; height: 2.1rem; font-size: .9rem; }
    .dash-group-card__title { font-size: .92rem; }

    .dash-group-card__body { padding: .75rem 1rem; }
    .dash-group-card__badges { gap: .3rem; margin-bottom: .65rem; }
    .dash-group-card__metrics { gap: .55rem .75rem; }
    .dash-group-card__metric-value { font-size: .88rem; }

    .dash-group-card__foot {
        padding: .65rem 1rem .8rem;
        gap: .45rem;
    }
    .dash-group-card__action {
        flex: 1 1 100%;     /* one button per row on phones — easier to tap */
        padding: .55rem .65rem;
    }
}

/* Empty state for tabs with no groups */
.dash-empty-state {
    background: var(--dash-card-bg);
    border: 1px dashed var(--dash-input-border);
    border-radius: .9rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--dash-text-muted);
}
.dash-empty-state__icon {
    width: 4rem; height: 4rem;
    border-radius: 50%;
    background: var(--dash-primary-soft);
    color: var(--dash-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.dark-mode .dash-empty-state__icon { color: var(--dash-primary-light); }
.dash-empty-state__title { font-size: 1.05rem; font-weight: 700; color: var(--dash-text); margin: 0 0 .35rem; }
.dash-empty-state__sub { font-size: .9rem; margin: 0; }