/* ============================================================================
   settings.css — tweaks specific to the Settings module ONLY.
   No fonts/colors/global styles here (core.css owns all tokens).
   Everything leans on documented .card/.table/.stat-row/.attn classes;
   this file adds the left section-nav, the iOS-style .settings-toggle,
   labeled input fields, plan card, gauge core + danger zone — all .settings-*.
   ========================================================================== */

/* ── SHELL: left section nav | right content host ─────────────────────────── */
.settings-shell{
  display:grid;
  grid-template-columns:268px 1fr;
  gap:var(--gap);
  align-items:start;
}
.settings-host{min-width:0}
.settings-panel{display:flex;flex-direction:column;gap:var(--gap);animation:viewIn .34s var(--ease)}

/* ── LEFT NAV CARD ────────────────────────────────────────────────────────── */
.settings-navwrap{position:sticky;top:0;display:flex;flex-direction:column}
.settings-org{display:flex;align-items:center;gap:11px;padding:15px 15px 13px;border-bottom:1px solid var(--border)}
.settings-orgmark{background:var(--accent-grad);color:var(--bg);font-family:var(--font-display)}
.settings-orgmeta{min-width:0}
.settings-orgname{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.2px}
.settings-orgsub{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--text-faint);margin-top:1px}

.settings-nav{display:flex;flex-direction:column;padding:8px;gap:3px}
.settings-nav-btn{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 10px;border-radius:var(--radius-sm);
  border:1px solid transparent;color:var(--text-muted);
  transition:all .16s var(--ease);position:relative;
}
.settings-nav-btn:hover{background:var(--panel);color:var(--text)}
.settings-nav-btn.active{
  background:var(--panel-hi);color:var(--text);border-color:var(--border-hi);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent1) 18%,transparent),0 0 16px var(--weather);
}
.settings-nav-btn.active::before{
  content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:2px;background:var(--accent-grad);box-shadow:0 0 10px var(--accent1);
}
.settings-nav-ico{
  width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:15px;
  background:var(--bg2);border:1px solid var(--border);
}
.settings-nav-btn.active .settings-nav-ico{border-color:var(--border-hi);background:var(--panel)}
.settings-nav-text{display:flex;flex-direction:column;min-width:0;flex:1}
.settings-nav-label{font-size:13px;font-weight:600;line-height:1.2}
.settings-nav-sub{font-size:10.5px;color:var(--text-faint);margin-top:1px}
.settings-nav-chev{font-size:15px;color:var(--text-faint);opacity:0;transition:.16s var(--ease)}
.settings-nav-btn:hover .settings-nav-chev,.settings-nav-btn.active .settings-nav-chev{opacity:1;color:var(--accent1)}

.settings-navfoot{margin-top:auto;padding:13px 15px;border-top:1px solid var(--border)}
.settings-plan-chip{display:flex;align-items:center;justify-content:space-between;gap:8px}
.settings-plan-name{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--accent1)}
.settings-plan-meta{font-size:10.5px;color:var(--text-faint);margin-top:6px}

/* ── LABELED FIELDS (Company) ─────────────────────────────────────────────── */
.settings-fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.settings-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.settings-field-label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-faint);display:flex;align-items:center;gap:6px;
}
.settings-lock{font-size:9px;filter:saturate(0)}
.settings-input{
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 11px;font-size:13px;color:var(--text);outline:none;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
  font-variant-numeric:tabular-nums;
}
.settings-input.mono{font-family:var(--font-mono);letter-spacing:.5px}
.settings-input:focus{border-color:var(--border-hi);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent1) 10%,transparent)}
.settings-field.locked .settings-input{background:var(--bg2);color:var(--text-muted);cursor:not-allowed}

.settings-subgrid{margin-bottom:0}

.settings-brandrow{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--border)}

/* ── TOGGLE SWITCH (.settings-toggle) ─────────────────────────────────────── */
.settings-toggle{
  width:42px;height:24px;border-radius:20px;flex:none;position:relative;
  background:var(--bg);border:1px solid var(--border-hi);
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.settings-toggle .settings-knob{
  position:absolute;top:50%;left:3px;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;background:var(--text-faint);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.settings-toggle.on{background:var(--accent-grad);border-color:transparent;box-shadow:0 0 14px var(--glow)}
.settings-toggle.on .settings-knob{transform:translateY(-50%) translateX(18px);background:var(--bg)}
.settings-toggle:hover{border-color:var(--accent1)}

.settings-toggle-list{display:flex;flex-direction:column}
.settings-toggle-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--border)}
.settings-toggle-row:last-child{border-bottom:none}
.settings-toggle-body{flex:1;min-width:0}

