/* =========================================================
   ADMISSION BABA — DESIGN SYSTEM
   Theme: "Official Ledger" — deep ink navy + marigold seal accent,
   paper-toned surfaces, stamp/seal motifs for verification states.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  /* --- Core palette --- */
  --ink-950:#0B1120;
  --ink-900:#101A33;
  --ink-800:#182444;
  --ink-700:#233158;
  --ink-500:#4A5A8C;

  --brand-600:#2F45D6;
  --brand-500:#4C63F0;
  --brand-100:#E7EAFD;

  --marigold-600:#D98826;
  --marigold-500:#F2A93B;
  --marigold-100:#FDF0DB;

  --emerald-600:#0E8F63;
  --emerald-100:#DFF6EB;

  --rose-600:#D93A4B;
  --rose-100:#FBE3E4;

  --paper:#F7F5F0;
  --paper-dim:#F1EEE5;
  --surface:#FFFFFF;
  --line:#E7E3D8;
  --line-soft:#EFEBE1;

  --text-900:#161B2E;
  --text-600:#585F78;
  --text-400:#8A90A6;

  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-soft:0 2px 10px rgba(16,26,51,0.05), 0 1px 2px rgba(16,26,51,0.04);
  --shadow-lift:0 18px 40px -14px rgba(16,26,51,0.28);
  --font-display:'Lexend', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text-900);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); letter-spacing:-0.01em; color:var(--ink-900); }

a{ text-decoration:none; }

/* subtle grain/paper texture overlay */
.paper-bg{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(16,26,51,0.035) 1px, transparent 0);
  background-size:22px 22px;
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#D8D4C7; border-radius:10px; }
::-webkit-scrollbar-track{ background:transparent; }

/* =========================================================
   BRAND MARK
   ========================================================= */
.ab-brand{
  display:flex; align-items:center; gap:10px;
}
.ab-brand .mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(145deg, var(--marigold-500), var(--marigold-600));
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-950); font-family:var(--font-display); font-weight:800; font-size:16px;
  box-shadow:0 4px 10px rgba(242,169,59,0.35);
  flex-shrink:0;
}
.ab-brand .word{ font-family:var(--font-display); font-weight:700; letter-spacing:0.01em; line-height:1.1; }
.ab-brand .word small{ display:block; font-family:var(--font-body); font-weight:600; font-size:10px; letter-spacing:0.12em; opacity:0.65; }

/* =========================================================
   SIDEBAR
   ========================================================= */
.app-sidebar{
  width:264px; height:100vh; position:fixed; left:0; top:0; z-index:1050;
  background:
    radial-gradient(1200px 400px at -10% -10%, rgba(76,99,240,0.18), transparent 60%),
    linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
  color:#C7CCE0;
  display:flex; flex-direction:column;
  transition:left .3s ease;
  border-right:1px solid rgba(255,255,255,0.06);
}
.app-sidebar .sb-head{
  padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.app-sidebar .sb-badge{
  margin-top:10px; display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.14em;
  color:var(--marigold-500); background:rgba(242,169,59,0.12); border:1px solid rgba(242,169,59,0.3);
  padding:4px 10px; border-radius:100px;
}
.app-sidebar .sb-nav{ padding:14px 12px; flex:1; overflow-y:auto; }
.app-sidebar .sb-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; margin-bottom:3px; border-radius:10px;
  color:#AEB4CC; font-weight:500; font-size:14.5px;
  border-left:3px solid transparent;
  cursor:pointer; transition:.18s ease;
}
.app-sidebar .sb-link i{ width:18px; text-align:center; font-size:15px; opacity:0.85; }
.app-sidebar .sb-link:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.app-sidebar .sb-link.active{
  background:linear-gradient(90deg, rgba(242,169,59,0.16), rgba(242,169,59,0.03));
  color:#fff; border-left-color:var(--marigold-500);
}
.app-sidebar .sb-foot{ padding:16px 14px 22px; border-top:1px solid rgba(255,255,255,0.08); }
.app-sidebar .sb-logout{
  display:flex; align-items:center; gap:10px; color:#F1A2A9; font-weight:600; font-size:14px;
  padding:10px 14px; border-radius:10px; transition:.18s;
}
.app-sidebar .sb-logout:hover{ background:rgba(217,58,75,0.15); color:#fff; }

.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(11,17,32,0.55); z-index:1040;
  backdrop-filter:blur(2px);
}
.sidebar-overlay.active{ display:block; }

/* =========================================================
   MAIN SHELL / TOPBAR
   ========================================================= */
.app-main{ margin-left:264px; min-height:100vh; transition:.3s; }
.app-topbar{
  background:var(--surface); padding:14px 26px; border-bottom:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:1000;
}
.app-topbar .page-heading{ font-family:var(--font-display); font-weight:700; font-size:19px; margin:0; }
.app-topbar .page-heading .eyebrow{
  display:block; font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:0.1em;
  color:var(--text-400); text-transform:uppercase; margin-bottom:2px;
}
#menu-toggle{ font-size:19px; cursor:pointer; display:none; color:var(--ink-900); }
.topbar-profile{ display:flex; align-items:center; gap:10px; }
.topbar-profile .avatar-chip{
  width:38px; height:38px; border-radius:10px; background:var(--ink-900); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
}
.app-content{ padding:26px; max-width:1400px; }

