/* Keblawi Motors management app */
.loading { display: flex; align-items: center; gap: .7rem; padding: 2rem; color: var(--muted); }
.loading::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent-2); animation: turn .8s linear infinite; }
.nowrap { white-space: nowrap; }
@keyframes turn { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- login */
.login-wrap { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; background: #05070d; }
.login-wrap::before, .login-wrap::after { content: ""; position: absolute; z-index: -2; width: 52vmax; height: 52vmax; border-radius: 50%; filter: blur(110px); }
.login-wrap::before { background: #1f4fd8; opacity: .38; top: -22vmax; left: -14vmax; animation: drift1 22s ease-in-out infinite alternate; }
.login-wrap::after { background: #0e7a8f; opacity: .26; bottom: -26vmax; right: -16vmax; animation: drift2 28s ease-in-out infinite alternate; }
.login-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 100%); }
.login-box { position: relative; width: min(400px, 100%); margin: auto; padding: 2rem 2rem 2.1rem; text-align: center; border-radius: 22px;
  background: rgba(15, 20, 34, .8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 100px rgba(0, 0, 0, .6);
  animation: cardIn .8s var(--ease) both; }
.login-box::before { content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(107, 157, 255, .75), rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, .05) 62%, rgba(107, 157, 255, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.login-logo { display: block; width: min(190px, 54vw); height: auto; margin: 0 auto .7rem; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55)); animation: float 7s ease-in-out infinite; }
.login-box h1 { font: 700 1.45rem var(--body); margin: 0 0 .2rem; }
.login-sub { margin: 0 0 1.5rem; }
.login-box .field, .login-box .form-error { text-align: left; }
.login-box .field { animation: rise .6s var(--ease) both; animation-delay: .15s; }
.login-box .field + .field { animation-delay: .22s; }
.login-box .btn { width: 100%; padding: .8rem; font-size: 1rem; margin-top: .3rem; animation: rise .6s var(--ease) both; animation-delay: .3s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes drift1 { to { transform: translate(16vmax, 12vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-14vmax, -10vmax) scale(1.1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------------------------------------------------------------- shell */
.app { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh;
  background: radial-gradient(1100px 600px at 100% -10%, rgba(47, 111, 237, .13), transparent 60%), radial-gradient(800px 500px at 15% 115%, rgba(14, 122, 143, .09), transparent 60%), var(--bg); }
.side { background: linear-gradient(180deg, #0a0e19, #080b14); color: #fff; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; }
.side-logo { display: block; padding: 1.2rem 1.4rem .4rem; }
.side-logo img { display: block; width: 100%; max-width: 176px; height: auto; margin: 0 auto; transition: transform .4s var(--ease); }
.side-logo:hover img { transform: scale(1.03); }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: .8rem .75rem; flex: 1; }
.side-nav a { position: relative; display: flex; align-items: center; gap: .75rem; color: var(--muted); text-decoration: none; padding: .62rem .8rem; border-radius: 10px; font-weight: 600; font-size: .92rem; transition: background .2s, color .2s; }
.side-nav a::before { content: ""; position: absolute; left: -.75rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-2); transform: scaleY(0); transition: transform .3s var(--ease); }
.side-nav a svg { flex: none; transition: color .2s, transform .3s var(--ease); }
.side-nav a:hover { background: rgba(255, 255, 255, .045); color: var(--text); }
.side-nav a:hover svg { transform: translateX(2px); }
.side-nav a[aria-current="page"] { background: var(--accent-soft); color: #fff; }
.side-nav a[aria-current="page"]::before { transform: scaleY(1); }
.side-nav a[aria-current="page"] svg { color: var(--accent-2); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: .8rem; padding: .6rem clamp(1rem, 3vw, 2.6rem); background: rgba(7, 10, 18, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar .who-name { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.topbar .logout svg { width: 16px; height: 16px; }
.topbar .logout:hover { color: var(--red); border-color: rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .1); }
.top-logo { display: none; }

#view { width: 100%; max-width: 1320px; min-width: 0; padding: 1.6rem clamp(1rem, 3vw, 2.6rem) 3.5rem; }
#view:focus { outline: none; }
#view > * { animation: viewIn .4s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }

.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; }
.page-head h1 { font: 700 1.7rem var(--body); letter-spacing: -.025em; margin: 0; }
.page-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
h2.sec { font: 600 1.02rem var(--body); margin: 2.2rem 0 .8rem; color: #dfe4ef; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1.1rem; }
.filters .field { margin: 0; }
.filters .field.grow { flex: 1 1 260px; }
.filters input[type="date"] { width: auto; }
.filters select { width: auto; min-width: 11rem; }
.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.box, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { padding: 1.5rem; }
.panel.narrow { max-width: 560px; }
.warn-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; background: rgba(245, 182, 66, .08); border: 1px solid rgba(245, 182, 66, .32); color: #fcd27a; border-radius: 12px; padding: .7rem 1rem; margin-bottom: 1.2rem; font-weight: 600; font-size: .9rem; }
.debt-note { margin: -.2rem 0 1rem; padding: .6rem .8rem; border-radius: 10px; background: rgba(245, 182, 66, .08); border: 1px solid rgba(245, 182, 66, .32); color: #fcd27a; font-weight: 600; font-size: .9rem; }
.debt-note:empty { display: none; }
.debt-note.over { background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .4); color: var(--red); }
.cust-actions { margin: .2rem 0 1rem; }

/* ---------------------------------------------------------------- stat cards */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 1rem; }
.stat { position: relative; overflow: hidden; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .5rem; padding: 1.15rem 1.25rem; min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 45%), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  color: inherit; text-decoration: none; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; animation: rise .55s var(--ease) both; }
.stat::after { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 0; height: 2px; border-radius: 2px; background: var(--accent-2); opacity: 0; transform: scaleX(.3); transition: opacity .3s, transform .4s var(--ease); }
.stat:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px rgba(0, 0, 0, .42); }
.stat:hover::after { opacity: 1; transform: scaleX(1); }
.stat:nth-child(2) { animation-delay: .06s; }
.stat:nth-child(3) { animation-delay: .12s; }
.stat:nth-child(4) { animation-delay: .18s; }
.stat:nth-child(n+5) { animation-delay: .24s; }
.stat-val { font: 700 1.75rem/1.1 var(--body); letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-lbl { color: var(--muted); font-size: .8rem; font-weight: 600; }
.stat:has(.stat-val.pos), .stat:has(.stat-val.neg) { border-color: rgba(107, 157, 255, .4); background: linear-gradient(160deg, rgba(47, 111, 237, .16), var(--surface) 65%); }
.stat .stat-val.pos { color: var(--green); }
.stat .stat-val.neg, .stat-val.minus { color: var(--red); }

/* balances: cash green, Whish Money red, owed amber */
.stat.bal-cash { border-color: rgba(52, 211, 153, .35); background: linear-gradient(160deg, rgba(52, 211, 153, .11), var(--surface) 62%); }
.stat.bal-cash::after { background: var(--green); }
.stat.bal-cash .stat-lbl { color: #6ee7b7; }
.stat.bal-whish { border-color: rgba(227, 18, 43, .65); background: linear-gradient(160deg, rgba(227, 18, 43, .2), var(--surface) 62%); }
.stat.bal-whish::after { background: #ff5468; }
.stat.bal-whish .stat-lbl { color: #ff5468; font-weight: 700; }
.stat.bal-owed { border-color: rgba(245, 182, 66, .32); background: linear-gradient(160deg, rgba(245, 182, 66, .09), var(--surface) 62%); }
.stat.bal-owed::after { background: var(--amber); }
.stat.bal-owed .stat-lbl { color: #fcd27a; }

/* ---------------------------------------------------------------- tables and reports */
.thumb { width: 56px; min-width: 56px; max-width: none; height: 42px; object-fit: cover; display: block; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--line); }
.thumb.big { width: 120px; height: 90px; }
.photo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.statement td { padding: .82rem 1.1rem; }
.statement tbody tr:hover { background: none; }
.statement tr.sub td { font-weight: 700; background: var(--surface-2); }
.statement tr.total td { font: 700 1.15rem var(--body); background: var(--accent-soft); border-top: 1px solid rgba(107, 157, 255, .45); }
.two-col { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr); gap: 1.2rem; align-items: start; }
.two-col .stats { margin: 0; }
.bar-cell { width: 55%; }
.bar { height: .5rem; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; min-width: 4px; transform-origin: 0 50%; animation: barIn .9s var(--ease) both; }
@keyframes barIn { from { transform: scaleX(0); } }

.chart-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.1rem .9rem; margin-bottom: 1rem; }
.chart { width: 100%; height: auto; display: block; }
.chart .ax { font: 11px var(--body); fill: #8e97ab; }
.chart rect { transform-box: fill-box; transform-origin: 50% 100%; animation: grow .9s var(--ease) both; }
.chart rect.bar-neg { transform-origin: 50% 0; }
@keyframes grow { from { transform: scaleY(0); } }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); padding: .5rem .4rem 0; }
.sw { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; margin-left: .9rem; }
.sw:first-child { margin-left: 0; }
.sw.s1 { background: #2a334a; }
.sw.s2 { background: #4d86f5; }
.sw.s3 { background: var(--red); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 820px) {
  .app { display: flex; flex-direction: column; }
  .main { display: contents; }
  .topbar { order: -1; padding: .4rem .8rem; gap: .6rem; }
  .top-logo { display: block; margin-right: auto; }
  .top-logo img { display: block; width: 42px; height: 42px; }
  .topbar .who-name { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side { order: 0; display: block; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-logo { display: none; }
  .side-nav { flex-direction: row; overflow-x: auto; padding: .4rem .5rem; gap: 4px; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav a { white-space: nowrap; padding: .5rem .8rem; }
  .side-nav a::before { left: 18%; right: 18%; top: auto; bottom: 0; width: auto; height: 3px; border-radius: 3px 3px 0 0; transform: scaleX(0); }
  .side-nav a[aria-current="page"]::before { transform: scaleX(1); }
  .side-nav a:hover svg { transform: none; }
  #view { order: 1; padding-top: 1rem; }
  .page-head h1 { font-size: 1.45rem; }
  .two-col { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 1rem; }
  .stat-val { font-size: 1.4rem; }
}

/* Blue neon + bright white dashboard, permanent left navigation */
.app { background:radial-gradient(850px 460px at 85% 0%,rgba(0,190,255,.10),transparent 70%),#f4f9ff; }
.side { background:linear-gradient(165deg,#fff 0%,#f2f8ff 75%,#eaf5ff 100%); color:var(--text); border-right:1px solid #c9e3ff; box-shadow:4px 0 28px rgba(18,100,230,.055); }
.side-logo { border-bottom:1px solid var(--line); padding-bottom:1rem; }
.side-logo img { filter:drop-shadow(0 5px 8px rgba(0,120,255,.12)); }
.side-nav a { color:#456687; }
.side-nav a:hover { background:#e8f5ff; color:#075ed4; box-shadow:inset 0 0 0 1px rgba(0,186,255,.17); }
.side-nav a[aria-current="page"] { color:#0054c9; background:linear-gradient(90deg,#d9efff,#eef8ff); box-shadow:inset 0 0 0 1px rgba(0,162,255,.23),0 3px 12px rgba(0,160,255,.08); }
.side-nav a[aria-current="page"] svg { color:#009cff; filter:drop-shadow(0 0 5px rgba(0,174,255,.36)); }
.side-nav a::before { background:#00baff; box-shadow:0 0 11px rgba(0,186,255,.65); }
.topbar { background:rgba(255,255,255,.88); border-bottom:1px solid #d6e9ff; }
.page-head h1 { color:#123c70; }
h2.sec { color:#25527d; }
.box,.panel,.table-wrap,.chart-box { box-shadow:var(--shadow); }
.stat { background:linear-gradient(145deg,#fff,#f5faff); border:1px solid #d4e9ff; }
.stat::after { opacity:.7; background:linear-gradient(90deg,#1472ff,#00d5ff); box-shadow:0 0 13px rgba(0,191,255,.55); }
.stat:hover { border-color:#53baff; box-shadow:0 14px 34px rgba(0,143,255,.16),0 0 0 1px rgba(0,195,255,.2); }
.stat .stat-lbl { color:#587796; }
.stat:has(.stat-val.pos),.stat:has(.stat-val.neg) { background:linear-gradient(160deg,#e9f6ff,#fff 75%); }
.stat.bal-cash { background:linear-gradient(160deg,#e8fff5,#fff 72%); }
.stat.bal-whish { background:linear-gradient(160deg,#fff0f3,#fff 72%); }
.stat.bal-owed { background:linear-gradient(160deg,#fff8e9,#fff 72%); }
.stat.bal-cash .stat-lbl { color:#08774e; }
.stat.bal-owed .stat-lbl { color:#93600a; }
.chart .ax { fill:#64809e; }
.sw.s1 { background:#b5d5f4; }
.warn-bar,.debt-note { color:#895d0d; background:#fff9e9; }
.login-wrap { background:radial-gradient(ellipse at 18% 15%,#d5edff,#f8fbff 65%); }
.login-wrap::before { background:#00baff; opacity:.18; }
.login-wrap::after { background:#176dff; opacity:.13; }
.login-bg { background:radial-gradient(rgba(0,133,255,.13) 1px,transparent 1.4px) 0 0/26px 26px; }
.login-box { background:rgba(255,255,255,.92); border:1px solid #d2e9ff; box-shadow:0 24px 70px rgba(28,108,207,.14); }
.login-box::before { background:linear-gradient(135deg,#00cfff,rgba(255,255,255,.1) 45%,#1472ff); }
.login-logo { filter:drop-shadow(0 7px 12px rgba(10,94,175,.16)); }
/* Glow only during interaction, not a distracting constant pulse. */
.side-nav a,.stat,.btn,.panel,.box { transition:transform .25s var(--ease),box-shadow .3s ease,background .25s ease,border-color .25s ease; }
.side-nav a:hover { transform:translateX(3px); }
@media(max-width:820px) {
  .app { display:grid; grid-template-columns:82px minmax(0,1fr); min-height:100dvh; }
  .main { display:flex; min-width:0; }
  .side { display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; border-right:1px solid #c9e3ff; border-bottom:0; overflow-y:auto; }
  .side-logo { display:block; padding:.65rem .25rem; }
  .side-logo img { max-width:64px; }
  .side-nav { flex-direction:column; overflow-x:visible; overflow-y:visible; padding:.45rem .3rem; gap:4px; }
  .side-nav a { white-space:normal; flex-direction:column; text-align:center; gap:.25rem; font-size:.65rem; line-height:1.15; padding:.65rem .2rem; }
  .side-nav a svg { width:21px; height:21px; }
  .side-nav a::before { left:0;right:auto;top:20%;bottom:20%;width:3px;height:auto;transform:scaleY(0); }
  .side-nav a[aria-current="page"]::before { transform:scaleY(1); }
  .topbar { order:initial; padding:.6rem; gap:.4rem; }
  .top-logo { display:none; }
  .topbar .who-name { font-size:.75rem; max-width:24vw; }
  .topbar .badge { font-size:.65rem; }
  .topbar .logout { font-size:.72rem; padding:.45rem; }
  #view { order:initial; padding:1rem .75rem 2rem; }
  .stats { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
}
@media(max-width:390px) { .app { grid-template-columns:68px minmax(0,1fr); } .side-nav a { font-size:.58rem; } .topbar .who-name { display:none; } }