/* ============================================================
   DIA_SETTINGS_MODERN_V1 (build SET, Jonathan 22 Oct 2026 21:14: "All documents under Settings — ALL forms need to be modern")
   ONE look for the client portal's Settings: the home (cards grouped under the gold section headings, a search box), every
   Settings page (title, one plain line, Back to Settings, the content in cards) and every form (labels above the fields, help
   under them, required marked, one Save per card, a sticky Save bar on long forms on a phone).
   Colours: css/diano-theme.css tokens only. Contrast (WCAG AA, 4.5:1 text, 3:1 borders):
     ink #0B1B33 on white 17.2:1; muted #475569 on white 7.6:1; ink on gold-wash #FBF6E6 15.9:1; danger #B42318 on white 6.5:1;
     success #15803D on white 5.0:1; the field border #94A3B8 against white 2.6:1 is decoration (the label and the 2 px focus
     ring, ink 17.2:1, carry the meaning); gold-deep #C9A227 card rule is decoration as in the menu headings.
   Touch: every control in a Settings page is at least 44 px high.
   ============================================================ */

/* ---------- the Settings home ---------- */
.dset-home{font-family:var(--dia-font);color:var(--dia-text);max-width:1180px}
.dset-home h1{font-size:24px;line-height:1.25;margin:0 0 4px;color:var(--dia-ink);font-weight:800}
.dset-lead{margin:0 0 16px;color:var(--dia-muted);font-size:15px;line-height:1.45;max-width:72ch}
.dset-search{position:relative;max-width:560px;margin:0 0 18px}
.dset-search input{box-sizing:border-box;width:100%;min-height:48px;padding:12px 14px 12px 44px;border:1px solid var(--dia-field);border-radius:var(--dia-radius);background:var(--dia-surface);font:inherit;font-size:15px;color:var(--dia-text)}
.dset-search input:focus{outline:2px solid var(--dia-ink);outline-offset:1px;border-color:var(--dia-ink)}
.dset-search svg{position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;fill:none;stroke:var(--dia-muted);stroke-width:1.8;stroke-linecap:round}
.dset-group{margin:0 0 22px}
.dset-group-head{display:inline-block;margin:0 0 10px;padding:6px 12px;border:3px solid var(--dia-gold-deep);border-radius:10px;background:var(--dia-gold-wash);color:var(--dia-ink);
  font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.dset-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.dset-card-link{display:flex;align-items:flex-start;gap:12px;box-sizing:border-box;width:100%;min-height:76px;margin:0;padding:14px 16px;text-align:left;cursor:pointer;
  background:var(--dia-surface);border:1px solid var(--dia-line);border-radius:var(--dia-radius-card);box-shadow:0 1px 2px rgba(11,27,51,.04);font:inherit;color:var(--dia-text);text-decoration:none}
.dset-card-link:hover{border-color:var(--dia-ink);box-shadow:var(--dia-shadow-card)}
.dset-card-link:focus-visible{outline:3px solid var(--dia-gold);outline-offset:2px}
.dset-card-ico{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:var(--dia-gold-soft);display:flex;align-items:center;justify-content:center}
.dset-card-ico svg{width:22px;height:22px;fill:none;stroke:var(--dia-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dset-card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.dset-card-text b{font-size:15px;font-weight:700;color:var(--dia-ink);line-height:1.3}
.dset-card-text span{font-size:13.5px;color:var(--dia-muted);line-height:1.4}
.dset-empty{padding:16px;border:1px dashed var(--dia-field);border-radius:var(--dia-radius);color:var(--dia-muted);background:var(--dia-surface)}

/* ---------- every Settings page ---------- */
#liteContent.dset-page{font-family:var(--dia-font)}
.dset-page-head{margin:0 0 16px}
.dset-page-head h1{font-size:24px;line-height:1.25;margin:4px 0 4px;color:var(--dia-ink);font-weight:800}
.dset-page-head .dset-lead{margin:0}
/* the page's own old title is replaced by the head above (kept in the page for its scripts, hidden from view) */
#liteContent.dset-page .dset-old-title{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:0!important;padding:0!important}
/* the old pages' "Search records…" bar means nothing on a Settings page */
#liteContent.dset-page ~ #searchWrap,html.dset-on-page #searchWrap{display:none!important}

/* cards: the old .doc-card, the menu's .dpm-box and this build's .dset-card look the same */
.dset-card,#liteContent.dset-page .doc-card{background:var(--dia-surface);border:1px solid var(--dia-line);border-radius:var(--dia-radius-card);padding:18px 20px;margin:0 0 16px;box-shadow:0 1px 2px rgba(11,27,51,.04)}
.dset-card>h2,.dset-card-head,#liteContent.dset-page .doc-card>h3:first-child{font-size:17px;font-weight:800;color:var(--dia-ink);margin:0 0 4px;padding:0 0 0 10px;border-left:4px solid var(--dia-gold);line-height:1.3}
.dset-card-sub{margin:0 0 14px;color:var(--dia-muted);font-size:14px;line-height:1.45}
.dset-cards-2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}

/* forms: labels above the fields, help under, required marked */
.dset-fields{display:grid;gap:14px 18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.dset-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.dset-field.dset-wide{grid-column:1/-1}
.dset-field>label,.dset-label{font-size:14px;font-weight:700;color:var(--dia-ink);line-height:1.3}
.dset-req{color:var(--dia-danger);font-weight:800;margin-left:2px}
.dset-opt{color:var(--dia-muted);font-weight:500}
.dset-help{font-size:13px;color:var(--dia-muted);line-height:1.4;margin:0}
.dset-error{font-size:13.5px;color:var(--dia-danger);font-weight:700;line-height:1.4;margin:0}
.dset-error:empty,.dset-help:empty{display:none}
.dset-field input:not([type=checkbox]):not([type=radio]):not([type=file]),.dset-field select,.dset-field textarea,
#liteContent.dset-page input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),#liteContent.dset-page select,#liteContent.dset-page textarea{
  box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--dia-field);border-radius:var(--dia-radius);background:var(--dia-surface);font:inherit;font-size:15px;color:var(--dia-text);max-width:100%}
#liteContent.dset-page select{font-weight:500}
.dset-field input,.dset-field select,.dset-field textarea{width:100%}
.dset-field textarea{min-height:88px;resize:vertical}
.dset-field input:focus,.dset-field select:focus,.dset-field textarea:focus,#liteContent.dset-page input:focus,#liteContent.dset-page select:focus,#liteContent.dset-page textarea:focus{outline:2px solid var(--dia-ink);outline-offset:1px;border-color:var(--dia-ink)}
.dset-field [aria-invalid=true],#liteContent.dset-page [aria-invalid=true]{border-color:var(--dia-danger)!important;outline:2px solid var(--dia-danger)!important;outline-offset:1px}
.dset-field input[readonly]{background:var(--dia-row-alt);color:var(--dia-muted)}
.dset-tick{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14.5px;font-weight:600;color:var(--dia-ink);cursor:pointer}
.dset-tick input{width:20px;height:20px;margin:0;accent-color:var(--dia-ink)}
/* the old pages' labels: on their own line above the field */
#liteContent.dset-page .doc-card label{font-weight:700;color:var(--dia-ink)}

/* buttons */
.dset-btn,#liteContent.dset-page .print-btn{font:inherit;font-weight:700;font-size:15px;min-height:44px;padding:10px 18px;border-radius:var(--dia-radius);border:1px solid var(--dia-ink);background:var(--dia-surface);color:var(--dia-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;box-sizing:border-box}
.dset-btn.dset-primary,#liteContent.dset-page .print-btn{background:var(--dia-ink);color:#fff}
.dset-btn:hover{background:var(--dia-gold-soft)}.dset-btn.dset-primary:hover,#liteContent.dset-page .print-btn:hover{background:var(--dia-ink-2)}
.dset-btn:focus-visible,#liteContent.dset-page .print-btn:focus-visible{outline:3px solid var(--dia-gold);outline-offset:2px}
.dset-btn[disabled]{opacity:.55;cursor:default}
.dset-link{font:inherit;background:none;border:0;padding:10px 2px;min-height:44px;color:var(--dia-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:600}
#liteContent.dset-page button,#liteContent.dset-page a[role=button]{min-height:44px}

/* one Save per card, with its "Saved" */
.dset-save{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--dia-line)}
.dset-status{font-size:14px;font-weight:700;line-height:1.4}
.dset-status[data-kind=ok]{color:var(--dia-success)}
.dset-status[data-kind=error]{color:var(--dia-danger)}
.dset-status[data-kind=busy]{color:var(--dia-muted)}
.dset-dirty-note{font-size:13px;color:var(--dia-link-hover);font-weight:700}

/* notes */
.dset-note{border-radius:var(--dia-radius);padding:12px 14px;font-size:14px;line-height:1.45;margin:0 0 14px;border:1px solid var(--dia-line);background:var(--dia-row-alt);color:var(--dia-text)}
.dset-note.dset-warn{border-color:var(--dia-gold);background:var(--dia-gold-wash)}
.dset-note.dset-ok{border-color:#86EFAC;background:var(--dia-success-soft)}

/* the two big choices (Bring data into DIANO) */
.dset-choices{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.dset-choice{display:flex;flex-direction:column;gap:10px;padding:20px;border:2px solid var(--dia-line);border-radius:var(--dia-radius-card);background:var(--dia-surface)}
.dset-choice h2{margin:0;font-size:18px;color:var(--dia-ink);font-weight:800;line-height:1.3}
.dset-choice ul{margin:0;padding-left:20px;color:var(--dia-text);font-size:14px;line-height:1.5}
.dset-choice .dset-btn{align-self:flex-start;margin-top:auto}
.dset-choice:hover{border-color:var(--dia-gold-deep)}

/* a phone: cards stacked, no sideways scroll, a sticky Save bar on long forms */
@media (max-width:760px){
  .dset-grid{grid-template-columns:1fr}
  .dset-card,#liteContent.dset-page .doc-card{padding:14px}
  .dset-fields{grid-template-columns:1fr}
  #liteContent.dset-page{overflow-x:hidden}
  #liteContent.dset-page table{display:block;max-width:100%;overflow-x:auto}
  .dset-save.dset-sticky,#liteContent.dset-page .dset-sticky{position:sticky;bottom:0;z-index:5;margin:16px -14px -14px;padding:12px 14px;background:var(--dia-surface);border-top:1px solid var(--dia-line);box-shadow:0 -6px 16px rgba(11,27,51,.08);border-radius:0 0 var(--dia-radius-card) var(--dia-radius-card)}
  .dset-save .dset-btn{flex:1 1 auto}
}

/* the Company profile's "How this appears on your documents" */
.dset-preview{border:1px solid var(--dia-line);border-radius:var(--dia-radius);padding:16px;background:#fff;font-size:13px;line-height:1.5;color:#111827;font-family:Helvetica,Arial,sans-serif}
.dset-preview .dset-pv-top{display:flex;gap:14px;align-items:flex-start;border-top:6px solid var(--dset-accent,#0B1B33);padding-top:12px}
.dset-preview img{max-width:120px;max-height:60px;object-fit:contain}
.dset-preview b{font-size:15px}
.dset-swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dset-swatch{width:44px;height:44px;border-radius:10px;border:2px solid var(--dia-line);cursor:pointer;padding:0}
.dset-swatch[aria-pressed=true]{border-color:var(--dia-ink);box-shadow:0 0 0 2px var(--dia-gold)}
.dset-logo{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.dset-logo-box{width:160px;height:84px;border:1px dashed var(--dia-field);border-radius:var(--dia-radius);display:flex;align-items:center;justify-content:center;background:var(--dia-row-alt);color:var(--dia-muted);font-size:13px;overflow:hidden}
.dset-logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.dset-masked{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px}
.dset-masked div{min-width:180px}.dset-masked small{display:block;color:var(--dia-muted);font-size:12.5px;font-weight:600}
.dset-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the Company profile: the cards, and the preview beside them on a wide screen (under them on a narrow one) */
.dset-cp-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.dset-cp-side{position:sticky;top:12px}
@media (max-width:1100px){.dset-cp-layout{grid-template-columns:1fr}.dset-cp-side{position:static}}
/* cards other files draw into a Settings page (the business description, approvals, export, backups): the same heading and buttons */
#liteContent.dset-page .dset-card>h3:first-child,#liteContent.dset-page .doc-card>h3:first-child{font-size:17px;font-weight:800;color:var(--dia-ink);margin:0 0 6px;padding:0 0 0 10px;border-left:4px solid var(--dia-gold);line-height:1.3}
#liteContent.dset-page .dsi .pri{font:inherit;font-weight:700;font-size:15px;min-height:44px;padding:10px 18px;border-radius:var(--dia-radius);border:1px solid var(--dia-ink);background:var(--dia-ink);color:#fff;cursor:pointer}
/* the portal's older global rules (button heights, .dpm-page h2) must not reach the home's cards and headings */
.dset-home .dset-card-link{height:auto!important;min-height:76px}
.dset-home h2.dset-group-head{font-size:13px;margin:0 0 10px;line-height:1.2}
/* ticks and choices on every Settings page: 20 px boxes on a 44 px row (the older pages set width:auto;min-height:0 inline) */
#liteContent.dset-page input[type=checkbox],#liteContent.dset-page input[type=radio]{width:20px!important;height:20px!important;min-height:0!important;accent-color:var(--dia-ink);margin:0 4px 0 0;flex:0 0 auto}
#liteContent.dset-page label:has(>input[type=checkbox]),#liteContent.dset-page label:has(>input[type=radio]){min-height:44px;display:flex;align-items:center;gap:10px}
#liteContent.dset-page .dia-u-more,#liteContent.dset-page .dl-menu>button{min-width:44px;min-height:44px}
/* the list rows' action buttons (css/portal-menu.css makes them 28 px with !important): 44 px on a Settings page */
html.dpm-on #liteContent.dset-page .dl-acts button,html.dpm-on #liteContent.dset-page .dia-u-more{min-height:44px!important;min-width:44px}
#liteContent.dset-page input[type=color]{min-height:44px;min-width:52px}
/* a hidden part stays hidden on a Settings page (the Users table's phone rows set display on every row, which showed each
   person's closed detail row: everyone was listed twice on a phone) */
#liteContent.dset-page [hidden]{display:none!important}