/* ============================================================
   Codici Workflow — on top of the portal's main.css
   Brand colors arrive as --navy / --slate / --accent from the page
   (see Common/Branding.php), so nothing here hard-codes a brand.
   ============================================================ */

/* ── Inputs outside a .form-group, and inline ones ───────── */
.form-input { padding: .55rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .9rem; font-family: inherit; color: var(--text); background: var(--white); width: 100%; }
.form-input:focus { outline: none; border-color: var(--navy); }
.form-input--inline { width: 5.2rem !important; display: inline-block; padding: .3rem .5rem !important; margin: 0 .2rem; }
.field-help { font-size: .78rem; color: var(--muted); line-height: 1.45; }
.field-error { font-size: .8rem; color: var(--error); font-weight: 500; }
/* The box hangs in the margin so long labels (some carry an inline number
   field) wrap under their own text instead of under the box. */
.check { display: block; position: relative; padding-left: 1.6rem; font-size: .9rem; color: var(--text); margin: .35rem 0; line-height: 1.6; text-transform: none; letter-spacing: 0; font-weight: 400; }
.check > input[type=checkbox], .check > input[type=radio] { position: absolute; left: 0; top: .3rem; width: auto; margin: 0; }
.check--pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--white); margin: 0; cursor: pointer; }
.check--pill > input[type=checkbox] { position: static; }
.check--pill:has(input:checked) { border-color: var(--navy); background: var(--bg); font-weight: 600; }

/* ── Public / sign-in ─────────────────────────────────────── */
.flow-public { background: var(--bg); min-height: 100vh; }
.auth-wrap { max-width: 460px; margin: 0 auto; padding: 4rem 1rem 2rem; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 1.75rem; }
.form-links { display: flex; justify-content: space-between; margin-top: 1.25rem; font-size: .85rem; }
.form-links a { color: var(--slate); text-decoration: underline; }
.flow-powered { text-align: center; font-size: .75rem; color: var(--muted); margin-top: 1.5rem; max-width: none; }

/* ── Brand logo / name ────────────────────────────────────── */
.brand-logo { max-height: 48px; max-width: 200px; display: block; }
.brand-logo--dark { max-height: 40px; max-width: 170px; }
.brand-name { font-family: 'Roboto Slab', serif; font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.brand-name--dark { color: var(--white); font-size: 1.25rem; }
.sidebar__powered { font-size: .68rem; color: rgba(255,255,255,.4); margin-top: .75rem; }
.sidebar__count { margin-left: auto; background: var(--warn-bg); color: var(--warn); font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .05rem .5rem; }

/* ── Headings and small bits ──────────────────────────────── */
.breadcrumb { font-size: .8rem; color: var(--muted); margin-bottom: .2rem; max-width: none; }
.breadcrumb a { color: var(--muted); text-decoration: underline; }
.page-header h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.page-header h1 .badge { font-family: 'Inter', sans-serif; font-size: .75rem; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-header__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.eyebrow { font-family: 'Inter', sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .4rem; }
.chip { display: inline-block; font-size: .72rem; background: var(--bg); color: var(--slate); border-radius: 999px; padding: .1rem .55rem; margin: .1rem .2rem .1rem 0; border: 1px solid var(--border); }
.chip--warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.chip--error { background: var(--error-bg); color: var(--error); border-color: transparent; }
.month-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.notice code, .field-help code { font-size: .78rem; }

/* Tabs that are links (the portal's are buttons) */
.tabs--links { overflow-x: auto; scrollbar-width: none; }
.tabs--links .tab { text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.tab__count { font-size: .72rem; background: var(--bg); border-radius: 999px; padding: .05rem .5rem; color: var(--slate); }
.tab--active .tab__count { background: var(--navy); color: var(--white); }

/* Progress */
.progress { background: var(--border); border-radius: 999px; height: 6px; overflow: hidden; }
.progress--lg { height: 10px; }
.progress__fill { height: 100%; background: var(--success); transition: width .4s; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown__menu { display: none; position: absolute; right: 0; top: calc(100% + .3rem); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 260px; z-index: 50; padding: .35rem 0; }
.dropdown.open .dropdown__menu { display: block; }
.dropdown__menu a { display: block; padding: .5rem 1rem; font-size: .85rem; color: var(--text); }
.dropdown__menu a:hover { background: var(--bg); }

/* ── Batch page ───────────────────────────────────────────── */
.batch-stats .stat-card { padding: 1rem 1.25rem; }
.batch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.batch-aside { display: flex; flex-direction: column; gap: 1rem; }
.batch-aside h4 { margin-bottom: .75rem; }
.action-list { display: flex; flex-direction: column; gap: .5rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; font-size: .82rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text); }
.kv--compact { font-size: .8rem; }
.file-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; font-size: .82rem; }
.file-list a { color: var(--navy); text-decoration: underline; word-break: break-all; }
.lines-table td { vertical-align: top; }
.line-reasons { margin-top: .3rem; }
.line-error { font-size: .78rem; color: var(--error); margin-top: .25rem; }

/* ── Review ───────────────────────────────────────────────── */
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; }
.review-layout > div, .review-layout > aside { display: flex; flex-direction: column; gap: 1rem; }
.review-layout > aside { position: sticky; top: 1rem; }
.line-description { font-size: 1.05rem; line-height: 1.55; max-width: none; }
.engine-answer { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; }
.engine-answer__code { font-family: 'Inconsolata', monospace; font-size: 1.9rem; font-weight: 600; color: var(--navy); letter-spacing: .02em; }
.engine-answer__conf { min-width: 140px; text-align: right; }
.flag-box { margin-top: 1rem; background: #fff7ed; border-left: 3px solid #ea580c; padding: .75rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: .88rem; }
.flag-box ul { margin: .4rem 0 0 1.1rem; }
.event-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; font-size: .85rem; }
.decision h3 { margin-bottom: 1rem; }
.choice-group { margin-bottom: .9rem; }
.choice-group__title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .35rem; }
.choice { display: grid; grid-template-columns: auto auto 1fr; gap: .15rem .6rem; align-items: baseline; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .35rem; cursor: pointer; background: var(--white); }
.choice:hover { border-color: var(--slate); }
.choice:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); background: var(--bg); }
.choice input[type=radio] { width: auto; margin: 0; }
.choice__code { font-family: 'Inconsolata', monospace; font-weight: 600; font-size: 1rem; }
.choice__meta { font-size: .78rem; color: var(--muted); justify-self: end; }
.choice__text { grid-column: 2 / -1; font-size: .78rem; color: var(--slate); line-height: 1.45; }
.choice--manual { grid-template-columns: auto 1fr; }
.decision__buttons { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }

