/* =====================================================================
   Schools Accounting System | الهوية البصرية
   Dark green + Neon + Gold | Tajawal | Day/Night | RTL/LTR
   ===================================================================== */

:root {
  --green-900: #04150f;
  --green-800: #07251a;
  --green-700: #0a3a2a;
  --green-deep: #0b3d2e;
  --green-600: #0f5132;
  --green-500: #157347;
  --gold: #d4af37;
  --gold-soft: #f1d680;
  --neon: #39ff14;
  --neon-cyan: #00e5ff;
  --danger: #ff4d6d;
  --warn: #ffb703;

  --bg: #04150f;
  --surface: #07251a;
  --surface-2: #0b3d2e;
  --text: #eafff4;
  --text-dim: #9fc7b4;
  --border: rgba(212,175,55,.25);
  --shadow: 0 8px 30px rgba(0,0,0,.45);
  --radius: 14px;
}

/* ---- Light (نهاري) ---- */
[data-theme="light"] {
  --bg: #f4f8f5;
  --surface: #ffffff;
  --surface-2: #eaf3ee;
  --text: #0b3d2e;
  --text-dim: #4a6b5c;
  --border: rgba(11,61,46,.18);
  --shadow: 0 6px 24px rgba(11,61,46,.12);
  --neon: #0f9d58;
  --neon-cyan: #0277bd;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Tajawal', system-ui, 'Segoe UI', Tahoma, sans-serif;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(57,255,20,.06), transparent),
    radial-gradient(900px 500px at -10% 110%, rgba(212,175,55,.07), transparent),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-soft); }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--green-deep), var(--green-900));
  border-inline-end: 1px solid var(--border);
  padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand {
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.05rem; color: var(--gold);
  padding: 8px 10px 18px; border-bottom:1px solid var(--border); margin-bottom:12px;
}
.brand .brand-name { font-weight:800; font-size:1.02rem; color:var(--gold); line-height:1.2; }
.brand .brand-city { font-size:.72rem; color:var(--text-dim); font-weight:600; margin-top:2px; }
.nav a {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color: var(--text-dim);
  font-weight:600; margin-bottom:4px; transition:.18s;
}
.nav a:hover { background: rgba(212,175,55,.08); color: var(--text); }
.nav a.active {
  background: linear-gradient(90deg, rgba(57,255,20,.15), transparent);
  color: var(--neon); border-inline-start:3px solid var(--neon);
}
.nav .group-title {
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold); opacity:.7; margin:14px 10px 6px;
}

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background: var(--surface);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5;
  backdrop-filter: blur(6px);
}
.topbar h1 { font-size:1.15rem; margin:0; color: var(--text); }
.content { padding:22px; flex:1; }