/* ── TEAM ─────────────────────────────────────────────────────────────────── */
.settings-seatcard{padding:16px}
.settings-seat-grid{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:20px;align-items:center}
.settings-seat-stat .big-num{margin-top:2px}
.settings-rolecount{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.settings-rolepip{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.5px;color:var(--text-muted);
  padding:3px 9px;border-radius:20px;border:1px solid var(--border);background:var(--panel);
}
.settings-rolepip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
.settings-seat-cta{display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right}

.settings-tablewrap{overflow-x:auto}
.settings-member{display:flex;align-items:center;gap:10px}
.settings-mname{font-weight:600;white-space:nowrap}
.settings-rolepill{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;color:var(--rc);
  border:1px solid color-mix(in srgb,var(--rc) 35%,transparent);
  background:color-mix(in srgb,var(--rc) 10%,transparent);
}
.settings-rolepill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rc);box-shadow:0 0 6px var(--rc)}
.settings-rowmenu{padding:4px 9px;font-size:15px;line-height:1}

/* ── PLAN ─────────────────────────────────────────────────────────────────── */
.settings-plancard{display:flex;flex-direction:column}
.settings-plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.settings-plan-title{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.05;margin-top:2px}
.settings-plan-price{display:flex;align-items:baseline;gap:9px;margin:14px 0 4px}
.settings-plan-per{font-size:12px;color:var(--text-muted)}
.settings-plan-feats{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.settings-feat{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.3px;color:var(--text-muted);
  padding:3px 9px;border-radius:7px;border:1px solid var(--border);background:var(--bg2);
}

.settings-paymethod{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.settings-cardchip{
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:1.5px;
  padding:6px 9px;border-radius:7px;color:var(--bg);
  background:linear-gradient(120deg,var(--accent2),var(--accent3));flex:none;
}

.settings-usage{display:flex;flex-direction:column;gap:14px}
.settings-usagerow .settings-field-label{text-transform:none;letter-spacing:.3px;font-size:12px;font-family:var(--font-body);color:var(--text);font-weight:500}

/* ── SECURITY ─────────────────────────────────────────────────────────────── */
.settings-scorecard{display:flex;flex-direction:column}
.settings-gauge{position:relative;display:grid;place-items:center;margin:2px auto 8px;width:172px;height:130px;overflow:hidden}
.settings-gauge .chart{position:absolute;inset:0}
.settings-gauge-core{position:relative;text-align:center;z-index:2;margin-top:18px}
.settings-gauge-num{font-family:var(--font-display);font-size:40px;font-weight:600;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.settings-gauge-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:2.5px;color:var(--success);margin-top:4px}
.settings-scorebreak{margin-top:4px}

.settings-sess-meta{display:flex;align-items:center;gap:9px}
.settings-warn{color:var(--warn)}

.settings-audit{padding:4px 0 6px}
.settings-audit-row{
  display:grid;grid-template-columns:14px 96px auto 1fr;align-items:center;gap:11px;
  padding:9px 16px;border-bottom:1px solid var(--border);font-size:12.5px;
}
.settings-audit-row:last-child{border-bottom:none}
.settings-audit-tick{width:7px;height:7px;border-radius:50%;background:var(--accent1);box-shadow:0 0 6px var(--accent1)}
.settings-audit-tick.warn{background:var(--warn);box-shadow:0 0 6px var(--warn)}
.settings-audit-tick.bad{background:var(--danger);box-shadow:0 0 6px var(--danger)}
.settings-audit-tick.auto{background:var(--accent3);box-shadow:0 0 6px var(--accent3)}
.settings-audit-ts{font-size:10.5px;letter-spacing:.5px;color:var(--text-faint)}
.settings-audit-who{font-weight:600;color:var(--text);white-space:nowrap}
.settings-audit-what{color:var(--text-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── NOTIFICATIONS ────────────────────────────────────────────────────────── */
.settings-chanhead{display:grid;grid-template-columns:1fr 56px 56px 56px;gap:10px;padding:4px 0 6px;align-items:center}
.settings-chan-col{
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:var(--text-faint);
  text-align:center;
}
.settings-prefs{display:flex;flex-direction:column}
.settings-prefs .section-title{margin:14px 0 6px}
.settings-prefs .section-title:first-child{margin-top:4px}
.settings-prefrow{display:grid;grid-template-columns:1fr 56px 56px 56px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.settings-prefrow:last-child{border-bottom:none}
.settings-chan-cell{display:grid;place-items:center}
.settings-prefrow .settings-toggle{transform:scale(.92)}

/* ── DATA ─────────────────────────────────────────────────────────────────── */
.settings-export-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.settings-export-btn{
  display:flex;align-items:center;gap:11px;text-align:left;
  padding:11px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg2);
  transition:all .16s var(--ease);
}
.settings-export-btn:hover{border-color:var(--border-hi);background:var(--panel);transform:translateY(-1px)}
.settings-export-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--panel);border:1px solid var(--border);flex:none}
.settings-export-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.settings-export-text .settings-field-label{text-transform:none;letter-spacing:.2px;font-size:12.5px;font-family:var(--font-body);font-weight:600;color:var(--text)}
.settings-export-dl{color:var(--accent1);font-size:15px;flex:none}

.settings-drop{
  border:1.5px dashed var(--border-hi);border-radius:var(--radius);
  padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--bg2);transition:border-color .16s var(--ease),background .16s var(--ease);margin-bottom:13px;
}
.settings-drop:hover{border-color:var(--accent1);background:var(--panel)}
.settings-drop-ico{font-size:26px;color:var(--accent1);margin-bottom:4px}
.settings-importsrc{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.settings-src{
  font-size:12px;font-weight:500;color:var(--text-muted);text-align:left;
  padding:9px 11px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel);
  transition:all .16s var(--ease);
}
.settings-src:hover{border-color:var(--border-hi);color:var(--text);transform:translateY(-1px)}

/* danger zone — subtle, never shouty */
.settings-dangerzone{border-color:color-mix(in srgb,var(--danger) 22%,var(--border))}
.settings-danger-list{display:flex;flex-direction:column;gap:10px}
.settings-danger-btn{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.settings-danger-btn:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:var(--danger);color:var(--danger)}

/* ── MY PROFILE ───────────────────────────────────────────────────────────── */
.settings-profilehead{display:flex;align-items:flex-start;gap:16px}
.settings-avatarwrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.settings-bigavatar{width:64px;height:64px;font-size:22px;background:var(--accent-grad);color:var(--bg);font-family:var(--font-display)}
.settings-avatar-edit{font-size:11px;padding:4px 9px}
.settings-maillist .li-title.mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.3px}

