@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700&display=swap");

/* ── KlassApp Design System ──
   Brand: Blue #1E6FD9, Green #22C55E, Dark #0F172A, Amber #D97706
   Surface: #FAFAF5, Border: #E2E8F0, Muted text: #64748B
   Fonts: Sora (headings), DM Sans (body)
   ── */

body {
    font-family: "DM Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    /* ── Brand Primary ── */
    --d-blue: #1E6FD9;
    --d-green: #22C55E;
    --d-amber: #D97706;

    /* ── Accent (green is primary CTA) ── */
    --d-accent: var(--d-green);
    --d-accent-lt: #4ADE80;
    --d-accent-dk: #16A34A;

    /* ── Surface & Canvas ── */
    --d-canvas: #FAFAF5;
    --d-surface: #FAFAF5;
    --d-shell: #FAFAF5;
    --d-white: #FFFFFF;

    /* ── Text ── */
    --d-text: #1E293B;
    --d-text-secondary: #64748B;
    --d-muted: #94A3B8;
    --d-text-on-accent: #FFFFFF;

    /* ── Dark Surfaces (Sidebar) ── */
    --d-dark: #0F172A;
    --d-dark-surface: #1E293B;
    --d-dark-fg: #CBD5E1;
    --d-dark-border: #334155;
    --d-dark-active: var(--d-green);

    /* ── Borders & Rings ── */
    --d-border: #E2E8F0;
    --d-border-strong: #CBD5E1;

    /* ── Semantic ── */
    --d-red: #DC2626;

    /* ── Shadows (ring-based) ── */
    --d-ring: 0 0 0 1px var(--d-border);

    /* ── Interactive States ── */
    --d-disabled: #94A3B8;
    --d-disabled-bg: #F1F5F9;
    --d-focus-ring: 0 0 0 3px rgba(30, 111, 217, 0.25);
    --d-touch-target-min: 44px;
}

/* ── Dashboard Shell ── */

.dashboard-shell {
    font-family: "DM Sans", system-ui, sans-serif;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid var(--d-border);
    background: var(--d-shell);
}

.dashboard-shell--admin,
.dashboard-shell--teacher,
.dashboard-shell--superadmin,
.dashboard-shell--student,
.dashboard-shell--reception,
.dashboard-shell--library,
.dashboard-shell--accountant,
.dashboard-shell--alumni,
.dashboard-shell--stock {
    background: var(--d-shell);
}

/* ── Top Fold (Dashboard hero area) ── */

.dashboard-topfold,
.dashboard-topfold--teacher,
.dashboard-topfold--superadmin,
.dashboard-topfold--accountant,
.dashboard-topfold--student {
    margin-top: 8px;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--d-border);
    background: var(--d-white);
}

/* ── Live Badge (admin dashboard header) ── */

.dashboard-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--d-accent);
    color: var(--d-text-on-accent);
    font-family: "DM Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-shell--admin .dashboard-live-badge {
    background: linear-gradient(90deg, #15803d 0%, var(--d-green) 55%, #4ade80 100%);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.25);
    position: relative;
    overflow: hidden;
}

.dashboard-shell--admin .dashboard-live-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    width: 24%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: badge-sheen 3.4s ease-in-out infinite;
}

@keyframes badge-sheen {
    0%, 100% { left: -30%; opacity: 0; }
    25% { opacity: 0.8; }
    55% { left: 115%; opacity: 0; }
}

.dashboard-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--d-text-on-accent);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    animation: pulse-dot 1.8s ease-out infinite;
}

@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); }
    70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.dashboard-live-badge--teacher { background: var(--d-accent); }
.dashboard-live-badge--superadmin { background: var(--d-accent); }

/* ── Typography ── */

.dashboard-title {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--d-dark);
}

.dashboard-subtitle {
    margin: 6px 0 0;
    color: var(--d-muted);
    font-size: 0.9rem;
    font-family: "DM Sans", sans-serif;
}

/* ── KPI Cards ── */

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.dashboard-kpi-card {
    background: var(--d-white);
    border: 1px solid var(--d-border);
    border-radius: 14px;
    padding: 20px 24px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 0 0 1px var(--d-border);
}

.dashboard-kpi-card:hover {
    box-shadow: 0 0 0 1px var(--d-border-strong), 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.dashboard-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.dashboard-kpi-icon--blue { background: rgba(30, 111, 217, 0.10); color: var(--d-blue); }
.dashboard-kpi-icon--green { background: rgba(34, 197, 94, 0.10); color: var(--d-green); }
.dashboard-kpi-icon--amber { background: rgba(217, 119, 6, 0.10); color: var(--d-amber); }
.dashboard-kpi-icon--accent { background: rgba(201, 100, 66, 0.10); color: var(--d-accent); }

.dashboard-kpi-value { color: var(--d-dark) !important; }

/* ── ds-* KPI Card Theme (for <x-ds-kpi-card> component) ── */

.ds-kpi-card {
    background: var(--d-white);
    border: 1px solid var(--d-border);
    border-radius: 14px;
    padding: 20px 24px;
    cursor: default;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}
a.ds-kpi-card:hover {
    box-shadow: 0 0 0 1px var(--d-border-strong), 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.ds-kpi-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d-blue);
    margin-bottom: 14px;
}

.ds-kpi-value {
    font-family: "Sora", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--d-dark);
    margin: 0;
    line-height: 1.2;
}

.ds-kpi-label {
    font-family: "DM Sans", sans-serif;
    font-size: 0.78rem;
    color: var(--d-muted);
    margin: 4px 0 0;
}

/* ── Page Header ── */

.ds-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.ds-page-head-title {
    font-family: "Sora", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--d-dark);
}

.ds-page-head-sub {
    font-family: "DM Sans", sans-serif;
    font-size: 0.85rem;
    color: var(--d-text-secondary);
    margin-top: 2px;
}

/* ── Cards ── */