@media (max-width:992px){
  .app-sidebar{ left:-280px; }
  .app-sidebar.active{ left:0; }
  .app-main{ margin-left:0; }
  #menu-toggle{ display:block; }
  .app-content{ padding:18px; }
}

/* =========================================================
   CARDS
   ========================================================= */
.panel-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.panel-card .panel-card-head{
  padding:18px 22px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.panel-card .panel-card-head h5{ margin:0; font-size:16px; font-weight:700; display:flex; align-items:center; gap:9px; }
.panel-card .panel-card-body{ padding:22px; }

.stat-card{
  border-radius:var(--radius-lg); padding:20px 22px; position:relative; overflow:hidden;
  border:1px solid var(--line-soft); background:var(--surface); box-shadow:var(--shadow-soft);
}
.stat-card .stat-icon{
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:17px; margin-bottom:14px;
}
.stat-card .stat-label{ font-size:11.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-400); }
.stat-card .stat-value{ font-family:var(--font-display); font-size:32px; font-weight:800; margin-top:2px; color:var(--ink-900); }
.stat-card.tone-brand .stat-icon{ background:var(--brand-100); color:var(--brand-600); }
.stat-card.tone-marigold .stat-icon{ background:var(--marigold-100); color:var(--marigold-600); }
.stat-card.tone-emerald .stat-icon{ background:var(--emerald-100); color:var(--emerald-600); }
.stat-card.tone-rose .stat-icon{ background:var(--rose-100); color:var(--rose-600); }
.stat-card::after{
  content:''; position:absolute; right:-24px; bottom:-24px; width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle, rgba(16,26,51,0.03), transparent 70%);
}

