/*
 * components.css — the shared primitives: buttons, cards, badges, form
 * controls, alerts, modal, toast, spinner.
 *
 * Same two absolutes as base.css: tokens only (no hex), logical properties only
 * (no left/right) — the app runs RTL in Arabic.
 *
 * Proportions follow design/Settlement App.html: 8px control radii, 14px card
 * radii, navy-tinted shadows, bold small labels.
 */

/* ================================================================== *
 * Buttons
 * ================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* Primary — the indigo action. One per screen region. */
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Secondary — bordered, white. */
.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-text-subtle);
  background: var(--color-surface-2);
}

/* Ghost — chrome actions (language toggle, sign out). */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
  font-weight: var(--fw-semibold);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-primary-subtle);
  color: var(--color-text-primary);
}

.btn-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-bg);
  color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) { border-color: var(--color-danger); }

.btn-block { display: flex; inline-size: 100%; }
.btn-sm { padding: 6px 10px; font-size: 11.5px; }
.btn-lg { padding: 11px 18px; font-size: 13.5px; }

/* ================================================================== *
 * Cards
 * ================================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-padded { padding: var(--space-5); }

.card-header {
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card-title { font-size: 14px; font-weight: var(--fw-bold); }

.card-body   { padding: var(--space-5); }
.card-footer {
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--color-border-2);
  background: var(--color-surface-2);
}

/* ================================================================== *
 * Badges
 * ================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  background: var(--color-surface-3);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Period markers — Old is amber, New is blue, everywhere (CLAUDE.md 8.3). */
.badge-old { background: var(--color-old-bg); color: var(--color-old-fg); }
.badge-new { background: var(--color-new-bg); color: var(--color-new-fg); }

/* Lifecycle statuses (CLAUDE.md 6.1). */
.badge-draft     { background: var(--color-surface-3);   color: var(--color-text-secondary); }
.badge-confirmed { background: var(--color-info-bg);     color: var(--color-info); }
.badge-approved  { background: var(--color-success-bg);  color: var(--color-success); }
.badge-returned  { background: var(--color-danger-bg);   color: var(--color-danger); }
.badge-exported  { background: var(--color-primary);     color: var(--color-text-inverse); }

.badge-neutral { background: var(--color-primary-subtle); color: var(--color-navy-3); }

/* ================================================================== *
 * Form controls
 * ================================================================== */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.label {
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
  letter-spacing: .02em;
}

.input,
.select,
.textarea {
  inline-size: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input::placeholder,
.textarea::placeholder { color: var(--color-text-muted); }

.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) { border-color: var(--color-text-subtle); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.textarea { min-block-size: 78px; resize: vertical; }

.select { cursor: pointer; }

/* An invalid control and its message. */
.input-error,
.input.is-invalid,
.select.is-invalid { border-color: var(--color-danger); }

.field-error {
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-danger);
}

.field-hint {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

/* ================================================================== *
 * Alerts
 * ================================================================== */

.alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
}

.alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-info    { background: var(--color-info-bg);    color: var(--color-info); }

/* ================================================================== *
 * Spinner
 * ================================================================== */

.spinner {
  inline-size: 15px;
  block-size: 15px;
  border: 2px solid var(--color-primary-light);
  border-block-start-color: var(--color-primary);
  border-radius: var(--radius-pill);
  animation: sc-spin .6s linear infinite;
}

.spinner-on-primary {
  border-color: var(--color-primary-light);
  border-block-start-color: var(--color-text-inverse);
}

@keyframes sc-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
  * { transition-duration: .01ms !important; }
}

/* ================================================================== *
 * Modal
 * ================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 9000;
}

.modal {
  inline-size: 100%;
  max-inline-size: 520px;
  max-block-size: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.modal-title { font-size: 15px; font-weight: var(--fw-bold); }
.modal-body  { padding: var(--space-5); }

.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--color-border-2);
  background: var(--color-surface-2);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.modal-close {
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--color-text-primary); background: var(--color-surface-3); }

/* ================================================================== *
 * Toast
 * ================================================================== */

.toast-host {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 9500;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-inline-size: 240px;
  max-inline-size: 380px;
  padding: 11px 15px;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: var(--color-text-inverse);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-lg);
  border-inline-start: 3px solid var(--color-primary);
  animation: sc-toast-in .18s ease-out;
}

.toast-info    { border-inline-start-color: var(--color-info); }
.toast-success { border-inline-start-color: var(--color-success); }
.toast-error   { border-inline-start-color: var(--color-danger); }
.toast-warning { border-inline-start-color: var(--color-warning); }

