/* Kijana Ajibika — YRC Reporting System */

:root {
    --ka-primary: #1a6b3c;
    --ka-primary-dark: #145a31;
    --ka-primary-light: #e8f5e9;
    --ka-accent: #e8a317;
    --ka-accent-light: #fff8e1;
    --ka-bg: #f0f2f5;
    --ka-sidebar-w: 260px;
    --ka-card-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    --ka-card-shadow-hover: 0 4px 12px rgba(0,0,0,.08);
    --ka-radius: .75rem;
}

*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--ka-bg);
    min-height: 100vh;
    color: #1a1d21;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}
img { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ─── Navbar ─────────────────────────────── */
.navbar-ka {
    background: linear-gradient(135deg, var(--ka-primary) 0%, var(--ka-primary-dark) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    border-bottom: none;
}
.navbar-ka .navbar-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 1.05rem;
}
.navbar-ka .nav-link,
.navbar-ka .navbar-toggler { color: rgba(255,255,255,.85); }
.navbar-ka .nav-link:hover { color: #fff; }

/* ─── Sidebar ────────────────────────────── */
.sidebar {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    width: var(--ka-sidebar-w);
    background: #fff;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    z-index: 1030;
    transition: transform .25s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,.03);
}
.sidebar .nav-link {
    color: #4b5563;
    padding: .6rem 1.2rem;
    font-size: .88rem;
    border-left: 3px solid transparent;
    transition: all .15s;
    margin: 1px .5rem;
    border-radius: 0 .5rem .5rem 0;
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    background: var(--ka-primary-light);
    color: var(--ka-primary);
    border-left-color: var(--ka-primary);
    font-weight: 500;
}
.sidebar .nav-link .bi { margin-right: .5rem; width: 18px; text-align: center; opacity: .7; }
.sidebar .nav-link.active .bi,
.sidebar .nav-link:hover .bi { opacity: 1; }
.sidebar .sidebar-heading {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #9ca3af;
    padding: 1.2rem 1.2rem .4rem;
    font-weight: 600;
}
.sidebar .sidebar-heading-priority {
    color: var(--ka-primary);
}
.sidebar .nav-link-priority {
    color: #283d33;
    font-weight: 600;
}
.sidebar .sidebar-priority-label {
    float: right;
    margin-top: .05rem;
    padding: .12rem .38rem;
    border-radius: 999px;
    background: #fff0d5;
    color: #8a5200;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
}

/* ─── Main content ───────────────────────── */
.main-content {
    margin-left: var(--ka-sidebar-w);
    padding: 1.5rem;
    padding-top: 72px;
    min-height: 100vh;
    overflow-x: hidden;
    /* width:auto fills the space beside the fixed sidebar; width:100% would
       overflow the viewport by the sidebar width and clip content on desktop. */
    width: auto;
    max-width: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 991.98px) {
    .main-content { margin-left: 0; width: 100%; max-width: 100vw; }
}

/* ─── Filter bar ─────────────────────────── */
.filter-bar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--ka-radius);
    padding: .6rem 1rem;
    margin-bottom: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    box-shadow: var(--ka-card-shadow);
}
.filter-bar .filter-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ka-primary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-right: .5rem;
}

/* ─── Cards ──────────────────────────────── */
.card-ka {
    border: none;
    border-radius: var(--ka-radius);
    box-shadow: var(--ka-card-shadow);
    transition: box-shadow .2s, transform .2s;
    background: #fff;
}
.card-ka:hover {
    box-shadow: var(--ka-card-shadow-hover);
}
.card-ka .card-header {
    background: var(--ka-primary);
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: var(--ka-radius) var(--ka-radius) 0 0;
    border-bottom: none;
    padding: .75rem 1rem;
}

/* ─── Stat cards — modern ────────────────── */
.stat-card {
    border: none;
    border-radius: var(--ka-radius);
    box-shadow: var(--ka-card-shadow);
    transition: all .25s ease;
    overflow: hidden;
    position: relative;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ka-card-shadow-hover);
}
.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1d21;
    line-height: 1;
}
.stat-card .stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #6b7280;
    font-weight: 500;
}
.stat-card .stat-trend {
    font-size: .75rem;
    font-weight: 600;
}

