/* ============================================================================
   Barmaso — Announcement, User and Login Dashboard panels
   ============================================================================ */

.panel { display: grid; gap: 16px; }

/* A grid item will not shrink below its content unless told to, so a table
   of fourteen money columns made its own row 720px wide and carried the
   whole page sideways with it — the wrapper's overflow-x never got a chance,
   because the wrapper had been widened too. On a phone that is a page that
   slides under your thumb and a Save button somewhere off to the right. */
.panel > * { min-width: 0; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-title {
  font-size: 18px;
  font-weight: 700;
}

.panel-count {
  font-size: 13px;
  color: var(--ink-faint);
}

/* Pushes the action button to the right regardless of what precedes it. */
.panel-head > .btn { margin-left: auto; }
/* A page's own buttons sit together at the right of its title, and wrap
   under it on a phone rather than squeezing it. */
.panel-head > .panel-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.panel-actions > [hidden] { display: none; }

/* --- Shared editor form ----------------------------------------------------- */
.editor-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.field-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
  font-family: inherit;
}

.field-hint {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
}

.field-hint--block {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.attach-rows { display: grid; gap: 8px; }

/* Stays at its own width instead of stretching across the grid column. */
.field > .btn { justify-self: start; }

.attach-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.btn--outline.is-danger { color: var(--danger); }
.btn--outline.is-danger:hover { border-color: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Announcements ---------------------------------------------------------- */
.ann-list { display: grid; gap: 14px; }

.ann-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.ann-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ann-title {
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ann-actions { display: flex; gap: 6px; flex: none; }

.ann-meta {
  font-size: 12px;
  color: var(--ink-faint);
}

.ann-content {
  /* The body is stored as plain text; honour the line breaks the author
     typed without ever treating the content as markup. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
}

.ann-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.ann-image {
  max-height: 260px;
  width: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.ann-file {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ann-file:hover { border-color: var(--accent); color: var(--accent-deep); }

/* --- Row list (users, dashboard summary) ------------------------------------ */
.row-list {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.row-item:last-child { border-bottom: none; }

.row-main { display: grid; gap: 2px; min-width: 0; flex: 1; }

.row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.row-self {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
}

.row-sub { font-size: 12px; color: var(--ink-faint); }

.row-actions { display: flex; gap: 6px; flex: none; }

.role-pill {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--surface-alt);
  color: var(--ink-soft);
}

.role-pill--admin    { background: var(--accent-soft);  border-color: #9FCFBE; color: var(--accent-deep); }
.role-pill--examiner { background: #EFEBF9; border-color: #CDC2EE; color: #4C3F86; }

/* --- Dashboard -------------------------------------------------------------- */
.dash-section { display: grid; gap: 10px; margin-top: 6px; }

.dash-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}

.dash-scope {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
}

.dash-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* Wide tables scroll inside their own box rather than pushing the page. */
/* Scrolls inside itself, both ways, so the sideways scrollbar is beside the
   table rather than at the foot of a very tall page. The headings are already
   sticky below. */
/* One scroll, the page's (2026-10-25): sideways only here; long tables come a page at a time (auto-pager.js). */
.table-wrap {
  overflow: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.data-table th,
.data-table td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-alt);
  box-shadow: inset 0 -1px 0 var(--border);
  font-weight: 700;
  color: var(--ink-soft);
}

.data-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .attach-row { grid-template-columns: 1fr auto; }
  .attach-row .attach-label { grid-column: 1 / -1; order: 1; }
  .row-item { flex-wrap: wrap; }
  .row-actions { margin-left: auto; }
}

/* ============================================================================
   Barmaso Exam — public notice and shell
   ============================================================================ */

.exam-shell { display: grid; gap: 20px; }

.exam-hero {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  max-width: 560px;
  margin: 40px auto;
  padding: 40px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.exam-hero-icon { font-size: 40px; line-height: 1; }

.exam-hero-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.exam-hero-title {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 700;
}

.exam-hero-sub {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* Label / value pairs, centred as a block but aligned as a column so the
   values line up with each other rather than each centring on its own. */
.exam-facts {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px 18px;
  margin: 4px 0 0;
  text-align: left;
  font-size: 14px;
}

.exam-facts dt { color: var(--ink-faint); font-weight: 600; }
.exam-facts dd { margin: 0; font-weight: 600; }

.exam-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  max-width: 36ch;
}

.countdown {
  display: grid;
  gap: 2px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}

.countdown-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.countdown-value {
  font-family: var(--font-mono);
  /* Digits keep a fixed width so the countdown does not jitter as it ticks. */
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 600;
  color: var(--accent-deep);
  line-height: 1.1;
}

.countdown:empty,
.countdown-value:empty { display: none; }

@media (max-width: 640px) {
  .exam-hero { margin: 20px auto; padding: 28px 20px; }
}

/* --- Examiner: exam summary and forms ---------------------------------------- */
.exam-summary {
  display: grid;
  gap: 10px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.exam-summary-title { font-size: 17px; font-weight: 700; }

/* Inside a panel the facts sit left-aligned in a normal two-column list,
   unlike the centred version on the public notice. */
.exam-facts--wide {
  grid-template-columns: minmax(110px, auto) 1fr;
  text-align: left;
}

/* Date and the two times side by side; they are one decision, not three. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.passcode {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  /* One tap selects the whole code — an Examiner reads these out or pastes
     them into a message. */
  user-select: all;
}

/* The question column carries a full sentence; the rest are short. */
.import-table td.is-wide {
  max-width: 340px;
  white-space: normal;
}

.import-table td.is-answer {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-deep);
  text-align: center;
}

/* Whether the paper is loaded decides whether the exam can run at all, so
   it is a banner rather than another row in the summary list. */
.paper-status {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
}

.paper-status.is-ready   { background: var(--success-soft); color: #0C7150; }
.paper-status.is-missing { background: var(--warning-soft); color: var(--warning); }

/* The rows of an imported sheet that did not go in. Tinted, because a list
   that looks like every other list reads as "here is what was imported". */
.import-failures {
  margin-top: 10px;
  border: 1px solid var(--warning);
  border-radius: 10px;
  background: var(--warning-soft);
}

.import-failures .row-item { flex-direction: column; align-items: flex-start; gap: 2px; }

/* Same again for the list rows: a username or a branch with no space in it
   is one long word, and one long word decides how wide the row is. */
.row-item > *,
.row-title,
.row-title > * { min-width: 0; }

.row-title,
.row-sub { overflow-wrap: anywhere; }

/* .row-title is a flex row: the name, then the badge that says "you". The
   name is the part that should give, and the badge should never be squeezed
   into two lines. */
.row-title > * { min-width: 0; }
.row-self { flex: 0 0 auto; white-space: nowrap; }

/* .row-main is a grid; its children keep their content's width unless told
   otherwise, and a username with no space in it is one long word. */
.row-main > * { min-width: 0; }

/* A row of shop accounts: "Chauk Gwae (North Okkalapa)" beside a password,
   a role pill and three buttons does not fit across a phone, and a row that
   will not wrap pushes the whole page sideways instead.

   Wrapping is allowed at every width rather than under a media query,
   because what runs out of room here is the ROW, not the window — these
   panels sit inside a dialog and a column as often as they fill a page, and
   a viewport query cannot see either. Given room, nothing wraps and the row
   looks exactly as it did. */
.row-item { flex-wrap: wrap; }
.row-main { flex: 1 1 180px; }
.row-title { flex-wrap: wrap; }

.row-item > .fin-td-actions,
.row-item > .row-actions { flex: 0 1 auto; margin-left: auto; }