.toast.is-leaving { opacity: 0; transition: opacity .2s ease; }

@keyframes sc-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================== *
 * The update prompt (js/updates.js)
 *
 * Opposite corner from the toasts, so a save confirmation and "a new version
 * is available" never sit on top of each other. A light surface rather than the
 * navy of a toast: this one stays until it is answered, and it is a decision,
 * not a notification.
 * ================================================================== */

.update-host {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-start: var(--space-6);
  z-index: 9400;
}

.update-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-inline-size: min(420px, calc(100vw - 48px));
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  animation: sc-toast-in .18s ease-out;
}

.update-title {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.update-text {
  color: var(--color-text-secondary);
  font-size: 11.5px;
  line-height: 1.5;
  margin-block-start: 2px;
}

.update-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* "Later" — the offer stays available without holding the corner of the screen. */
.update-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.update-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* ================================================================== *
 * The two role shells (CLAUDE.md 5.1)
 *
 * Coordinator: a slim white top bar over the content.
 * Manager:     a deep-navy sidebar beside the content.
 * ================================================================== */

/* Manager: sidebar + content, side by side, each scrolling on its own. */
.app-layout {
  display: flex;
  min-block-size: 100vh;
}

/* Coordinator: top bar stacked over content. */
.app-column {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

.content {
  flex: 1 1 auto;
  min-inline-size: 0;      /* lets wide grids scroll instead of stretching the shell */
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ *
 * Coordinator top bar
 * ------------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

.topbar-link:hover {
  background: var(--color-primary-subtle);
  color: var(--color-text-primary);
}

.topbar-link.is-active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.topbar-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}

.avatar {
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
}

/* ------------------------------------------------------------------ *
 * Manager sidebar (proportions from design/Settlement App.html)
 * ------------------------------------------------------------------ */

.sidebar {
  inline-size: 230px;
  flex: 0 0 230px;
  background: var(--color-navy);
  color: var(--color-text-subtle);
  border-inline-end: 1px solid var(--color-navy-3);
  display: flex;
  flex-direction: column;
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
}

.sidebar-head {
  padding: var(--space-5) 22px;
  border-block-end: 1px solid var(--color-navy-3);
}

/*
 * The company logo. White artwork on the navy rail, sized by width so the file
 * can be replaced with a different aspect ratio without touching the CSS.
 */
.sidebar-logo {
  display: block;
  inline-size: 150px;
  max-inline-size: 100%;
  block-size: auto;
  margin-block-end: var(--space-3);
}

.sidebar-brand {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: 14px;
}

.sidebar-tagline {
  color: var(--color-sidebar-muted);
  font-size: 11px;
  margin-block-start: 2px;
}

.sidebar-nav {
  padding: var(--space-3) 0;
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 13px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  color: var(--color-text-subtle);
  border-inline-start: 3px solid transparent;
}

.nav-link:hover {
  color: var(--color-text-inverse);
  background: var(--color-sidebar-hover);
}

.nav-link.is-active {
  color: var(--color-text-inverse);
  background: var(--color-sidebar-active);
  border-inline-start-color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.nav-icon {
  inline-size: 16px;
  text-align: center;
  opacity: .85;
  flex: 0 0 auto;
}

/* Admin's sub-tabs, revealed while an admin route is open. */
.nav-sub {
  padding-block: var(--space-1);
  background: var(--color-sidebar-hover);
}

.nav-sub .nav-link {
  padding-block: 7px;
  padding-inline-start: 48px;
  font-size: 12.5px;
  color: var(--color-sidebar-muted);
}

.nav-sub .nav-link:hover { color: var(--color-text-inverse); background: none; }

.nav-sub .nav-link.is-active {
  color: var(--color-text-inverse);
  background: none;
  border-inline-start-color: transparent;
}

.sidebar-foot {
  padding: var(--space-4) 22px;
  border-block-start: 1px solid var(--color-navy-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-user { display: flex; align-items: center; gap: 10px; }

.sidebar-user-name {
  color: var(--color-text-inverse);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.sidebar-user-role {
  color: var(--color-sidebar-muted);
  font-size: 11px;
}

/* "Change password", under the name. */
.sidebar-user-link {
  color: var(--color-sidebar-muted);
  font-size: 11px;
  text-decoration: underline;
}

.sidebar-user-link:hover { color: var(--color-text-inverse); }

/* The sign-out button on the navy surface. */
.btn-on-navy {
  background: var(--color-sidebar-hover);
  border-color: var(--color-navy-3);
  color: var(--color-text-subtle);
}
.btn-on-navy:hover:not(:disabled) {
  background: var(--color-sidebar-active);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/*
 * The foot's action row. It wraps because three controls in a 230px rail is
 * tight in English and does not fit in Arabic, where "Sign out" is twice as
 * long — a second line is better than a clipped button.
 */
.sidebar-actions { flex-wrap: wrap; row-gap: var(--space-2); }

/* Refresh — icon only, so it sits beside Sign out in a 230px rail. */
.btn-refresh {
  padding-inline: 8px;
  line-height: 1;
}

.btn-refresh .refresh-icon {
  display: inline-block;
  font-size: 14px;
}

.btn-refresh:hover:not(:disabled) .refresh-icon {
  animation: sc-spin .6s linear;
}

@media (prefers-reduced-motion: reduce) {
  .btn-refresh:hover:not(:disabled) .refresh-icon { animation: none; }
}

/* Language toggle — a two-button segmented control. */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.lang-toggle button {
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.lang-toggle button + button { border-inline-start: 1px solid var(--color-border); }

.lang-toggle button:hover { background: var(--color-surface-3); }

.lang-toggle button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ================================================================== *
 * Auth / setup card (login, script-url, fatal boot error)
 * ================================================================== */

.auth-card {
  inline-size: 100%;
  max-inline-size: 400px;
  padding: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.auth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  margin-block-end: var(--space-6);
}

.auth-title { font-size: 19px; font-weight: var(--fw-bold); }

.auth-subtitle {
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

/*
 * The company line at the foot of a standalone card (renderBrandFooter). Set off
 * by a hairline rather than by weight — it is a notice, not a piece of the form,
 * and it sits below the card's last button on every one of the five screens.
 */
.auth-footnote {
  font-size: 11.5px;
  color: var(--color-text-muted);
  text-align: center;
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border-2);
}

/* The language toggle again, on the sidebar's navy. */
.lang-toggle-on-navy {
  border-color: var(--color-navy-3);
  background: transparent;
}

.lang-toggle-on-navy button {
  background: transparent;
  color: var(--color-sidebar-muted);
}

.lang-toggle-on-navy button + button { border-inline-start-color: var(--color-navy-3); }

.lang-toggle-on-navy button:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-text-inverse);
}

.lang-toggle-on-navy button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ================================================================== *
 * Tables (CLAUDE.md 8.4)
 *
 * The plain list table. The Excel-like entry grid is a different surface
 * entirely and lives in css/grid.css.
 * ================================================================== */

.table-wrap { overflow-x: auto; }

.table { font-size: 13px; }

.table th {
  text-align: start;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  background: var(--color-surface-2);
  border-block-end: 1px solid var(--color-border);
}

.table td {
  padding: 11px 14px;
  border-block-end: 1px solid var(--color-border-2);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover td { background: var(--color-surface-2); }

.table-empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

/* ================================================================== *
 * Dashboard pieces
 * ================================================================== */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.stat-label {
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-block-end: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: var(--fw-bold);
  color: var(--color-navy-2);
  line-height: 1.2;
}

/* A stat whose data action does not exist yet renders '—' in this tone. */
.stat-value.is-pending { color: var(--color-text-muted); }

.stat-foot {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-block-start: var(--space-2);
}

/* Quick actions — big navigation targets on the dashboards. */
.action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.action-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.action-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);
}

.action-card-title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.action-card-text {
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

/* Empty states and not-yet-built screens. */
.empty-state {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.empty-icon { font-size: 26px; opacity: .5; }

.empty-title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.empty-text {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  max-inline-size: 460px;
}

/* The page's title row, with room for actions on the end. */
.page-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-5);
}

.page-subtitle {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin-block-start: 2px;
}

.section-title {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-block-end: var(--space-3);
}

/* ================================================================== *
 * Admin screens (CLAUDE.md 5.2)
 *
 * Same two absolutes as everywhere else: tokens only, logical properties
 * only. The period select below is the one place a control is coloured by
 * its value — Old amber, New blue (8.3).
 * ================================================================== */

/* A filter bar above a list. */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-4);
}

.toolbar-search { inline-size: 280px; max-inline-size: 100%; }
.toolbar-select { inline-size: auto; }

/* The trailing actions column of a list table. */
th.col-actions,
td.col-actions {
  text-align: end;
  inline-size: 1%;
  white-space: nowrap;
}

.cell-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* The count under a table. */
/*
 * How many job codes a site carries, beside its id on the Site → Job Code
 * screen. Without it a site that legitimately appears three times reads as three
 * duplicate rows somebody should tidy up.
 */
.jc-count {
  display: inline-block;
  min-inline-size: 15px;
  margin-inline-start: var(--space-2);
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-info);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 15px;
  text-align: center;
  cursor: help;
}

.table-foot {
  padding: var(--space-3) var(--space-5);
  border-block-start: 1px solid var(--color-border-2);
  background: var(--color-surface-2);
  font-size: 11.5px;
  color: var(--color-text-muted);
}

/* A list still loading. */
.loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--color-text-secondary);
  font-size: 12.5px;
}