.ds-card {
    background: var(--d-white);
    border-radius: 14px;
    border: 1px solid var(--d-border);
    padding: 20px;
    box-shadow: 0 0 0 1px var(--d-border);
}

.ds-card-title {
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--d-dark);
    margin-bottom: 12px;
}

.ds-card-hover:hover {
    box-shadow: 0 0 0 1px var(--d-border-strong), 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ── Button System ── */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    text-decoration: none;
}

.ds-btn:active { transform: scale(0.97); }

.ds-btn-primary {
    background: var(--d-accent);
    color: var(--d-text-on-accent);
    border-color: var(--d-accent);
}

.ds-btn-primary:hover {
    background: var(--d-accent-dk);
    border-color: var(--d-accent-dk);
}

.ds-btn-success {
    background: var(--d-green);
    color: #fff;
    border-color: var(--d-green);
}

.ds-btn-success:hover {
    background: #16a34a;
    border-color: #16a34a;
}

.ds-btn-danger {
    background: var(--d-red);
    color: #fff;
    border-color: var(--d-red);
}

.ds-btn-danger:hover {
    background: #992a2a;
    border-color: #992a2a;
}

.ds-btn-outline {
    background: transparent;
    color: var(--d-text);
    border-color: var(--d-border-strong);
}

.ds-btn-outline:hover {
    background: var(--d-surface);
    border-color: var(--d-accent);
    color: var(--d-accent);
}

.ds-btn-ghost {
    background: transparent;
    color: var(--d-text-secondary);
    border-color: transparent;
}

.ds-btn-ghost:hover {
    background: var(--d-surface);
    color: var(--d-text);
}

.ds-btn-sm { padding: 5px 12px; font-size: 0.78rem; }
.ds-btn-lg { padding: 12px 24px; font-size: 0.95rem; }

/* ── Badge System ── */

.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: "DM Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ds-badge-pending, .ds-badge-info {
    background: #f0eee6;
    color: var(--d-text-secondary);
}

.ds-badge-approved, .ds-badge-paid, .ds-badge-active {
    background: #e8f5e9;
    color: #2e7d32;
}

.ds-badge-rejected, .ds-badge-unpaid {
    background: #fbe9e7;
    color: var(--d-red);
}

.ds-badge-warning {
    background: #fff8e1;
    color: var(--d-amber);
}

.ds-badge-inactive {
    background: #f0eee6;
    color: var(--d-muted);
}

/* ── Table System ── */

.ds-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--d-border);
    border-radius: 12px;
    background: var(--d-white);
}

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "DM Sans", sans-serif;
    font-size: 0.85rem;
}

.ds-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--d-text-secondary);
    border-bottom: 1px solid var(--d-border);
    background: var(--d-surface);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ds-table td {
    padding: 12px 16px;
    color: var(--d-text);
    border-bottom: 1px solid var(--d-border);
}

.ds-table tr:last-child td { border-bottom: none; }

.ds-table-striped tbody tr:nth-child(even) { background: var(--d-surface); }

.ds-table-hover tbody tr:hover { background: rgba(201, 100, 66, 0.04); }

/* ── Form Controls ── */

.ds-label {
    display: block;
    font-family: "DM Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--d-text-secondary);
    margin-bottom: 5px;
    letter-spacing: 0.02em;
}

.ds-form-input,
.ds-form-select,
.ds-form-textarea {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--d-border-strong);
    border-radius: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 0.85rem;
    color: var(--d-text);
    background: var(--d-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.ds-form-input:focus,
.ds-form-select:focus,
.ds-form-textarea:focus {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 2px rgba(201, 100, 66, 0.15);
}

.ds-form-input::placeholder { color: var(--d-muted); }

.ds-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235e5d59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ── Status Dots ── */

.ds-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.ds-dot-green { background: var(--d-green); }
.ds-dot-blue { background: var(--d-blue); }
.ds-dot-amber { background: var(--d-amber); }
.ds-dot-red { background: var(--d-red); }
.ds-dot-gray { background: var(--d-muted); }

/* ── Dashboard Panel Cards (teacher/other roles) ── */

.dashboard-panel-card {
    background: var(--d-white);
    border: 1px solid var(--d-border);
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--d-border);
}

.dashboard-panel-title {
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--d-dark);
}

/* ── Sidebar (dark warm) ── */

.sidebar-nav a:hover { color: var(--d-accent); }
.sidebar-nav .active { color: var(--d-accent); }

/* ── Onboarding Reminder Banner ── */

.ds-reminder-banner {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

/* ── Toshi Widget Base (colors only — structure in blade) ── */

body .toshi-root {
    --toshi-bg: var(--d-white);
    --toshi-border: #e8e6dc;
    --toshi-accent: #c96442;
    --toshi-accent-hover: #a84d32;
    --toshi-warm-bg: #f5f4ed;
    --toshi-warm-text: #5e5d59;
    --toshi-label-text: #87867f;
    --toshi-title-text: #141413;
    --toshi-user-bubble: rgba(201, 100, 66, 0.10);
    --toshi-bot-bubble: var(--d-surface);

    /* Position: fixed so the widget is always visible regardless of scroll */
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 9999 !important;
}

/* Bump specificity on critical Toshi layout rules to prevent override by unrelated CSS */
body .toshi-pill {
    display: flex !important;
    align-items: center;
}
body .toshi-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Desktop panel: fixed position at bottom-right */
@media (min-width: 641px) {
    .toshi-panel {
        position: fixed !important;
        bottom: 24px !important;
        right: 24px !important;
        z-index: 9998 !important;
    }
    /* Hide pill when panel is open on desktop */
    .toshi-panel ~ .toshi-pill {
        display: none;
    }
}

/* ── Card Padding & Shadow Helpers ── */

.ds-card-padding-default { padding: 20px; }
.ds-card-padding-sm { padding: 14px; }
.ds-card-padding-lg { padding: 28px; }
.ds-card-padding-none { padding: 0; }
.ds-card-shadow-sm { box-shadow: 0 0 0 1px var(--d-border); }
.ds-card-shadow-md { box-shadow: 0 0 0 1px var(--d-border-strong), 0 2px 8px rgba(0, 0, 0, 0.04); }
.ds-card-shadow-lg { box-shadow: 0 0 0 1px var(--d-border-strong), 0 8px 24px rgba(0, 0, 0, 0.06); }

/* ── Badge Sizes ── */

.ds-badge-sm { padding: 3px 10px; font-size: 0.72rem; }
.ds-badge-md { padding: 5px 14px; font-size: 0.78rem; }

/* ── Form Group ── */

.ds-form-group { margin-bottom: 16px; }

.ds-form-label {
    display: block;
    font-family: "DM Sans", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--d-text);
    margin-bottom: 6px;
}

