/* settings: view-specific styles (keep small; prefer panel.css components) */
/* the five pages of Ayarlar: each fills the window, so the save bar (the last thing on the page) sits at the bottom; it
   follows the scroll while it shows, and a toast rises above it (the bar's height, read by the view into --set-bar-h since
   the bar wraps on a phone, its 14px and a gap) */
.set-page{min-height:calc(100vh - var(--top) - 44px)}
.set-page > .savebar{position:sticky;bottom:14px;z-index:5;margin-top:auto;box-shadow:var(--shadow)}
body:has(.set-page > .savebar:not([hidden])) .toasts{bottom:calc(var(--set-bar-h,56px) + 32px)}
.set-page .input.chg{border-color:var(--accent);background:var(--acc-bg)}
.set-page .form-err:empty{display:none}
/* a field's own message under its box (settings.js msgOf), like the panel's other forms' (.cu-err, .rs-err) */
.set-page .field .set-err{margin:0;min-height:0;color:var(--bad);font-size:11.5px}
/* the grey help line (the ranges and rules that prevent an error: always visible) and the explanation behind "Nasıl
   çalışır?" */
.set-help{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.set-help span:where(.ic){width:15px;height:15px;flex:none;margin-top:2px;color:var(--faint)}
.set-how p{margin:0 0 8px;max-width:76ch;font-size:13px;color:var(--muted);line-height:1.5}
.set-how p:last-child{margin-bottom:0}
/* a number with its unit (a prefix "€" or a suffix "PC" / "gün" inside the box) */
.set-in{position:relative;display:block;max-width:180px}
.set-in i{position:absolute;top:50%;transform:translateY(-50%);font-style:normal;font-size:12.5px;color:var(--faint);pointer-events:none}
.set-in.pre i{left:11px}
.set-in.pre .input{padding-left:26px}
.set-in.suf i{right:11px}
.set-in.suf .input{padding-right:52px}
.set-in .input{font-variant-numeric:tabular-nums}
.set-in .input:disabled{color:var(--faint)}
.set-in .input:disabled ~ i{display:none}

/* plans table: a plan per row with its six boxes (a daily limit's empty box reads "Sınırsız"), the licence counts as the
   grey line under the name; the boxes keep room for their widest value so the table never scrolls sideways at 1440 px */
.set-plans th,.set-plans td{padding-left:10px;padding-right:10px}
.set-plans th:first-child,.set-plans td:first-child{padding-left:16px}
.set-plans td{vertical-align:middle}
.set-plans .set-name{min-width:150px}
.set-plans .set-name .sub{margin-top:3px}
@media (min-width:641px){
  .set-plans .set-in{min-width:88px}
  .set-plans .set-in.suf{min-width:100px}
  .set-plans .set-in.pre i{left:9px}
  .set-plans .set-in.pre .input{padding-left:22px}
  .set-plans .set-in.suf i{right:9px}
  .set-plans .set-in.suf .input{padding-right:34px}
}
/* a state notice of a section (the mail transport the reminders go out with) */
.set-hint{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.set-hint span:where(.ic){width:15px;height:15px;flex:none;margin-top:1px;color:var(--faint)}
/* "Müşteri hesapları" open while no legal text is registered: a warning that reads as one (the text in full colour) */
.set-cust-warn span:where(:not(.ic)){color:var(--text);line-height:1.45}
.set-days{max-width:360px}
.set-chips{gap:6px;min-height:20px}
.set-fixed{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 11px;border-radius:9px;border:1px dashed var(--line2);background:var(--panel2);font-size:13.5px}
.set-fixed span:where(.ic){width:15px;height:15px;color:var(--faint)}
.set-fixed b{font-weight:600}
/* Cihaza güven: the length in days, the removal limits in PCs (its own wrapper: the page's .set-in inputs are the plans
   and the retention ones) */
.set-unit{position:relative;display:block;max-width:180px}
.set-unit i{position:absolute;top:50%;right:11px;transform:translateY(-50%);font-style:normal;font-size:12.5px;color:var(--faint);pointer-events:none}
.set-unit .input{padding-right:52px;font-variant-numeric:tabular-nums}
/* "Giriş modeli": its two choices as wide as their longest option needs, not the whole card; the reason a choice is not
   offered yet (.set-why) a shade stronger than the help */
.set-model .select{max-width:440px}
.set-model .set-why{color:var(--muted)}
/* "Giriş modeli" while the app's sign-in (or the accounts) is off: a warning that reads as one, with a way to that switch:
   a link-like button that wraps with the text (a .btn never wraps and would push the card wider on a phone); a save the
   server refused: its message on the section in the colours of a refusal */
.set-gate-off span:where(:not(.ic)),.set-refused span:where(:not(.ic)){color:var(--text);line-height:1.45}
.set-goto{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:3px;text-align:left;cursor:pointer}
@media (hover:hover){.set-goto:hover{text-decoration:underline}}
.callout.set-refused{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad-bg)}
.callout.set-refused span:where(.ic){color:var(--bad)}
/* "Giriş modeli": the model's numbers under its controls (the last 7 days' starts, by rule, the owners): read-only plain
   rows, set apart from the controls by a line */
.set-stats{border-top:1px solid var(--line);padding-top:14px}

/* diff inside the confirm dialog */
.set-diff{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;max-height:280px;overflow:auto}
.set-diff-r{padding:8px 11px;border-bottom:1px solid var(--line);font-size:12.5px}
.set-diff-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.set-diff-r:last-child{border-bottom:0}
.set-diff-r b{font-weight:600}
.set-diff-r small{display:block;color:var(--faint);font-size:11.5px;margin-top:1px}
.set-diff-r .v{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;white-space:nowrap;flex:none}
.set-diff-r .v span:where(.ic){width:13px;height:13px;color:var(--faint)}
.set-diff-r .from{color:var(--muted);text-decoration:line-through}

/* phones: each plan becomes a small block with labelled boxes */
@media (max-width:640px){
  .set-plans thead{display:none}
  .set-plans tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .set-plans tr:last-child{border-bottom:0}
  .set-plans td,.set-plans td:first-child{display:block;padding:0;border:0}
  .set-plans .set-name{grid-column:1/-1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .set-plans .set-name .sub{margin-top:0}
  .set-plans td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--faint);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .set-in{max-width:none}
  .set-in.suf .input{padding-right:46px}
  .set-unit{max-width:none}
  .set-unit .input{padding-right:46px}
}
/* the save bar on a phone: flush with the bottom edge (panel.css), its text wrapping above the buttons */
@media (max-width:560px){
  .set-page > .savebar{bottom:0;border-radius:12px 12px 0 0}
}