/* ============================================================
   KREDO FINANCE — Stylesheet (Mobile-First)
   Brand: Navy #0D1B4B · Green #2ECC71 · White
   ============================================================ */

:root {
    --kf-navy:      #0D1B4B;
    --kf-navy-dk:   #08112e;
    --kf-green:     #2ECC71;
    --kf-green-dk:  #27ae60;
    --kf-sidebar-w: 260px;
    --kf-topbar-h:  56px;
    --kf-body-bg:   #f0f2f5;
    --kf-card-bg:   #ffffff;
    --kf-text:      #1a1a2e;
    --kf-muted:     #6c757d;
    --kf-border:    #e8eaf0;
    --kf-shadow:    0 2px 12px rgba(13,27,75,.08);
    --kf-radius:    10px;
    --kf-pad:       12px;       /* mobile content padding */
}
@media (min-width: 768px) {
    :root { --kf-topbar-h: 62px; --kf-pad: 20px; }
}
@media (min-width: 992px) {
    :root { --kf-pad: 28px; }
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body.kf-body {
    font-family: 'Inter', sans-serif;
    background: var(--kf-body-bg);
    color: var(--kf-text);
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;  /* prevent any element from causing horizontal scroll */
    max-width: 100vw;
}

/* ── Navbar ─────────────────────────────────────────────── */
.kf-navbar {
    background: var(--kf-navy);
    height: var(--kf-topbar-h);
    padding: 0 .75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    z-index: 1050;
}
.kf-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .3px;
    flex-shrink: 0;
}
.kf-brand strong { color: var(--kf-green); }

.kf-logo-badge {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--kf-green), var(--kf-green-dk));
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1rem;
    flex-shrink: 0;
}
.kf-logo-badge-lg {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--kf-green), var(--kf-green-dk));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.2rem;
    flex-shrink: 0;
}

/* Role badge — hidden on tiny screens */
.kf-role-badge {
    background: rgba(46,204,113,.18);
    color: var(--kf-green);
    font-weight: 600;
    font-size: .7rem;
    padding: .3em .65em;
    border-radius: 20px;
    display: none;          /* hidden xs */
}
@media (min-width: 576px) { .kf-role-badge { display: inline-flex; align-items: center; } }

.kf-avatar {
    width: 32px; height: 32px;
    background: var(--kf-green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .85rem;
    flex-shrink: 0;
}
.kf-user-btn {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;
    padding: 3px 8px 3px 5px;
    display: flex; align-items: center; gap: 6px;
    min-height: 36px;
}
.kf-user-btn:hover, .kf-user-btn:focus { background: rgba(255,255,255,.2); color: #fff; }

.kf-dropdown {
    border: none;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    border-radius: var(--kf-radius);
    min-width: 190px;
}

.kf-sidebar-toggle {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;
    padding: 5px 10px;
    min-height: 36px;
    display: flex; align-items: center;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.kf-sidebar {
    position: fixed;
    top: var(--kf-topbar-h);
    left: 0;
    width: var(--kf-sidebar-w);
    height: calc(100vh - var(--kf-topbar-h));
    background: var(--kf-navy);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1040;
    transform: translateX(-100%);   /* hidden by default on all sizes */
    transition: transform .28s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
    will-change: transform;
}
.kf-sidebar::-webkit-scrollbar { width: 3px; }
.kf-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* Show on desktop */
@media (min-width: 992px) {
    .kf-sidebar { transform: translateX(0); }
}
/* Show on mobile when .open */
.kf-sidebar.open { transform: translateX(0); }

.kf-sidebar-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: 20px;
}

.kf-sidebar-brand {
    display: none;          /* hidden on mobile — brand already in navbar */
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 6px;
}
@media (min-width: 992px) { .kf-sidebar-brand { display: flex; } }

.nav-section-label {
    color: rgba(255,255,255,.32);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    padding: 14px 18px 5px;
    pointer-events: none;
    user-select: none;
}

/* Touch-friendly nav links (44px min height) */
.kf-nav-link {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,.7) !important;
    padding: 13px 18px;
    min-height: 44px;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .18s, color .18s, border-color .18s;
}
.kf-nav-link:hover {
    background: rgba(255,255,255,.07);
    color: #fff !important;
    border-left-color: rgba(46,204,113,.5);
}
.kf-nav-link.active {
    background: rgba(46,204,113,.12);
    color: var(--kf-green) !important;
    border-left-color: var(--kf-green);
}
.kf-nav-link i { font-size: .95rem; opacity: .85; flex-shrink: 0; }

.kf-sidebar-footer {
    margin-top: auto;
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* ── Overlay (mobile) ───────────────────────────────────── */
.kf-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1035;
    cursor: pointer;
    transition: opacity .28s;
}
.kf-overlay.show { display: block; }
@media (min-width: 992px) { .kf-overlay { display: none !important; } }

/* ── Layout wrapper ─────────────────────────────────────── */
.kf-wrapper {
    display: flex;
    padding-top: var(--kf-topbar-h);
    /* hard stop — nothing can bleed wider than the screen */
    max-width: 100vw;
    overflow-x: hidden;
}
.kf-main {
    flex: 1;
    min-width: 0;                   /* prevent flex child overflow */
    max-width: 100%;
    min-height: calc(100vh - var(--kf-topbar-h));
    margin-left: 0;
    transition: margin-left .28s;
    overflow-x: hidden;
}
@media (min-width: 992px) {
    .kf-main { margin-left: var(--kf-sidebar-w); }
}

.kf-content {
    padding: var(--kf-pad);
    /* Belt-and-suspenders: content also cannot overflow */
    max-width: 100%;
    overflow-x: hidden;
}

/* ── CSS Grid for stat cards (guaranteed 2-per-row on mobile) ── */
.kf-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (min-width: 768px)  { .kf-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1200px) { .kf-stats-grid { grid-template-columns: repeat(6, 1fr); } }

.kf-stats-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (min-width: 768px) { .kf-stats-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

/* ── Page header ────────────────────────────────────────── */
.kf-page-header {
    margin-bottom: 16px;
}
@media (min-width: 768px) { .kf-page-header { margin-bottom: 22px; } }

.kf-page-header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kf-navy);
    margin: 0;
    line-height: 1.25;
}
@media (min-width: 768px) { .kf-page-header h1 { font-size: 1.55rem; } }

