/* ---------- Forms ---------- */
.field { margin-bottom: 1rem; }

.field label {
  display: block;
  margin-bottom: .375rem;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}

/* Native time controls break their segment order inside an RTL document. */
.input--time,
.input--numeric {
  direction: ltr;
  text-align: left; /* physical-ok: the field is forced LTR above */
  unicode-bidi: isolate;
}

.input {
  width: 100%;
  min-height: 44px;
  padding: .75rem .75rem;
  font-size: var(--text-lead);
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

input.input,
select.input { height: 44px; }

/* iOS Safari draws native date and time inputs as menu buttons with their own
   minimum width, taller box and centred value, so they spill out of narrow
   fields. Flatten them to plain boxes there; other browsers keep their picker. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
  min-width: 0;
  max-width: 100%;
}
@supports (-webkit-touch-callout: none) {
  input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
    display: block;
    -webkit-appearance: none;
    appearance: none;
  }
  input::-webkit-date-and-time-value { min-height: 1.5em; text-align: inherit; }
}

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

.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  width: 100%;
  min-height: 44px;
  padding: .75rem 1rem;
  font-size: var(--text-body);
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  color: var(--on-brand);
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform .02s;
}

.btn:hover {
  background: var(--brand-dark);
  color: var(--on-brand);
  text-decoration: none;
}
.button_to,
.button_to:hover,
.button_to .btn,
.button_to .btn:hover { text-decoration: none; }
.button_to {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
}
.button_to .btn { width: auto; }
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .6;
  pointer-events: none;
}

/* Informational callout (also used on signed-in forms). */
.callout--info { padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--radius); color: var(--brand-dark); background: var(--brand-light); }
.callout--info strong, .callout--info span { display: block; }
.callout--info span { margin-top: .25rem; color: var(--muted); font-size: var(--text-small); line-height: 1.55; }

/* ---------- Flash messages ---------- */
.flash {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: var(--text-body);
  border: 1px solid transparent;
}

.flash--alert {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.flash--notice {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}
.offline-banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem .75rem; color: var(--warning); background: var(--warning-bg); border-bottom: 1px solid var(--warning-border); font-size: var(--text-small); font-weight: 700; }
.offline-banner[hidden] { display: none; }
.offline-banner .app-icon { width: 1rem; height: 1rem; }

.sync-status { margin-block-end: 1rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.sync-status[hidden] { display: none; }
.sync-status__summary { display: flex; align-items: center; gap: .5rem; }
.sync-status__summary .app-icon { width: 1rem; height: 1rem; flex: none; }
.sync-status__summary strong { flex: 1; font-size: var(--text-small); }
.sync-status__list { display: grid; gap: .5rem; margin: .75rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--border); list-style: none; }
.sync-status__item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: var(--text-small); }
.sync-status__item--conflict { color: var(--danger); }
.sync-status__actions { display: flex; gap: .375rem; flex: none; }

@media (max-width: 640px) {
  .sync-status__item { align-items: flex-start; flex-direction: column; }
}

/* Feedback dashboard */
.feedback-dashboard .stat-grid { margin-bottom: 1rem; }
.feedback-distribution { margin-bottom: 1rem; }
.feedback-distribution__rows { display: grid; gap: .5rem; margin-top: .75rem; }
.feedback-distribution__row { display: grid; grid-template-columns: 3rem minmax(8rem, 1fr) 2.5rem; align-items: center; gap: .75rem; font-size: var(--text-small); }
.feedback-distribution__track { height: .55rem; overflow: clip; border-radius: var(--radius-pill); background: var(--surface-soft); border: 1px solid var(--border); }
.feedback-distribution__track span { display: block; height: 100%; border-radius: inherit; background: var(--warning); }
.feedback-filters { align-items: end; }
.feedback-filters__actions { display: flex; flex-direction: row; gap: .375rem; }

