/* ============================================================
   Katriviya™ — Site Stylesheet
   VelMaara Innovations LLC
   ============================================================ */

:root {
    --sidebar-width: 240px;
    --sidebar-bg: #0f172a;
    --sidebar-text: rgba(255,255,255,.75);
    --sidebar-active: #3b82f6;
    --topbar-bg: #ffffff;
    --topbar-border: #f1f5f9;
    --body-bg: #f8fafc;
    --card-radius: 12px;
    --brand-primary: #3b82f6;
}

/* ── Base ── */
html, body { height: 100%; background: var(--body-bg); font-family: 'Inter', -apple-system, sans-serif; }

/* ── Sidebar ── */
#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: sticky;
    top: 0;
    transition: width .25s ease;
    z-index: 1000;
}

.sidebar-brand { color: #ffffff !important; }
.sidebar-logo-full { width: 100%; max-width: 168px; height: auto; display: block; }
.sidebar-logo-mark { width: 36px; height: 36px; display: none; }
.sidebar-brand:hover { background: rgba(255,255,255,.05); }
.sidebar-sublabel { text-transform: none; letter-spacing: .02em; font-size: .7rem; color: rgba(255,255,255,.5); }
.sidebar-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); font-weight: 600; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); }

/* Collapse/expand toggle, docked in the sidebar itself just under the brand */
.sidebar-toggle-row { border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-toggle-row .btn {
    color: rgba(255,255,255,.75);
    background: transparent;
    border: none;
}
.sidebar-toggle-row .btn:hover { background: rgba(255,255,255,.07); color: #fff; }
#sidebar.collapsed .sidebar-toggle-row { justify-content: center; }

#sidebar .nav-link {
    color: var(--sidebar-text);
    border-radius: 8px;
    font-size: .875rem;
    padding: .45rem .75rem;
    transition: background .15s, color .15s;
}
#sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
#sidebar .nav-link.active { background: var(--sidebar-active); color: #fff; font-weight: 500; }
#sidebar .nav-link i { font-size: 1rem; }

/* Collapsed sidebar: bigger, brighter icons with a small caption underneath (site.js wraps the text in .nav-text) */
#sidebar.collapsed { width: 84px; }
#sidebar.collapsed .sidebar-brand span { display: none; }
#sidebar.collapsed .sidebar-label {           /* section names become thin dividers */
    display: block; font-size: 0; height: 1px; padding: 0 !important;
    margin: .6rem .75rem .4rem !important; background: rgba(255,255,255,.15);
}
#sidebar.collapsed .nav { padding-left: .35rem !important; padding-right: .35rem !important; }
#sidebar.collapsed .nav-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    padding: .5rem .2rem; color: rgba(255,255,255,.9); text-align: center;
}
#sidebar.collapsed .nav-link i { font-size: 1.35rem; margin: 0 !important; line-height: 1; }
#sidebar.collapsed .nav-link .nav-text {
    display: block; font-size: .62rem; line-height: 1.15; font-weight: 500; letter-spacing: .01em;
    max-width: 100%; overflow-wrap: anywhere;
}
#sidebar.collapsed .nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
#sidebar.collapsed .nav-link.active { background: var(--sidebar-active); color: #fff; box-shadow: 0 2px 8px rgba(59,130,246,.45); }
#sidebar.collapsed .sidebar-brand { padding-left: .25rem !important; padding-right: .25rem !important; }
#sidebar.collapsed .sidebar-logo-full { display: none; }
#sidebar.collapsed .sidebar-logo-mark { display: block; }


/* ── Topbar ── */
.topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    min-height: 56px;
}