/* ── Forms: processing settings ──────────────────────────── */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.settings-group { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem 1rem; min-width: 0; }
.settings-group legend { font-weight: 600; font-size: .85rem; color: var(--navy); padding: 0 .4rem; }
.settings-group .form-row { gap: .75rem; }
.details-summary { cursor: pointer; font-weight: 600; color: var(--navy); }

/* ── Mapping ──────────────────────────────────────────────── */
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.column-picks { display: flex; flex-wrap: wrap; gap: .45rem; }
.table--compact td { padding: .3rem .5rem; font-size: .78rem; white-space: nowrap; }
.row--header td { background: var(--warn-bg); font-weight: 600; }

/* ── Branding admin ───────────────────────────────────────── */
.branding-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pick-list { list-style: none; display: flex; flex-direction: column; gap: .2rem; margin-top: .5rem; max-height: 70vh; overflow-y: auto; }
.pick-list li { padding: .35rem .5rem; border-radius: var(--radius); font-size: .88rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pick-list li.is-active { background: var(--bg); font-weight: 600; }
.color-pick { display: flex; gap: .5rem; align-items: center; }
.color-pick input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); }
.brand-preview { display: grid; grid-template-columns: 180px 1fr; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-height: 150px; }
.brand-preview__side { background: var(--p); padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.brand-preview__link { color: rgba(255,255,255,.75); font-size: .8rem; }
.brand-preview__main { background: var(--bg); padding: 1rem; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.brand-preview__button { background: var(--p); color: #fff; border-radius: var(--radius); padding: .45rem 1rem; font-size: .85rem; font-weight: 600; }

/* ── Docs ─────────────────────────────────────────────────── */
.docs pre { white-space: pre-wrap; margin-bottom: 1rem; }
.docs table { width: 100%; font-size: .85rem; margin-bottom: 1rem; }

@media (max-width: 1100px) {
  .batch-layout, .review-layout, .branding-layout { grid-template-columns: 1fr; }
  .review-layout > aside { position: static; }
}
@media (max-width: 700px) {
  .settings-grid { grid-template-columns: 1fr; }
  .engine-answer { flex-direction: column; }
  .engine-answer__conf { text-align: left; }
}