/* =========================================================================
   Global Theme (works alongside Bootstrap 4.5)
   ========================================================================= */
:root{
  --brand:#0f6efd;
  --brand-dark:#0a58ca;

  --ink:#0f172a;     /* primary text color */
  --muted:#64748b;   /* secondary text */
  --bg:#f8fafc;      /* page background */
  --card:#ffffff;    /* panel/card background */
  --border:#e5e7eb;  /* subtle borders */

  /* Area colors */
  --x1:#2e8b57;      /* X1 - green */
  --x2:#ffb84d;      /* X2 - amber/orange */
  --x3:#5dade2;      /* X3 - blue */
  --bar:#f1c40f;     /* Section bar (yellow) */
}

/* Base */
html, body{
  background: var(--bg);
  color: var(--ink);
  font-size: 18px;     /* larger, more readable base size */
  line-height: 1.65;
}

/* =========================================================================
   Layout helpers
   ========================================================================= */

/* Center the whole page content within a nice readable max width. */
.app-container{
  max-width: 1280px;          /* adjust: 1140px / 1360px if you prefer */
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem 1rem 4rem;  /* top / sides / bottom spacing */
}

/* Top title/subtitle styling (optional) */
.app-title{
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: .25rem;
}
.app-subnote{
  color: var(--muted);
}

/* Info band (student info panel) */
.info-band{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 6px 24px rgba(2,8,23,.04);
}

/* Section header bar (e.g., 選科（初選） / 數學科語言) */
.section-bar{
  background: var(--bar);
  color: #000;
  font-weight: 700;
  text-align: center;
  padding: .75rem 1rem;
  border-radius: 10px;
}

/* =========================================================================
   Tables / Grids
   ========================================================================= */
.table thead th{
  vertical-align: middle;
}

/* Card-like wrapper around choice tables */
.grid-wrap{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1rem .25rem;
  box-shadow: 0 6px 24px rgba(2,8,23,.04);
}

/* Distinct area headers for X1 / X2 / X3 */
.th-x1{ background: var(--x1) !important; color: #fff !important; }
.th-x2{ background: var(--x2) !important; color: #000 !important; }
.th-x3{ background: var(--x3) !important; color: #fff !important; }

/* Narrower selects that still feel comfortable to click */
.select-compact{
  width: 92px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
   Forms & Buttons
   ========================================================================= */
.form-control{
  font-size: 1.05rem;
  padding: .7rem .9rem;
  border-radius: .6rem;
}

.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Spacing utilities (optional) */
.sp-sm{ margin-top: .75rem; }
.sp-md{ margin-top: 1.25rem; }
.sp-lg{ margin-top: 2rem; }
.sp-xl{ margin-top: 3rem; }