/* Dark hero stat variant (for admin overview headline cards) */
.stat-card.dark{
  background:linear-gradient(150deg, var(--ink-900), var(--ink-800));
  border:none; color:#fff;
}
.stat-card.dark .stat-label{ color:rgba(255,255,255,0.55); }
.stat-card.dark .stat-value{ color:#fff; }
.stat-card.dark .stat-icon{ background:rgba(255,255,255,0.1); color:var(--marigold-500); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{ font-family:var(--font-body); font-weight:600; border-radius:10px; }
.btn-brand{
  background:var(--ink-900); border:1px solid var(--ink-900); color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,0.05);
}
.btn-brand:hover{ background:var(--ink-800); color:#fff; }
.btn-marigold{
  background:var(--marigold-500); border:1px solid var(--marigold-600); color:var(--ink-950); font-weight:700;
}
.btn-marigold:hover{ background:var(--marigold-600); color:var(--ink-950); }
.btn-outline-ink{ border:1.5px solid var(--line); color:var(--text-900); background:#fff; }
.btn-outline-ink:hover{ border-color:var(--ink-900); background:var(--paper-dim); color:var(--ink-900); }
.btn-soft-rose{ background:var(--rose-100); color:var(--rose-600); border:1px solid transparent; font-weight:700; }
.btn-soft-rose:hover{ background:#f7c8cc; color:var(--rose-600); }
.btn-soft-emerald{ background:var(--emerald-100); color:var(--emerald-600); border:1px solid transparent; font-weight:700; }

/* =========================================================
   BADGES / STATUS SEALS
   ========================================================= */
.seal{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  letter-spacing:0.06em; text-transform:uppercase; padding:6px 12px; border-radius:100px;
  border:1px solid transparent;
}
.seal::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.seal-approved{ background:var(--emerald-100); color:var(--emerald-600); border-color:rgba(14,143,99,0.18); }
.seal-pending{ background:var(--marigold-100); color:var(--marigold-600); border-color:rgba(217,136,38,0.2); }
.seal-rejected{ background:var(--rose-100); color:var(--rose-600); border-color:rgba(217,58,75,0.18); }
.seal-open{ background:var(--emerald-100); color:var(--emerald-600); }
.seal-closed{ background:var(--rose-100); color:var(--rose-600); }

/* =========================================================
   FORMS
   ========================================================= */
label.form-label{ font-weight:600; font-size:13px; color:var(--text-600); margin-bottom:6px; }
.form-control, .form-select{
  border:1.5px solid var(--line); border-radius:10px; padding:10px 13px; font-size:14.5px;
  background:#fff; color:var(--text-900);
}
.form-control:focus, .form-select:focus{
  border-color:var(--brand-500); box-shadow:0 0 0 4px var(--brand-100); outline:none;
}
.form-control::placeholder{ color:var(--text-400); }

/* =========================================================
   TABLES
   ========================================================= */
.table-clean thead{ background:var(--paper-dim); }
.table-clean thead th{
  font-size:10.5px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-400);
  border-bottom:none; padding:13px 16px;
}
.table-clean tbody td{ padding:14px 16px; border-color:var(--line-soft); vertical-align:middle; }
.table-clean tbody tr:hover{ background:var(--paper-dim); }

/* =========================================================
   LOGIN
   ========================================================= */
.login-shell{ min-height:100vh; display:flex; }
.login-visual{
  flex:1.05; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  padding:48px; color:#fff;
  background:
    radial-gradient(700px 500px at 100% 0%, rgba(242,169,59,0.22), transparent 55%),
    radial-gradient(600px 500px at 0% 100%, rgba(76,99,240,0.28), transparent 55%),
    linear-gradient(160deg, var(--ink-950), var(--ink-900));
}
.login-visual .seal-ring{
  width:180px; height:180px; border-radius:50%; border:2px dashed rgba(242,169,59,0.55);
  display:flex; align-items:center; justify-content:center; margin:auto;
}
.login-visual .seal-ring .seal-core{
  width:132px; height:132px; border-radius:50%; background:linear-gradient(150deg, var(--marigold-500), var(--marigold-600));
  display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-950);
  font-family:var(--font-display); font-weight:800; font-size:13px; line-height:1.3; padding:10px;
  box-shadow:0 20px 40px -10px rgba(242,169,59,0.4);
}
.login-form-side{
  flex:1; display:flex; align-items:center; justify-content:center; background:var(--paper); padding:32px;
}
.login-card{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:20px; padding:38px 34px; box-shadow:var(--shadow-lift);
}
@media (max-width:900px){ .login-visual{ display:none; } }

/* =========================================================
   ID CARD — perforated ticket-stub motif
   ========================================================= */
.idcard-wrap{ display:flex; justify-content:center; align-items:center; min-height:100vh; padding:40px 16px; background:var(--paper); }
.idcard{
  width:360px; background:var(--surface); border-radius:18px; overflow:visible; position:relative;
  box-shadow:var(--shadow-lift); border:1px solid var(--line-soft);
}
.idcard .idc-head{
  background:linear-gradient(135deg, var(--ink-950), var(--ink-800));
  color:#fff; padding:22px 18px 34px; text-align:center; border-radius:18px 18px 0 0; position:relative;
}
.idcard .idc-head h2{ color:#fff; margin:0; font-size:17px; letter-spacing:0.03em; }
.idcard .idc-head p{ margin:5px 0 0; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--marigold-500); font-weight:700; }
.idcard .idc-photo{ text-align:center; margin-top:-32px; }
.idcard .idc-photo img{
  width:104px; height:124px; object-fit:cover; border-radius:12px; border:4px solid #fff; box-shadow:0 10px 20px rgba(0,0,0,0.15);
}
.idcard .idc-name{ margin-top:10px; font-family:var(--font-display); font-weight:800; color:var(--ink-900); font-size:15px; letter-spacing:0.02em; }
.idcard .idc-details{ padding:18px 24px 6px; }
.idcard .idc-row{ display:flex; justify-content:space-between; font-size:12.5px; padding:6px 0; border-bottom:1px dashed var(--line); color:var(--text-900); }
.idcard .idc-row span.k{ color:var(--text-400); font-weight:600; }
.idcard .idc-perf{
  height:0; border-top:2px dashed var(--line); margin:12px 0 0; position:relative;
}
.idcard .idc-perf::before, .idcard .idc-perf::after{
  content:''; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--paper); border:1px solid var(--line-soft);
}
.idcard .idc-perf::before{ left:-28px; }
.idcard .idc-perf::after{ right:-28px; }
.idcard .idc-foot{ text-align:center; padding:14px 0 20px; }
.idcard .idc-foot img{ width:58px; height:58px; }
.idcard .idc-foot .vtext{ font-size:9px; font-weight:800; letter-spacing:0.16em; color:var(--text-400); margin-top:4px; }
.idcard-print-btn{
  position:fixed; top:22px; right:22px; z-index:10;
}

@media print{
  .idcard-print-btn{ display:none; }
  body{ background:#fff; }
  .idcard-wrap{ min-height:auto; padding:0; }
}

/* =========================================================
   STEPPER (New Admission)
   ========================================================= */
.step-nav{ display:flex; gap:6px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:10px; box-shadow:var(--shadow-soft); }
.step-nav .step-item{
  flex:1; text-align:center; font-size:12.5px; font-weight:700; letter-spacing:0.03em; color:var(--text-400);
  padding:10px 8px; border-radius:10px; position:relative;
}
.step-nav .step-item.active{ background:var(--ink-900); color:#fff; }
.step-nav .step-item .num{
  display:inline-flex; width:18px; height:18px; border-radius:50%; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.15); font-size:10px; margin-right:6px;
}
.step-box{ display:none; }
.step-box.active{ display:block; animation:fadeUp .35s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.is-invalid{ border-color:var(--rose-600) !important; box-shadow:0 0 0 3px var(--rose-100) !important; }

/* Empty state */
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-400); }
.empty-state i{ font-size:34px; color:var(--line); margin-bottom:14px; display:block; }

/* Notice ticker */
.notice-ticker{
  background:var(--marigold-100); border:1px solid rgba(217,136,38,0.25); color:var(--marigold-600);
  border-radius:12px; padding:10px 16px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px;
}