/* =====================================================
   AMSAM Portal — Global Design System
   Colors inspired by amsamaiims.in
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap');

:root {
  --cream:         #F4EFE0;
  --cream-dark:    #EDE8D5;
  --cream-darker:  #E4DEC8;
  --navy:          #1A2040;
  --navy-light:    #2d3561;
  --teal:          #009688;
  --teal-dark:     #00796B;
  --teal-light:    #4DB6AC;
  --teal-pale:     #E0F2F1;
  --gold:          #E6B800;
  --gold-dark:     #C8A000;
  --gold-pale:     #FFF8DC;
  --white:         #FFFFFF;
  --text-primary:  #1A2040;
  --text-secondary:#4A5568;
  --text-muted:    #718096;
  --border:        #DDD8C5;
  --border-light:  #EDE8D8;
  --success:       #22c55e;
  --error:         #ef4444;
  --warning:       #f59e0b;
  --shadow-sm: 0 2px 8px rgba(26,32,64,.08);
  --shadow-md: 0 4px 20px rgba(26,32,64,.12);
  --shadow-lg: 0 8px 40px rgba(26,32,64,.18);
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;
  --transition:  all .2s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb { background: var(--teal-light); border-radius: 3px; }

/* ── NAVBAR ────────────────────────────────────── */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center;
  height: 68px; gap: 1.5rem;
}
.nav-brand {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; flex-shrink: 0;
}
.nav-logo-circle {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #1a2040 0%, #009688 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; color: #fff;
  letter-spacing: .05em; flex-shrink: 0;
}
.nav-brand-info { display: flex; flex-direction: column; }
.nav-brand-name { font-weight: 800; font-size: 1rem; color: var(--navy); letter-spacing:.05em; }
.nav-brand-sub  { font-size: .6rem; color: var(--text-muted); line-height:1.2; }

.nav-links { display:flex; align-items:center; gap:.4rem; list-style:none; flex:1; }
.nav-link {
  padding: .45rem 1.1rem; border-radius: var(--radius-pill);
  text-decoration: none; color: var(--text-primary);
  font-size: .88rem; font-weight: 500;
  border: 1.5px solid transparent;
  transition: var(--transition); cursor:pointer;
  background: none; font-family: inherit;
}
.nav-link:hover { border-color: var(--border); background: var(--cream); }
.nav-link.active {
  background: var(--gold); color: var(--navy);
  font-weight: 600; border-color: var(--gold);
}

.nav-right { display:flex; align-items:center; gap:.75rem; margin-left:auto; }
.nav-user  { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:500; color:var(--text-secondary); }
.nav-avatar {
  width:34px; height:34px; border-radius:50%;
  background: var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.75rem; overflow:hidden; flex-shrink:0;
  border: 2px solid var(--teal-light);
}
.nav-avatar img { width:100%; height:100%; object-fit:cover; }

/* ── BUTTONS ───────────────────────────────────── */
.btn {
  padding: .6rem 1.4rem; border-radius: var(--radius-pill);
  border: none; cursor: pointer;
  font-family:'Inter',sans-serif; font-size:.9rem; font-weight:500;
  transition: var(--transition);
  display:inline-flex; align-items:center; gap:.45rem;
  text-decoration:none; white-space:nowrap;
}
.btn-primary { background:var(--teal); color:#fff; }
.btn-primary:hover { background:var(--teal-dark); transform:translateY(-1px); box-shadow:0 4px 15px rgba(0,150,136,.3); }
.btn-secondary { background:transparent; color:var(--navy); border:1.5px solid var(--border); }
.btn-secondary:hover { background:var(--cream-dark); }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; transform:translateY(-1px); }
.btn-warning { background:var(--gold); color:var(--navy); }
.btn-warning:hover { background:var(--gold-dark); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#16a34a; }
.btn-sm  { padding:.35rem .9rem; font-size:.78rem; }
.btn-lg  { padding:.75rem 2rem; font-size:1rem; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important; }

/* ── CARDS ─────────────────────────────────────── */
.card {
  background:var(--white); border-radius:var(--radius-md);
  border:1px solid var(--border-light); box-shadow:var(--shadow-sm); overflow:hidden;
}
.card-header {
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:space-between;
}
.card-title { font-size:1rem; font-weight:600; color:var(--navy); }
.card-body  { padding:1.4rem; }

/* ── FORMS ─────────────────────────────────────── */
.form-group  { margin-bottom:1.1rem; }
.form-label  { display:block; font-size:.82rem; font-weight:500; color:var(--text-secondary); margin-bottom:.35rem; }
.form-control {
  width:100%; padding:.65rem 1rem;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-family:'Inter',sans-serif; font-size:.9rem; color:var(--text-primary);
  background:var(--white); transition:var(--transition); outline:none;
}
.form-control:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,150,136,.12); }
.form-control::placeholder { color:var(--text-muted); }
textarea.form-control { resize:vertical; min-height:90px; }