/* ------------------------------------------------------------------ *
 * Dialog forms
 * ------------------------------------------------------------------ */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-grid .field-full { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* A checkbox and its label, side by side and clickable as one. */
.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.check-row span {
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

.check-row input { cursor: pointer; }

/* The wider dialog, for the import preview. */
.modal-lg { max-inline-size: 640px; }

/* ------------------------------------------------------------------ *
 * The Excel import preview
 * ------------------------------------------------------------------ */

.import-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
}

.import-stat {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-md);
}

.import-stat-value {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-navy-2);
  line-height: 1.2;
}

.import-stat-label {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  margin-block-start: 2px;
}

.problem-list {
  max-block-size: 210px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.problem-row {
  padding: 7px var(--space-3);
  font-size: 12px;
  border-block-end: 1px solid var(--color-border-2);
}

.problem-row:last-child { border-block-end: 0; }

/* ------------------------------------------------------------------ *
 * Tabs — the Lists screen's five lists
 * ------------------------------------------------------------------ */

.tabs {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  border-block-end: 1px solid var(--color-border);
  margin-block-end: var(--space-5);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin-block-end: -1px;
  border-block-end: 2px solid transparent;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

.tab:hover { color: var(--color-text-primary); }

.tab.is-active {
  color: var(--color-primary);
  border-block-end-color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.tab-count {
  padding-block: 1px;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}

.tab.is-active .tab-count {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ------------------------------------------------------------------ *
 * The Lists option editor
 * ------------------------------------------------------------------ */

.option-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-border-2);
}

.option-row:last-child { border-block-end: 0; }

.option-index {
  flex: 0 0 auto;
  inline-size: 24px;
  text-align: end;
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.option-row .input { flex: 1 1 auto; min-inline-size: 0; }

.option-row .check-row { flex: 0 0 auto; }

/* A square, quiet button for the reorder and remove controls. */
.icon-btn {
  flex: 0 0 auto;
  inline-size: 28px;
  block-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 12px;
  transition: background-color .15s ease, color .15s ease;
}

.icon-btn:hover:not(:disabled) {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
}

.icon-btn:disabled { opacity: .3; cursor: not-allowed; }

.icon-btn-danger:hover:not(:disabled) {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ================================================================== *
 * Approvals — the consolidated review table (CLAUDE.md 3.6, 5.2)
 *
 * Ten columns of other people's work, so the job here is density without
 * noise: two lines per cell where a row needs context, and the money and
 * the tracking number pinned LTR by `.num` (8.1).
 *
 * Tokens only, logical properties only (rules 23, 24).
 * ================================================================== */

/* The per-status tally above the table. */
.count-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-block-end: var(--space-4);
}

.count-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12.5px;
}

/* A cell whose first line pairs a badge with a figure. */
.cell-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/*
 * Free text from a coordinator — an item description, a return note. Clamped
 * to two lines so one long Arabic sentence cannot set the height of every row
 * in the table; the full text is on the element's title.
 */
.cell-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-inline-size: 260px;
}

/* Amount columns line up on their end edge, which flips with the document. */
.table th.text-end,
.table td.text-end { text-align: end; }

/* ------------------------------------------------------------------ *
 * The export log's selection and per-site download status (7.1)
 * ------------------------------------------------------------------ */

.log-bar {
  gap: var(--space-2);
  margin-block-end: 0;
  padding: var(--space-2) var(--space-4);
  border-block-end: 1px solid var(--color-border-2);
}

.table-check-col { inline-size: 1%; }

.table-check {
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.table tr.is-selected > td { background: var(--color-primary-subtle); }

.persite-status { margin-block-start: var(--space-1); }

.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-strong); }

.persite-again-list {
  list-style: none;
  margin-inline: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.persite-again-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

/* The pager sits in the table's footer strip. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* An alert that sits inside a card rather than above one. */
.m-4 { margin: var(--space-4); }

/* A secondary figure under a money cell — the karta beside a fuel amount.
   Kept on one line so it never breaks between its label and its number. */
.cell-subfigure { white-space: nowrap; }