/* Stat color variants */
.stat-card.stat-green .stat-icon { background: #dcfce7; color: #16a34a; }
.stat-card.stat-blue .stat-icon { background: #dbeafe; color: #2563eb; }
.stat-card.stat-amber .stat-icon { background: #fef3c7; color: #d97706; }
.stat-card.stat-red .stat-icon { background: #fee2e2; color: #dc2626; }
.stat-card.stat-purple .stat-icon { background: #f3e8ff; color: #9333ea; }
.stat-card.stat-teal .stat-icon { background: #ccfbf1; color: #0d9488; }

/* ─── Dashboard section headers ──────────── */
.dash-section-title {
    font-size: .9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #e5e7eb;
}

/* ─── Tables ─────────────────────────────── */
.table-ka {
    border-collapse: separate;
    border-spacing: 0;
}
.table-ka thead th {
    background: #f9fafb;
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    padding: .7rem .8rem;
}
.table-ka tbody td {
    padding: .65rem .8rem;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
}
.table-ka tbody tr:hover {
    background: #f9fafb;
}

/* ─── Login / Auth pages ──────────────────── */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: stretch;
    background: #fff;
    overflow-x: hidden;
}
.login-brand {
    flex: 0 0 46%;
    min-width: 0;                /* prevent flex blowout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem clamp(1.5rem, 3vw, 3rem);
    color: #fff;
    background: linear-gradient(160deg, #0f3d28 0%, #176b4b 40%, #1a7a54 100%);
    position: relative;
    overflow: hidden;
}
.login-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.06) 0%, transparent 50%),
        radial-gradient(circle at 82% 78%, rgba(255,200,61,.08) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 0%, transparent 70%);
    pointer-events: none;
}
.login-brand::after {
    content: '';
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 380px;
    height: 380px;
    border: 38px solid rgba(255,255,255,.045);
    border-radius: 50%;
    pointer-events: none;
}
.login-brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 440px;
    width: 100%;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.login-brand-logo {
    width: 78px;
    height: 68px;
    object-fit: contain;
    padding: 5px;
    background: #fff;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.2);
}
.login-brand h2 {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: .35rem;
    word-break: break-word;
}
.login-brand .login-brand-motto {
    font-size: .92rem;
    color: rgba(255,255,255,.72);
    font-weight: 500;
    letter-spacing: .02em;
    margin-bottom: 1.8rem;
}
.login-brand-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
    font-size: .76rem;
    color: rgba(255,255,255,.6);
    font-weight: 500;
}
.login-brand-features span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    white-space: nowrap;
}
.login-brand-features .bi { font-size: .85rem; color: #f4c34d; }

/* ── Right / form panel ── */
.login-form-panel {
    flex: 1 1 54%;
    min-width: 0;                /* prevent flex blowout on mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem clamp(1rem, 3vw, 2rem);
    background: #fafbfb;
    overflow-x: hidden;
}
.login-form-wrap {
    width: 100%;
    max-width: 440px;
    min-width: 0;                /* prevent flex blowout */
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.login-form-wrap .form-header {
    margin-bottom: 2rem;
}
.login-form-wrap .form-header h3 {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #17211d;
    letter-spacing: -.02em;
    margin-bottom: .2rem;
}
.login-form-wrap .form-header p {
    color: #7b8781;
    font-size: .88rem;
    margin: 0;
}
.login-form-wrap .form-header a {
    color: var(--ka-primary);
    font-weight: 600;
    text-decoration: none;
}
.login-form-wrap .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: #35423c;
    margin-bottom: .35rem;
}
.login-form-wrap .form-control {
    min-height: 48px;
    padding: .65rem 1rem;
    border: 1.5px solid #dce5e0;
    border-radius: .7rem;
    background: #fff;
    font-size: .92rem;
    transition: border-color .2s, box-shadow .2s;
}
.login-form-wrap .form-control:focus {
    border-color: var(--ka-primary);
    box-shadow: 0 0 0 3px rgba(23,107,75,.1);
}
.login-form-wrap .input-group {
    flex-wrap: nowrap;
}
.login-form-wrap .input-group .form-control {
    border-right: 0;
    min-width: 0;                /* allow shrinking inside input-group */
    flex: 1 1 auto;
}
.login-form-wrap .input-group-text {
    background: #fff;
    border: 1.5px solid #dce5e0;
    border-left: 0;
    border-radius: 0 .7rem .7rem 0;
    color: #9caaa4;
    cursor: pointer;
    flex: 0 0 auto;
    padding-left: .75rem;
    padding-right: .75rem;
    transition: border-color .2s;
    user-select: none;
}
.login-form-wrap .form-control:focus + .input-group-text,
.login-form-wrap .input-group:focus-within .input-group-text {
    border-color: var(--ka-primary);
}
.login-form-wrap .btn-signin {
    min-height: 50px;
    font-size: .92rem;
    font-weight: 700;
    border-radius: .7rem;
    background: var(--ka-primary);
    border: none;
    letter-spacing: .01em;
    transition: all .2s;
    box-shadow: 0 4px 14px rgba(23,107,75,.25);
}
.login-form-wrap .btn-signin:hover {
    background: #145a31;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(23,107,75,.32);
}
.login-form-wrap .btn-signin:active {
    transform: translateY(0);
}
.login-form-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #b4c2bb;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 1.2rem 0;
}
.login-form-divider::before,
.login-form-divider::after {
    content: '';
    flex: 1;
    min-width: 0;
    height: 1px;
    background: #e2e9e5;
}

/* ── Tablet: stack vertically ── */
@media (max-width: 991px) {
    .login-page {
        flex-direction: column;
    }
    .login-brand {
        flex: 0 0 auto;
        padding: 2.5rem clamp(1rem, 4vw, 2rem);
        min-height: auto;
    }
    .login-brand-logo {
        width: 60px;
        height: 52px;
        margin-bottom: 1rem;
    }
    .login-brand h2 {
        font-size: 1.5rem;
    }
    .login-brand .login-brand-motto {
        font-size: .82rem;
        margin-bottom: 1rem;
    }
    .login-brand::after {
        width: 200px;
        height: 200px;
        right: -50px;
        bottom: -80px;
        border-width: 22px;
    }
    .login-form-panel {
        flex: 1 1 auto;
        padding: 2rem clamp(1rem, 4vw, 2rem);
    }
}

/* ── Phone: tight padding, stack feature tags ── */
@media (max-width: 575px) {
    .login-brand {
        padding: 2rem 1rem;
    }
    .login-brand h2 {
        font-size: 1.3rem;
    }
    .login-brand-features {
        gap: .4rem;
        font-size: .68rem;
    }
    .login-brand-features span {
        padding: .25rem .5rem;
    }
    .login-form-panel {
        padding: 1.5rem .9rem;
    }
    .login-form-wrap .form-header {
        margin-bottom: 1.25rem;
    }
    .login-form-wrap .form-header h3 {
        font-size: 1.3rem;
    }
    .login-form-wrap .form-header p {
        font-size: .82rem;
    }
    .login-form-wrap .form-control {
        min-height: 46px;
        font-size: 16px;         /* prevent iOS zoom on focus */
        padding: .55rem .75rem;
    }
    .login-form-wrap .btn-signin {
        min-height: 48px;
        font-size: .88rem;
    }
    .login-form-wrap .input-group-text {
        padding-left: .6rem;
        padding-right: .6rem;
    }
}

/* ── Tiny phones (≤ 360px) ── */
@media (max-width: 380px) {
    .login-brand {
        padding: 1.5rem .75rem;
    }
    .login-brand h2 {
        font-size: 1.15rem;
    }
    .login-brand .login-brand-motto {
        font-size: .75rem;
        margin-bottom: .7rem;
    }
    .login-brand-logo {
        width: 48px;
        height: 42px;
        border-radius: 12px;
    }
    .login-brand-features {
        gap: .3rem;
        font-size: .64rem;
    }
    .login-brand-features span {
        padding: .2rem .4rem;
    }
    .login-brand::after {
        width: 140px;
        height: 140px;
        right: -40px;
        bottom: -60px;
        border-width: 16px;
    }
    .login-form-panel {
        padding: 1.25rem .65rem;
    }
    .login-form-wrap .form-header h3 {
        font-size: 1.15rem;
    }
    .login-form-wrap .form-control {
        min-height: 44px;
        padding: .5rem .65rem;
    }
    .login-form-wrap .input-group-text {
        padding-left: .45rem;
        padding-right: .45rem;
    }
    .login-form-wrap .btn-signin {
        min-height: 46px;
    }
    .login-form-divider {
        margin: .8rem 0;
        font-size: .66rem;
        gap: .5rem;
    }
}

/* ─── Stepper / wizard ───────────────────── */
.step-indicator .step {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    background: #e5e7eb;
    color: #9ca3af;
    transition: all .2s;
}
.step-indicator .step.active {
    background: var(--ka-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(26,107,60,.3);
}
.step-indicator .step.done {
    background: #16a34a;
    color: #fff;
}

/* ─── Wizard chips ───────────────────────── */
.chip-label {
    padding: .4rem .85rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 2rem;
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s;
    background: #fff;
}
.form-check-input:checked + .chip-label {
    background: var(--ka-primary);
    color: #fff;
    border-color: var(--ka-primary);
    box-shadow: 0 2px 6px rgba(26,107,60,.2);
}
.chip-label:hover {
    border-color: var(--ka-primary);
    background: var(--ka-primary-light);
}

/* ─── Stepper large touch targets ────────── */
.stepper-plus, .stepper-minus {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    font-weight: 700;
}

/* ─── Evidence gallery ───────────────────── */
.gallery-thumb {
    border-radius: .5rem;
    object-fit: cover;
    height: 140px;
    width: 100%;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.gallery-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* ─── Quick action buttons on dashboard ──── */
.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1rem;
    border-radius: var(--ka-radius);
    background: #fff;
    border: 1.5px solid #e5e7eb;
    text-decoration: none;
    color: #374151;
    transition: all .2s;
    text-align: center;
}
.quick-action:hover {
    border-color: var(--ka-primary);
    background: var(--ka-primary-light);
    color: var(--ka-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26,107,60,.1);
}
.quick-action .bi {
    font-size: 1.5rem;
    color: var(--ka-primary);
}
.quick-action span {
    font-size: .78rem;
    font-weight: 500;
}

/* ─── Mobile improvements ────────────────── */
@media (max-width: 575.98px) {
    .step-indicator .step {
        width: 28px; height: 28px;
        font-size: .8rem;
    }
    .step-indicator .step + small {
        display: none !important;
    }
    .stepper-plus, .stepper-minus {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
    .stat-card .stat-value {
        font-size: 1.4rem;
    }
}

/* Final dashboard polish overrides */
body { font-family:'DM Sans',system-ui,sans-serif; background:#f5f7f6; color:#17211d; font-size:.925rem; }
h1,h2,h3,h4,h5,h6,.navbar-brand,.stat-value { font-family:'Manrope','DM Sans',sans-serif; letter-spacing:-.025em; }
.navbar-ka { min-height:64px; background:#103c2d; border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 8px 30px rgba(13,77,54,.16); }
.navbar-ka .navbar-brand { display:flex; align-items:center; gap:.7rem; font-size:.96rem; }
.app-brand-logo { width:42px; height:36px; object-fit:contain; padding:2px; border-radius:7px; background:#fff; }
.sidebar { top:64px; border-color:#e7ece9; box-shadow:5px 0 25px rgba(15,23,42,.035); }
.sidebar .nav-link { color:#52605a; padding:.68rem .9rem; margin:2px .7rem; border:0; border-radius:.65rem; font-size:.84rem; }
.sidebar .nav-link.active,.sidebar .nav-link:hover { font-weight:600; border:0; }
.sidebar .sidebar-heading { color:#97a19c; padding:1.35rem 1.55rem .4rem; font-weight:700; }
.main-content { padding:88px clamp(1.25rem,3vw,3rem) 2rem; max-width:1800px; }
.filter-bar { padding:.8rem 1rem; border-color:#e2e9e5; }
.card-ka,.stat-card { border:1px solid #e5ebe8; box-shadow:var(--ka-card-shadow); }
.card-ka .card-header { padding:1rem 1.15rem; color:#26332e; background:#fff; border-bottom:1px solid #edf1ef; font-size:.86rem; font-weight:700; letter-spacing:-.01em; text-transform:none; }
.card-ka .card-header .bi { color:var(--ka-primary); margin-right:.35rem; }
.stat-card .stat-icon { width:46px; height:46px; border-radius:13px; }
.stat-card .stat-value { font-size:1.65rem; font-weight:800; }
.stat-card .stat-label { font-size:.72rem; font-weight:600; letter-spacing:.01em; text-transform:none; }
.dash-section-title { font-family:'Manrope',sans-serif; font-size:.92rem; font-weight:800; color:#25312c; border-bottom:1px solid #dfe6e2; }
.dash-section-title .bi { color:var(--ka-primary); margin-right:.3rem; }
.table-ka thead th { background:#f7f9f8; color:#64716b; }
.quick-action { min-height:112px; justify-content:center; padding:1rem; border:1px solid #e2e9e5; }
.quick-action .bi { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--ka-primary-light); font-size:1.25rem; }
.quick-action span { font-size:.79rem; font-weight:700; }
.btn { border-radius:.6rem; font-weight:600; font-size:.84rem; }
.btn-primary { background:var(--ka-primary); border-color:var(--ka-primary); }
.form-control,.form-select { min-height:38px; border-color:#dce4e0; border-radius:.6rem; }
.form-control:focus,.form-select:focus { border-color:var(--ka-primary); box-shadow:0 0 0 .2rem rgba(23,107,75,.12); }
.badge { border-radius:999px; padding:.42em .7em; font-weight:600; }
.dropdown-menu { padding:.5rem; border:1px solid #e5ebe8; border-radius:.75rem; box-shadow:0 18px 45px rgba(15,23,42,.12); }
.dropdown-item { border-radius:.5rem; font-size:.86rem; }
@media (max-width:575.98px) {
    .main-content { padding:82px .9rem 1.5rem; }
    .app-brand-logo { width:36px; height:32px; }
    .navbar-ka .navbar-brand { font-size:.82rem; }
    .quick-action { min-height:100px; }
}

/* System-wide responsive admin workspace */
.sidebar-backdrop { display:none; }
@media (max-width:991.98px) {
    .sidebar { z-index:1045; width:min(310px,86vw); padding-bottom:2rem; }
    .sidebar.show + .sidebar-backdrop { display:block; position:fixed; z-index:1040; inset:64px 0 0; width:100%; height:calc(100vh - 64px); padding:0; border:0; background:rgba(15,30,24,.45); backdrop-filter:blur(2px); }
    .main-content { width:100%; max-width:none; }
    .navbar-ka .container-fluid { flex-wrap:nowrap; gap:.5rem; }
    .navbar-ka .badge { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .card-ka { overflow:hidden; }
    .table-responsive { -webkit-overflow-scrolling:touch; }
    .table-responsive .table { min-width:680px; }
    .table-responsive::after { content:'Swipe horizontally to see more'; display:block; padding:.45rem .8rem; color:#8b9690; background:#fafcfb; border-top:1px solid #edf1ef; font-size:.66rem; text-align:right; }
    .modal-dialog { margin:.75rem; }
}
@media (max-width:767.98px) {
    .main-content > .d-flex.justify-content-between,
    .main-content > form > .d-flex.justify-content-between { flex-wrap:wrap; align-items:flex-start!important; gap:.75rem; }
    .main-content > .d-flex.justify-content-between > div:last-child { display:flex; flex-wrap:wrap; gap:.45rem; }
    .filter-bar { align-items:stretch; flex-direction:column; padding:.8rem; }
    .filter-bar .filter-label { width:100%; margin:0 0 .2rem; }
    .filter-bar .form-select,.filter-bar .form-control,.filter-bar .btn { width:100%; }
    .card-ka .card-header { flex-wrap:wrap; gap:.5rem; }
    .card-ka .card-header .btn { margin-left:0!important; }
    .card-body { padding:1rem; }
    .row.g-3,.row.g-4 { --bs-gutter-x:1rem; }
    .btn { min-height:40px; }
    .btn-sm { min-height:36px; display:inline-flex; align-items:center; justify-content:center; }
    .form-control,.form-select { min-height:44px; font-size:16px; }
    textarea.form-control { min-height:110px; }
    .input-group .form-control,.input-group .form-select { width:1%; }
    .pagination { flex-wrap:wrap; gap:.25rem; }
    .pagination .page-link { border-radius:.45rem!important; }
    .alert { font-size:.82rem; }
    .dropdown-menu { max-width:calc(100vw - 1.5rem); }
}
@media (max-width:575.98px) {
    .navbar-ka { min-height:60px; }
    .navbar-ka .navbar-brand span { display:none; }
    .navbar-ka .text-white-50 { display:none!important; }
    .navbar-ka .badge { max-width:115px; margin-right:.4rem!important; font-size:.62rem; }
    .sidebar { top:60px; }
    .sidebar.show + .sidebar-backdrop { inset:60px 0 0; height:calc(100vh - 60px); }
    .main-content { padding-top:76px; }
    .main-content h4 { font-size:1.2rem; }
    .main-content > .mb-4:first-child h4,.main-content > .d-flex.mb-4:first-child h4 { font-size:1.25rem; }
    .stat-card .card-body { align-items:flex-start!important; flex-direction:column; }
    .stat-card .stat-label { line-height:1.25; }
    .quick-action { min-height:104px; }
    .table-responsive .table { min-width:620px; }
    .offcanvas,.modal-content { border-radius:.9rem; }
    .card-body > table.table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .card-body > table.table td,.card-body > table.table th { white-space:normal; overflow-wrap:anywhere; }
    .card-body > form > .btn:last-child { width:100%; }
    .main-content .d-flex.justify-content-end { flex-wrap:wrap; gap:.5rem; }
    .main-content .d-flex.justify-content-end .btn { flex:1 1 auto; }
}

/* Dashboard content hierarchy and data presentation */
.main-content > .mb-4:first-child,
.main-content > .d-flex.mb-4:first-child { margin-bottom:1.65rem!important; }
.main-content > .mb-4:first-child h4,
.main-content > .d-flex.mb-4:first-child h4 { color:#18251f; font-size:1.45rem; font-weight:800!important; }
.main-content > .mb-4:first-child small,
.main-content > .d-flex.mb-4:first-child small { display:inline-block; margin-top:.3rem; color:#75817b!important; font-size:.84rem; }
.card { border-color:#e5ebe8; }
.card-body { padding:1.15rem; }
.stat-card .card-body { min-height:92px; padding:1rem; }
.stat-card::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--stat-accent,#176b4b); opacity:.8; }
.stat-green { --stat-accent:#16a34a; }.stat-blue { --stat-accent:#2563eb; }.stat-teal { --stat-accent:#0d9488; }
.stat-amber { --stat-accent:#d97706; }.stat-purple { --stat-accent:#9333ea; }.stat-red { --stat-accent:#dc2626; }
.card-ka canvas { max-width:100%; }
.table-responsive { scrollbar-width:thin; scrollbar-color:#c9d5cf transparent; }
.table-ka tbody td { color:#36433d; }
.table-ka tbody tr { transition:background-color .15s ease; }
.table-ka tbody tr:hover { background:#f4f8f6; }
.text-center.text-muted.py-4 { margin-top:1rem; padding:3rem 1rem!important; border:1px dashed #ced9d3; border-radius:var(--ka-radius); background:rgba(255,255,255,.58); }
.text-center.text-muted.py-4 > .bi { display:grid; place-items:center; width:58px; height:58px; margin:0 auto; border-radius:18px; color:var(--ka-primary); background:var(--ka-primary-light); font-size:1.55rem!important; }
.navbar-ka .btn-outline-light { border-color:rgba(255,255,255,.3); border-radius:.6rem; }
.navbar-ka .text-white-50 { color:rgba(255,255,255,.78)!important; font-size:.84rem; font-weight:600; }
.filter-bar .form-select,.filter-bar .form-control { background-color:#fbfcfb; }
@media (min-width:1400px) {
    .main-content { padding-left:3.5rem; padding-right:3.5rem; }
}
@media (max-width:767.98px) {
    .main-content > .d-flex.mb-4:first-child { align-items:flex-start!important; gap:1rem; }
    .main-content > .d-flex.mb-4:first-child .d-flex.gap-2 { flex-shrink:0; }
    .stat-card .card-body { min-height:86px; gap:.65rem!important; }
    .stat-card .stat-icon { width:40px; height:40px; flex:0 0 40px; }
    .stat-card .stat-value { font-size:1.4rem; }
}

/* Simple coach field workspace */
.coach-welcome { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:130px; padding:1.5rem 1.65rem; overflow:hidden; color:#fff; background:linear-gradient(135deg,#103c2d,#1c7552); border-radius:1rem; box-shadow:0 16px 34px rgba(16,60,45,.16); }
.coach-welcome::after { content:''; position:absolute; right:-35px; bottom:-75px; width:180px; height:180px; border:28px solid rgba(255,255,255,.08); border-radius:50%; }
.coach-welcome > div,.coach-welcome-icon { position:relative; z-index:1; }
.coach-welcome h4 { font-size:1.55rem; font-weight:800; }.coach-welcome small { color:rgba(255,255,255,.72); }
.coach-eyebrow { display:block; margin-bottom:.3rem; color:#f4c34d; font-size:.67rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.coach-welcome-icon { display:grid; place-items:center; width:58px; height:58px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:rgba(255,255,255,.1); font-size:1.5rem; }
.coach-section-label { margin:0 0 .7rem .15rem; color:#7b8781; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.coach-actions .quick-action { align-items:flex-start; min-height:116px; padding:1.1rem; text-align:left; }
.coach-actions .quick-action > span { display:flex; flex-direction:column; gap:.18rem; font-size:.84rem; }
.coach-actions .quick-action small { color:#8a958f; font-size:.7rem; font-weight:500; line-height:1.35; }
.coach-actions .quick-action:hover small { color:#668074; }
.coach-actions .coach-primary-action { color:#fff; background:var(--ka-primary); border-color:var(--ka-primary); }
.coach-actions .coach-primary-action .bi { color:var(--ka-primary)!important; background:#fff; }
.coach-actions .coach-primary-action small { color:rgba(255,255,255,.72); }
.coach-actions .coach-primary-action:hover { color:#fff; background:var(--ka-primary-dark); }
.coach-actions .coach-primary-action:hover small { color:rgba(255,255,255,.82); }
@media (max-width:575.98px) {
    .coach-welcome { min-height:116px; padding:1.2rem; }.coach-welcome h4 { font-size:1.3rem; }.coach-welcome-icon { width:48px; height:48px; }
    .coach-actions .quick-action { min-height:108px; }
    .coach-actions .col-6 .quick-action { padding:.9rem; }
}

/* Settings control panel */
.settings-hero { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.5rem 1.65rem; color:#fff; background:linear-gradient(135deg,#103c2d,#176b4b); border-radius:1rem; box-shadow:0 16px 35px rgba(16,60,45,.16); }
.settings-hero h4 { font-size:1.55rem; font-weight:800; }
.settings-hero p { color:rgba(255,255,255,.72); font-size:.86rem; }
.settings-eyebrow { display:block; margin-bottom:.3rem; color:#f4c34d; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.settings-health { display:flex; align-items:center; gap:.55rem; flex:0 0 auto; padding:.65rem .9rem; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(255,255,255,.08); font-size:.78rem; font-weight:700; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.15); }
.status-dot.is-ready { background:#6ee7a8; box-shadow:0 0 0 4px rgba(110,231,168,.16); }
.settings-panel { overflow:hidden; }
.settings-panel { position:relative; background:#fff; transition:transform .2s ease,box-shadow .2s ease; }
.settings-panel::before { content:''; position:absolute; z-index:2; top:0; bottom:0; left:0; width:3px; background:linear-gradient(180deg,var(--ka-primary),#e9a820); opacity:.8; }
.settings-panel:hover { box-shadow:0 14px 34px rgba(15,23,42,.075); }
.settings-panel .card-header { min-height:54px; display:flex; align-items:center; }
.settings-panel .card-header .bi { display:grid; place-items:center; width:30px; height:30px; margin-right:.55rem; border-radius:9px; background:var(--ka-primary-light); }
.settings-panel .form-label { margin-bottom:.4rem; color:#35423c; font-size:.8rem; }
.settings-panel .form-text { color:#87918c; font-size:.72rem; }
.settings-panel .form-control,.settings-panel .form-select { padding:.62rem .78rem; color:#27342e; background-color:#fbfcfb; border-color:#dce5e0; }
.settings-panel .form-control:hover,.settings-panel .form-select:hover { border-color:#bdcec5; }
.settings-panel .form-control:focus,.settings-panel .form-select:focus { background:#fff; }
.settings-panel .input-group-text { min-width:64px; justify-content:center; color:#637069; background:#f0f5f2; border-color:#dce5e0; font-size:.75rem; font-weight:600; }
.settings-panel textarea.form-control { resize:vertical; min-height:128px; line-height:1.55; }
.settings-panel textarea.form-control::placeholder { color:#a0aaa5; }
.settings-panel .btn:disabled { cursor:not-allowed; opacity:.55; filter:grayscale(.2); }
.settings-savebar { position:sticky; z-index:5; bottom:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; border:1px solid #dce6e1; border-radius:.85rem; background:rgba(255,255,255,.94); box-shadow:0 12px 35px rgba(15,23,42,.12); backdrop-filter:blur(12px); }
.settings-savebar strong,.settings-savebar small { display:block; }
.settings-savebar strong { font-size:.83rem; }.settings-savebar small { color:#7b8781; font-size:.72rem; }
.integration-row { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:.8rem; padding:1rem 1.15rem; border-bottom:1px solid #edf1ef; }
.integration-row { transition:background-color .15s ease; }
.integration-row:hover { background:#f8fbf9; }
.integration-row:last-child { border-bottom:0; }
.integration-icon { display:grid; place-items:center; width:40px; height:40px; color:var(--ka-primary); background:var(--ka-primary-light); border-radius:12px; font-size:1.05rem; }
.integration-row strong,.integration-row small { display:block; }.integration-row strong { font-size:.82rem; }.integration-row small { color:#89938e; font-size:.7rem; }
.integration-badge { padding:.35rem .58rem; border-radius:999px; font-size:.65rem; font-weight:700; }
.integration-badge.ready { color:#087443; background:#dcfce7; }.integration-badge.missing { color:#9a3412; background:#ffedd5; }
.settings-panel .filter-bar { padding:.65rem; margin-bottom:1rem; box-shadow:none; background:#f8faf9; }
.settings-panel .filter-bar .filter-label { width:100%; margin:0 0 .2rem; }
.settings-panel .filter-bar .form-select { min-width:0; font-size:.76rem; }
#broadcastCount { color:var(--ka-primary); font-variant-numeric:tabular-nums; font-weight:700; }
.settings-savebar .btn { min-height:42px; box-shadow:0 8px 18px rgba(23,107,75,.18); }
.settings-savebar .btn:hover { transform:translateY(-1px); }
@media (max-width:767.98px) {
    .settings-hero { align-items:flex-start; flex-direction:column; padding:1.25rem; }
    .settings-savebar { bottom:.5rem; }
    .settings-savebar > div { display:none; }
    .settings-savebar .btn { width:100%; }
    .integration-row { grid-template-columns:40px 1fr; }
    .integration-badge { grid-column:2; justify-self:start; }
    .settings-panel .card-body { padding:1rem; }
}
@media (max-width:420px) {
    .settings-hero h4 { font-size:1.3rem; }
    .settings-health { width:100%; justify-content:center; }
    .settings-panel .input-group { flex-wrap:nowrap; }
}

/* Stable, live programme overview charts */
.dashboard-chart-body { position:relative; height:300px; min-height:300px; }
.dashboard-chart-body.chart-wide { height:320px; }
.dashboard-chart-body.chart-donut { height:320px; }
.dashboard-chart-body canvas { display:block; max-width:100%; height:100%!important; }
.chart-live-status { display:inline-flex; align-items:center; gap:.45rem; color:#718078; font-family:'DM Sans',sans-serif; font-size:.7rem; font-weight:600; letter-spacing:0; text-transform:none; white-space:nowrap; }
.chart-live-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.chart-live-status.is-refreshing .chart-live-dot { animation:chartPulse 1s ease-in-out infinite; }
.chart-live-status.has-error { color:#b45309; }.chart-live-status.has-error .chart-live-dot { background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.12); }
@keyframes chartPulse { 50% { opacity:.35; transform:scale(.75); } }
@media (max-width:767.98px) {
    .dashboard-chart-body,.dashboard-chart-body.chart-wide,.dashboard-chart-body.chart-donut { height:275px; min-height:275px; }
    .chart-live-status { font-size:.64rem; }
}
@media (prefers-reduced-motion:reduce) { .chart-live-status.is-refreshing .chart-live-dot { animation:none; } }

/* ─── Org hierarchy tree ─────────────────── */
.org-node { transition: background-color .15s ease; }
.org-node:hover { background-color: #f6faf7; }
.collapse-icon { transition: transform .2s ease; font-size: .8rem; opacity: .5; }
.collapse-icon.bi-chevron-up { transform: rotate(0deg); }
.collapse-icon.bi-chevron-down { transform: rotate(0deg); }
.org-node .border-bottom { border-color: #edf1ef !important; }
.org-node[data-search] > div[style*="cursor"] { padding: .65rem .85rem; border-radius: .5rem; margin: 2px 0; }
.org-node[data-search] > div[style*="cursor"]:hover { background: #eef5f0; }
.org-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.org-toolbar .btn-group .btn { padding: .25rem .6rem; font-size: .75rem; }
.org-empty-state { text-align: center; padding: 3rem 1rem; color: #8b9690; border: 1px dashed #ced9d3; border-radius: var(--ka-radius); background: rgba(255,255,255,.58); }
.org-empty-state .bi { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto; border-radius: 18px; color: var(--ka-primary); background: var(--ka-primary-light); font-size: 1.55rem; }

/* Google club map */
.map-card { overflow:hidden; }
.map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:48px; padding:.7rem 1rem; color:#617068; background:#fff; border-bottom:1px solid #e8eeeb; font-size:.75rem; font-weight:600; }
.map-legend-dot { display:inline-block; width:10px; height:10px; margin-right:.45rem; border:2px solid #fff; border-radius:50%; background:var(--ka-primary); box-shadow:0 0 0 1px var(--ka-primary); }
.map-provider { display:flex; align-items:center; gap:.4rem; color:#37443e; }
.google-club-map { position:relative; height:calc(100vh - 245px); min-height:500px; background:#eaf0ed; }
.map-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.6rem; color:#627069; font-size:.82rem; }
.google-club-map.is-ready .map-loading { display:none; }
.map-error { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; padding:2rem; color:#8a4b16; background:#fffaf0; text-align:center; }
.map-error .bi { display:grid; place-items:center; width:58px; height:58px; margin-bottom:.4rem; border-radius:18px; background:#ffedd5; font-size:1.5rem; }
.map-error span { max-width:500px; color:#8b7462; font-size:.8rem; }
.google-map-popup { min-width:235px; padding:.25rem; font-family:'DM Sans',sans-serif; color:#25312c; }
.google-map-popup > strong { display:block; margin-bottom:.15rem; font-family:'Manrope',sans-serif; font-size:1rem; }
.google-map-popup > span { display:block; margin:.2rem 0; color:#67736d; font-size:.76rem; }
.popup-stats { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin:.65rem 0; }
.popup-stats span { padding:.45rem; border-radius:.45rem; background:#f0f7f3; color:#516058; font-size:.68rem; }
.popup-stats b { display:block; color:var(--ka-primary); font-size:.9rem; }
.google-map-popup a { display:inline-block; margin-top:.5rem; color:var(--ka-primary); font-size:.75rem; font-weight:700; text-decoration:none; }
@media (max-width:767.98px) {
    .google-club-map { height:calc(100vh - 225px); min-height:430px; }
    .map-toolbar { align-items:flex-start; flex-direction:column; gap:.3rem; }
}

/* ─── Offline drafts ─────────────────────── */
.offline-draft-badge.syncing { animation: ka-spin 0.8s linear infinite; }
@keyframes ka-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.offline-draft-section .list-group-item { border-left: 3px solid var(--ka-warning, #f59e0b); }
#offlineBanner { position: sticky; top: 60px; z-index: 1029; }