/* ============================================================
   MAG ROOFING — division accent override + site-checklist UI.
   Loads after base.css (the MAG editorial system). Keeps MAG
   navy + ivory; swaps the accent to a roofing terracotta so the
   Roofing division reads as its own thing within the MAG family.
   ============================================================ */
:root{
  /* MAG Roofing brand — gold + black on white (matches the logo). */
  --clay:#FAC70C; --clay-deep:#D9A800; --clay-tint:rgba(250,199,12,0.18); --clay-tint-2:rgba(250,199,12,0.34);
  --navy:#181818; --navy-deep:#0A0A0A; --ink:#1A1A1A; --ink-soft:#5C5C5C;
  --ivory:#FBFAF6; --ivory-2:#FFFFFF; --warm-white:#FFFFFF; --ivory-3:#E9E6DD;
  --gold-ink:#9A7200;   /* readable gold for text accents on white */
}

/* gold fills need DARK text/icons (white-on-gold is illegible) */
.btn-primary, .btn-primary:hover{ color:#1A1A1A; }
.user-chip .av{ color:#1A1A1A; }
.chip-opt.on{ color:#1A1A1A; }
.ck-sec-head .ck-ix{ color:#1A1A1A; }
.stat .val.clay{ color:var(--ink); }
.cal-cell.today .dnum{ color:#1A1A1A; }
/* text accents use a readable dark gold, not the bright fill gold */
a{ color:var(--gold-ink); } a:hover{ color:#7A5A00; }
.eyebrow{ color:var(--gold-ink); }
.eyebrow .d{ background:var(--gold-ink); }
.ck-field .f-label .req, .ck-checkrow .req{ color:var(--clay-deep); }

/* ---- MAG Roofing logo lockups ---- */
.brand-logo{ display:block; height:108px; width:auto; margin:0 auto; }
.login-brand{ flex-direction:column; align-items:center; text-align:center; gap:8px; }
.login-brand .sub{ font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); }

/* ---- pretty auth card (sign in / create account) ---- */
.auth-card{ width:100%; max-width:404px; background:var(--warm-white); border:1px solid var(--ivory-3); border-top:3px solid var(--clay); border-radius:18px; padding:30px 28px 24px; box-shadow:0 1px 2px rgba(15,18,20,0.05), 0 16px 44px rgba(15,18,20,0.10); }
.auth-card .login-brand{ margin-bottom:18px; }
.auth-card .brand-logo{ height:82px; }
.auth-card .sub{ margin-top:6px; }
.auth-toggle{ display:flex; gap:3px; background:var(--ivory); border:1px solid var(--ivory-3); border-radius:11px; padding:3px; margin-bottom:20px; }
.auth-toggle button{ flex:1; border:none; background:none; padding:9px 8px; font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); border-radius:8px; cursor:pointer; transition:background-color .14s, color .14s; }
.auth-toggle button.on{ background:var(--clay); color:#1A1A1A; box-shadow:0 1px 2px rgba(15,18,20,0.14); }
.auth-card form{ display:flex; flex-direction:column; gap:14px; }
.auth-card .btn-primary{ margin-top:4px; }
.auth-foot{ text-align:center; margin-top:18px; }
.auth-foot a{ font-size:12.5px; }
.sidebar-brand .logo-badge{ height:38px; width:38px; border-radius:50%; flex-shrink:0; background:#fff; }
.sidebar-brand .nm b{ display:block; color:var(--warm-white); font-weight:700; font-size:14px; letter-spacing:.01em; }
.sidebar-brand .nm small{ display:block; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-top:2px; }
.pub-head .logo-badge{ height:46px; width:46px; border-radius:50%; }
.pub-head .nm b{ display:block; font-family:var(--sans); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:.01em; }
.pub-head .nm small{ display:block; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); margin-top:2px; }

/* ---- single confirmation checkbox row ---- */
.ck-checkrow{ display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:14px; color:var(--ink); line-height:1.4; padding:3px 0; }
.ck-checkrow input{ width:20px; height:20px; margin-top:1px; accent-color:var(--clay); flex-shrink:0; cursor:pointer; }
.ck-checkrow .req{ color:var(--clay-deep); }

/* sidebar brand wordmark */
.sidebar-brand .nm small{ color:var(--clay); filter:brightness(1.7); }
.brand-roof{ font-family:var(--serif); }

/* ---------- login polish ---------- */
.login-brand .nm small{ display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--clay); margin-top:3px; }

/* ============ CHECKLIST: progress + section accordion ============ */
.ck-top{ position:sticky; top:0; z-index:20; background:var(--ivory); padding-bottom:10px; margin:-26px -28px 14px; padding:18px 28px 10px; border-bottom:1px solid var(--ivory-3); }
.ck-top .ck-title{ font-family:var(--serif); font-size:21px; color:var(--navy); }
.ck-top .ck-meta{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.ck-save{ font-size:11.5px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; }
.ck-save.saving{ color:var(--clay-deep); }
.ck-save.saved{ color:var(--ok); }
.ck-save .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.ck-progress{ height:6px; background:var(--ivory-3); border-radius:6px; overflow:hidden; margin-top:11px; }
.ck-progress > span{ display:block; height:100%; background:var(--clay); width:0; transition:width .25s; }

.ck-section{ background:var(--warm-white); border:1px solid var(--ivory-3); border-radius:var(--rad); margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow); }
.ck-sec-head{ width:100%; display:flex; align-items:center; gap:12px; padding:15px 18px; background:none; border:none; cursor:pointer; text-align:left; }
.ck-sec-head .ck-ix{ width:30px; height:30px; border-radius:9px; background:var(--clay-tint); color:var(--clay-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ck-sec-head .ck-ix .icon{ width:16px; height:16px; }
.ck-sec-head .ck-h{ flex:1; min-width:0; }
.ck-sec-head .ck-h h3{ font-family:var(--serif); font-size:17px; color:var(--navy); font-weight:500; }
.ck-sec-head .ck-h .ck-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.ck-sec-head .ck-count{ font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-right:6px; }
.ck-sec-head .ck-chev{ width:16px; height:16px; color:var(--ink-soft); transition:transform .18s; flex-shrink:0; }
.ck-section.open .ck-chev{ transform:rotate(90deg); }
.ck-section.done .ck-ix{ background:rgba(47,143,91,0.12); color:var(--ok); }
.ck-sec-body{ display:none; padding:4px 18px 18px; border-top:1px solid var(--ivory-3); }
.ck-section.open .ck-sec-body{ display:block; }
.ck-intro{ font-size:12.5px; color:var(--ink-soft); margin:12px 0 4px; line-height:1.5; }

/* field grid */
.ck-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.ck-field.full{ grid-column:1/-1; }
.ck-field .f-label .req{ color:var(--clay); margin-left:3px; }
.ck-field .f-label .unit{ color:var(--ink-soft); font-weight:400; }

/* tri-state segmented (Yes / No / N/A) */
.seg{ display:inline-flex; border:1px solid var(--ivory-3); border-radius:9px; overflow:hidden; background:var(--warm-white); }
.seg button{ border:none; background:none; padding:9px 16px; font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; border-right:1px solid var(--ivory-3); }
.seg button:last-child{ border-right:none; }
.seg button.on{ color:#fff; }
.seg button.on.yes{ background:var(--ok); }
.seg button.on.no{ background:var(--danger); }
.seg button.on.na{ background:var(--ink-soft); }

/* rating stars */
.stars{ display:inline-flex; gap:6px; }
.stars button{ background:none; border:none; cursor:pointer; padding:2px; color:var(--ivory-3); }
.stars button .icon{ width:26px; height:26px; }
.stars button.on{ color:var(--clay); }

/* multiselect chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-opt{ border:1px solid var(--ivory-3); background:var(--warm-white); color:var(--ink); border-radius:20px; padding:8px 14px; font-size:13px; font-weight:500; cursor:pointer; transition:all .12s; }
.chip-opt.on{ background:var(--clay-tint); border-color:var(--clay); color:var(--clay-deep); }
.chip-opt.on::before{ content:"✓ "; }

/* signature pad */
.sigpad-wrap{ border:1px solid var(--ivory-3); border-radius:10px; overflow:hidden; background:var(--warm-white); }
.sigpad{ display:block; width:100%; height:150px; touch-action:none; background:repeating-linear-gradient(transparent,transparent 28px,var(--ivory-2) 28px,var(--ivory-2) 29px); cursor:crosshair; }
.sigpad-bar{ display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-top:1px solid var(--ivory-3); background:var(--ivory-2); }
.sigpad-bar .hint{ font-size:11.5px; color:var(--ink-soft); }
.sig-saved img{ max-height:90px; border:1px solid var(--ivory-3); border-radius:8px; background:#fff; padding:4px; }

/* photo capture */
.photo-add{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; aspect-ratio:1/1; border:1.5px dashed var(--ivory-3); border-radius:10px; color:var(--ink-soft); font-size:11.5px; cursor:pointer; background:var(--ivory-2); }
.photo-add:hover{ border-color:var(--clay); color:var(--clay-deep); }
.photo-add .icon{ width:22px; height:22px; }
.photo-up{ opacity:.55; pointer-events:none; }

/* sticky bottom action bar (field-friendly) */
.ck-actionbar{ position:sticky; bottom:0; z-index:25; display:flex; gap:10px; align-items:center; padding:12px 16px; margin:18px -28px -60px; background:rgba(241,242,239,0.96); backdrop-filter:saturate(1.2) blur(6px); border-top:1px solid var(--ivory-3); }
.ck-actionbar .spacer{ flex:1; }
.ck-actionbar .btn{ padding:11px 18px; }

/* ============ EDITOR LAYOUT: fixed header · scrolling sections · fixed footer ============
   The content area becomes a flex column so the action bar is a real footer that NEVER
   overlaps the form (replaces the fragile sticky + negative-margin approach). */
.content.ck-edit{ display:flex; flex-direction:column; overflow:hidden; padding:0; min-height:0; }
.content.ck-edit .ck-top{ position:static; flex:0 0 auto; margin:0; padding:16px 28px 12px; }
.content.ck-edit #sections{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 28px 22px; }
.content.ck-edit .ck-actionbar{ position:static; flex:0 0 auto; margin:0; padding:12px 24px; background:var(--ivory); backdrop-filter:none; border-top:1px solid var(--ivory-3); }
@media (max-width:640px){
  .content.ck-edit .ck-top{ padding:12px 14px 8px; }
  .content.ck-edit #sections{ padding:12px 10px 16px; }
  .content.ck-edit .ck-actionbar{ padding:10px 12px; }
}

/* ============ EXPORT / SHARE PANEL ============ */
.share-grid{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start; }
.share-actions{ display:flex; flex-direction:column; gap:9px; }
.share-qr{ text-align:center; }
.share-qr img{ width:150px; height:150px; border:1px solid var(--ivory-3); border-radius:12px; padding:6px; background:#fff; }
.share-qr .cap{ font-size:11px; color:var(--ink-soft); margin-top:6px; }
.attached-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.attached-row{ display:flex; align-items:center; gap:10px; font-size:13px; padding:9px 12px; background:var(--ivory-2); border:1px solid var(--ivory-3); border-radius:9px; }
.attached-row .sys{ font-weight:600; color:var(--navy); text-transform:capitalize; }
.attached-row .when{ color:var(--ink-soft); font-size:11.5px; margin-left:auto; }

/* ============ READ-ONLY / PUBLIC VIEW ============ */
.ro-section{ margin-bottom:20px; }
.ro-section h3{ font-family:var(--serif); font-size:17px; color:var(--navy); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--ivory-3); }
.ro-kv{ display:grid; grid-template-columns:200px 1fr; gap:7px 16px; font-size:13.5px; }
.ro-kv dt{ color:var(--ink-soft); }
.ro-kv dd{ margin:0; color:var(--navy); }
.pub-wrap{ max-width:780px; margin:0 auto; padding:24px 18px 60px; }
.pub-head{ display:flex; align-items:center; gap:14px; padding-bottom:16px; margin-bottom:20px; border-bottom:2px solid var(--clay); }
.pub-head img{ height:34px; }
.pub-head .nm{ font-family:var(--serif); font-size:22px; color:var(--navy); }
.pub-head .nm small{ display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--clay); }

/* dashboard stat accent — dark for legibility (gold reserved for fills) */
.stat .val.clay{ color:var(--ink); }

/* phone polish */
@media (max-width:640px){
  .page-head-actions .btn[data-act="new-visit"]{ display:none; }  /* topbar already has "New confirmation"; keep New customer / Add user / Blank form visible */
  .page-head-actions .btn span{ display:inline; }  /* keep labels on the remaining secondary actions (not crowded) */
  .ck-top{ margin:-16px -10px 12px; padding:14px 14px 8px; }
  .ck-grid{ grid-template-columns:1fr; gap:12px; }
  .ck-actionbar{ margin:16px -10px -60px; }
  .share-grid{ grid-template-columns:1fr; }
  .share-qr{ order:-1; }
  .ro-kv{ grid-template-columns:1fr; gap:1px 0; }
  .ro-kv dt{ margin-top:8px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
  .seg button{ padding:10px 14px; }
}