/* ==========================================================================
   AnidiOne — Shared Design Tokens & Component Library  (Phase U1)
   --------------------------------------------------------------------------
   Purpose:
     Ek central place jahan par saare design values (colors, spacing, radius,
     shadows, fonts) ek jagah defined hain. Pages dheere-dheere isko use karke
     consistent banenge. Ye file LAST load hoti hai (base.html ke head mein),
     isliye same-specificity rules par ye overrides karti hai — pure additive,
     koi existing page ko todti nahi.
   ========================================================================== */

:root{
  /* Brand */
  --brand:#7C3AED;
  --brand-deep:#5b21b6;
  --brand-accent:#a21caf;
  --brand-soft:#f3e8ff;
  --brand-tint:#ede9fe;

  /* Surfaces */
  --bg:#f7f7fc;
  --surface:#ffffff;
  --surface-muted:#f8f7ff;
  --border:#e6e3f1;
  --border-strong:#dcd7eb;

  /* Text */
  --text:#1e1b4b;
  --text-strong:#1d2445;
  --muted:#7580a0;
  --muted-soft:#8992a8;

  /* Semantic */
  --ok:#15803d;   --ok-bg:#ecfdf5;
  --warn:#a16207; --warn-bg:#fef3c7;
  --danger:#be123c; --danger-bg:#fce7f3;
  --info:#0369a1; --info-bg:#e0f2fe;

  /* Sidebar */
  --sidebar-bg:linear-gradient(160deg,#33217e 0%,#5b21b6 55%,#a21caf 100%);
  --sidebar-text:#b9c1dc;
  --sidebar-active:#292f56;

  /* Radius */
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;

  /* Shadow */
  --shadow-sm:0 4px 12px rgba(30,27,75,.05);
  --shadow:0 10px 30px rgba(32,39,68,.06);
  --shadow-lg:0 18px 40px rgba(30,27,75,.12);

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;

  /* Fonts */
  --font-head:'Sora','Inter',sans-serif;
  --font-body:'Inter',sans-serif;
}

/* --------------------------------------------------------------------------
   Shared Button System  (Phase U3 migration in sab pages use karenge)
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border:1px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:13px;font-weight:700;line-height:1;
  text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand-deep);color:#fff}
.btn-primary:hover{background:#6d28d9;transform:translateY(-1px);box-shadow:0 8px 18px rgba(91,33,182,.22)}
.btn-accent{background:linear-gradient(90deg,var(--brand-deep),var(--brand-accent));color:#fff}
.btn-ghost{background:transparent;color:var(--brand-deep);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--brand);background:var(--brand-tint)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#be123c}
.btn-sm{padding:7px 12px;font-size:12px}

/* --------------------------------------------------------------------------
   Badges  (consistent status indicators)
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;
  line-height:1.4;white-space:nowrap;
}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-neutral{background:var(--border);color:var(--text)}

/* --------------------------------------------------------------------------
   Card  (shared)
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--space-6);
  box-shadow:var(--shadow);margin-bottom:var(--space-5);
}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.card-heading h2{margin:0;color:var(--text-strong);font-size:20px;font-family:var(--font-head)}
.card-eyebrow{margin:0 0 4px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}

/* --------------------------------------------------------------------------
   Portal shell rebuilt on tokens (matches current look, now via variables)
   -------------------------------------------------------------------------- */
.portal-page{background:var(--bg)!important;color:var(--text)}
.portal-page .portal-sidebar{background:var(--sidebar-bg)}
.portal-page .portal-brand-mark{background:#f06b5b}
.portal-page .portal-school-name{color:#fff}
.portal-nav a:hover,.portal-nav a.active{background:var(--sidebar-active);color:#fff}
.portal-nav-group{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 20px);margin:14px 10px 4px;padding:6px 8px;background:none;border:0;border-radius:8px;color:#697396;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.portal-nav .portal-nav-group:first-child{margin-top:0}
.portal-nav-group{cursor:pointer;transition:color .15s ease,background .15s ease}
.portal-nav-group:hover{color:var(--text,#202744);background:rgba(124,58,237,.06)}
.portal-nav-group .chev{font-size:8px;line-height:1;transition:transform .2s ease}
.portal-nav-group.open .chev{transform:rotate(180deg)}
/* Nav groups collapse by default and expand when the group button gains
   `.open` (that is the class the toggle script and the auto-open-on-load
   script both set). The previous rule set collapsed on `.collapsed`, a class
   nothing ever added, so every group stayed expanded. */
.portal-nav-links{display:flex;max-height:0;overflow:hidden;padding-left:10px;transition:max-height .25s ease}
.portal-nav-links.open{max-height:1400px;overflow:visible;padding-left:10px}
/* Dashboard section headers (numbered groups) */
.dash-sec{display:flex;align-items:center;gap:12px;margin:28px 0 14px;padding-bottom:10px;border-bottom:1px solid #ede9f7}
.dash-sec .dash-sec-num{flex:none;width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,#6d28d9,#9333ea);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.dash-sec h3{margin:0;font-size:15px;color:#241d4f}
.dash-sec p{margin:2px 0 0;font-size:11.5px;color:#7a7f96}
@media(max-width:600px){.dash-sec p{display:none}}
/* Sidebar hide toggle */
.portal-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--border,#e4e8ef);background:#fff;color:#5b21b6;font-size:15px;cursor:pointer;transition:background .15s ease}
.portal-toggle:hover{background:#f3e8ff}
/* Home and history buttons in topbars */
.portal-topbar-actions{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;max-width:100%}
.portal-home-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:34px;height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--border,#e4e8ef);background:#fff;color:#5b21b6;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .15s ease,color .15s ease;text-decoration:none;flex:none}
.portal-home-btn:hover{background:#f3e8ff;color:#4c1d95}
.portal-back-btn{color:#475569}
.portal-back-btn:hover{background:#f1f5f9;color:#1e293b}
.portal-shell.side-hidden .portal-sidebar{display:none}
.portal-shell.side-hidden .portal-main{max-width:100%}
.portal-page .portal-topbar h1{color:var(--text-strong);font-family:var(--font-head)}
.portal-page .portal-card{background:var(--surface);border-color:var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.portal-page .portal-table th{color:var(--muted)}
.portal-page .primary-button,.portal-page button.primary-button{background:var(--brand-deep)}
.portal-page .primary-button:hover{background:#6d28d9}
.portal-page .portal-user-chip{background:#f06b5b}

/* --------------------------------------------------------------------------
   Consistent form fields
   -------------------------------------------------------------------------- */
.input, input[type=text].input,input[type=email].input,input[type=password].input,
input[type=number].input,input[type=search].input,input[type=date].input,select.input,textarea.input{
  width:100%;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:10px 12px;font-family:var(--font-body);font-size:14px;color:var(--text);
  background:var(--surface)}
.input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.input::placeholder{color:var(--muted)}
/* Sidebar collapse toggle */
.portal-collapse-btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;padding:0 10px;border:1px solid var(--border,#e4e8ef);border-radius:9px;background:#fff;color:var(--muted,#7580a0);font-size:14px;cursor:pointer;text-decoration:none;transition:background .15s ease,color .15s ease}
.portal-collapse-btn:hover{background:#f4f5fa;color:var(--text,#202744)}
.portal-collapse-btn .ico-menu{width:16px;height:12px;border-top:2px solid #5b21b6;border-bottom:2px solid #5b21b6;display:inline-block;position:relative}
.portal-collapse-btn .ico-menu::after{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:#5b21b6;transform:translateY(-50%)}
.portal-shell.portal-collapsed .portal-sidebar{display:none}
.portal-shell.portal-collapsed{grid-template-columns:minmax(0,1fr)!important}
.portal-shell.portal-collapsed .portal-main{grid-column:1;max-width:100%}
@media(max-width:900px){.portal-collapse-btn{min-width:30px;min-height:30px}}