/* Shared application shell + operational UI base styles.
   Superset of the former cards/base.html and photo_capture/base.html inline
   styles so existing pages keep rendering identically inside the shell. */

:root {
  /* Institutional blue identity (unchanged primary) + a disciplined scale.
     Existing names kept so every prior page renders identically. */
  --accent: #1a56a0;          /* primary */
  --accent-strong: #143f78;   /* hover/active primary */
  --accent-soft: #eef2f8;     /* tinted surface / hover */
  --focus: #ffb703;           /* current step + focus ring (amber) */
  --ok: #1b6e3c;              /* success */
  --warn: #8a5a00;           /* warning */
  --danger: #b3261e;         /* danger/error */
  --border: #cfd6df;         /* hairline */
  --page: #f4f6f9;           /* quiet page background */
  --surface: #ffffff;        /* work surface */
  --surface-2: #f7f9fc;      /* subtle raised/zebra */
  --text: #1c2430;           /* primary text */
  --muted: #55606d;          /* secondary text (>= 4.5:1 on white) */
  --radius: 8px;
  --shadow-1: 0 1px 2px rgba(16, 32, 56, .06), 0 2px 8px rgba(16, 32, 56, .06);
  --sp-1: .35rem; --sp-2: .6rem; --sp-3: 1rem; --sp-4: 1.5rem;
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", "Noto Sans", Arial, sans-serif;
  margin: 0; color: var(--text); background: var(--page);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ---- shell header ---- */
header.app {
  background: var(--accent); color: #fff; padding: .5rem 1.2rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem .8rem;
}
header.app a { color: #fff; }
.app-brand { display: flex; align-items: center; gap: .6rem; }
.app-title { font-weight: 700; text-decoration: none; }
.app-title:hover, .app-title:focus-visible { text-decoration: underline; }
.app-inst {
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 10px;
  padding: .05rem .5rem; font-size: .8rem;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: #fff; color: var(--accent);
  padding: .4rem .8rem; z-index: 100; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* primary navigation: inline list on desktop, disclosure on small screens */
.app-nav-toggle { flex: 1 1 auto; }
.app-nav-toggle > summary {
  display: none; cursor: pointer; list-style: none;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 6px;
  padding: .25rem .7rem; width: max-content;
}
.app-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem; margin: 0; padding: 0; }
.app-nav a {
  display: inline-block; padding: .35rem .6rem; border-radius: 6px;
  text-decoration: none; border-bottom: 3px solid transparent;
}
.app-nav a:hover { background: rgba(255, 255, 255, .15); }
.app-nav a.active { border-bottom-color: #ffb703; font-weight: 700; background: rgba(255, 255, 255, .12); }

/* user/account menu */
.app-user { position: relative; }
.app-user > summary {
  cursor: pointer; list-style: none; border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px; padding: .25rem .7rem;
}
.app-user-menu {
  position: absolute; right: 0; top: calc(100% + .3rem); background: #fff; color: #1c2430;
  border: 1px solid var(--border); border-radius: 8px; padding: .5rem .8rem; min-width: 11rem;
  display: grid; gap: .4rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); z-index: 50;
}
/* Scope above `header.app a { color:#fff }` (higher specificity) so dropdown
   links stay readable on the white menu surface, in every interaction state. */
header.app .app-user-menu a { color: var(--accent); text-decoration: underline; }
header.app .app-user-menu a:hover,
header.app .app-user-menu a:focus-visible,
header.app .app-user-menu a:active { color: var(--accent-strong); }
button.linklike {
  background: none; border: none; color: var(--danger);
  cursor: pointer; font: inherit; text-align: left; text-decoration: underline;
  /* WCAG 2.2 target size: keep the hit area >= 24px without inflating type */
  padding: .25rem 0; min-block-size: 1.5rem;
}
.app-user-menu { row-gap: .25rem; }

@media (max-width: 760px) {
  .app-nav-toggle > summary { display: block; }
  .app-nav ul { flex-direction: column; gap: 0; padding: .3rem 0; }
  .app-nav a { display: block; }
}

/* breadcrumb */
.breadcrumb { max-width: 1200px; margin: .6rem auto 0; padding: 0 1rem; font-size: .88rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: .3rem; color: #5c6672; }
.breadcrumb a { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: #5c6672; }

.flash-list { max-width: 1200px; margin: .4rem auto 0; padding: 0 1rem; }

/* ---- shared page styles (former cards/photo_capture base) ---- */
main { max-width: 1200px; margin: 1rem auto; padding: 0 1rem 3rem; }
h1 { font-size: 1.3rem; } h2 { font-size: 1.05rem; }
button { font: inherit; padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
button.danger { color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, textarea:focus-visible {
  outline: 3px solid #ffb703; outline-offset: 2px;
}
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid var(--border); padding: .45rem .6rem; text-align: left; font-size: .92rem; }
th { background: #e9eef5; }
.status-msg { padding: .5rem .8rem; border-radius: 6px; margin: .6rem 0; border: 1px solid var(--border); background: #fff; }
.status-msg.error { border-color: var(--danger); color: var(--danger); }
.status-msg.success { border-color: var(--ok); color: var(--ok); }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 10px; font-size: .8rem; border: 1px solid var(--border); }
.badge[data-state="published"] { border-color: var(--ok); color: var(--ok); }
.badge[data-state="draft"] { border-color: var(--warn); color: var(--warn); }
.badge[data-state="retired"], .badge[data-state="failed"] { border-color: var(--danger); color: var(--danger); }
.badge[data-state="eligible"] { border-color: var(--ok); color: var(--ok); }
.badge[data-state="ineligible"] { border-color: var(--danger); color: var(--danger); }
.badge[data-state="done"] { border-color: var(--ok); color: var(--ok); }
.badge[data-state="pending"] { border-color: var(--warn); color: var(--warn); }
input[type=text], input[type=number], input[type=date], select, textarea { padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; max-width: 100%; }
/* selects must be allowed to shrink inside grid/flex tracks instead of forcing
   their min-content width onto the page */
select { min-width: 0; }
/* WCAG 2.2 Target Size (Minimum): naked selection checkboxes in tables are the
   whole interactive target, so they render at 24px; label-wrapped checkboxes
   rely on their (larger) label as the target and only need a comfortable box. */
input[type=checkbox], input[type=radio] { inline-size: 1.15rem; block-size: 1.15rem; cursor: pointer; vertical-align: middle; }
.row-check, .item-check { inline-size: 1.5rem; block-size: 1.5rem; }
label > input[type=checkbox], label > input[type=radio] { margin-block: .2rem; }
label { font-size: .9rem; display: inline-block; }
/* `min-width:0` overrides the browser default fieldset intrinsic minimum so the
   enclosed grid can reflow; without it the page overflows horizontally. */
fieldset { border: 1px solid var(--border); border-radius: 8px; background: #fff; margin: .8rem 0; padding: .6rem .8rem; min-width: 0; }
.grid { display: grid; gap: .6rem; }
/* grid/flex children may shrink below their content's intrinsic width */
.grid > * { min-width: 0; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }

/* ---- editor mode switch (tabs) ---- */
.mode-switch { display: flex; gap: .2rem; border-bottom: 2px solid var(--border); margin: .4rem 0 .8rem; }
.mode-switch a {
  display: inline-block; padding: .4rem .9rem; text-decoration: none; color: var(--accent);
  border: 1px solid transparent; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
  margin-bottom: -2px;
}
.mode-switch a:hover { background: #eef2f8; }
.mode-switch a[aria-current="page"] {
  font-weight: 700; color: #1c2430; background: #fff;
  border-color: var(--border); border-bottom-color: #ffb703;
}

/* primary action rendered as a link (template list) */
a.action-primary {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: .3rem .7rem; border-radius: 6px; border: 1px solid var(--accent); font-size: .9rem;
}
a.action-primary:hover { filter: brightness(1.1); }
a.action-secondary {
  display: inline-block; color: var(--accent); text-decoration: underline;
  padding: .3rem .3rem; font-size: .9rem;
}
a.action-outline {
  display: inline-block; color: var(--accent); background: #fff; text-decoration: none;
  padding: .3rem .7rem; border: 1px solid var(--accent); border-radius: 6px; font-size: .9rem;
}
a.action-outline:hover { background: #eef2f8; }
button.action-danger-outline {
  color: var(--danger); background: #fff; border: 1px solid var(--danger); font-size: .9rem;
  padding: .3rem .7rem;
}

/* action cell: buttons wrap on narrow screens; forms stay inline */
.action-stack { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.action-form { display: inline; margin: 0; }
.status-cell .version-tag { display: inline-block; margin-left: .3rem; white-space: nowrap; }

/* the page never overflows horizontally: wide tables scroll inside their
   own container (table semantics preserved) */
.table-wrap { overflow-x: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- dashboard ---- */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin: 1rem 0; }
.dash-card {
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: .8rem 1rem; display: grid; gap: .3rem; text-decoration: none; color: inherit;
}
.dash-card:hover, .dash-card:focus-visible { border-left-color: #ffb703; background: #fbfcfe; }
.dash-card strong { color: var(--accent); }
.dash-card span { font-size: .88rem; color: #46505c; }
.dash-stats { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.dash-stat {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: .6rem 1rem; min-width: 10rem;
}
.dash-stat .num { font-size: 1.5rem; font-weight: 700; color: var(--accent); display: block; }
.dash-stat .lbl { font-size: .85rem; color: #46505c; }
.empty-state {
  background: #fff; border: 1px dashed var(--border); border-radius: 8px;
  padding: 1rem 1.2rem; color: #46505c; overflow-wrap: break-word;
}

/* ---- standardized page header (heading + description + status + action) ---- */
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2) var(--sp-3);
  justify-content: space-between; margin: 0 0 var(--sp-3);
}
.page-header .ph-main { min-width: 0; }
.page-header h1 { margin: 0 0 .15rem; }
.page-header .ph-desc { color: var(--muted); font-size: .92rem; margin: 0; max-width: 60ch; }
.page-header .ph-actions { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; }

/* ---- authentication surfaces (user + admin login share this language) ---- */
.auth-wrap {
  min-height: calc(100vh - 3.2rem);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.5rem, 6vh, 4rem) 1rem 3rem;
}
.auth-card {
  width: 100%; max-width: 25rem; background: var(--surface);
  border: 1px solid var(--border); border-top: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.auth-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.auth-monogram {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 1.05rem;
  display: grid; place-items: center; letter-spacing: .5px;
}
.auth-brand .auth-name { font-weight: 700; line-height: 1.2; color: var(--text); }
.auth-brand .auth-sub { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; }
.auth-card h1 { font-size: 1.15rem; margin: 0 0 .3rem; }
.auth-lede { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
.auth-field { display: grid; gap: .3rem; margin-bottom: .9rem; }
.auth-field label { font-weight: 600; font-size: .9rem; }
.auth-field input {
  width: 100%; padding: .55rem .65rem; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; background: #fff;
}
.auth-field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { padding-right: 3.4rem; }
.pw-toggle {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--accent);
  border-radius: 5px; padding: .2rem .5rem; font-size: .8rem; cursor: pointer; line-height: 1.4;
}
.auth-actions { margin-top: .3rem; }
.auth-actions .primary, .auth-actions button[type="submit"] { width: 100%; padding: .6rem; font-weight: 600; }
.auth-error {
  border: 1px solid var(--danger); border-left-width: 4px; background: #fdf1f0;
  color: var(--danger); border-radius: 6px; padding: .5rem .7rem; margin: 0 0 1rem; font-size: .9rem;
}
.auth-note {
  margin: 1.1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--border);
  color: var(--muted); font-size: .8rem; line-height: 1.45;
}
.auth-note a { color: var(--accent); }
@media (max-width: 420px) {
  .auth-card { border-radius: 0; box-shadow: none; }
  .auth-wrap { padding-top: 1.5rem; }
}

/* ---- header right group + language selector (Phase 4-R3-L10N) ---- */
.app-header-right { display: flex; align-items: center; gap: .5rem .8rem; flex-wrap: wrap; }
.lang-select { display: flex; align-items: center; gap: .35rem; margin: 0; }
.lang-select-label { color: #fff; font-size: .8rem; }
.lang-select select {
  font: inherit; font-size: .85rem; padding: .2rem .4rem; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.7); background: #fff; color: var(--text);
}
.lang-apply {
  font: inherit; font-size: .8rem; padding: .2rem .55rem; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
}
.lang-apply:hover { background: rgba(255,255,255,.24); }
@media (max-width: 760px) {
  .app-header-right { width: 100%; justify-content: space-between; }
}