/* ============================================================================
   Alpha Iota – Lite UI (Fluid, Modern, Responsive)
   ----------------------------------------------------------------------------
   - Preserves original color scheme & component names.
   - Improves spacing, legibility, and mobile/tablet behavior.
   - Adds fluid container, responsive header/nav, tables, forms & utilities.
   ============================================================================ */

/* ===== Theme ===== */
:root{
  --bg:#f7fafc;           /* page bg */
  --card:#ffffff;         /* cards */
  --text:#111827;         /* default text */
  --muted:#6b7280;        /* secondary text */
  --border:#e5e7eb;       /* subtle borders */

  --primary:#1f7ae0;      /* brand blue */
  --primary-600:#1565c0;
  --accent:#0ea5e9;       /* light accent */

  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#dc2626;

  --radius:12px;
  --radius-lg:16px;
  --shadow:0 10px 24px rgba(2,6,23,.06);
  --shadow-sm:0 2px 10px rgba(2,6,23,.06);

  --focus:#93c5fd;        /* focus outline color */
}

/* ===== Reset/Basics ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%; height:auto}

/* ===== Container (fluid) ===== */
.container{
  width:100%;
  max-width:min(1200px, 100%);
  margin:28px auto;
  padding:0 20px;
}
.container--tight{ max-width:min(900px, 100%); }
.container--wide{ max-width:min(1400px, 100%); }

