/* Admin-only layout on top of theme.css's tokens -- same "Werkstatt"
   rules apply: zero radius, no shadows, hairline dividers, signal colour
   used sparingly. */
.admin-shell { max-width: 960px; margin: 0 auto; padding: 0 1.25rem 3rem; }

/* Non-production environments only (Task 1 of the SaaS migration) --
   always rendered above everything else, even the login screen, so an
   operator can never mistake a staging session for production. */
.env-banner { position: sticky; top: 0; z-index: 10; background: var(--signal); color: var(--background); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-align: center; padding: 0.5rem 1rem; }

.admin-top { border-bottom: 1px solid var(--rule); padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-top nav { display: flex; gap: 1.2rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.admin-top nav a { color: var(--muted-foreground); text-decoration: none; }
.admin-top nav a.active { color: var(--signal); }
.admin-top .logout { background: none; border: 1px solid var(--border); color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.7rem; padding: 0.4rem 0.8rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; }

h2.page-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; margin: 1.5rem 0 1rem; }

.toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; }
.toolbar select, .toolbar input[type=text] { background: var(--surface); border: 1px solid var(--border); color: var(--foreground); font-family: var(--font-display); font-size: 0.85rem; padding: 0.5rem 0.7rem; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.data th { text-align: start; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); border-bottom: 1px solid var(--rule); padding: 0.6rem 0.5rem; }
table.data td { border-bottom: 1px solid var(--rule); padding: 0.7rem 0.5rem; }
table.data tr:hover td { background: var(--muted); }
table.data a { color: var(--foreground); text-decoration: none; }
table.data a:hover { color: var(--signal); }

.badge { display: inline-block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.5rem; border: 1px solid var(--border); color: var(--muted-foreground); }
/* Task 8 (2026-08-05): de_eu was the only market with a distinct color --
   arab/other silently fell back to the same gray as "no badge color at
   all", making the three markets hard to tell apart at a glance in a
   table of mixed clients/projects. All three now get their own color,
   reusing the same tokens the rest of the app already uses elsewhere
   (signal = de_eu, unchanged; foreground = arab, since it's the primary
   target market per decision 1; destructive is deliberately NOT reused
   here -- that color means "danger/error" everywhere else in this app,
   which "other market" is not -- so "other" gets muted-foreground, i.e.
   visually neutral/default, matching its own meaning). */
.badge.market-de_eu { border-color: var(--signal); color: var(--signal); }
.badge.market-arab { border-color: var(--foreground); color: var(--foreground); }
.badge.market-other { border-color: var(--muted-foreground); color: var(--muted-foreground); }

.panel { border: 1px solid var(--border); background: var(--surface); padding: 1.2rem; margin-bottom: 1.2rem; }
.panel h3 { margin: 0 0 0.9rem; font-size: 1rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }

.formgrid { display: flex; flex-direction: column; gap: 0.8rem; max-width: 480px; }
.formgrid label { font-size: 0.8rem; color: var(--muted-foreground); display: block; margin-bottom: 0.3rem; }
.formgrid .qa-row-label { font-size: 0.8rem; color: var(--muted-foreground); display: block; margin-bottom: 0.3rem; }
.formgrid input, .formgrid select, .formgrid textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--foreground); font-family: var(--font-display); font-size: 0.9rem; padding: 0.65rem 0.8rem; }

button.primary { background: var(--signal); color: var(--background); border: none; font-weight: 700; padding: 0.65rem 1.1rem; cursor: pointer; text-transform: uppercase; font-size: 0.85rem; letter-spacing: -0.01em; }
button.primary:disabled { opacity: 0.5; cursor: default; }
/* a.ghost: the same pill look, reused on <a> "back" links (e.g.
   ResponseView.svelte) that aren't real buttons -- button.ghost alone
   never matched those, leaving them as unstyled (blue) text links. */
button.ghost, a.ghost { background: transparent; border: 1px solid var(--border); color: var(--foreground); padding: 0.6rem 1rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; }
a.ghost { display: inline-block; text-decoration: none; }
button.danger { background: transparent; border: 1px solid var(--destructive); color: var(--destructive); padding: 0.6rem 1rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; }

.error-text { color: var(--destructive); font-size: 0.85rem; margin: 0.5rem 0; }
.empty-state { color: var(--muted-foreground); font-size: 0.9rem; padding: 2rem 0; text-align: center; }

.qa-row { border-top: 1px solid var(--rule); padding: 0.8rem 0; }
.qa-row:last-child { border-bottom: 1px solid var(--rule); }
.qa-row .q { font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.2rem; }
.qa-row .a { font-size: 0.95rem; }

.login-shell { max-width: 360px; margin: 4rem auto; padding: 0 1.25rem; }

/* Print-friendly response view (spec: Data management). Screen shows
   .print-only nowhere; print hides .no-print (nav, buttons, export
   links) and switches to a light/ink layout since dark-canvas-on-paper
   wastes toner and reads badly. */
@media (max-width: 640px) {
  .admin-shell { padding: 0 1rem 3rem; }
  .admin-top { flex-wrap: wrap; row-gap: 0.7rem; }
  /* Six nav items + wordmark + logout never fit one row at 375-414px --
     wrap the header, then let the nav scroll horizontally instead of
     squeezing/overlapping (every item stays reachable, nothing hidden).
     nowrap on the links themselves is required -- otherwise a two-word
     item like "النسخ الاحتياطي" breaks mid-phrase across two lines
     instead of the row scrolling as one unit. */
  .admin-top nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 1rem; padding-bottom: 0.15rem; flex-wrap: nowrap; }
  .admin-top nav a { white-space: nowrap; flex-shrink: 0; }
  h2.page-title { font-size: 1.2rem; }
  /* Tables don't reflow to narrow screens -- scope the scrollbar to the
     table itself so the rest of the page layout never breaks. */
  table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data th, table.data td { white-space: nowrap; }
  .formgrid { max-width: 100%; }
  /* Same iOS auto-zoom-on-focus issue as the public form's inputs. */
  .toolbar select, .toolbar input[type=text], .formgrid input, .formgrid select, .formgrid textarea { font-size: 16px; }
}

.print-only { display: none; }
@media print {
  .admin-top, .no-print { display: none !important; }
  .admin-shell { max-width: 100%; padding: 0; margin: 0; }
  body, .shell, .admin-shell { background: #fff !important; color: #000 !important; }
  .print-only { display: block; }
  .print-header { border-bottom: 2px solid #000; padding-bottom: 0.8rem; margin-bottom: 1rem; }
  .print-header h2 { margin: 0.6rem 0 0.2rem; font-size: 1.3rem; }
  .print-header p { margin: 0; font-size: 0.85rem; color: #333 !important; }
  .panel { border: none; background: #fff !important; padding: 0; }
  .qa-row { border-top: 1px solid #ccc; padding: 0.5rem 0; break-inside: avoid; }
  .qa-row .q { color: #555 !important; }
  .qa-row .a { color: #000 !important; }
  .wordmark .aldia { color: #555 !important; }
  .wordmark .rule { background: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
}