/* ── BADGES ────────────────────────────────────── */
.badge {
  padding:.25rem .7rem; border-radius:var(--radius-pill);
  font-size:.72rem; font-weight:600; display:inline-flex; align-items:center; gap:.3rem;
}
.badge-admin   { background:#FEF3C7; color:#92400E; }
.badge-subadmin{ background:#EDE9FE; color:#5B21B6; }
.badge-student { background:var(--teal-pale); color:var(--teal-dark); }
.badge-paid    { background:#D1FAE5; color:#065F46; border:1px solid #6EE7B7; }
.badge-unpaid  { background:#FEF3C7; color:#92400E; border:1px solid #FCD34D; }

/* ── MODALS ────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(26,32,64,.45); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto; animation:slideUp .25s ease;
}
.modal-header {
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-title  { font-size:1.05rem; font-weight:700; color:var(--navy); }
.modal-close  { background:none; border:none; cursor:pointer; font-size:1.3rem; color:var(--text-muted); transition:var(--transition); }
.modal-close:hover { color:var(--error); }
.modal-body   { padding:1.5rem; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--border-light); display:flex; gap:.75rem; justify-content:flex-end; }

/* ── TOAST ─────────────────────────────────────── */
.toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }
.toast {
  padding:.75rem 1.25rem; border-radius:var(--radius-sm);
  color:#fff; font-size:.88rem; font-weight:500;
  box-shadow:var(--shadow-md); animation:slideInRight .3s ease;
  max-width:320px; display:flex; align-items:center; gap:.5rem;
}
.toast-success { background:var(--success); }
.toast-error   { background:var(--error); }
.toast-warning { background:var(--warning); }
.toast-info    { background:var(--teal); }

/* ── TABLES ────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border-light); }
table { width:100%; border-collapse:collapse; background:var(--white); }
th { background:var(--navy); color:#fff; padding:.75rem 1rem; font-size:.8rem; font-weight:600; text-align:left; white-space:nowrap; }
td { padding:.75rem 1rem; font-size:.88rem; border-bottom:1px solid var(--border-light); vertical-align:middle; }
tr:hover td { background:var(--cream); }
tr:last-child td { border-bottom:none; }

/* ── TABS ──────────────────────────────────────── */
.tabs { display:flex; gap:.4rem; background:var(--cream-dark); padding:.35rem; border-radius:var(--radius-pill); width:fit-content; }
.tab-btn {
  padding:.5rem 1.4rem; border-radius:var(--radius-pill);
  border:none; background:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:.88rem; font-weight:500;
  color:var(--text-secondary); transition:var(--transition);
}
.tab-btn.active { background:var(--white); color:var(--navy); font-weight:600; box-shadow:var(--shadow-sm); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── DROPDOWN MENUS ────────────────────────────── */
.action-dropdown { position:relative; display:inline-block; }
.dropdown-menu {
  display:none; position:absolute; right:0; top:100%;
  margin-top:.3rem; background:var(--white); min-width:170px;
  border:1px solid var(--border-light); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); z-index:100; padding:.4rem 0;
}
.dropdown-menu.show { display:block; animation:slideUp .2s ease; }
.dropdown-item {
  display:flex; align-items:center; gap:.5rem; width:100%;
  text-align:left; padding:.5rem 1rem; background:none; border:none;
  font-family:'Inter',sans-serif; font-size:.85rem; font-weight:500;
  color:var(--text-primary); cursor:pointer; transition:var(--transition);
}
.dropdown-item:hover { background:var(--cream); color:var(--navy); }
.dropdown-divider { height:1px; background:var(--border-light); margin:.25rem 0; }
.text-danger { color:var(--error) !important; }
.text-danger:hover { background:#FEF2F2 !important; }

/* ── HERO BANNER ───────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color:#fff; padding:2.5rem 2rem; text-align:center;
}
.page-hero h1 { font-size:1.8rem; font-weight:800; margin-bottom:.4rem; }
.page-hero p  { opacity:.75; font-size:.95rem; }

/* ── EMPTY STATE ───────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.empty-state .empty-icon { font-size:2.5rem; margin-bottom:.75rem; }
.empty-state h3 { font-size:1rem; font-weight:600; margin-bottom:.25rem; color:var(--text-secondary); }

/* ── SECTION HEADING ───────────────────────────── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.section-title  { font-size:1.15rem; font-weight:700; color:var(--navy); }

/* ── UTILITY ───────────────────────────────────── */
.page-wrap  { max-width:1100px; margin:0 auto; padding:2rem 1.5rem; }
.grid-2     { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.grid-3     { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.text-muted { color:var(--text-muted); font-size:.85rem; }
.mt-1 { margin-top:.5rem; }  .mt-2 { margin-top:1rem; }  .mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.5rem; } .mb-2 { margin-bottom:1rem; } .mb-3 { margin-bottom:1.5rem; }
.gap-1 { gap:.5rem; } .gap-2 { gap:1rem; }
.w-full { width:100%; }
hr.divider { border:none; border-top:1px solid var(--border-light); margin:1.25rem 0; }

/* ── FOOTER ────────────────────────────────────── */
.footer {
  background:var(--navy); color:rgba(255,255,255,.6);
  text-align:center; padding:1.25rem; font-size:.8rem; margin-top:auto;
}
.footer strong { color:var(--teal-light); }

/* ── ANIMATIONS ────────────────────────────────── */
@keyframes slideUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes spin       { to{transform:rotate(360deg)} }
.animate-in { animation:slideUp .3s ease; }

/* ── LOADER ────────────────────────────────────── */
.spinner {
  width:28px; height:28px; border:3px solid var(--border);
  border-top-color:var(--teal); border-radius:50%;
  animation:spin .7s linear infinite; display:inline-block;
}
.page-loader { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:200px; gap:1rem; color:var(--text-muted); }

@media(max-width:768px) {
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .navbar { padding:0 1rem; }
  .page-wrap { padding:1.25rem 1rem; }
  .nav-brand-sub { display:none; }
  .nav-links { gap:.2rem; }
  .nav-link { padding:.4rem .8rem; font-size:.8rem; }
}