/* body metrics → Vitals */
.settings-bodygrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.settings-bmibar{margin-top:14px;padding-top:13px;border-top:1px solid var(--border)}

/* ── NOTIFICATION MATRIX ──────────────────────────────────────────────────── */
.settings-matrixcard{overflow:hidden}
.settings-matrix{overflow-x:auto}
.settings-matrix-head,
.settings-matrix-row{
  display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(4,72px);
  align-items:center;gap:8px;
}
.settings-matrix-head{
  padding:0 16px 9px;border-bottom:1px solid var(--border);position:sticky;top:0;
}
.settings-matrix-corner{justify-self:start}
.settings-matrix-col{
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.2px;color:var(--text-faint);
  text-align:center;text-transform:uppercase;justify-self:center;
}
.settings-matrix-body{display:flex;flex-direction:column}
.settings-matrix-row{padding:10px 16px;border-bottom:1px solid var(--border)}
.settings-matrix-row:last-child{border-bottom:none}
.settings-matrix-row:hover{background:var(--panel)}
.settings-matrix-rowlabel{
  display:flex;align-items:center;gap:11px;min-width:0;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.2px;color:var(--text-faint);text-transform:uppercase;
}
.settings-matrix-ico{
  width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:14px;
  background:var(--bg2);border:1px solid var(--border);
}
.settings-matrix-text{display:flex;flex-direction:column;min-width:0}
.settings-matrix-name{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);letter-spacing:0;text-transform:none}
.settings-matrix-sub{font-family:var(--font-body);font-size:11px;color:var(--text-faint);letter-spacing:0;text-transform:none;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-matrix-cell{display:grid;place-items:center}
.settings-toggle-sm{width:38px;height:22px}
.settings-toggle-sm .settings-knob{width:14px;height:14px}
.settings-toggle-sm.on .settings-knob{transform:translateY(-50%) translateX(16px)}

.settings-prefsave{display:flex;flex-direction:column}

/* ── COMPANY RECORDS ──────────────────────────────────────────────────────── */
.settings-select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) center,calc(100% - 11px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px;
}
.settings-select option{background:var(--bg2);color:var(--text)}
.settings-contactpick{margin-top:8px}

