/* ==========================================================================
   Girls' Cadet College Quetta - admissions portal
   Every rule here is scoped to .gccq-app, the wrapper around the portal
   pages, so that these styles and the website styles in style.css cannot
   overwrite each other. Add new portal rules inside that scope.
   ========================================================================== */

.gccq-app {
  --green-900: #06301c;
  --green-700: #0e5a34;
  --green-600: #157246;
  --green-100: #e3efe7;
  --gold:      #b8862c;
  --paper:     #f7f7f2;
  --card:      #ffffff;
  --ink:       #16231c;
  --ink-soft:  #4d5c53;
  --rule:      #d7ded8;
  --alert:     #a4232b;
  --alert-bg:  #fbeceb;
  --ok:        #16704a;

  --radius: 4px;
  --shadow: 0 1px 2px rgba(6, 48, 28, .08), 0 8px 24px -16px rgba(6, 48, 28, .35);
  --measure: 68ch;
}
body { margin: 0; background: var(--paper, #f7f7f2); }

.gccq-app *, .gccq-app *::before, .gccq-app *::after { box-sizing: border-box; }
.gccq-app { -webkit-text-size-adjust: 100%; }
.gccq-app {
  color: var(--ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.gccq-app h1, .gccq-app h2, .gccq-app h3, .gccq-app h4, .gccq-app legend, .gccq-app .banner, .gccq-app .brand-name {
  font-family: Bitter, Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.gccq-app h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: 0 0 .4em; }
.gccq-app h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
.gccq-app h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
.gccq-app p { max-width: var(--measure); }
.gccq-app a { color: var(--green-700); text-underline-offset: 3px; }
.gccq-app a:hover { color: var(--green-900); }
.gccq-app :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.gccq-app .skip-link {
  position: absolute; left: -999px;
  background: var(--green-900); color: #fff; padding: .6rem 1rem;
}
.gccq-app .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; }
/* --- masthead ------------------------------------------------------------ */
.gccq-app .masthead {
  background: var(--green-900);
  color: #fff;
  border-bottom: 4px solid var(--gold);
}
.gccq-app .masthead-inner {
  max-width: 1180px; margin: 0 auto; padding: .9rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.gccq-app .crest {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--gold); color: var(--green-900);
  display: grid; place-items: center;
  font-family: Bitter, serif; font-weight: 700; font-size: .85rem;
}
.gccq-app .brand-name { font-size: 1.15rem; margin: 0; color: #fff; }
.gccq-app .brand-sub { margin: 0; font-size: .8rem; color: #b9d2c3; }
.gccq-app .masthead nav { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.gccq-app .masthead nav a { color: #d8e8de; text-decoration: none; font-size: .92rem; }
.gccq-app .masthead nav a:hover, .gccq-app .masthead nav a[aria-current="page"] { color: #fff; text-decoration: underline; }
/* --- shell --------------------------------------------------------------- */
.gccq-app .shell { max-width: 1180px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.gccq-app .shell-narrow { max-width: 860px; }
.gccq-app .layout {
  display: grid; gap: 2.5rem;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {.gccq-app .layout { grid-template-columns: minmax(0, 1fr); }}
.gccq-app .stepnav { position: sticky; top: 1.5rem; font-size: .9rem; }
@media (max-width: 900px) {.gccq-app .stepnav { position: static; }}
.gccq-app .stepnav ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.gccq-app .stepnav li { counter-increment: step; border-left: 2px solid var(--rule); }
.gccq-app .stepnav a {
  display: block; padding: .5rem .8rem; text-decoration: none; color: var(--ink-soft);
}
.gccq-app .stepnav a::before { content: counter(step) ". "; color: var(--gold); font-weight: 600; }
.gccq-app .stepnav a:hover { background: var(--green-100); color: var(--green-900); }
/* --- the green section banner, straight from the printed form ------------ */
.gccq-app .banner {
  background: linear-gradient(180deg, var(--green-600), var(--green-700));
  color: #fff;
  padding: .55rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--green-900);
  font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.gccq-app .banner small { font-weight: 400; font-family: Inter, sans-serif; font-size: .78rem; color: #c9e3d4; }
.gccq-app .card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.gccq-app fieldset.section { border: 0; padding: 0; margin: 0 0 2.5rem; }
.gccq-app fieldset.section > .card { margin-top: .9rem; }
/* --- fields -------------------------------------------------------------- */
.gccq-app .field { margin-bottom: 1.35rem; }
.gccq-app .field > label, .gccq-app .field > .label {
  display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem;
}
.gccq-app .field .num { color: var(--gold); font-weight: 700; margin-right: .35rem; }
.gccq-app .help { font-size: .84rem; color: var(--ink-soft); margin: .25rem 0 0; max-width: var(--measure); }
.gccq-app input[type=text], .gccq-app input[type=email], .gccq-app input[type=tel], .gccq-app input[type=number], .gccq-app input[type=date], .gccq-app input[type=password], .gccq-app input[type=file], .gccq-app select, .gccq-app textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid #b9c3bc;
  border-radius: var(--radius);
}
.gccq-app textarea { min-height: 5.5rem; resize: vertical; }
.gccq-app input:focus, .gccq-app select:focus, .gccq-app textarea:focus { border-color: var(--green-600); }
.gccq-app input[aria-invalid="true"], .gccq-app select[aria-invalid="true"], .gccq-app textarea[aria-invalid="true"] {
  border-color: var(--alert); background: var(--alert-bg);
}
/* character-grid inputs, echoing the boxes on the paper form */
.gccq-app .boxed {
  font-family: "Courier New", ui-monospace, monospace;
  letter-spacing: .55em;
  font-size: 1.05rem;
  background-image: repeating-linear-gradient(90deg, transparent 0 1.72ch, #cdd6cf 1.72ch 1.75ch);
  background-position: .7rem 0;
}
.gccq-app .grid { display: grid; gap: 1.1rem; }
.gccq-app .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gccq-app .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gccq-app .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {.gccq-app .grid-2, .gccq-app .grid-3, .gccq-app .grid-4 { grid-template-columns: minmax(0, 1fr); }}
.gccq-app .choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.gccq-app .choice {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid #b9c3bc; border-radius: var(--radius);
  padding: .45rem .8rem; background: #fff; cursor: pointer; font-size: .95rem;
}
.gccq-app .choice:hover { border-color: var(--green-600); }
.gccq-app .choice input { accent-color: var(--green-700); }
.gccq-app .choice:has(input:checked) { border-color: var(--green-700); background: var(--green-100); font-weight: 600; }
.gccq-app .check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1rem; }
.gccq-app .check input { margin-top: .35rem; accent-color: var(--green-700); }
.gccq-app .check label { font-size: .95rem; max-width: var(--measure); }
.gccq-app .error { color: var(--alert); font-size: .85rem; margin: .3rem 0 0; font-weight: 500; }
.gccq-app .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* --- upload rows --------------------------------------------------------- */
.gccq-app .uploads { display: grid; gap: .9rem; }
.gccq-app .upload {
  display: grid; gap: .4rem .9rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  padding: .9rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fcfdfc;
}
@media (max-width: 720px) {.gccq-app .upload { grid-template-columns: minmax(0, 1fr); }}
.gccq-app .upload .req { color: var(--alert); }
/* --- buttons ------------------------------------------------------------- */
.gccq-app .btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-weight: 600;
  padding: .65rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--green-900);
  background: var(--green-700); color: #fff;
  text-decoration: none; cursor: pointer;
}
.gccq-app .btn:hover { background: var(--green-900); color: #fff; }
.gccq-app .btn-ghost { background: #fff; color: var(--green-900); }
.gccq-app .btn-ghost:hover { background: var(--green-100); color: var(--green-900); }
.gccq-app .btn-danger { background: var(--alert); border-color: #7d1a20; }
.gccq-app .btn-danger:hover { background: #7d1a20; }
.gccq-app .btn-sm { padding: .35rem .75rem; font-size: .85rem; }
.gccq-app .btn[disabled] { opacity: .55; cursor: not-allowed; }
/* --- notices ------------------------------------------------------------- */
.gccq-app .notice {
  border-left: 4px solid var(--green-700);
  background: var(--green-100);
  padding: .9rem 1.1rem; border-radius: var(--radius);
  margin: 1.25rem 0;
}
.gccq-app .notice p { margin: .3rem 0; }
.gccq-app .notice-alert { border-left-color: var(--alert); background: var(--alert-bg); }
.gccq-app .notice-gold { border-left-color: var(--gold); background: #fdf6e7; }
/* --- eligibility read-out ------------------------------------------------ */
.gccq-app #eligibility-result { margin-top: .6rem; font-size: .9rem; font-weight: 600; }
.gccq-app #eligibility-result[data-state="ok"] { color: var(--ok); }
.gccq-app #eligibility-result[data-state="bad"] { color: var(--alert); }
/* --- tables -------------------------------------------------------------- */
.gccq-app .table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
.gccq-app table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.gccq-app th, .gccq-app td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.gccq-app thead th { background: var(--green-900); color: #fff; font-weight: 600; font-size: .85rem; position: sticky; top: 0; }
.gccq-app tbody tr:hover { background: #f4f8f5; }
.gccq-app td.num, .gccq-app th.num { text-align: right; font-variant-numeric: tabular-nums; }
.gccq-app .pill {
  display: inline-block; padding: .12rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; border: 1px solid;
}
.gccq-app .pill-submitted { color: #1b4f9c; border-color: #bcd2f0; background: #eaf1fb; }
.gccq-app .pill-under_review { color: #8a5b00; border-color: #f0dcb0; background: #fdf5e5; }
.gccq-app .pill-incomplete { color: #8a5b00; border-color: #f0dcb0; background: #fdf5e5; }
.gccq-app .pill-verified { color: var(--ok); border-color: #b7ddc9; background: #e8f5ee; }
.gccq-app .pill-roll_no_issued { color: var(--ok); border-color: #b7ddc9; background: #e8f5ee; }
.gccq-app .pill-rejected { color: var(--alert); border-color: #f0c4c2; background: var(--alert-bg); }
.gccq-app .pill-ineligible { color: var(--alert); border-color: #f0c4c2; background: var(--alert-bg); }
.gccq-app .pill-withdrawn { color: var(--ink-soft); border-color: var(--rule); background: #f2f4f2; }
/* --- admin --------------------------------------------------------------- */
.gccq-app.admin-body { background: #eef1ed; }
.gccq-app .stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: 2rem; }
.gccq-app .stat { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.15rem; }
.gccq-app .stat .value { font-family: Bitter, serif; font-size: 2rem; font-weight: 700; line-height: 1; }
.gccq-app .stat .label { font-size: .85rem; color: var(--ink-soft); margin-top: .3rem; }
.gccq-app .filters { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: end; }
.gccq-app .toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1.25rem 0; }
.gccq-app .toolbar .spacer { margin-left: auto; }
.gccq-app .detail-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 980px) {.gccq-app .detail-grid { grid-template-columns: minmax(0, 1fr); }}
.gccq-app dl.facts { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .35rem 1rem; margin: 0; font-size: .93rem; }
.gccq-app dl.facts dt { color: var(--ink-soft); }
.gccq-app dl.facts dd { margin: 0; font-weight: 500; }
@media (max-width: 620px) {.gccq-app dl.facts { grid-template-columns: minmax(0, 1fr); }
.gccq-app dl.facts dd { margin-bottom: .5rem; }}
.gccq-app .timeline { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.gccq-app .timeline li { border-left: 2px solid var(--rule); padding: 0 0 1rem 1rem; position: relative; }
.gccq-app .timeline li::before {
  content: ""; position: absolute; left: -5px; top: .45rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--green-700);
}
.gccq-app .pagination { display: flex; gap: .3rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.gccq-app .pagination a, .gccq-app .pagination span {
  padding: .35rem .7rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff; text-decoration: none; font-size: .9rem;
}
.gccq-app .footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem; padding: 1.5rem 1.25rem;
  font-size: .87rem; color: var(--ink-soft);
}
.gccq-app .footer-inner { max-width: 1180px; margin: 0 auto; display: flex; gap: 1.5rem; flex-wrap: wrap; }
@media print {.gccq-app .masthead, .gccq-app .footer, .gccq-app .stepnav, .gccq-app .toolbar, .gccq-app .btn { display: none !important; }
.gccq-app { background: #fff; }
.gccq-app .card { box-shadow: none; }}
@media (prefers-reduced-motion: reduce) {.gccq-app * { animation: none !important; transition: none !important; }}

/* Job application form: tables, experience blocks, the undertaking ------- */
.gccq-app .entry-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gccq-app .entry-table th,
.gccq-app .entry-table td { padding: .35rem .4rem; text-align: left; border-bottom: 1px solid var(--rule); }
.gccq-app .entry-table th { font-size: .8rem; color: #fff; font-weight: 600; }
.gccq-app .entry-table .opt { color: #cfe0d5; }
.gccq-app .entry-table td:first-child { width: 2rem; color: var(--ink-soft); }
.gccq-app .entry-table input { width: 100%; padding: .4rem .5rem; }

.gccq-app .experience-block { padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.gccq-app .experience-block:last-of-type { border-bottom: 0; }
.gccq-app .experience-block h3 { margin: 0 0 .5rem; font-size: 1rem; }

.gccq-app .undertaking { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.gccq-app .undertaking li { margin-bottom: .9rem; }
.gccq-app .undertaking li span { display: block; }

.gccq-app .big-number { font-size: 1.8rem; font-weight: 700; letter-spacing: .04em; }
.gccq-app .opt { font-weight: 400; color: var(--ink-soft); font-size: .85em; }

@media (max-width: 720px) {
  /* Six columns will not fit a phone; let the wrapper scroll sideways
     instead of pushing the whole page wider than the screen. */
  .gccq-app .entry-table { font-size: .85rem; min-width: 34rem; }
  .gccq-app .entry-table th, .gccq-app .entry-table td { padding: .25rem; }
  .gccq-app .entry-table input { padding: .3rem .35rem; }
}

.gccq-app .crest-logo { width: 44px; height: 44px; object-fit: contain; }
.gccq-app .filter-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }

/* A fieldset defaults to min-inline-size: min-content, so it refuses to
   shrink below its widest child and pushes the whole page sideways on a
   phone. Reset it, and let the table wrapper scroll instead. */
.gccq-app fieldset { min-inline-size: 0; max-width: 100%; }
.gccq-app legend { max-width: 100%; }
.gccq-app .table-wrap { max-width: 100%; }

/* A tick or radio inside a .field: the block label rule above would stack
   the control and its text, so restore the row here. */
.gccq-app .field label.check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .45rem;
  font-weight: 400;
}
.gccq-app .field label.check input { flex: none; width: auto; }
.gccq-app .field label.check span { font-weight: 400; }