/* Lifted from the <style> block of mocks/admin/setup/settings.html.
   Its --navy / --text-muted / --light / --shadow are mapped onto the tokens
   admin.css already carries rather than redefined. .form-grid-2, .toggle-row,
   .form-group and .form-input are left behind: they live in admin.css.

   The mock's own :root is NOT ported - it sets --radius:10px and a black shadow,
   the same stale block the 8 September clean-up removed from every other screen.

   New component families carry the set- prefix, the same way orders.css took ord-
   and products.css took prd-, so nothing here can reach another screen. */

/* The 20px belongs to the panels, not to the pane around them: .page-header carries
   its own 20 already, so padding the pane pushed this screen's title in twice as far
   as every other screen's - measured, 1320 against 1340. The 16 on top is the gap
   the panel had none of: it was glued to the header. */
.settings-layout{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start;margin:16px 20px 0}
.settings-sidebar{background:var(--card);border-radius:var(--radius);box-shadow:var(--elev-1);overflow:hidden;position:sticky;top:0}
.settings-sidebar .sidebar-header{background:var(--primary);color:#fff;padding:14px 16px;font-size:13px;font-weight:600;letter-spacing:.3px;display:flex;align-items:center;gap:8px}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;font-size:13px;color:var(--text);transition:all .15s;border-right:3px solid transparent;background:none;border-top:0;border-bottom:0;border-left:0;width:100%;font-family:inherit;text-align:right}
.sidebar-item:hover{background:var(--primary-ll);color:var(--primary)}
.sidebar-item.active{background:var(--primary-ll);color:var(--primary);font-weight:600;border-right-color:var(--primary)}
.sidebar-item .icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.sidebar-item.pending{color:var(--muted)}
.sidebar-item.danger{color:var(--danger)}
.sidebar-item.danger:hover{background:var(--danger-ll);color:var(--danger)}
.sidebar-item.danger.active{background:var(--danger-ll);color:var(--danger);border-right-color:var(--danger)}
.sidebar-divider{height:1px;background:var(--border);margin:6px 12px}

.section-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--elev-1);margin-bottom:16px;overflow:hidden}
.section-card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
/* The mock wraps the title and its note in a div so they stack; without the
   wrapper the h3's flex:1 stretches and throws the note to the far edge. */
/* Only when the header also carries an action: on its own the mock's wrapper is
   content-width, and stretching it changes where the note wraps. */
.section-card-header>div:first-child:not(:only-child){flex:1}
.section-card-header h3{font-size:14px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:6px}
.section-card-header p{font-size:12px;color:var(--muted);margin-top:3px}
.section-card-body{padding:20px}
.section-card-body.flush{padding:0}

/* A setting that is read at runtime, next to one that is only drawn. Every card
   ported from the mock but not yet wired says so once, at the top of its pane. */
.set-note{display:flex;align-items:flex-start;gap:10px;background:var(--warning-ll);border:1px solid var(--warning-l);border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;font-size:12px;color:var(--text2);line-height:1.6}
.set-note i{color:var(--warning);font-size:16px;flex-shrink:0;margin-top:1px}
.set-ro{background:var(--slate-ll);color:var(--slate);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}

/* A divider between two grids inside one card. The grid gap only works inside a
   grid, so two stacked grids sit flush against each other without this. */
.set-split{border-top:1px solid var(--border);margin-top:14px;padding-top:14px}

/* ─── General: logo, colours, inline number ───────────────────────── */
.set-logo-upload{display:flex;align-items:center;gap:20px;padding:16px;border:1px dashed var(--border);border-radius:10px;background:var(--bg)}
.set-logo-preview{width:80px;height:80px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:20px;font-weight:800;flex-shrink:0}
.set-logo-info{flex:1}
.set-logo-info p{font-size:12px;color:var(--muted);margin-top:6px}
.set-color-row{display:flex;align-items:center;gap:10px}
.set-swatch{width:36px;height:36px;padding:2px;border:2px solid var(--border);border-radius:8px;background:var(--card);cursor:pointer;flex-shrink:0}
.set-inline{display:flex;align-items:center;gap:8px}
.set-inline .form-input{max-width:90px;text-align:center}
.set-inline span{font-size:13px;color:var(--muted);white-space:nowrap}