.ds-form-label-required::after {
    content: " *";
    color: var(--d-red);
}

.ds-form-input-error {
    border-color: var(--d-red);
}

.ds-form-input-error:focus {
    border-color: var(--d-red);
    box-shadow: 0 0 0 2px rgba(181, 51, 51, 0.15);
}

.ds-form-error {
    font-family: "DM Sans", sans-serif;
    font-size: 0.78rem;
    color: var(--d-red);
    margin-top: 4px;
}

.ds-form-help {
    font-family: "DM Sans", sans-serif;
    font-size: 0.78rem;
    color: var(--d-muted);
    margin-top: 4px;
}

/* ── Warning Button Variant ── */

.ds-btn-warning {
    background: var(--d-amber);
    color: #fff;
    border-color: var(--d-amber);
}

.ds-btn-warning:hover {
    background: #b45309;
    border-color: #b45309;
}

/* ── Profile Dropdown ──
   The .profile-click JS toggles .open on click. This rule shows the dropdown. */

.profile-click.open .user-dtl {
    display: block !important;
}

/* ── Layout Override ──
   Override Tailwind bg-gray-200 in the main content area with warm parchment.
   The sidebar bg is handled by .admin-sidebar, .teacher-sidebar, etc. in app.css. */

.dashboard-content-area {
    background: var(--d-canvas) !important;
}

/* ── Super Admin — Health Ring ── */