.kf-breadcrumb {
    font-size: .76rem;
    color: var(--kf-muted);
    margin: 3px 0 0;
}

/* Stack page-header flex on mobile */
.kf-page-header.d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
}
@media (min-width: 640px) {
    .kf-page-header.d-flex {
        flex-direction: row;
        align-items: center !important;
        justify-content: space-between;
    }
}

/* ── Cards ──────────────────────────────────────────────── */
.kf-card {
    background: var(--kf-card-bg);
    border-radius: var(--kf-radius);
    box-shadow: var(--kf-shadow);
    border: 1px solid var(--kf-border);
    overflow: hidden;
}
.kf-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--kf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
}
@media (min-width: 576px) { .kf-card-header { padding: 14px 18px; } }

.kf-card-header h5 {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--kf-navy);
}
.kf-card-body { padding: 14px; }
@media (min-width: 576px) { .kf-card-body { padding: 18px; } }

/* ── Stat Cards ─────────────────────────────────────────── */
.kf-stat-card {
    background: var(--kf-card-bg);
    border-radius: var(--kf-radius);
    box-shadow: var(--kf-shadow);
    border: 1px solid var(--kf-border);
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: transform .18s, box-shadow .18s;
    height: 100%;
}
.kf-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13,27,75,.12);
}

.kf-stat-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .kf-stat-icon { width: 50px; height: 50px; font-size: 1.4rem; }
}
.kf-stat-icon.navy  { background: rgba(13,27,75,.08);   color: var(--kf-navy); }
.kf-stat-icon.green { background: rgba(46,204,113,.12); color: var(--kf-green-dk); }
.kf-stat-icon.warn  { background: rgba(255,193,7,.12);  color: #856404; }
.kf-stat-icon.danger{ background: rgba(220,53,69,.1);   color: #dc3545; }
.kf-stat-icon.info  { background: rgba(13,202,240,.1);  color: #0dcaf0; }
.kf-stat-icon.purple{ background: rgba(111,66,193,.1);  color: #6f42c1; }

.kf-stat-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--kf-muted);
    line-height: 1.3;
}
.kf-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kf-navy);
    line-height: 1.2;
    word-break: break-all;          /* prevent overflow on small screens */
}
@media (min-width: 480px)  { .kf-stat-value { font-size: 1.35rem; } }
@media (min-width: 768px)  { .kf-stat-value { font-size: 1.5rem; word-break: normal; } }

.kf-stat-sub {
    font-size: .72rem;
    color: var(--kf-muted);
    margin-top: 2px;
    line-height: 1.3;
}

