/* Kenan Financial Platform — original UI, static runtime (no Vite required) */
:root {
    --kenan-navy: #071a3a;
    --kenan-navy-soft: #123b78;
    --kenan-blue: #0876e8;
    --kenan-cyan: #18c9d2;
    --kenan-ice: #eff9ff;
    --kenan-surface: #ffffff;
    --kenan-text: #11234b;
    --kenan-muted: #71809c;
    --kenan-border: #e3ebf7;
    --kenan-gradient: linear-gradient(135deg, #0b4fc5 0%, #087bed 47%, #18c9d2 100%);
    --kenan-sidebar-width: 280px;
    --kenan-sidebar-collapsed-width: 82px;
    --kenan-topbar-height: 76px;
}

html { min-height: 100%; background: #f4f8ff; }
body {
    min-height: 100%;
    margin: 0;
    color: var(--kenan-text);
    background:
        radial-gradient(circle at 88% -10%, rgba(24, 201, 210, .12), transparent 22rem),
        radial-gradient(circle at 0 100%, rgba(8, 118, 232, .07), transparent 26rem),
        #f4f8ff;
    font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .925rem;
    -webkit-font-smoothing: antialiased;
}
button,input,select,textarea,.btn,.form-control,.form-select,.dropdown-menu,.table { font-family: inherit; }
a { text-decoration: none; }

.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    position: relative;
    z-index: 1045;
    width: var(--kenan-sidebar-width);
    flex-shrink: 0;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 2%, rgba(24, 201, 210, .28), transparent 14rem),
        linear-gradient(165deg, #0c2c62 0%, #071a3a 48%, #06142e 100%);
    box-shadow: 10px 0 32px rgba(5, 22, 56, .08);
    transition: width .28s ease, transform .28s ease;
}
.app-sidebar::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: '';
    opacity: .55;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 72%);
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}
.app-sidebar > * { position: relative; z-index: 1; }
.app-sidebar .sidebar-brand { min-height: 94px; border-bottom: 1px solid rgba(186, 218, 255, .16); }
.app-sidebar .sidebar-brand-copy { min-width: 0; line-height: 1.1; }
.app-sidebar .sidebar-brand-name { color: #fff; font-size: 1rem; font-weight: 700; }
.app-sidebar .sidebar-brand-subtitle { display: block; margin-top: .25rem; color: rgba(218, 237, 255, .65); font-size: .67rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.app-sidebar .brand-mark {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    overflow: hidden;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    background: rgba(255,255,255,.1);
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
.app-sidebar .brand-mark img { width: 67px; max-width: none; transform: translateY(10px); }
.app-sidebar .sidebar-section-title { margin: 1.3rem .7rem .45rem; color: rgba(188, 219, 255, .48); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.app-sidebar .nav-link {
    position: relative;
    min-height: 43px;
    padding: .65rem .75rem;
    overflow: hidden;
    color: rgba(237, 246, 255, .73);
    border: 1px solid transparent;
    border-radius: .78rem;
    font-size: .84rem;
    font-weight: 600;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.app-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(-2px); }
.app-sidebar .nav-link.active { color: #fff; border-color: rgba(139,230,237,.22); background: linear-gradient(100deg, rgba(18,125,238,.82), rgba(24,201,210,.56)); box-shadow: 0 8px 18px rgba(0,61,154,.23); }
.app-sidebar .nav-link i { width: 1.2rem; font-size: 1rem; text-align: center; }
.app-sidebar .sidebar-logout { margin: 1rem .5rem 1.25rem; color: rgba(255,219,225,.85); }
.app-sidebar .sidebar-logout:hover { color: #fff; background: rgba(220,77,97,.19); }

.app-main { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }
.app-topbar {
    position: sticky;
    z-index: 1030;
    top: 0;
    min-height: var(--kenan-topbar-height);
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(218,229,244,.88);
    box-shadow: 0 4px 20px rgba(17,54,107,.035);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.topbar-divider { width: 1px; height: 25px; background: var(--kenan-border); }
.topbar-search { position: relative; max-width: 390px; }
.topbar-search .form-control { height: 42px; padding-inline-start: 2.65rem; background: #f5f8fd; border-color: transparent; border-radius: .8rem; }
.topbar-search .form-control:focus { background: #fff; border-color: rgba(8,118,232,.26); box-shadow: 0 0 0 .2rem rgba(8,118,232,.08); }
.topbar-search .bi-search { position: absolute; z-index: 2; top: 50%; inset-inline-start: 1rem; color: var(--kenan-muted); transform: translateY(-50%); }
.topbar-action,.sidebar-toggle {
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    color: #50617f;
    border: 1px solid #e3ebf7;
    border-radius: .78rem;
    background: #fff;
    transition: all .2s ease;
}
.topbar-action:hover,.topbar-action:focus,.sidebar-toggle:hover,.sidebar-toggle:focus { color: var(--kenan-blue); border-color: rgba(8,118,232,.3); background: #eff8ff; box-shadow: 0 6px 14px rgba(8,118,232,.1); }
.topbar-user { padding: .35rem .6rem .35rem .4rem; color: var(--kenan-text); border: 1px solid #e3ebf7; border-radius: .8rem; background: #fff; font-size: .82rem; font-weight: 700; }
.topbar-user:hover { border-color: rgba(8,118,232,.28); background: #fff; }
.user-avatar { display: inline-grid; width: 31px; height: 31px; place-items: center; color: #fff; border-radius: 10px; background: var(--kenan-gradient); font-size: .85rem; }

.app-content { width: 100%; max-width: 1680px; flex: 1 1 auto; margin-inline: auto; padding: 2rem clamp(1rem,2.25vw,2.5rem) 2.5rem; }
.sidebar-scrim { display: none; }
.app-shell.sidebar-collapsed .app-sidebar { width: var(--kenan-sidebar-collapsed-width); }
.app-shell.sidebar-collapsed .sidebar-label,
.app-shell.sidebar-collapsed .sidebar-section-title,
.app-shell.sidebar-collapsed .sidebar-brand-copy,
.app-shell.sidebar-collapsed .sidebar-logout .sidebar-label { display: none; }
.app-shell.sidebar-collapsed .sidebar-brand { justify-content: center; padding-inline: 0 !important; }
.app-shell.sidebar-collapsed .app-sidebar .nav-link { justify-content: center; padding-inline: .5rem; }
.app-shell.sidebar-collapsed .sidebar-logout { margin-inline: .25rem; }

.card { overflow: hidden; border: 1px solid var(--kenan-border); border-radius: 1.15rem; background: rgba(255,255,255,.96); box-shadow: 0 12px 28px rgba(30,67,120,.045); }
.card-header { min-height: 64px; padding: 1rem 1.25rem; color: var(--kenan-text); border-bottom-color: #edf2fa; background: transparent; }
.card-header h2,.card-header h3,.card-header .h6 { font-weight: 700; }
.card-body { padding: 1.25rem; }

.btn { --bs-btn-font-weight: 700; min-height: 39px; padding-inline: .95rem; border-radius: .7rem; font-size: .83rem; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn-primary { color:#fff; border-color: transparent; background: var(--kenan-gradient); box-shadow: 0 8px 18px rgba(8,118,232,.18); }
.btn-primary:hover,.btn-primary:focus { color:#fff; border-color: transparent; background: linear-gradient(135deg,#064fc4,#0078eb 47%,#0fbfc8); box-shadow: 0 11px 22px rgba(8,118,232,.25); transform: translateY(-1px); }
.btn-outline-primary { color:#076bd1; border-color:#b9d9fa; background:#fff; }
.btn-outline-primary:hover,.btn-outline-primary:focus { color:#fff; border-color:#0876e8; background:#0876e8; }
.btn-outline-secondary { color:#52617d; border-color:#dce6f3; background:#fff; }
.btn-outline-secondary:hover,.btn-outline-secondary:focus { color:var(--kenan-navy); border-color:#c5d8ee; background:#f2f8ff; }
.btn-outline-success { color:#078467; border-color:#b8e5d8; }
.btn-outline-success:hover { color:#fff; background:#0c9b7a; }

.form-label { color:#3f506f; font-size:.82rem; font-weight:700; }
.form-control,.form-select { min-height:43px; color:var(--kenan-text); border-color:#dce7f4; border-radius:.7rem; font-size:.9rem; }
.form-control:focus,.form-select:focus { border-color:rgba(8,118,232,.55); box-shadow:0 0 0 .2rem rgba(8,118,232,.11); }
.input-group-text { color:var(--kenan-muted); border-color:#dce7f4; }
.table { --bs-table-color: var(--kenan-text); --bs-table-hover-bg:#f5faff; }
.table > :not(caption) > * > * { padding:1rem 1.25rem; border-bottom-color:#edf2f8; }
.table thead th { color:#667694; border-bottom-width:1px; background:#f8fbff; font-size:.7rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; }
.table-light { --bs-table-bg:#f8fbff; }
.badge { padding:.45em .7em; border-radius:.55rem; font-size:.71rem; font-weight:700; }
.dropdown-menu { padding:.5rem; border:1px solid var(--kenan-border); border-radius:.9rem; box-shadow:0 14px 32px rgba(14,43,91,.12); }
.dropdown-item { border-radius:.55rem; padding:.55rem .7rem; font-size:.84rem; font-weight:600; }
.dropdown-item:active { background:var(--kenan-blue); }
.modal-content { overflow:hidden; border:0; border-radius:1.2rem; box-shadow:0 25px 65px rgba(6,31,75,.22); }
.modal-header,.modal-footer { border-color:#edf2f8; }
.alert { border:0; border-radius:.9rem; box-shadow:0 6px 16px rgba(30,67,120,.05); }

.stat-card { position:relative; overflow:hidden; border:1px solid var(--kenan-border); border-radius:1.15rem; background:rgba(255,255,255,.97); box-shadow:0 12px 28px rgba(30,67,120,.045); transition:transform .22s ease,box-shadow .22s ease; }
.stat-card::after { position:absolute; top:0; inset-inline-end:0; width:86px; height:4px; content:''; border-radius:0 0 0 8px; background:var(--kenan-gradient); }
.stat-card:hover { box-shadow:0 17px 34px rgba(30,67,120,.09); transform:translateY(-3px); }
.stat-card .stat-value { margin-top:.15rem; color:var(--kenan-navy); font-size:clamp(1.35rem,2vw,1.75rem); font-weight:800; letter-spacing:-.03em; }
.stat-card .stat-icon { display:inline-grid; width:2.8rem; height:2.8rem; flex:0 0 2.8rem; place-items:center; border-radius:.85rem; font-size:1.1rem; }
.page-heading h1,.page-heading .h4 { color:var(--kenan-navy); font-weight:800; letter-spacing:-.025em; }
.page-heading p { color:var(--kenan-muted)!important; }
.eyebrow { display:inline-flex; align-items:center; gap:.35rem; margin-bottom:.35rem; color:#0876e8; font-size:.69rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.eyebrow::before { width:1.6rem; height:2px; content:''; border-radius:99px; background:var(--kenan-gradient); }

.auth-page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 18%, rgba(24,201,210,.32), transparent 21rem),
        radial-gradient(circle at 91% 90%, rgba(8,118,232,.27), transparent 27rem),
        linear-gradient(135deg,#061a3c 0%,#0a3676 52%,#076ed0 100%);
}
.auth-page::before,.auth-page::after { position:fixed; width:min(55vw,700px); aspect-ratio:1; pointer-events:none; content:''; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.auth-page::before { top:-28vw; inset-inline-start:-18vw; }
.auth-page::after { bottom:-32vw; inset-inline-end:-24vw; }
.auth-brand { color:#fff; }
.auth-logo { display:block; width:min(168px,45vw); margin-inline:auto; filter:drop-shadow(0 16px 20px rgba(1,18,52,.22)); }
.auth-brand-name { margin-top:-.6rem; color:#fff; font-size:1.15rem; font-weight:800; }
.auth-brand-copy { color:rgba(228,244,255,.76); font-size:.84rem; }
.auth-card { border:1px solid rgba(255,255,255,.46); border-radius:1.4rem; background:rgba(255,255,255,.96); box-shadow:0 25px 70px rgba(1,19,55,.25); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.auth-card .card-body { padding:clamp(1.5rem,4vw,2.35rem); }

[dir='rtl'] .me-1 { margin-right:0!important; margin-left:.25rem!important; }
[dir='rtl'] .me-2 { margin-right:0!important; margin-left:.5rem!important; }
[dir='rtl'] .ms-auto { margin-left:0!important; margin-right:auto!important; }

@media (max-width: 991.98px) {
    .app-sidebar { position:fixed; inset-block:0; inset-inline-start:0; width:min(82vw,300px); transform:translateX(-110%); }
    [dir='rtl'] .app-sidebar { transform:translateX(110%); }
    .app-shell.sidebar-open .app-sidebar { transform:translateX(0); }
    .sidebar-scrim { position:fixed; z-index:1040; inset:0; width:100%; padding:0; border:0; background:rgba(3,18,47,.46); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
    .app-shell.sidebar-open .sidebar-scrim { display:block; }
    .app-content { padding-top:1.4rem; }
}
@media (max-width: 767.98px) {
    :root { --kenan-topbar-height:65px; }
    .app-topbar { min-height:65px; }
    .app-content { padding-inline:1rem; }
    .card-header { min-height:auto; padding:.95rem 1rem; }
    .table > :not(caption) > * > * { padding:.85rem 1rem; }
    .topbar-user { padding:.3rem; }
}
@media (max-width: 380px) {
    .app-content { padding-inline:.75rem; }
    .topbar-action,.sidebar-toggle { width:36px; height:36px; }
}