/* ── Cards ── */
.card {
    border-radius: var(--card-radius);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.card-header { border-bottom: 1px solid #f1f5f9; padding: 1rem 1.25rem .75rem; }

/* ── KPI Cards ── */
.kpi-card { border-radius: var(--card-radius); }
/* Kumon status code with its meaning as a hover tip (Students list) */
.status-code { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* Alpha (still being tested) marker for modules: an amber striped traffic cone */
.badge-alpha {
    display: inline-flex; align-items: center; gap: .2em; font-size: .72rem; font-weight: 600; line-height: 1;
    color: #f59e0b; vertical-align: middle; margin-left: .3rem; text-transform: lowercase;
}
.badge-alpha .bi { font-size: .85rem; }
#sidebar .nav-link .badge-alpha .bi { font-size: .8rem; margin: 0 !important; }
#sidebar.collapsed .nav-link .badge-alpha { position: absolute; top: .2rem; right: .45rem; margin: 0; }
#sidebar.collapsed .nav-link .badge-alpha .bi { font-size: .7rem; }
#sidebar.collapsed .nav-link { position: relative; }
/* Dashboard tiles open their page (Bootstrap .stretched-link); links inside a tile stay clickable on their own */
.kpi-card:has(.stretched-link) { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.kpi-card:has(.stretched-link):hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.kpi-card .kpi-sub a { position: relative; z-index: 2; }
.kpi-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: #0f172a; }
.kpi-label { font-size: .8rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; margin-top: .15rem; }
.kpi-sub { font-size: .75rem; margin-top: .35rem; }

/* ── Avatars ── */
.avatar-sm {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff; font-size: .7rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    text-transform: uppercase; flex-shrink: 0;
}
.avatar-lg {
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff; font-size: 1.2rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    text-transform: uppercase; flex-shrink: 0;
}

/* ── Tables ── */
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: #64748b; }
.table td { font-size: .875rem; vertical-align: middle; }
.table-hover tbody tr:hover { background: #f8fafc; }

/* ── Buttons ── */
.btn { border-radius: 8px; font-size: .875rem; font-weight: 500; }
.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); }

/* ── Badges ── */
.badge { font-weight: 500; }

/* ── Forms ── */
.form-control, .form-select {
    border-radius: 8px;
    border-color: #e2e8f0;
    font-size: .875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.form-label { font-size: .8rem; font-weight: 500; color: #374151; margin-bottom: .35rem; }

/* ── Page header ── */
.page-header { padding-top: 1.5rem; }
.page-header h1 { color: #0f172a; }

/* ── DataTables overrides ── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { border-radius: 8px; border-color: #e2e8f0; font-size: .875rem; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin-bottom: 0; }

/* ── Alerts ── */
.alert { border-radius: 10px; border: none; }

/* ── Grade colors ── */
.grade-a { color: #16a34a; font-weight: 600; }
.grade-b { color: #2563eb; font-weight: 600; }
.grade-c { color: #d97706; font-weight: 600; }
.grade-d { color: #ea580c; font-weight: 600; }
.grade-f { color: #dc2626; font-weight: 600; }

/* ── Responsive: phones and tablets ──────────────────────────────────────────────────────────────
   Below 992px (phones, tablets in portrait) the sidebar becomes a slide-in menu opened by the ☰ button in the
   top bar; from 992px up (laptops, tablets in landscape) it is the usual sidebar, collapsible to icons. */

/* The page column may shrink below its content's width, so wide tables scroll inside their own box
   (.table-responsive) instead of widening the whole page. */
#main-content { min-width: 0; }

.topbar-menu, .sidebar-close { display: none; }
.topbar-crumbs { min-width: 0; }
.topbar-crumbs .breadcrumb { flex-wrap: nowrap; overflow: hidden; }
.topbar-crumbs .breadcrumb-item { white-space: nowrap; }
.topbar-crumbs .breadcrumb-item.active { overflow: hidden; text-overflow: ellipsis; }
.topbar-center-select { max-width: 15rem; }
#sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
    #sidebar,
    #sidebar.collapsed {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: min(280px, 85vw); min-height: 0; height: 100%;
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(-100%); transition: transform .25s ease;
        z-index: 1045; box-shadow: none;
    }
    body.sidebar-open #sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
    body.sidebar-open { overflow: hidden; }
    #sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1040;
        background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    body.sidebar-open #sidebar-backdrop { opacity: 1; pointer-events: auto; }

    /* In the slide-in menu the full names always show (the collapsed icon style is for wide screens). */
    #sidebar.collapsed .sidebar-label { display: block; font-size: .65rem; height: auto; background: none;
        margin: 1rem 0 .25rem !important; padding: 0 1rem !important; }
    #sidebar.collapsed .nav { padding-left: .5rem !important; padding-right: .5rem !important; }
    #sidebar.collapsed .nav-link { flex-direction: row; justify-content: flex-start; gap: 0; text-align: left;
        padding: .6rem .75rem; color: var(--sidebar-text); }
    #sidebar.collapsed .nav-link i { font-size: 1rem; margin-right: .5rem !important; }
    #sidebar.collapsed .nav-link .nav-text { font-size: .875rem; font-weight: 400; }
    #sidebar.collapsed .nav-link .badge-alpha { position: static; margin-left: .3rem; }
    #sidebar.collapsed .sidebar-logo-full { display: block; }
    #sidebar.collapsed .sidebar-logo-mark { display: none; }
    #sidebar .nav-link { padding: .6rem .75rem; }            /* bigger touch targets */
    #sidebarToggle { display: none; }
    .sidebar-close { display: inline-block; }
    .sidebar-toggle-row { justify-content: flex-end !important; }

    .topbar-menu { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.25rem; padding: 0; }
    .topbar { position: sticky; top: 0; z-index: 1020; }
    footer.topbar { position: static; }
    .topbar .btn-sm { min-height: 2.25rem; min-width: 2.25rem; }
}

@media (max-width: 767.98px) {
    .topbar-crumbs { display: none; }                        /* the page title says where you are */
    .topbar-center { display: inline-block; max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; vertical-align: bottom; }
    .topbar-center-select { max-width: 8.5rem; }
    .topbar-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; gap: .4rem !important; }
    .topbar-actions .input-group-text { display: none; }
    .topbar-actions .input-group .form-select { border-radius: 8px !important; }
    .page-header { padding-top: 1rem; }
    .page-header h1, .page-header .h3 { font-size: 1.4rem; }
    .kpi-value { font-size: 1.4rem; }
    .card-body { padding: 1rem; }
    .card-header { padding: .85rem 1rem .6rem; }
    /* Headers and toolbars: buttons wrap under the title instead of running off the screen */
    .page-header.d-flex, .card-header.d-flex { flex-wrap: wrap; gap: .5rem; }
    .btn-toolbar, .page-header .btn-group { flex-wrap: wrap; }
    /* 16px text in fields stops iPhones zooming in when a field is tapped */
    .form-control, .form-select, .input-group-text { font-size: 16px; }
    .table td, .table th { padding: .5rem .5rem; }
    /* DataTables: search box and page-size picker full width, pager centred */
    div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_length { text-align: left; }
    div.dataTables_wrapper div.dataTables_filter input { width: 100%; margin-left: 0; }
    div.dataTables_wrapper div.dataTables_filter label { width: 100%; }
    .modal-dialog { margin: .5rem; }
}

/* ── Startup / sign-in screens (_AuthLayout) ── */
.auth-body { background: #ffffff; }
.auth-split { min-height: 100vh; display: flex; flex-direction: column; }
.auth-hero {
    display: flex;
    align-items: center; justify-content: center;
    background: #ffffff;
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
}
/* The whole picture, never cropped (contain), scaled to fit. */
.auth-hero-img { width: 100%; max-width: 1100px; height: auto; max-height: 45vh; object-fit: contain; }
.auth-panel {
    flex: 1 0 auto; width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background: var(--body-bg);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-logo { width: 100%; max-width: 260px; height: auto; }
.auth-mark { width: 64px; height: 64px; }
@media (min-width: 992px) {
    .auth-split { flex-direction: row; }
    .auth-hero { flex: 1 1 60%; padding: 2rem; border-bottom: 0; border-right: 1px solid #f1f5f9; }
    .auth-hero-img { max-height: 92vh; }
    .auth-panel { width: 40%; max-width: 560px; min-width: 440px; }
}

/* ── Password rules checklist (Set your password) ── */
.pw-rules li { color: #64748b; margin-bottom: .15rem; }
.pw-rules li i { font-size: .8rem; margin-right: .3rem; }
.pw-rules li.ok { color: #16a34a; }

/* ── Check-in requirements checklist ── */
.req-icon { font-size: 1.5rem; line-height: 1; }
.req-met { color: #16a34a; }
.req-partial { color: #d97706; }
.req-center { color: #64748b; }
.req-badge.req-met { background: #dcfce7; color: #166534; }
.req-badge.req-partial { background: #fef3c7; color: #92400e; }
.req-badge.req-center { background: #f1f5f9; color: #334155; }
.req-gap { color: #92400e; background: #fffbeb; border-radius: 8px; padding: .4rem .6rem; }

/* ── Theme toggle (sun shows in dark mode, moon in light) ── */
.theme-toggle .bi-sun-fill { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }
.auth-theme-toggle { position: fixed; top: 12px; right: 12px; z-index: 1050; background: var(--bs-body-bg); }

/* ── Class hours ── */
.class-hours .col { min-width: 120px; }
.class-hours .card { overflow: hidden; }
.ch-day { background: #1b3a6b; color: #fff; font-weight: 600; padding: .5rem; }
.ch-open { background: #eff6ff; }
.ch-closed { background: #fef2f2; }
.ch-unset { background: #f8fafc; }
.ch-time { font-size: 1.1rem; font-weight: 600; color: #0f172a; }
.ch-dash { color: #64748b; line-height: 1; }
.ch-label { font-weight: 600; }
.ch-closed .ch-label { color: #b91c1c; }
.ch-unset .ch-label { color: #64748b; }
.ch-today { box-shadow: 0 0 0 3px #f59e0b; }

/* ── Half-hour session grid ── */
.slot-grid th, .slot-grid td { font-size: .85rem; }
.slot-grid .slot-off { background: #f1f5f9; }
.slot-grid .slot { font-weight: 600; color: #0f172a; cursor: default; }
.slot-grid .slot-1 { background: #eff6ff; }
.slot-grid .slot-2 { background: #dbeafe; }
.slot-grid .slot-3 { background: #bfdbfe; }
.slot-grid .slot-4 { background: #93c5fd; }

/* Class hours: students checked in per half-hour (horizontal bars) */
.ci-bars { display: flex; flex-direction: column; gap: .3rem; }
.ci-row { display: grid; grid-template-columns: 5.5rem 1fr 4.5rem; align-items: center; gap: .6rem; }
.ci-time { font-size: .85rem; color: #475569; white-space: nowrap; }
.ci-track { position: relative; height: 1.15rem; background: #f1f5f9; border-radius: .35rem; overflow: hidden; }
.ci-booked { position: absolute; inset: 0 auto 0 0; background: #dbeafe; }
.ci-bar { position: absolute; inset: .2rem auto .2rem 0; background: #16a34a; border-radius: .25rem; min-width: .35rem; }
.ci-count { font-weight: 600; font-size: .9rem; text-align: right; white-space: nowrap; }
.ci-upcoming { opacity: .45; }
.ci-key { display: inline-block; width: .8rem; height: .6rem; border-radius: .15rem; vertical-align: middle; }
.ci-key-in { background: #16a34a; }
.ci-key-booked { background: #dbeafe; }

/* ============================================================
   Dark theme — <html data-bs-theme="dark"> (Bootstrap 5.3 handles its own components;
   these cover Katriviya™'s custom colours)
   ============================================================ */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --sidebar-bg: #020617;
    --topbar-bg: #0f172a;
    --topbar-border: #1e293b;
    --body-bg: #0b1220;
    --bs-body-bg: #0b1220;
    --bs-body-color: #dbe2ea;
    --bs-border-color: #273449;
    --bs-secondary-bg: #162032;
    --bs-tertiary-bg: #131c2c;
}
[data-bs-theme="dark"] #sidebar { border-right: 1px solid #1e293b; }
[data-bs-theme="dark"] .card { background: #111827; --bs-card-bg: #111827; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
[data-bs-theme="dark"] .card-header { border-bottom-color: #1f2937; background: transparent; }
[data-bs-theme="dark"] .kpi-value,
[data-bs-theme="dark"] .page-header h1 { color: #f1f5f9; }
[data-bs-theme="dark"] .kpi-label { color: #94a3b8; }
[data-bs-theme="dark"] .kpi-card:has(.stretched-link):hover { box-shadow: 0 6px 18px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; }
[data-bs-theme="dark"] .table th { color: #94a3b8; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background: #1a2436; }
[data-bs-theme="dark"] .table-light { --bs-table-bg: #1a2436; --bs-table-color: #cbd5e1; --bs-table-border-color: #273449; }
[data-bs-theme="dark"] .bg-light { background-color: #162032 !important; }
[data-bs-theme="dark"] .bg-light.text-dark,
[data-bs-theme="dark"] .bg-light .text-dark { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .bg-white { background-color: #111827 !important; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { border-color: #334155; }
[data-bs-theme="dark"] .form-label { color: #cbd5e1; }
[data-bs-theme="dark"] .alert-success { background: #052e1a; color: #bbf7d0; }
[data-bs-theme="dark"] .alert-danger { background: #3b0a0a; color: #fecaca; }

/* Sign-in: the artwork has a white background, so it keeps a white panel */
[data-bs-theme="dark"] .auth-body { background: var(--body-bg); }
[data-bs-theme="dark"] .auth-hero { border-color: #1e293b; }
[data-bs-theme="dark"] .pw-rules li { color: #94a3b8; }
[data-bs-theme="dark"] .pw-rules li.ok { color: #4ade80; }

/* Check-in requirements */
[data-bs-theme="dark"] .req-badge.req-met { background: #14532d; color: #bbf7d0; }
[data-bs-theme="dark"] .req-badge.req-partial { background: #422006; color: #fde68a; }
[data-bs-theme="dark"] .req-badge.req-center { background: #1e293b; color: #cbd5e1; }
[data-bs-theme="dark"] .req-gap { background: #2a2110; color: #fcd34d; }

/* Class hours & half-hour grid */
[data-bs-theme="dark"] .ch-open { background: #0f2744; }
[data-bs-theme="dark"] .ch-closed { background: #3a1414; }
[data-bs-theme="dark"] .ch-unset { background: #131c2c; }
[data-bs-theme="dark"] .ch-time,
[data-bs-theme="dark"] .slot-grid .slot { color: #e2e8f0; }
[data-bs-theme="dark"] .ch-closed .ch-label { color: #fca5a5; }
[data-bs-theme="dark"] .slot-grid .slot-off { background: #131c2c; }
[data-bs-theme="dark"] .slot-grid .slot-1 { background: #0f2744; }
[data-bs-theme="dark"] .slot-grid .slot-2 { background: #12345e; }
[data-bs-theme="dark"] .slot-grid .slot-3 { background: #1d4b85; }
[data-bs-theme="dark"] .slot-grid .slot-4 { background: #2563eb; }
[data-bs-theme="dark"] .ci-time { color: #94a3b8; }
[data-bs-theme="dark"] .ci-track { background: #1e293b; }
[data-bs-theme="dark"] .ci-booked,
[data-bs-theme="dark"] .ci-key-booked { background: #1e3a5f; }

/* ── Staff schedule ── */
.staff-schedule .col-xl { min-width: 170px; }
.staff-schedule .coverage td { font-size: .78rem; padding: .15rem .3rem; }

/* ── Type-ahead center picker (sign-in pages, js/center-picker.js) ── */
.center-picker { position: relative; }
.center-picker-input { padding-right: 2.4rem; }
.center-picker-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 2.4rem; border: 0; background: transparent;
    color: var(--bs-secondary-color); display: flex; align-items: center; justify-content: center; }
.center-picker-list { position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .25rem;
    list-style: none; max-height: 16rem; overflow-y: auto; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: .5rem; box-shadow: 0 10px 24px -12px rgba(15,23,42,.35); }
.center-picker-list [role=option] { padding: .5rem .75rem; border-radius: .375rem; cursor: pointer; }
.center-picker-list [role=option]:hover { background: var(--bs-tertiary-bg); }
.center-picker-list [role=option].active { background: var(--bs-primary); color: #fff; }
.center-picker-list [role=option][aria-selected=true]:not(.active) { font-weight: 600; }
.center-picker-empty { padding: .5rem .75rem; color: var(--bs-secondary-color); font-size: .9rem; }

/* ── Report B → Get Report B from KSIS: the three options ── */
.ksis-options { gap: .4rem; }
.ksis-options .nav-link { border: 1px solid var(--bs-border-color); font-size: .85rem; padding: .35rem .75rem; color: var(--bs-body-color); }
.ksis-options .nav-link.active { border-color: var(--bs-primary); color: #fff; }
.ksis-options .ksis-num { display: inline-flex; width: 1.25rem; height: 1.25rem; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--bs-secondary-bg); color: var(--bs-body-color); font-weight: 700; font-size: .75rem; margin-right: .4rem; }
.ksis-options .nav-link.active .ksis-num { background: #fff; color: var(--bs-primary); }
.ksis-setup { background: var(--bs-tertiary-bg); border: 1px dashed var(--bs-border-color); border-radius: .5rem; padding: .6rem .75rem; }
.ksis-bookmark { cursor: grab; }