/* ===== Topbar / Header ===== */
.topbar-wrap{
  background:linear-gradient(180deg,#0b3a6c 0%, #0d427a 100%);
  color:#fff; position:sticky; top:0; z-index:50;
}
.topbar{
  max-width:min(1200px, 100%);
  margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:16px;
}
.brand{ text-decoration:none; color:#fff; display:flex; align-items:center; gap:10px; }
.brand .logo{
  width:36px;height:36px;border-radius:10px; display:grid; place-items:center;
  background:#ffffff14; color:#fff; border:1px solid #ffffff33; font-size:18px;
}
.brand b{ font-size:18px; letter-spacing:.2px; white-space:nowrap; }

/* Responsive Nav */
.nav{ margin-left:auto; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.nav a{ color:#e5ecf7; text-decoration:none; font-weight:500; }
.nav a:hover{ color:#fff; text-decoration:underline; }
.hello{ opacity:.9; color:#eaf2ff; }

.menu-toggle{
  display:none; margin-left:auto; appearance:none; border:1px solid #ffffff33;
  color:#fff; background:#ffffff14; border-radius:10px; padding:8px 10px; cursor:pointer;
}
.menu-toggle:focus{ outline:3px solid #fff; outline-offset:2px; }
.menu-toggle .lines{ width:20px; height:14px; position:relative; display:inline-block; }
.menu-toggle .lines::before,
.menu-toggle .lines::after,
.menu-toggle .lines span{
  content:""; position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px;
}
.menu-toggle .lines span{ top:6px; }
.menu-toggle .lines::before{ top:0; }
.menu-toggle .lines::after{ bottom:0; }

/* Collapsing behavior */
@media (max-width: 980px){
  .topbar{ flex-wrap:wrap; }
  .menu-toggle{ display:inline-flex; align-items:center; gap:8px; }
  .nav{
    display:none; width:100%;
    padding-top:12px; margin-top:12px; border-top:1px solid #ffffff33;
  }
  .nav.open{ display:grid; grid-template-columns:repeat(2, minmax(120px,1fr)); gap:12px; }
  .nav a,.hello{ display:block; padding:8px 0; }
}
@media (max-width:560px){
  .nav.open{ grid-template-columns:1fr; }
}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-header{ padding:16px 18px; border-bottom:1px solid var(--border); font-weight:700; }
.card-body{ padding:18px; }
.card + .card{ margin-top:14px; }

/* ===== Buttons & Links ===== */
.btn{
  appearance:none; border:1px solid transparent; border-radius:10px;
  padding:10px 14px; background:var(--primary); color:#fff;
  font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ background:var(--primary-600); }
.btn:focus{ outline:3px solid var(--focus); outline-offset:2px; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn.secondary{ background:#111827; color:#fff; }
.btn-outline{ background:#fff; color:var(--primary); border-color:var(--primary); }
.btn-outline:hover{ color:#fff; background:var(--primary); }
.btn-ghost{ background:#fff; color:var(--primary); border:1px solid #cbd5e1; }
.btn-ghost:hover{ color:var(--primary-600); border-color:var(--primary-600); }
.btn-danger{ background:var(--danger); }
.btn-danger:hover{ filter:brightness(.95); }
.btn-sm{ padding:7px 10px; font-size:.92rem; }

.link{ color:var(--primary); text-decoration:none; font-weight:600; }
.link:hover{ text-decoration:underline; }

/* ===== Forms ===== */
label{ font-size:13px; color:var(--muted); display:block; margin:6px 0 6px; font-weight:700; }
.input, select, textarea{
  width:100%; padding:11px 12px; border:1px solid var(--border);
  border-radius:10px; background:#fff; color:var(--text);
}
textarea{ resize:vertical; min-height:90px; }
.input:focus, select:focus, textarea:focus{
  outline:none; border-color:#bfdbfe; box-shadow:0 0 0 3px #dbeafe;
}
.form-row{ display:grid; gap:12px; grid-template-columns:repeat(12,1fr); }
.form-col-6{ grid-column:span 6; } .form-col-4{ grid-column:span 4; } .form-col-3{ grid-column:span 3; }
@media (max-width:900px){ .form-col-6,.form-col-4,.form-col-3{ grid-column:1/-1; } }

/* Hints & Alerts */
.hint{ font-size:12px; color:var(--muted); margin-top:6px; }
.alert{
  padding:12px 14px; border-radius:12px; font-size:14px; border:1px solid;
  background:#f8fafc; border-color:#e2e8f0; color:#1f2937;
}
.alert.ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.alert.bad{ background:#fef2f2; color:#7f1d1d; border-color:#fecaca; }
.alert.warn{ background:#fff7ed; color:#7c2d12; border-color:#fed7aa; }

/* ===== Tables ===== */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{
  padding:12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top;
}
.table thead th{ background:#f8fafc; font-weight:700; position:sticky; top:0; z-index:1; }

.table-hover tbody tr:hover td{ background:#f9fafb; }
.table-striped tbody tr:nth-child(odd) td{ background:#fbfdff; }

.table-responsive{ overflow:auto; border-radius:12px; }

/* Stack tables at small screens (use data-label on <td>) */
@media (max-width:760px){
  .table.stack thead{ display:none; }
  .table.stack, .table.stack tbody, .table.stack tr, .table.stack td{ display:block; width:100%; }
  .table.stack tr{
    background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow-sm); padding:8px; margin-bottom:12px;
  }
  .table.stack td{ border:none; padding:8px; }
  .table.stack td::before{
    content:attr(data-label); display:block; font-size:12px; color:#64748b;
    margin-bottom:4px; text-transform:uppercase; letter-spacing:.02em; font-weight:700;
  }
}

/* ===== Badges / Pills ===== */
.badge,
.pill{
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; display:inline-block;
}
.badge.gray, .pill.gray{ background:#f3f4f6; color:#374151; }
.badge.green, .pill.good{ background:#dcfce7; color:#065f46; }
.badge.amber, .pill.warn{ background:#fef3c7; color:#92400e; }
.badge.red{ background:#fee2e2; color:#991b1b; }

/* ===== Progress bar ===== */
.progress{ height:10px; background:#e6eefb; border-radius:999px; overflow:hidden; }
.progress > span{ display:block; height:10px; background:#4ade80; transition:width .25s ease; }

/* ===== Grid utilities ===== */
.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1000px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
}

/* ===== Tiles (quick-action cards) ===== */
.tile{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm);
  text-decoration:none; color:var(--text); transition:transform .2s, box-shadow .2s, border-color .2s;
}
.tile:hover{ border-color:#d6dbe5; box-shadow:0 8px 20px rgba(2,6,23,.08); transform:translateY(-1px); }
.tile .icon{
  width:36px; height:36px; border-radius:10px; background:#e8f2ff; color:#0b56b3;
  display:grid; place-items:center; font-weight:700;
}

/* ===== Hero / Landing ===== */
.hero{ background:linear-gradient(180deg,#0b3a6a 0%, #0b3a6a 70%, transparent 70%); color:#fff; margin-bottom:24px; }
.hero__inner{ max-width:min(1200px,100%); margin:0 auto; padding:36px 20px 64px; }
.hero__title{ margin:0; font-size:28px; font-weight:800; letter-spacing:.2px; }
.hero__tagline{ margin:8px 0 0; color:#e2e8f0; }

.landing__heading{ margin:-40px auto 16px; text-align:center; font-size:20px; color:#0b3a6a; }

/* Categories & Course Rows */
.category-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; margin:14px 0; box-shadow:0 8px 24px rgba(2,6,23,.04);
  transition:transform .25s, box-shadow .25s; cursor:pointer;
}
.category-card:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(2,6,23,.08); }
.category-card__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.category-card__title{ font-size:18px; color:var(--text); margin:0; }
.category-card .chev{ color:var(--muted); }

.course-list{ display:none; margin-top:10px; }
.course-empty{ color:var(--muted); padding:6px 2px; }

.course-row{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  border-top:1px dashed var(--border); padding:10px 0;
}
.course-row:first-child{ border-top:none; }
.course-row__info{ min-width:0; }
.course-row__title{ font-weight:800; color:var(--text); }
.course-row__desc{ font-size:13px; color:var(--muted); margin-top:2px; }
.course-row__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Info band & features */
.info-band{ background:#eaf1f8; padding:28px 0; margin:18px 0; }
.info-band .container{ text-align:center; }
.info-band h3{ margin:0 0 6px; color:#0b3a6a; }
.info-band p{ margin:0 auto; max-width:800px; color:#var(--muted); }

.features{ padding-bottom:24px; }
.features .feature{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:16px; text-align:center; box-shadow:var(--shadow-sm);
}
.feature__icon{ font-size:32px; }
.feature__title{ margin:6px 0; color:var(--text); font-weight:800; }
.feature__text{ color:var(--muted); font-size:14px; }

/* ===== Footer ===== */
.footer{ color:var(--muted); font-size:13px; padding:24px 0; text-align:center; }

/* ===== Utilities ===== */
.center{ display:flex; justify-content:center; align-items:center; }
.m0{ margin:0; }
.mt8{ margin-top:8px; }
.mt12{ margin-top:12px; }
.mt16{ margin-top:16px; }
.mb8{ margin-bottom:8px; }
.mb12{ margin-bottom:12px; }
.mb16{ margin-bottom:16px; }
.p16{ padding:16px; }
.hidden{ display:none !important; }
.nowrap{ white-space:nowrap; }
.break{ word-break:break-word; overflow-wrap:anywhere; }

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Small helpers used across pages ===== */
.delimiter{ display:none; } /* phpMyAdmin delimiter placeholder in screenshots */

/* Progress mini-bar used in admin progress table */
.bar{ height:8px; border-radius:6px; background:#eef2ff; overflow:hidden; max-width:180px; margin-top:6px; }
.bar > span{ display:block; height:8px; width:var(--w,0%); background:#4ade80; transition:width .25s ease; }

/* Make anchor tap targets comfy on touch */
a, .btn, button, input, select, textarea{ -webkit-tap-highlight-color:transparent; }