.superadmin-health-ring {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.superadmin-health-ring svg {
    width: 100%;
    height: 100%;
}

.superadmin-health-ring-bg {
    fill: none;
    stroke: #E2E8F0;
    stroke-width: 2.5;
}

.superadmin-health-ring-fill {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.superadmin-health-ring.empty .superadmin-health-ring-bg {
    stroke: #E2E8F0;
}

/* ── Utility Classes ── */

.text-accent { color: var(--d-accent); }
.bg-accent { background: var(--d-accent); }
.border-accent { border-color: var(--d-accent); }
.text-warm { color: var(--d-text); }
.bg-warm { background: var(--d-canvas); }

/* ── Toshi Form Components ── */

.toshi-input {
    padding: 8px 12px;
    border: 1px solid var(--toshi-border);
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif;
    background: var(--d-white);
}

.toshi-form-card {
    background: var(--d-white);
    border: 1px solid var(--toshi-border);
    border-radius: 12px;
    padding: 14px;
    margin: 4px 0;
}

.toshi-remove-btn {
    background: none;
    border: none;
    color: #EF4444;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
}

.toshi-btn-primary {
    flex: 1;
    padding: 10px;
    background: var(--toshi-accent);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.toshi-btn-primary:hover {
    background: var(--toshi-accent-hover);
}

.toshi-btn-primary-sm {
    flex: 1;
    padding: 8px;
    background: var(--toshi-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.toshi-btn-primary-sm:hover {
    background: var(--toshi-accent-hover);
}

.toshi-btn-outline {
    flex: 1;
    padding: 10px;
    background: var(--toshi-warm-bg);
    color: var(--toshi-warm-text);
    border: 1px solid var(--toshi-border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.toshi-btn-outline-sm {
    flex: 1;
    padding: 8px;
    background: var(--toshi-warm-bg);
    color: var(--toshi-warm-text);
    border: 1px solid var(--toshi-border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.toshi-btn-outline-sm:hover {
    background: #e8e6dc;
}

.toshi-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--d-white);
    border: 1px solid var(--toshi-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-size: 13px;
    color: #4d4c48;
    font-family: "DM Sans", sans-serif;
}

.toshi-btn-done {
    padding: 8px 12px;
    background: var(--d-green);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.toshi-btn-done-sm {
    flex: 1;
    padding: 8px;
    background: var(--d-green);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.toshi-stat-card {
    background: var(--toshi-warm-bg);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}

.toshi-chip {
    padding: 4px 10px;
    background: var(--toshi-warm-bg);
    border-radius: 6px;
    font-size: 11px;
    color: var(--toshi-warm-text);
}

.toshi-chip-compact {
    padding: 4px 8px;
    background: var(--toshi-warm-bg);
    border-radius: 6px;
    font-size: 11px;
    color: var(--toshi-warm-text);
}

.toshi-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--toshi-label-text);
    letter-spacing: 0.04em;
}

.toshi-banner-success {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    padding: 12px;
}

.toshi-stat-value {
    font-size: 18px;
    font-weight: 700;
}

.toshi-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--toshi-title-text);
}

/* ── Toshi Pill ── */

.toshi-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: var(--d-white);
    border-radius: 100px;
    padding: 6px 6px 6px 6px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    height: 52px;
    max-width: 320px;
    border: 2px solid var(--d-green);
    transition: all 0.2s ease;
}

.toshi-pill:hover {
    box-shadow: 0 6px 32px rgba(0,0,0,0.18);
    transform: translateY(-1px);
    border-color: #16A34A;
}

.toshi-pill-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--d-green);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toshi-pill-logo {
    width: 24px;
    height: 24px;
}

.toshi-pill-text {
    flex: 1;
    font-size: 13px;
    color: var(--d-muted);
    font-weight: 400;
    white-space: nowrap;
}

.toshi-pill-badge {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 38px;
    padding: 0 14px;
    gap: 6px;
    color: var(--d-white);
    font-size: 13px;
    font-weight: 600;
    background: var(--d-green);
    border-radius: 100px;
}

/* ── Toshi Panel (non-maximized chat widget) ── */

.toshi-panel {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 600px;
    max-height: calc(100vh - 120px);
    background: var(--d-white);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    border: 1px solid var(--toshi-border);
    overflow: hidden;
}
/* Toshi panel: fullscreen on mobile */
@media (max-width: 640px) {
    .toshi-panel {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        max-height: none;
        border-radius: 0;
        border: none;
        z-index: 9998;
    }
    /* Pin composer to bottom — stays visible when keyboard opens */
    .toshi-panel .toshi-composer {
        position: sticky;
        bottom: 0;
        z-index: 1;
        background: var(--d-white);
    }
    /* Messages area fills remaining space */
    .toshi-panel [class*="message"]:not([class*="input"]):not([class*="composer"]),
    .toshi-panel > div:nth-child(2) {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }
    /* Hide expand/maximize button on mobile — panel is already fullscreen */
    .toshi-header-btn[title="Expand"] {
        display: none;
    }
}

/* ── Student/Teacher List Cards → ds-card styling ── */
.member-list {
    background: var(--d-white);
    border: 1px solid var(--d-border);
    border-radius: 12px;
    padding: 16px;
    transition: box-shadow 0.15s ease;
}
.member-list:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ── Toshi Modal Overlay (maximized) ── */

.toshi-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
}

.toshi-modal-box {
    width: 90vw;
    height: 85vh;
    max-width: 1200px;
    max-height: 900px;
    border-radius: 16px;
    box-shadow: 0 16px 64px rgba(0,0,0,0.2);
}

/* ── Toshi Header ── */

.toshi-header-close-btn {
    border-radius: 6px;
    background: rgba(0,0,0,0.06);
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Toshi Messages Container ── */

.toshi-messages-area {
    background: var(--d-shell);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

/* ── Toshi Step Dots ── */

.toshi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.15s;
}

.toshi-dot-done {
    background: var(--d-green);
}

.toshi-dot-current {
    background: var(--toshi-accent);
}

.toshi-dot-pending {
    background: var(--toshi-border);
}

.toshi-dot-overflow {
    background: #e8e6dc;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 9px;
    color: #5e5d59;
    font-weight: 600;
    flex-shrink: 0;
}

.toshi-dot-label {
    font-size: 9px;
    color: var(--d-muted);
    white-space: nowrap;
}

/* ── Toshi Step Progress Container ── */

.toshi-progress-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 10px;
    background: var(--toshi-warm-bg);
    border-radius: 8px;
}

.toshi-progress-dots {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
}

/* ── Toshi Draft Row ── */

.toshi-draft-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--toshi-warm-bg);
    border: 1px solid var(--toshi-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    color: #4d4c48;
    font-weight: 500;
    transition: all 0.15s;
    width: 100%;
}

.toshi-draft-row:hover {
    border-color: var(--d-green);
}

/* ── Toshi New School Button ── */

.toshi-btn-new-school {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #141413;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-start;
}

.toshi-btn-new-school:hover {
    background: var(--toshi-accent);
}

/* ── Toshi Quick Actions Section ── */

.toshi-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 16px 8px;
    background: var(--d-white);
    flex-shrink: 0;
}

.toshi-qaction-label {
    font-size: 12px;
    font-weight: 600;
    color: #141413;
}

.toshi-qaction-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Toshi Confirmation Buttons ── */

.toshi-confirm-row {
    display: flex;
    gap: 10px;
    padding: 8px 16px;
    background: var(--d-white);
    border-top: 1px solid var(--toshi-warm-bg);
    flex-shrink: 0;
}

.toshi-confirm-yes {
    flex: 1;
    padding: 10px;
    background: var(--d-green);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.toshi-confirm-yes:hover {
    background: #16A34A;
}

.toshi-confirm-no {
    flex: 1;
    padding: 10px;
    background: var(--toshi-warm-bg);
    color: var(--toshi-warm-text);
    border: 1px solid var(--toshi-border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.toshi-confirm-no:hover {
    background: #e8e6dc;
}

/* ── Toshi Review Card ── */

.toshi-review-section {
    font-size: 12px;
    color: var(--toshi-warm-text);
    line-height: 1.5;
}

/* ── Toshi Review Action Row ── */

.toshi-review-actions {
    display: flex;
    gap: 10px;
    padding: 8px 16px 16px;
    background: var(--d-white);
    border-top: 1px solid var(--toshi-warm-bg);
}

/* ── Toshi Bottom Reset Button ── */

.toshi-reset-btn {
    width: 100%;
    padding: 11px;
    background: #141413;
    color: var(--d-white);
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.toshi-reset-btn:hover {
    background: #4d4c48;
}

/* ── Toshi Panel Footer Padded ── */

.toshi-panel-footer {
    padding: 0 16px 16px;
}

/* ── Toshi Message Row for review/notice messages ── */

.toshi-msg-notice {
    font-size: 13px;
    color: var(--toshi-warm-text);
    line-height: 1.5;
}

/* ── Toshi Co-Admin Promoted Text ── */

.toshi-success-text {
    font-size: 12px;
    color: #166534;
}

.toshi-password-text {
    font-size: 13px;
    color: var(--toshi-warm-text);
}

/* ── Toshi Stat Card Label ── */

.toshi-stat-label {
    font-size: 10px;
    color: var(--toshi-warm-text);
    font-weight: 500;
}

.toshi-stat-sub {
    font-size: 8px;
    color: var(--toshi-label-text);
}

.toshi-stat-color-green { color: var(--d-green); }
.toshi-stat-color-amber { color: var(--d-amber); }
.toshi-stat-color-purple { color: #8B5CF6; }
.toshi-stat-color-pink { color: #EC4899; }
.toshi-stat-color-teal { color: #14B8A6; }

.toshi-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 12px;
    color: #4d4c48;
    border-bottom: 1px solid #f5f4ed;
}

.toshi-flex-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.toshi-flex-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toshi-ml-auto {
    margin-left: auto;
}

.toshi-tag-link {
    font-size: 10px;
    color: var(--toshi-accent);
    text-decoration: none;
    padding: 4px 8px;
    background: #faf9f5;
    border-radius: 6px;
}

.toshi-sm-text {
    font-size: 11px;
    color: var(--toshi-warm-text);
}

.toshi-stat-digit {
    font-size: 10px;
    color: var(--toshi-warm-text);
    font-weight: 500;
}

.toshi-spacer-8 {
    margin-bottom: 8px;
}

.toshi-gap-3 {
    margin-top: 3px;
}

.toshi-uppercase-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--toshi-warm-text);
}

.toshi-review-card {
    background: var(--d-white);
    border: 1px solid var(--toshi-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    margin: 4px 0;
}

.toshi-review-header {
    background: #141413;
    color: var(--d-white);
    padding: 14px 16px;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toshi-review-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toshi-info-card {
    flex: 1;
    background: var(--toshi-warm-bg);
    border-radius: 10px;
    padding: 10px 12px;
}

.toshi-info-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--toshi-warm-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.toshi-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--toshi-title-text);
    margin-top: 6px;
}

.toshi-info-sub {
    font-size: 13px;
    color: var(--toshi-warm-text);
    margin-top: 2px;
}

.toshi-green-label {
    font-size: 11px;
    font-weight: 600;
    color: #166534;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.toshi-sub-label {
    font-size: 10px;
    color: var(--toshi-label-text);
    margin-bottom: 2px;
}

.toshi-tiny-note {
    font-size: 8px;
    color: var(--toshi-label-text);
    margin-top: 2px;
}

.toshi-progress-step {
    font-size: 10px;
    font-weight: 600;
    color: var(--toshi-warm-text);
    white-space: nowrap;
}

.toshi-review-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--toshi-border);
    background: #FAFAFA;
}

.toshi-review-actions-outside {
    display: flex;
    gap: 8px;
    padding: 4px 0;
}

.toshi-confirm-full {
    flex: 1;
    padding: 11px;
    font-family: "Sora", sans-serif;
}

.toshi-btn-edit {
    padding: 11px 14px;
}

.toshi-counts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.toshi-section-title-sm {
    font-size: 12px;
    font-weight: 600;
    color: var(--toshi-title-text);
}



/* ── Toshi Active Student Count ── */

.toshi-active-count {
    font-size: 18px;
    font-weight: 700;
}

/* ── Toshi Composer (panel textarea) ── */

.toshi-composer {
    flex-shrink: 0;
    padding: 0 16px 12px;
    background: var(--d-white);
}

.toshi-composer-inner {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    background: var(--d-surface);
    border: 1px solid var(--toshi-border);
    border-radius: 12px;
    padding: 4px 2px 4px 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.toshi-composer-inner:focus-within {
    border-color: #e2e1dc;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
}

.toshi-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #87867f;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    align-self: center;
}

.toshi-attach-btn:hover {
    color: #c96442;
    background: rgba(0,0,0,0.04);
}

.toshi-composer-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    color: var(--toshi-title-text);
    background: transparent;
    resize: none;
    padding: 10px 0;
    line-height: 1.5;
    min-height: 24px;
    max-height: 160px;
}

.toshi-composer-input::placeholder {
    color: var(--d-muted);
}

/* Nuke ALL browser focus rings - Chrome, Safari, Firefox, Edge */
.toshi-composer-inner:focus-within {
    border-color: var(--toshi-border);
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.toshi-composer-input:focus,
.toshi-composer-input:focus-visible,
.toshi-composer-input:focus-within {
    outline: 0 !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ── Toshi Panel Header ── */

.toshi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--toshi-border);
    flex-shrink: 0;
    min-height: 52px;
}

.toshi-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toshi-header-logo img {
    width: 24px;
    height: 24px;
    border-radius: 2px;
}

.toshi-header-logo span {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--toshi-title-text);
}

.toshi-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toshi-header-btn {
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    color: #5e5d59;
}

.toshi-header-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #141413;
}