/* ── Tables ─────────────────────────────────────────────── */
.table-responsive-kf {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Subtle scroll hint on mobile */
    background:
        linear-gradient(to right, white 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

.kf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    /* NO min-width — let the wrapper handle scroll */
}
@media (min-width: 768px) { .kf-table { font-size: .875rem; } }

.kf-table thead th {
    background: #f8f9fc;
    color: var(--kf-navy);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .35px;
    padding: 10px 12px;
    border-bottom: 2px solid var(--kf-border);
    white-space: nowrap;
}
.kf-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--kf-border);
    vertical-align: middle;
    color: var(--kf-text);
}
.kf-table tbody tr:last-child td { border-bottom: none; }
.kf-table tbody tr:hover td { background: #f8f9fc; }

/* ── Buttons ────────────────────────────────────────────── */
/* All buttons: minimum 44px touch target */
.btn { min-height: 38px; }

.btn-kf-primary {
    background: var(--kf-navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    padding: .45rem 1.1rem;
    transition: background .18s, transform .15s;
    min-height: 40px;
}
.btn-kf-primary:hover { background: var(--kf-navy-dk); color: #fff; transform: translateY(-1px); }

.btn-kf-green {
    background: var(--kf-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    padding: .45rem 1.1rem;
    transition: background .18s;
    min-height: 40px;
}
.btn-kf-green:hover { background: var(--kf-green-dk); color: #fff; }

/* Touch-friendly small buttons */
.btn-sm { min-height: 34px; padding: .3rem .6rem; font-size: .8rem; }

/* ── Action button group ────────────────────────────────── */
.kf-actions {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}

/* ── Forms ──────────────────────────────────────────────── */
.kf-form-label {
    font-weight: 600;
    font-size: .83rem;
    color: var(--kf-navy);
    margin-bottom: 5px;
    display: block;
}
.kf-form-control {
    border: 1.5px solid var(--kf-border);
    border-radius: 8px;
    padding: .5rem .8rem;
    font-size: .9rem;
    min-height: 42px;               /* bigger touch target */
    width: 100%;
    transition: border-color .18s, box-shadow .18s;
}
.kf-form-control:focus {
    border-color: var(--kf-green);
    box-shadow: 0 0 0 3px rgba(46,204,113,.15);
    outline: none;
}
/* Bootstrap select inherit our style */
select.kf-form-control, select.form-select.kf-form-control {
    appearance: auto;
}

/* ── Login / Register pages ─────────────────────────────── */
.kf-login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--kf-navy) 0%, #1a3278 60%, #102060 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.kf-login-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px 20px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 16px 48px rgba(0,0,0,.28);
}
@media (min-width: 480px) { .kf-login-card { padding: 36px 32px; } }

.kf-login-logo { text-align: center; margin-bottom: 22px; }
.kf-login-logo-icon {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--kf-green), var(--kf-green-dk));
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.8rem; font-weight: 800;
    margin-bottom: 10px;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge { font-weight: 600; font-size: .72rem; }

/* ── Utilities ──────────────────────────────────────────── */
.text-navy      { color: var(--kf-navy) !important; }
.text-kf-green  { color: var(--kf-green-dk) !important; }
.bg-navy        { background: var(--kf-navy) !important; }
.bg-kf-green    { background: var(--kf-green) !important; }
.fw-700         { font-weight: 700 !important; }

.kf-divider { border: none; border-top: 1px solid var(--kf-border); margin: 16px 0; }

/* Loan number */
.loan-number {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--kf-navy);
    font-size: .82rem;
    white-space: nowrap;
}

/* Empty state */
.kf-empty { text-align: center; padding: 36px 16px; color: var(--kf-muted); }
.kf-empty i { font-size: 2.5rem; opacity: .25; display: block; }
.kf-empty p { margin-top: 10px; font-size: .88rem; }

/* Alert */
.alert { border-radius: var(--kf-radius); border: none; font-size: .875rem; }

/* Progress bar */
.kf-progress {
    height: 7px; border-radius: 4px;
    background: var(--kf-border); overflow: hidden;
}
.kf-progress-bar {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--kf-green), var(--kf-green-dk));
    transition: width .5s;
}

/* ── Mobile-only helpers ────────────────────────────────── */
@media (max-width: 575.98px) {

    /* Stat value: tighter on tiny screens */
    .kf-stat-value { font-size: 1.05rem; }

    /* Nav tabs scroll horizontally */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link { white-space: nowrap; }

    /* Card header: tighter */
    .kf-card-header { padding: 10px 12px; }

    /* Tighten login card */
    .kf-login-card { padding: 22px 16px; border-radius: 14px; }

    /* Buttons full-width inside page-header on xs */
    .kf-page-header .btn { width: 100%; justify-content: center; }
    .kf-page-header .d-flex.gap-2 { width: 100%; flex-direction: column; }

    /* List-group items: stack amount below name on xs */
    .kf-list-item-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px;
    }
    .kf-list-item-amount { text-align: left !important; }
}

/* ── Section label (officer dashboard) ─────────────────── */
.kf-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--kf-muted);
    margin-bottom: 8px;
}

/* ── Tab bar (reports) ──────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--kf-border); }
.nav-tabs .nav-link {
    color: var(--kf-muted);
    font-weight: 600;
    font-size: .83rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .6rem .9rem;
    margin-bottom: -2px;
    min-height: 42px;
}
.nav-tabs .nav-link.active {
    color: var(--kf-navy);
    border-bottom-color: var(--kf-green);
    background: transparent;
}

/* ── Installer (install.php) ────────────────────────────── */
.step-bar { display: flex; overflow-x: auto; }
.step-item { min-width: 80px; }

/* ── Print ──────────────────────────────────────────────── */
@media print {
    .kf-sidebar, .kf-navbar, .kf-actions, .btn, .no-print,
    .kf-overlay { display: none !important; }
    .kf-main { margin-left: 0 !important; }
    .kf-wrapper { padding-top: 0; }
    body { background: #fff; }
    .kf-card { box-shadow: none; border: 1px solid #ddd; }
}