.settings-metacard{display:flex;flex-direction:column}
.settings-metaline{display:flex;flex-wrap:wrap;gap:9px}
.settings-metachip{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.3px;color:var(--text-muted);
  padding:5px 11px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);
}
.settings-metachip b{color:var(--text);font-weight:600}

/* gate (no-permission) card */
.settings-gatecard{text-align:center;padding:30px 24px;align-items:center}
.settings-gate-ico{font-size:34px;margin-bottom:8px;filter:saturate(0.4)}
.settings-gatecard h3{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:6px}
.settings-gatecard p{max-width:440px;margin:0 auto 14px}
.settings-gate-meta{max-width:340px;margin:0 auto;text-align:left;width:100%}

/* ── APPEARANCE ───────────────────────────────────────────────────────────── */
.settings-themes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.settings-themeswatch{
  display:flex;align-items:center;gap:11px;text-align:left;
  padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg2);
  transition:all .16s var(--ease);
}
.settings-themeswatch:hover{border-color:var(--border-hi);transform:translateY(-1px)}
.settings-themeswatch.active{border-color:var(--accent1);box-shadow:0 0 0 1px var(--accent1),0 0 16px var(--glow);background:var(--panel)}
.settings-themedot{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:0 0 10px color-mix(in srgb,var(--accent1) 30%,transparent)}
.settings-themename{font-size:13px;font-weight:600;color:var(--text)}

/* team default policy */
.settings-policy{display:flex;flex-direction:column}
.settings-policyrow{
  display:grid;grid-template-columns:30px 1fr auto auto;align-items:center;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--border);
}
.settings-policyrow:last-child{border-bottom:none}
.settings-policyrow:hover{background:var(--panel)}
.settings-policy-name{font-size:13px;font-weight:600;color:var(--text)}
.settings-policy-chans{font-family:var(--font-mono);font-size:11px;letter-spacing:.3px;color:var(--text-muted);text-align:right}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .settings-shell{grid-template-columns:1fr}
  .settings-navwrap{position:relative}
  .settings-nav{flex-direction:row;flex-wrap:wrap;overflow-x:auto}
  .settings-nav-btn{flex:1 1 auto;min-width:150px}
  .settings-nav-sub,.settings-nav-chev{display:none}
  .settings-seat-grid{grid-template-columns:1fr}
  .settings-seat-cta{align-items:flex-start;text-align:left}
}
@media (max-width:680px){
  .settings-fieldgrid,.settings-bodygrid,.settings-themes{grid-template-columns:1fr}
  .settings-export-grid,.settings-importsrc{grid-template-columns:1fr}
  .settings-audit-row{grid-template-columns:12px auto 1fr;gap:9px}
  .settings-audit-ts{display:none}
  .settings-profilehead{flex-direction:column;align-items:stretch}
  .settings-avatarwrap{flex-direction:row;justify-content:flex-start}
  .settings-policyrow{grid-template-columns:24px 1fr auto;gap:9px}
  .settings-policy-chans{display:none}
  /* matrix: shrink the row-label min so the horizontal scroll fits a phone
     and the channel toggles stay reachable; the card still scrolls in X */
  .settings-matrix-head,
  .settings-matrix-row{grid-template-columns:minmax(150px,1.2fr) repeat(4,52px);gap:6px}
  .settings-matrix-head,.settings-matrix-row{padding-left:13px;padding-right:13px}
  .settings-matrix-sub{display:none}
}