/* ── Toshi Composer (modal textarea) ── */

.toshi-composer-box {
    border: 1px solid var(--toshi-border);
    border-radius: 12px;
    background: var(--d-white);
    overflow: hidden;
}

.toshi-composer-textarea {
    flex: 1;
    border: none;
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    color: var(--toshi-title-text);
    background: transparent;
    resize: none;
    padding: 9px 0;
    line-height: 1.5;
    width: 100%;
    min-height: 24px;
    max-height: 320px;
}
.toshi-composer-textarea:focus,
.toshi-composer-textarea:focus-visible,
.toshi-composer-textarea:focus-within {
    outline: 0 !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.toshi-composer-textarea::placeholder {
    color: var(--d-muted);
}

/* ── Interactive States ── */

/* Button disabled */
.ds-btn:disabled,
.ds-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--d-disabled-bg, #F1F5F9);
    color: var(--d-disabled, #94A3B8);
    border-color: transparent;
}

/* Button focus-visible */
.ds-btn:focus-visible {
    outline: 2px solid var(--d-blue);
    outline-offset: 2px;
}

/* Button active press */
.ds-btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* Input base + states */
.ds-input {
    font-family: "DM Sans", sans-serif;
    font-size: 0.875rem;
    padding: 8px 12px;
    border: 1px solid var(--d-border);
    border-radius: 8px;
    background: var(--d-white);
    color: var(--d-text);
    transition: border-color var(--d-transition-normal, 200ms ease),
                box-shadow var(--d-transition-normal, 200ms ease);
    min-height: 44px;
    width: 100%;
}
.ds-input:hover { border-color: var(--d-border-strong); }
.ds-input:focus {
    border-color: var(--d-blue);
    box-shadow: 0 0 0 3px rgba(30, 111, 217, 0.15);
    outline: none;
}
.ds-input:disabled {
    background: #F8FAFC;
    color: var(--d-muted);
    cursor: not-allowed;
}
.ds-input--error {
    border-color: var(--d-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.ds-input--error:focus {
    border-color: var(--d-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* ── Motion ── */

@keyframes d-fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dashboard-shell {
    animation: d-fadeSlideIn 0.25s ease-out;
}

@keyframes d-fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dashboard-kpi-card {
    animation: d-fadeSlideUp 0.3s ease-out both;
}
.dashboard-kpi-card:nth-child(1) { animation-delay: 0ms; }
.dashboard-kpi-card:nth-child(2) { animation-delay: 60ms; }
.dashboard-kpi-card:nth-child(3) { animation-delay: 120ms; }
.dashboard-kpi-card:nth-child(4) { animation-delay: 180ms; }
.dashboard-kpi-card:nth-child(5) { animation-delay: 240ms; }
.dashboard-kpi-card:nth-child(6) { animation-delay: 300ms; }

/* Loading dots */
.ds-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px;
    color: var(--d-muted);
}
.ds-loading-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--d-blue);
    animation: d-loadingBounce 0.6s ease-in-out infinite both;
}
.ds-loading-dot:nth-child(2) { animation-delay: 0.15s; }
.ds-loading-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes d-loadingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ── Empty State ── */
.ds-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    animation: d-fadeIn 0.3s ease;
}
@keyframes d-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ds-empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}
.ds-empty-state-title {
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--d-text);
    margin: 0 0 4px;
}
.ds-empty-state-desc {
    font-size: 0.85rem;
    color: var(--d-muted);
    max-width: 320px;
    margin: 0;
}