/* Unsaved edits, said in the header. The save button going pale is the only other
   sign that anything is pending, and a disabled button says "no" without saying why. */
.set-dirty{color:var(--warning);font-weight:700}

/* The next serial, shown under its prefix. Reads as a value, not as a hint - it is
   the one thing on that card nobody gets to type. */
.set-next{font-weight:800;color:var(--text2)}

/* ─── Status chip ─────────────────────────────────────────────────── */
/* admin.css carries the badge colours but no base chip - the mock's own settings
   page relies on a .badge rule that lives in purchases.html and never reaches it,
   so the role chips render there as bare text. Given a shape here, and the users
   pane still wears it. The role-coloured variants went with the mock's own table:
   roles are made on the screen now and cannot each have a colour written in. */
.set-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.set-chip.active{background:var(--success-l);color:var(--success)}
.set-chip.inactive{background:var(--danger-l);color:var(--danger)}

/* ─── Notification channels ───────────────────────────────────────── */
.set-notif-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:14px}
.set-notif-head{background:var(--bg);padding:12px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.set-notif-head .ni{font-size:20px;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--card);color:var(--primary)}
.set-notif-head .nt{font-weight:700;font-size:14px}
.set-notif-head .nd{font-size:12px;color:var(--muted)}
.set-notif-head .set-notif-toggle{margin-right:auto}
.set-notif-body{padding:14px 16px}

/* ─── Integrations ────────────────────────────────────────────────── */
.set-int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.set-int-card{border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;align-items:flex-start;gap:14px;background:var(--card);transition:box-shadow .2s}
.set-int-card:hover{box-shadow:var(--elev-1)}
.set-int-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;background:var(--bg);color:var(--primary)}
.set-int-info{flex:1}
.set-int-info .i-name{font-weight:700;font-size:14px}
.set-int-info .i-desc{font-size:12px;color:var(--muted);margin-top:3px}
.set-int-info .i-status{margin-top:8px}
.set-dot-on{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--success);font-weight:600}
.set-dot-off{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600}

/* ─── Backup ──────────────────────────────────────────────────────── */
.set-backup-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;font-size:13px;background:var(--bg)}
.set-backup-row .br-date{font-weight:600}
.set-backup-row .br-size{color:var(--muted);font-size:12px}
.set-backup-row .br-actions{display:flex;align-items:center;gap:10px}
.set-backup-type{font-size:11px;background:var(--primary-ll);color:var(--primary);padding:2px 8px;border-radius:20px;font-weight:600}
.set-backup-type.manual{background:var(--warning-l);color:var(--warning)}

/* ─── Danger zone ─────────────────────────────────────────────────── */
.set-danger-zone{border:1px solid var(--danger);border-radius:var(--radius);padding:16px 20px;background:var(--danger-ll)}
.set-danger-zone h4{color:var(--danger);font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.set-danger-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--danger-l)}
.set-danger-item:last-child{border-bottom:none;padding-bottom:0}
.set-danger-item .di-label{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.set-danger-item .di-desc{font-size:12px;color:var(--muted);margin-top:2px}

.set-card-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.set-card-actions.end{justify-content:flex-end}
.set-scroll-x{overflow-x:auto}

/* A form group that is a block of its own above a grid, and one that should not
   stretch to the full column - the mock writes both as inline styles. */
.set-block{margin-bottom:20px}
.set-narrow{max-width:260px}
.set-narrow .form-input{max-width:260px}
/* The mock greys the read-only field with an inline style. */
.set-pane .form-input[readonly]{background:var(--bg);color:var(--muted)}