/* ---------- Controls ---------- */
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:10px; border:1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-weight:700;
  cursor:pointer; font-family:inherit; font-size:.92rem; transition:.18s;
}
.btn:hover { border-color: var(--gold); }
.btn-primary {
  background: linear-gradient(90deg, var(--green-500), var(--green-600));
  border:none; color:#eafff4; box-shadow: 0 0 0 rgba(57,255,20,.0);
}
.btn-primary:hover { box-shadow: 0 0 18px rgba(57,255,20,.35); color:#fff; }
.btn-gold { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); color:#1a1200; border:none; }
.btn-danger { background: var(--danger); color:#fff; border:none; }
.btn-sm { padding:6px 10px; font-size:.82rem; }

.pill { padding:6px 12px; border-radius:999px; font-size:.85rem; }
.toggle-group { display:flex; gap:6px; }

input, select, textarea {
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background: var(--surface);
  color: var(--text); font-family:inherit; font-size:.92rem;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color: var(--neon); box-shadow:0 0 0 3px rgba(57,255,20,.15);
}
label { font-size:.85rem; color: var(--text-dim); font-weight:600; display:block; margin-bottom:5px; }
.field { margin-bottom:14px; }
.grid { display:grid; gap:14px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
/* ---- Mobile menu toggle button (hidden on desktop) ---- */
.menu-btn { display:none; background:var(--surface-2); border:1px solid var(--border); color:var(--gold);
  width:42px; height:42px; border-radius:10px; font-size:1.3rem; cursor:pointer; align-items:center; justify-content:center; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9; }

@media(max-width:1024px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }

@media(max-width:820px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .menu-btn{ display:inline-flex; }
  .sidebar{
    position:fixed; z-index:10; top:0; inset-inline-start:0;
    transform:translateX(-105%); transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.6); width:82%; max-width:300px;
  }
  html[dir="rtl"] .sidebar{ transform:translateX(105%); }
  body.nav-open .sidebar{ transform:translateX(0) !important; }
  body.nav-open .sidebar-overlay{ display:block; }
  .topbar{ flex-wrap:wrap; gap:10px; }
  .topbar h1{ font-size:1rem; }
  .toolbar{ gap:6px; }
  .content{ padding:14px; }
  /* tables scroll horizontally instead of breaking layout */
  .card{ overflow-x:auto; }
  table{ min-width:560px; }
  .btn{ padding:8px 12px; font-size:.85rem; }
  .btn-sm{ padding:6px 9px; }
  .stat .value{ font-size:1.4rem; }
  .chart-box{ height:250px; }
}

@media(max-width:480px){
  .topbar .toggle-group .btn{ padding:6px 8px; }
  .topbar h1{ width:100%; order:3; }
  .login-card{ padding:22px; }
  .stat .value{ font-size:1.25rem; }
  table{ font-size:.82rem; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding:18px; margin-bottom:18px;
}
.card h2, .card h3 { margin-top:0; color: var(--gold); font-size:1.05rem; }

.stat {
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius: var(--radius);
  padding:18px; box-shadow: var(--shadow);
}
.stat::after{
  content:''; position:absolute; inset-block-start:-30px; inset-inline-end:-30px;
  width:110px;height:110px;border-radius:50%;
  background: radial-gradient(circle, rgba(57,255,20,.18), transparent 70%);
}
.stat .label { color: var(--text-dim); font-size:.85rem; font-weight:600; }
.stat .value { font-size:1.7rem; font-weight:800; margin-top:6px; color: var(--text); }
.stat .value small { font-size:.8rem; color: var(--gold); font-weight:700; }
.stat.green .value { color: var(--neon); text-shadow:0 0 14px rgba(57,255,20,.25); }
.stat.gold .value { color: var(--gold); }
.stat.cyan .value { color: var(--neon-cyan); }
.stat.danger .value { color: var(--danger); }

/* ---------- Tables ---------- */
table { width:100%; border-collapse:collapse; font-size:.9rem; }
thead th {
  text-align:start; padding:11px 12px; color: var(--gold);
  border-bottom:2px solid var(--border); font-weight:700; white-space:nowrap;
}
tbody td { padding:10px 12px; border-bottom:1px solid var(--border); }
tbody tr:hover { background: rgba(212,175,55,.05); }
tfoot td { padding:11px 12px; font-weight:800; border-top:2px solid var(--gold); color: var(--text); }
.num { font-variant-numeric: tabular-nums; text-align:end; }

.badge { padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.badge.paid { background: rgba(57,255,20,.15); color: var(--neon); }
.badge.unpaid { background: rgba(255,77,109,.15); color: var(--danger); }
.badge.partial { background: rgba(255,183,3,.18); color: var(--warn); }
.badge.void { background: rgba(159,199,180,.15); color: var(--text-dim); }
.badge.role { background: rgba(212,175,55,.15); color: var(--gold); }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card {
  width:100%; max-width:400px; background: var(--surface);
  border:1px solid var(--border); border-radius:18px; padding:32px;
  box-shadow: var(--shadow);
}
.login-logo {
  display:block; width:110px; height:110px; margin:0 auto 14px;
  object-fit:contain; background:#fff; border-radius:20px; padding:10px;
  box-shadow:0 6px 22px rgba(0,0,0,.25);
}
.login-card h1 { text-align:center; font-size:1.25rem; color: var(--gold); margin:0 0 4px; }
.login-card p.sub { text-align:center; color: var(--text-dim); margin:0 0 22px; font-size:.9rem; }

.alert { padding:12px 14px; border-radius:10px; margin-bottom:14px; font-weight:600; font-size:.9rem; }
.alert.error { background: rgba(255,77,109,.12); color: var(--danger); border:1px solid rgba(255,77,109,.3); }
.alert.success { background: rgba(57,255,20,.12); color: var(--neon); border:1px solid rgba(57,255,20,.3); }

.muted { color: var(--text-dim); }
.right { text-align:end; }
.center { text-align:center; }
.flex { display:flex; gap:10px; align-items:center; }
.between { justify-content:space-between; }
.chart-box { position:relative; height:300px; }
hr.sep { border:none; border-top:1px solid var(--border); margin:16px 0; }

/* ---------- Report header (logo) ---------- */
.report-head{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:16px; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--surface-2), var(--surface));
  border:1px solid var(--border);
}
.report-head .report-logo{
  width:64px; height:64px; object-fit:contain; flex-shrink:0;
  background:#fff; border-radius:12px; padding:6px;
}
.report-head .report-company{ flex:1; min-width:180px; }
.report-head .rc-name{ font-size:1.3rem; font-weight:800; color:var(--gold); line-height:1.2; }
.report-head .rc-sub{ font-size:.8rem; color:var(--text-dim); }
.report-head .rc-title{ margin-top:4px; font-size:1rem; font-weight:700; color:var(--neon); }
.report-head .report-meta{ font-size:.8rem; color:var(--text-dim); text-align:end; }

/* ---------- Print ---------- */
@media print {
  .sidebar, .topbar, .no-print, footer, .btn, .sidebar-overlay, .menu-btn { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
  .app, .main, .content { display:block !important; margin:0 !important; padding:0 !important; }
  .card { box-shadow:none; border:1px solid #ccc; break-inside:avoid; overflow:visible !important; }
  table { font-size:.85rem; min-width:0 !important; }
  thead th { color:#000; border-bottom:2px solid #000; }
  tbody td, tfoot td { border-color:#ccc; color:#000; }
  .badge { border:1px solid #999; color:#000 !important; background:#fff !important; }
  .stat .value { color:#000 !important; text-shadow:none !important; }
  /* report header prints in B/W-friendly style */
  .report-head{ background:#fff !important; border:1px solid #000; color:#000 !important; }
  .report-head .rc-name{ color:#000 !important; }
  .report-head .rc-title{ color:#000 !important; }
  .report-head .rc-sub, .report-head .report-meta{ color:#333 !important; }
  .report-head .report-logo{ background:#fff !important; padding:0; width:60px; height:60px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}