/* ── Save Indicator (saving/saved/error) ── */
.ds-save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-family: "DM Sans", sans-serif;
    transition: color var(--d-transition-normal, 200ms ease);
}
.ds-save-indicator--saving { color: var(--d-amber); }
.ds-save-indicator--saved { color: var(--d-green); }
.ds-save-indicator--error { color: var(--d-red); }
.ds-save-indicator__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ds-save-indicator--saving .ds-save-indicator__dot {
    animation: d-pulse 0.8s ease-in-out infinite;
}
@keyframes d-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ── Section Headings ── */
.ds-section-title {
    font-family: "Sora", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--d-dark);
    margin: 0 0 12px;
}
.ds-section-subtitle {
    font-family: "DM Sans", sans-serif;
    font-size: 0.85rem;
    color: var(--d-muted);
    margin: 0 0 16px;
}

/* ── Premium Data Table (Scholarly Ledger) ── */
.ds-table-ledger {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 0.85rem;
}
.ds-table-ledger thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.ds-table-ledger th {
    padding: 12px 20px;
    font-family: "Sora", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--d-muted);
    background: rgba(255, 255, 252, 0.97);
    border-bottom: 2px solid var(--d-blue);
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
    min-height: 48px;
}
.ds-table-ledger th:hover { color: var(--d-blue); }
.ds-table-ledger th .dt-sort-arrow {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s ease;
    color: var(--d-muted);
}
.ds-table-ledger th.active .dt-sort-arrow { color: var(--d-blue); }
.ds-table-ledger th.active .dt-sort-arrow.dt-asc { transform: rotate(180deg); }

.ds-table-ledger td {
    padding: 16px 20px;
    color: var(--d-text);
    border-bottom: 1px solid var(--d-border);
    vertical-align: middle;
    line-height: 1.4;
}
.ds-table-ledger tbody tr {
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ds-table-ledger tbody tr:hover {
    background: #F5F0E9;
    box-shadow: inset 3px 0 0 var(--d-blue);
}
.ds-table-ledger tbody tr.dt-selected {
    background: #E8F0FE;
    box-shadow: inset 3px 0 0 var(--d-blue);
}
.ds-table-ledger tbody tr.dt-row-alt {
    background: #F8F5F0;
}
.ds-table-ledger tbody tr:last-child td {
    border-bottom: none;
}

/* Checkbox cell */
.ds-table-ledger .dt-cell-check {
    width: 44px;
    padding: 0 4px 0 16px;
    text-align: center;
}
.dt-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--d-border);
    accent-color: var(--d-blue);
    cursor: pointer;
    min-width: 18px;
    min-height: 18px;
}
.dt-checkbox:checked { border-color: var(--d-blue); }

/* Badge cells */
.dt-cell-badge { min-width: 100px; }

