/* Company settings (spec §5.13, WP10): save bar, brand preview strip, notifications table, delivery rows, delivery log.
   Rail / list / layout rules live in css/views.css; everything here uses tokens.css only. */

/* ---- section list (phone) ---- */
.settings-layout.single { grid-template-columns: 1fr; }
/* Phones: #/settings is the list and each section is its own screen with a back chevron, so the rail is not repeated (spec §5.13). */
@media (max-width: 719px) { .settings-page .settings-rail { display: none; } }

/* ---- save bar: inline on desktop, fixed above the tab bar on phones, shown only when dirty ---- */
.settings-savebar { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); margin-top: var(--s2); }
.settings-savebar .saved-flag { margin-right: auto; }
@media (max-width: 719px) {
  .settings-savebar:not(.dirty) { display: none; }
  .settings-savebar.dirty { justify-content: stretch; }
  .settings-savebar.dirty .btn { flex: 1; }
  .settings-savebar .saved-flag { display: none; }
}

/* ---- company & branding ---- */
.logo-block { display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--s4); }
.colour-row input[type="color"] { width: var(--control-h); height: var(--control-h); flex: 0 0 var(--control-h); padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.colour-row .control { flex: 1; min-width: 0; max-width: 160px; font-family: var(--font-mono); text-transform: uppercase; }
.address-row .control { flex: 1; min-width: 0; }
.brand-preview { --pv-brand: var(--brand-600); --pv-brand-50: var(--brand-50); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.bp-pane { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bp-cap { font: var(--t-caption); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.bp-header, .bp-card, .bp-mail { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; min-height: 96px; }
.bp-header { display: flex; align-items: center; gap: 8px; padding: 10px; min-height: 0; height: 52px; }
.bp-header img, .bp-card img { height: 22px; max-width: 70px; object-fit: contain; object-position: left; }
.bp-nav { display: flex; gap: 6px; flex: 1; min-width: 0; }
.bp-nav i { display: block; width: 18px; height: 6px; border-radius: 3px; background: var(--n200); }
.bp-nav i:first-child { background: var(--pv-brand); }
.bp-btn { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: var(--r-sm); background: var(--pv-brand); color: #fff; font: 700 10px/1 var(--font); white-space: nowrap; }
.bp-btn.block { width: 100%; height: 26px; }
.bp-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--pv-brand-50); }
.bp-card img { height: 20px; }
.bp-card b { font: 700 13px/16px var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-mail { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.bp-band { margin: 0 -12px; padding: 10px 12px; background: var(--pv-brand); color: #fff; font: 700 12px/16px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-line { display: block; height: 6px; border-radius: 3px; background: var(--n200); }
.bp-line.short { width: 60%; }
@media (max-width: 559px) {
  .brand-preview { grid-template-columns: 1fr 1fr; }
  .brand-preview .bp-pane:first-child { grid-column: 1 / -1; }
}

/* ---- reminders ---- */
.rem-summary { font: var(--t-body); color: var(--text-2); }
.time-row select { width: 84px; flex: 0 0 84px; }
.time-colon { font: var(--t-body-strong); color: var(--text-3); }
.time-24 { margin-left: var(--s2); }
.rem-actions { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border); }
#timezone { font-family: var(--font-mono); }

/* ---- notifications table ---- */
.notif-table th[scope="row"] { font: var(--t-body); color: var(--text); height: auto; padding-top: 10px; padding-bottom: 10px; text-transform: none; letter-spacing: 0; }
.notif-table .ev-name { display: block; font: var(--t-body); color: var(--text); }
.notif-table .ev-sub { display: block; font: var(--t-sm); color: var(--text-3); }
.notif-table .col-sw, .notif-table td { width: 72px; text-align: center; }
.notif-table td .switch { margin: 0 auto; }
.notif-table .ev-na { font: var(--t-caption); color: var(--text-3); white-space: nowrap; }
.notif-table .ev-locked { display: inline-flex; align-items: center; gap: 4px; font: var(--t-label); color: var(--text-2); }
.notif-table .group-row th { font: var(--t-h3); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); height: 36px; padding-top: 14px; background: var(--surface); }
.notif-table tbody tr.group-row:hover { background: var(--surface); }
.notif-table + .notice { margin-top: var(--s4); }
@media (max-width: 559px) {
  .notif-table, .notif-table tbody { display: block; width: 100%; }
  .notif-table thead { display: none; }
  .notif-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); padding: 10px 0; border-bottom: 1px solid var(--border); }
  .notif-table tr:last-child { border-bottom: 0; }
  .notif-table tr.group-row { display: block; padding: 0; border-bottom: 0; }
  .notif-table th[scope="row"] { grid-column: 1 / -1; display: block; padding: 0 0 8px; border: 0; height: auto; }
  .notif-table td { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: auto; height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); text-align: left; }
  .notif-table td::before { content: attr(data-th); font: var(--t-label); color: var(--text-2); }
  .notif-table td .switch { margin: 0; }
}

/* ---- email delivery ---- */
.delivery-rows .device-row { align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.delivery-rows .device-row:last-child { border-bottom: 0; }
.delivery-rows .dot { margin-top: 7px; }
.delivery-rows .device-row b { color: var(--text); }

/* ---- delivery log ---- */
.log-summary { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--n100); color: var(--text-2); font: var(--t-sm); margin-bottom: var(--s4); }
.log-summary .i { flex: 0 0 auto; margin-top: 1px; color: var(--text-3); }
.log-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s4); }
.log-filters .field.compact { flex: 1 1 160px; min-width: 0; margin: 0; }
.log-filters .failed-only { min-height: var(--control-h); flex: 0 0 auto; }
.log-table .person-chip { white-space: nowrap; }
.log-table .log-ok { display: inline-flex; align-items: center; gap: 4px; font: var(--t-label); }
.log-table .log-result { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.log-table tr.failed td:first-child { box-shadow: inset 3px 0 0 var(--danger-600); }
.log-error summary { font: var(--t-sm); color: var(--link); cursor: pointer; min-height: 24px; display: inline-flex; align-items: center; text-decoration: underline; }
.log-error p { margin-top: 4px; max-width: 48ch; overflow-wrap: anywhere; }
.log-foot { margin-top: var(--s3); }
.log-more-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.log-more-row .log-count { margin: 0; }
.log-count { text-align: right; }
@media (max-width: 719px) {
  .log-table tr { padding: 12px 0; }
  .log-table td { min-height: 28px; align-items: center; }
  .log-table tr.failed td:first-child { box-shadow: none; }
  .log-table tr.failed { border-left: 3px solid var(--danger-600); padding-left: 10px; }
  .log-table .log-result { justify-content: flex-end; }
}