/* Activation funnel */
.funnel-periods { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
.funnel { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.funnel__stage { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(6rem, 2fr) minmax(5rem, auto); align-items: center; gap: .75rem; }
.funnel__label { display: flex; flex-direction: column; gap: .125rem; font-size: var(--text-small); }
.funnel__count { color: var(--muted); font-size: var(--text-label); }
.funnel__track { height: .7rem; overflow: clip; border-radius: var(--radius-pill); background: var(--surface-soft); border: 1px solid var(--border); }
.funnel__track span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.funnel__figures { text-align: end; display: flex; flex-direction: column; gap: .125rem; }
.funnel__figures small { color: var(--muted); font-size: var(--text-label); }

@media (max-width: 640px) {
  .funnel__stage { grid-template-columns: 1fr auto; }
  .funnel__track { grid-column: 1 / -1; }
}
.feedback-row--low > td { background: color-mix(in srgb, var(--danger-bg) 65%, var(--surface)); }
.feedback-rating { display: inline-flex; align-items: center; gap: .25rem; min-width: 3.2rem; padding: .25rem .5rem; border-radius: var(--radius-pill); color: var(--warning); background: var(--warning-bg); font-size: var(--text-small); }
.feedback-rating--1, .feedback-rating--2 { color: var(--danger); background: var(--danger-bg); }
.feedback-rating--4, .feedback-rating--5 { color: var(--brand-dark); background: var(--brand-light); }
.feedback-comment { max-width: 34rem; margin: 0 0 .25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-table small { display: block; margin-top: .25rem; color: var(--muted); }
.feedback-page-link { display: block; max-width: 17rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.feedback-status-form { display: flex; align-items: center; gap: .375rem; }
.feedback-status-form .toolbar__input { min-width: 7.5rem; }

@media (max-width: 720px) {
  .feedback-status-form { justify-content: flex-end; flex-wrap: wrap; }
  .feedback-page-link { margin-inline-start: auto; }
}

/* System administration controls */
.account-access-card, .center-operations { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.account-access-card__facts { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.account-access-card__facts div { min-width: 8rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.account-access-card__facts dt { color: var(--muted); font-size: var(--text-micro); }
.account-access-card__facts dd { margin: .125rem 0 0; color: var(--brand); font-weight: 750; }
.center-operations__activity { margin: .5rem 0 0; font-size: var(--text-small); }
.admin-audit-preview { margin-bottom: 1rem; }
.audit-details { display: block; max-width: 22rem; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.audit-event-card { margin-bottom: 1rem; }
.audit-event-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.audit-event-facts div { min-width: 0; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.audit-event-facts dt { color: var(--muted); font-size: var(--text-label); font-weight: 700; }
.audit-event-facts dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-weight: 650; }
.audit-event-metadata pre { max-width: 100%; margin: .75rem 0 0; padding: .75rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); direction: ltr; text-align: start; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin_users-index .table small { display: block; color: var(--muted); font-size: var(--text-micro); }
.action-menu { position: relative; display: inline-block; text-align: start; }
.action-menu__trigger {
  display: inline-flex;
  min-width: 7rem;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  color: var(--brand-dark);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: 700;
  list-style: none;
}
.action-menu__trigger::-webkit-details-marker { display: none; }
.action-menu__trigger::after { content: ""; width: .45rem; height: .45rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform var(--duration) var(--ease); }
.action-menu[open] > .action-menu__trigger { color: var(--brand-dark); background: var(--brand-light); border-color: var(--brand); }
.action-menu[open] > .action-menu__trigger::after { transform: translateY(.1rem) rotate(225deg); }
.action-menu__panel {
  position: absolute;
  inset-block-start: calc(100% + .35rem);
  inset-inline-end: 0;
  z-index: 20;
  display: grid;
  width: max-content;
  min-width: 12rem;
  max-width: min(18rem, calc(100vw - 2rem));
  gap: .25rem;
  padding: .375rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.action-menu--drop-up .action-menu__panel { inset-block-start: auto; inset-block-end: calc(100% + .35rem); }
.action-menu__panel .button_to,
.action-menu__panel .action-menu__item { width: 100%; }
.action-menu__item { justify-content: flex-start; min-height: 44px; padding: .75rem .75rem; font-size: var(--text-body); text-align: start; white-space: normal; }
.action-menu__item:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }
.action-menu__danger { margin-block-start: .125rem; padding-block-start: .5rem; border-block-start: 1px solid var(--border); }
.action-menu__danger .button_to,
.action-menu__danger .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .action-menu__trigger::after { transition: none; }
}

@media (max-width: 760px) {
  .account-access-card, .center-operations { align-items: stretch; flex-direction: column; }
  .account-access-card__facts { display: grid; grid-template-columns: 1fr; }
  .center-operations .row-actions { justify-content: stretch; }
  .center-operations .row-actions .btn, .center-operations .row-actions form { width: 100%; }
  .audit-event-facts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .table tr:has(.action-menu[open]) { overflow: visible; }
  .table td.row-actions > .action-menu { flex-basis: 100%; width: 100%; }
  .action-menu__trigger { width: 100%; }
  .action-menu__panel { position: static; width: 100%; min-width: 0; max-width: none; margin-block-start: .375rem; box-shadow: var(--shadow-sm); }
  .action-menu--drop-up .action-menu__panel { inset-block-start: auto; inset-block-end: auto; }
}

/* System health */
.health-overview { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.health-overview__icon { display: grid; width: 2.6rem; height: 2.6rem; flex: none; place-items: center; border-radius: 50%; }
.health-overview__icon .app-icon { width: 1.3rem; height: 1.3rem; }
.health-overview h2, .health-overview p { margin: 0; }
.health-overview p { margin-top: .25rem; color: var(--muted); font-size: var(--text-small); }
.health-overview--healthy { border-color: var(--success-border); background: var(--brand-light); }
.health-overview--healthy .health-overview__icon { color: var(--brand-dark); background: var(--brand-light); }
.health-overview--warning { border-color: var(--warning-border); background: var(--accent-light); }
.health-overview--warning .health-overview__icon { color: var(--warning); background: var(--warning-bg); }
.health-overview--critical { border-color: var(--danger-border); background: var(--danger-bg); }
.health-overview--critical .health-overview__icon { color: var(--danger); background: var(--danger-bg); }
.system-health .stat-grid { margin-bottom: 1rem; }
.health-alerts, .health-infrastructure { margin-bottom: 1rem; }
.health-alert-list { display: grid; gap: .5rem; margin-top: .75rem; }
.health-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem; border-inline-start: 4px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-soft); }
.health-alert--critical { border-inline-start-color: var(--danger); background: color-mix(in srgb, var(--danger-bg) 70%, var(--surface)); }
.health-alert--warning { border-inline-start-color: var(--warning); background: var(--accent-light); }
.health-alert__severity { padding: .25rem .5rem; border-radius: var(--radius-pill); color: var(--muted); background: var(--surface); font-size: var(--text-micro); font-weight: 800; }
.health-alert__body h3, .health-alert__body p { margin: 0; }
.health-alert__body h3 { font-size: var(--text-body); }
.health-alert__body p { margin-top: .125rem; color: var(--muted); font-size: var(--text-label); }
.health-empty { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem; color: var(--brand-dark); }
.health-empty .app-icon { width: 1.2rem; height: 1.2rem; }
.health-infrastructure__grid { display: grid; --grid-min: 145px; gap: .75rem; margin: .75rem 0 0; }
.health-infrastructure__grid div { padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.health-infrastructure__grid dt { color: var(--muted); font-size: var(--text-micro); }
.health-infrastructure__grid dd { margin: .25rem 0 0; color: var(--brand); font-size: var(--text-lead); font-weight: 800; }
.health-settings > summary { cursor: pointer; }
.health-settings__form { margin-top: 1rem; }

@media (max-width: 640px) {
  .health-alert { grid-template-columns: 1fr; align-items: stretch; }
  .health-alert .btn { width: 100%; }
}
.draft-status { margin-inline-end: auto; color: var(--muted); font-size: var(--text-label); }

.confirm-dialog {
  width: min(440px, calc(100% - 2rem));
  padding: 0;
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.confirm-dialog::backdrop { background: color-mix(in srgb, var(--shadow-color) 48%, transparent); }
.confirm-dialog__card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.25rem; }
.confirm-dialog__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--danger);
  border-radius: 50%;
  background: var(--danger-bg);
}
.confirm-dialog__icon .app-icon { width: 1.25rem; height: 1.25rem; }
.confirm-dialog__icon--warning { color: var(--warning); background: var(--warning-bg); }
.confirm-dialog h2 { margin: .125rem 0 .375rem; font-size: var(--text-lead); }
.confirm-dialog p { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: 1.5; }
.confirm-dialog__actions { display: flex; justify-content: flex-end; gap: .5rem; grid-column: 1 / -1; margin-top: .5rem; }

@media (max-width: 480px) {
  .confirm-dialog__actions { flex-direction: column-reverse; }
  .confirm-dialog__actions .btn { width: 100%; }
}