/* Numeric cells */
.dt-cell-num {
    font-family: "DM Sans", sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Status Badges */
.dt-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: "DM Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    min-height: 28px;
    white-space: nowrap;
}
.dt-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.dt-badge-paid { background: #F0FDF4; color: #15803D; }
.dt-badge-unpaid { background: #FEF2F2; color: #DC2626; }
.dt-badge-partial { background: #FFFBEB; color: #B45309; }
.dt-badge-pending { background: #F1F5F9; color: #64748B; }
.dt-badge-active { background: #F0FDF4; color: #15803D; }
.dt-badge-inactive { background: #F1F5F9; color: #64748B; }
.dt-badge-present { background: #EFF6FF; color: #1D4ED8; }
.dt-badge-absent { background: #FEF2F2; color: #DC2626; }

/* Density variants */
.ds-table-ledger.dt-comfortable td { padding: 18px 20px; }
.ds-table-ledger.dt-compact td { padding: 12px 16px; font-size: 0.8rem; }
.ds-table-ledger.dt-compact th { padding: 8px 16px; }
.ds-table-ledger.dt-compact .dt-badge { font-size: 0.72rem; padding: 2px 8px; min-height: 24px; }

/* Pagination */
.dt-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-family: "DM Sans", sans-serif;
    font-size: 0.8rem;
    color: var(--d-muted);
    min-height: 44px;
    gap: 16px;
    flex-wrap: wrap;
}
.dt-pagination-info { color: var(--d-muted); }
.dt-pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dt-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--d-border);
    background: transparent;
    color: var(--d-text);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 44px;
    min-height: 44px;
}
.dt-page-btn:hover { border-color: var(--d-blue); color: var(--d-blue); }
.dt-page-btn.active { background: var(--d-blue); color: #fff; border-color: var(--d-blue); }
.dt-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.dt-page-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    color: var(--d-blue);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
}
.dt-page-nav:hover { text-decoration: underline; }
.dt-page-nav:disabled { opacity: 0.3; cursor: not-allowed; }

/* Table empty state */
.ds-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}
.ds-table-empty .ds-empty-state-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5; }
.ds-table-empty .ds-empty-state-title {
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--d-text);
    margin: 0 0 4px;
}
.ds-table-empty .ds-empty-state-desc {
    font-size: 0.85rem;
    color: var(--d-muted);
    max-width: 320px;
    margin: 0;
}

/* Density toggle */
.dt-density-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--d-border);
    background: transparent;
    color: var(--d-muted);
    cursor: pointer;
    font-size: 1rem;
    min-width: 44px;
    min-height: 44px;
}
.dt-density-btn.active { background: var(--d-blue); color: #fff; border-color: var(--d-blue); }
.dt-density-btn:hover { border-color: var(--d-blue); color: var(--d-blue); }

/* Responsive wrapper */
.ds-table-wrap { overflow-x: auto; }
@media (max-width: 768px) {
    .ds-table-ledger th, .ds-table-ledger td { padding-left: 12px; padding-right: 12px; }
    .dt-pagination { flex-direction: column; align-items: flex-start; }
}

/* ── Marks Grid (grade-entry variant) ── */
.ds-grid-marks {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 0.8rem;
}
.ds-grid-marks thead { position: sticky; top: 0; z-index: 2; }
.ds-grid-marks th {
    padding: 8px 10px;
    font-family: "Sora", sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--d-muted);
    background: rgba(255, 255, 252, 0.97);
    border-bottom: 2px solid var(--d-blue);
    white-space: nowrap;
    text-align: center;
    min-width: 48px;
}
.ds-grid-marks th:first-child { text-align: left; padding-left: 16px; position: sticky; left: 0; z-index: 3; background: rgba(255, 255, 252, 0.97); }
.ds-grid-marks th:nth-child(2) { text-align: left; min-width: 140px; position: sticky; left: 48px; z-index: 3; background: rgba(255, 255, 252, 0.97); }
.ds-grid-marks td {
    padding: 8px 10px;
    color: var(--d-text);
    border-bottom: 1px solid var(--d-border);
    text-align: center;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.ds-grid-marks td:first-child { text-align: center; color: var(--d-muted); font-size: 0.75rem; position: sticky; left: 0; z-index: 1; background: var(--d-white); }
.ds-grid-marks td:nth-child(2) { text-align: left; font-weight: 500; position: sticky; left: 48px; z-index: 1; background: var(--d-white); }
.ds-grid-marks tbody tr { transition: background 0.15s ease; }
.ds-grid-marks tbody tr:hover { background: #F5F0E9; }
.ds-grid-marks tbody tr:nth-child(even) { background: #F8F5F0; }
.ds-grid-marks tbody tr:nth-child(even):hover { background: #F5F0E9; }
.ds-grid-marks .gm-total { font-weight: 600; color: var(--d-dark); }
.ds-grid-marks .gm-agg { font-weight: 600; color: var(--d-blue); }
.ds-grid-marks .gm-pos { font-weight: 600; color: var(--d-green); }
.ds-grid-marks .gm-subject-code { font-size: 0.6rem; display: block; color: var(--d-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ── Mobile Touch Target Sizing (minimum 44px) ── */
@media (hover: none) and (pointer: coarse) {
    .ds-grid-marks a, .ds-grid-marks button,
    .ds-table-ledger a, .ds-table-ledger button,
    .ds-btn, .ds-btn-primary, .ds-btn-secondary,
    .dt-name-link, .dt-action-btn,
    .filter-alphabet a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}
/* Desktop touch targets */
.ds-btn, .ds-btn-primary, .ds-btn-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dt-name-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.dt-action-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.filter-alphabet a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-grid-marks td a, .ds-grid-marks td button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Hamburger menu toggle */
#mobile-menu-trigger {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}
/* Navbar touch targets */
.nav-brand a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
/* Dashboard notification/action links */
.ds-alert a, .notice-body a, .notice-card a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
/* Sidebar menu items — touch target sizing for tablet */
.dashboard-menu-item, .sidebar-menu-item {
    min-height: 44px;
    display: flex;
    align-items: center;
}
/* KPI stat links and period tabs */
.ds-kpi-card a, [class*="kpi"] a, .dashboard-chart-card a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ── Toshi Suggestion Chips (Phase A) ── */
.toshi-suggestions-wrapper {
    padding: 8px 0;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
    overflow: hidden;
    max-height: 80px;
    opacity: 1;
    margin-bottom: 0;
}
.toshi-suggestions-wrapper.toshi-suggestions-hidden {
    max-height: 0;
    opacity: 0;
    margin-bottom: -8px;
    pointer-events: none;
}
.toshi-suggestions-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.toshi-suggestions-scroll::-webkit-scrollbar {
    display: none;
}
.toshi-chip-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    background: #F1F5F9;
    border: 1px solid var(--d-border);
    border-radius: 9999px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--d-text);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s ease, border-color 0.15s ease, background 0.15s ease;
    scroll-snap-align: start;
    flex-shrink: 0;
    appearance: none;
    outline: none;
}
.toshi-chip-suggestion:hover {
    border-color: var(--d-border-strong);
    background: #EEF2F6;
}
.toshi-chip-suggestion:focus-visible {
    box-shadow: 0 0 0 2px var(--d-white), 0 0 0 4px var(--d-green);
}
.toshi-chip-suggestion .toshi-chip-icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.toshi-chip-suggestion.toshi-chip-used {
    opacity: 0.5;
}
.toshi-chip-suggestion.toshi-chip-used:hover {
    opacity: 0.65;
}

/* ── Toshi Tool Confirmation Card (Phase B) ── */
.toshi-confirm-card {
    background: var(--d-white);
    border-radius: 16px;
    border: 1px solid var(--d-border);
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-top: 8px;
    overflow: hidden;
}
.toshi-confirm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--d-green);
    transition: background 0.4s ease;
}
.toshi-confirm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0 20px;
    gap: 12px;
}
.toshi-confirm-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--d-text);
    line-height: 1.4;
}
.toshi-confirm-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ECFDF5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #16A34A;
    font-size: 14px;
}
.toshi-confirm-cancelled-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 100px;
    background: #FEF3C7;
    color: #92400E;
    white-space: nowrap;
}
.toshi-confirm-card-body {
    padding: 12px 20px 16px 20px;
}
.toshi-confirm-param-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toshi-confirm-param-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.toshi-confirm-param-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-text-secondary);
    min-width: 72px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.toshi-confirm-param-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--d-text);
    line-height: 1.4;
}
.toshi-confirm-card-footer {
    padding: 0 20px 16px 20px;
    display: flex;
    gap: 10px;
}
.toshi-confirm-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}
.toshi-confirm-btn:focus-visible {
    outline: 2px solid var(--d-blue);
    outline-offset: 2px;
}
.toshi-confirm-btn-yes {
    background: var(--d-green);
    color: white;
    border-color: var(--d-green);
}
.toshi-confirm-btn-yes:hover {
    background: #16A34A;
    border-color: #16A34A;
}
.toshi-confirm-btn-no {
    background: var(--d-white);
    color: var(--d-text);
    border-color: var(--d-border-strong);
}
.toshi-confirm-btn-no:hover {
    background: #F8FAFC;
    border-color: var(--d-text-secondary);
}
.toshi-confirm-card.is-cancelled::before {
    background: var(--d-amber);
}
.toshi-confirm-card.is-cancelled {
    opacity: 0.85;
}
.toshi-confirm-card.is-cancelled .toshi-confirm-param-value {
    text-decoration: line-through;
    color: var(--d-text-secondary);
}
.toshi-confirm-card.is-cancelled .toshi-confirm-card-icon {
    background: #FEF3C7;
    color: #D97706;
}
.toshi-confirm-cancelled-msg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--d-text-secondary);
    padding: 6px 0;
    min-height: 48px;
}
@media (max-width: 480px) {
    .toshi-confirm-card-header {
        padding: 14px 14px 0 14px;
    }
    .toshi-confirm-card-title {
        font-size: 14px;
    }
    .toshi-confirm-card-body {
        padding: 10px 14px 14px 14px;
    }
    .toshi-confirm-param-row {
        flex-direction: column;
        gap: 2px;
    }
    .toshi-confirm-param-label {
        min-width: unset;
        font-size: 11px;
    }
    .toshi-confirm-param-value {
        font-size: 14px;
    }
    .toshi-confirm-card-footer {
        padding: 0 14px 14px 14px;
        flex-direction: column;
    }
    .toshi-confirm-btn {
        width: 100%;
    }
}

/* ── Plan Card (Phase 3) ── */
.toshi-plan-card {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
}
.toshi-plan-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 8px 14px;
}
.toshi-plan-card-icon {
    font-size: 18px;
    line-height: 1;
}
.toshi-plan-card-title {
    flex: 1;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0369A1;
}
.toshi-plan-card-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #0284C7;
    background: #BAE6FD;
    padding: 2px 8px;
    border-radius: 10px;
}
.toshi-plan-card-steps {
    padding: 4px 14px 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.toshi-plan-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    transition: background 0.15s ease;
}
.toshi-plan-step.step-pending {
    color: #0F172A;
    background: transparent;
}
.toshi-plan-step.step-active {
    color: #0369A1;
    background: #BAE6FD;
    font-weight: 600;
}
.toshi-plan-step.step-completed {
    color: #166534;
    background: #DCFCE7;
}
.toshi-plan-step.step-failed {
    color: #991B1B;
    background: #FEE2E2;
}
.toshi-plan-step-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.toshi-plan-step-num {
    font-weight: 600;
    min-width: 20px;
    flex-shrink: 0;
    color: var(--d-text-secondary);
}
.toshi-plan-step.step-active .toshi-plan-step-num {
    color: #0369A1;
}
.toshi-plan-step-label {
    flex: 1;
}
.toshi-plan-card-footer {
    display: flex;
    gap: 8px;
    padding: 4px 14px 12px 14px;
}
.toshi-plan-btn {
    flex: 1;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.toshi-plan-btn-execute {
    background: #0284C7;
    color: #fff;
}
.toshi-plan-btn-execute:hover {
    background: #0369A1;
}
.toshi-plan-btn-cancel {
    background: #F1F5F9;
    color: #475569;
}
.toshi-plan-btn-cancel:hover {
    background: #E2E8F0;
}
.toshi-plan-card-done {
    flex: 1;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #166534;
    padding: 8px;
}
.toshi-plan-card-processing {
    flex: 1;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0369A1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.toshi-plan-card-processing::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #BAE6FD;
    border-top-color: #0369A1;
    border-radius: 50%;
    animation: toshi-spin 0.6s linear infinite;
}
@keyframes toshi-spin {
    to { transform: rotate(360deg); }
}