:root{
  --navy:#17406c; --teal:#2f6fb0; --teal-light:#eaf3fc; --aqua:#5f9be0; --sky:#82b1e5; --sky-tint:#c2d7f2;
  --ink:#1c2b30; --muted:#64758c; --line:#d7e4f2; --paper:#ffffff; --bg:#eef3f4;
  --danger:#c0392b; --good:#1f8a4c;
  --logo-blue:#2652a1; --logo-cyan:#01aaea;
  --cover-from:#0e2f57; --q-ink:#0d2743; --q-ink2:#14304f;
  --font-body:'Inter',sans-serif; --font-head:'Poppins',sans-serif; --font-display:'Playfair Display',serif;
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink);}
a{color:var(--teal); text-decoration:none;}
h1{font-family:var(--font-head); font-size:22px; color:var(--navy); margin:0 0 4px;}
h2{font-family:var(--font-head); font-size:15px; color:var(--navy); margin:0 0 10px;}
h3{font-family:var(--font-head); font-size:14px; color:var(--navy); margin:18px 0 10px;}
.muted{color:var(--muted); font-weight:500; font-size:15px;}
.muted-sm{color:var(--muted); font-size:11.5px;}

/* ---------- Top nav ---------- */
.topnav{background:var(--navy); color:#fff; padding:0 20px;}
.topnav-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:24px; height:56px;}
.brand-link{color:#fff; font-family:var(--font-head); font-weight:700; font-size:15px;}
.brand-link span{color:var(--aqua);}
.nav-links{display:flex; gap:18px; flex:1;}
.nav-links a{color:rgba(255,255,255,.85); font-size:13px; font-weight:600;}
.nav-links a:hover{color:#fff;}
.nav-user{display:flex; align-items:center; gap:12px; font-size:12.5px; color:rgba(255,255,255,.8);}
.nav-user em{font-style:normal; color:var(--aqua);}
.btn-logout{background:rgba(255,255,255,.12); padding:6px 12px; border-radius:6px; color:#fff !important; font-size:12px;}

.page{min-height:calc(100vh - 56px);}
.container{max-width:1200px; margin:0 auto; padding:24px 20px 60px;}
.container.narrow{max-width:720px;}

/* ---------- Buttons ---------- */
.btn-primary,.btn-ghost,.btn-danger{
  border:none; border-radius:8px; padding:10px 16px; font-size:13px; font-weight:600;
  cursor:pointer; font-family:var(--font-body); display:inline-block; text-align:center;
}
.btn-primary{background:var(--aqua); color:var(--on-accent,#fff);}
.btn-ghost{background:var(--teal-light); color:var(--teal);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-primary.full{width:100%; margin-top:14px;}
.btn-primary:hover,.btn-ghost:hover{opacity:.88;}

/* ---------- Login ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; position:relative; background:linear-gradient(135deg,var(--navy),var(--teal),var(--navy)); background-size:200% 200%; animation:login-tide 18s ease-in-out infinite alternate;}
.login-card{background:#fff; padding:36px 34px; border-radius:14px; width:340px; box-shadow:0 20px 50px rgba(0,0,0,.25); position:relative; z-index:2;}
/* Login background: flowing water (3 wave layers + rising bubbles), pure CSS */
.login-body::before{content:""; position:fixed; left:0; right:0; bottom:0; height:42vh; min-height:220px; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20220'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23ffffff'%20fill-opacity='0.1'%20d='M0%20110%20Q200%2060%20400%20110%20T800%20110%20T1200%20110%20T1600%20110%20V220%20H0Z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20220'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23ffffff'%20fill-opacity='0.14'%20d='M0%20130%20Q200%2094%20400%20130%20T800%20130%20T1200%20130%20T1600%20130%20V220%20H0Z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20220'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23ffffff'%20fill-opacity='0.2'%20d='M0%20160%20Q200%20132%20400%20160%20T800%20160%20T1200%20160%20T1600%20160%20V220%20H0Z'/%3E%3C/svg%3E"); background-repeat:repeat-x; background-size:1600px 100%,1200px 85%,900px 65%; background-position:0 100%,0 100%,0 100%;
  animation:login-waves 22s linear infinite;}
.login-body::after{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.55;
  background-image:radial-gradient(circle at 12% 30%,rgba(255,255,255,.35) 0 3px,transparent 4px),radial-gradient(circle at 38% 72%,rgba(255,255,255,.28) 0 5px,transparent 6px),radial-gradient(circle at 63% 18%,rgba(255,255,255,.3) 0 2px,transparent 3px),radial-gradient(circle at 84% 55%,rgba(255,255,255,.25) 0 4px,transparent 5px),radial-gradient(circle at 25% 90%,rgba(255,255,255,.3) 0 2px,transparent 3px);
  background-size:420px 640px; animation:login-bubbles 26s linear infinite;}
@keyframes login-waves{from{background-position:0 100%,0 100%,0 100%;} to{background-position:1600px 100%,-1200px 100%,900px 100%;}}
@keyframes login-bubbles{from{background-position:0 0;} to{background-position:0 -640px;}}
@keyframes login-tide{from{background-position:0% 30%;} to{background-position:100% 70%;}}
@media (prefers-reduced-motion: reduce){.login-body,.login-body::before,.login-body::after{animation:none;}}
@media print{.login-body::before,.login-body::after{display:none;}}
.login-brand{font-family:var(--font-head); font-weight:800; font-size:21px; color:var(--navy);}
.login-brand span{color:var(--aqua);}
.login-sub{font-size:12.5px; color:var(--muted); margin-bottom:18px;}
.login-card label{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; display:block; margin:12px 0 4px;}
.login-card input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px;}
.alert-error{background:#fdecea; color:var(--danger); padding:10px 12px; border-radius:8px; font-size:13px; margin-bottom:10px;}
.alert-success{background:#e9f8ee; color:var(--good); padding:10px 12px; border-radius:8px; font-size:13px; margin-bottom:14px;}

/* ---------- Page head ---------- */
.page-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; flex-wrap:wrap; gap:12px;}
.page-head-actions{display:flex; gap:10px;}

/* ---------- Search / filter bar ---------- */
.search-bar{display:flex; gap:10px; margin-bottom:16px;}
.search-bar input[type=text]{flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px;}
.search-bar select{padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px;}

/* ---------- Data table (admin lists) ---------- */
.data-table{width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(11,59,74,.06);}
.data-table thead th{background:var(--navy); color:#fff; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; padding:10px 12px;}
.data-table tbody td{padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle;}
.data-table tbody tr:hover{background:var(--teal-light);}
.thumb{width:42px;height:42px;border-radius:8px;background:#f2f6f6;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:11px;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.row-actions-cell{white-space:nowrap;}
.icon-link{background:none; border:none; color:var(--teal); font-size:12.5px; font-weight:600; cursor:pointer; margin-right:10px;}
.icon-link.danger{color:var(--danger);}

.badge{padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:700; text-transform:uppercase;}
.badge-admin{background:#fde7d0; color:#a35b00;}
.badge-staff{background:var(--teal-light); color:var(--teal);}
.badge-good{background:#e9f8ee; color:var(--good);}
.badge-off{background:#f1f1f1; color:var(--muted);}

/* ---------- Forms (admin) ---------- */
.form-card{background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 10px rgba(11,59,74,.06); margin-bottom:20px;}
.form-card .field{margin-bottom:14px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px;}
.grid.two{grid-template-columns:repeat(2,1fr);}
.field label{font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; display:block; margin-bottom:4px;}
.field input,.field select,.field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px; font-size:13px;
  font-family:var(--font-body); color:var(--ink); background:#fbfdfd;
}
.field textarea{resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--aqua); background:#fff;}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
.hint{font-size:11px; color:var(--muted); margin:4px 0 0;}
.img-preview{margin-top:10px;}
.img-preview img{max-width:140px; max-height:140px; border-radius:8px; border:1px solid var(--line);}
.mini-ref-table{width:100%; border-collapse:collapse; font-size:11px; margin:12px 0;}
.mini-ref-table th,.mini-ref-table td{border:1px solid var(--line); padding:6px 8px; text-align:left;}
.import-form{display:flex; gap:10px; align-items:center; margin-top:16px;}

/* ---------- Dashboard: builder layout ---------- */
.builder-layout{display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start;}
.picker-panel{background:#fff; border-radius:12px; padding:18px; box-shadow:0 2px 10px rgba(11,59,74,.06); position:sticky; top:76px; max-height:calc(100vh - 96px); display:flex; flex-direction:column;}
.picker-panel input[type=text],.picker-panel select{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px; font-size:13px; margin-bottom:8px;}
.results-list{overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:6px;}
.result-item{display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:8px; transition:background .1s;}
.result-item:hover{background:var(--teal-light);}
.result-thumb{width:36px;height:36px;border-radius:6px;background:#f2f6f6;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;color:var(--muted);font-size:10px;}
.result-thumb img{width:100%;height:100%;object-fit:cover;}
.result-info{flex:1; min-width:0;}
.result-name{font-size:12px; font-weight:700; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.add-btn{background:var(--aqua); color:var(--on-accent,#fff); border:none; border-radius:6px; padding:6px 10px; font-size:11px; font-weight:700; cursor:pointer; flex-shrink:0;}

.sheet-panel{min-width:0;}
.sheet-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px;}

.sheet{background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(11,59,74,.12); padding:32px 36px;}

/* ---------- ULTRA PREMIUM FRONT PAGE (logo color combination) ---------- */
.cover-wrap.no-cover{display:none;}
.cover-page-toggle{display:flex; justify-content:flex-end; margin-bottom:8px;}
.cover-page-toggle label{font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; cursor:pointer;}
.cover-premium{
  position:relative; overflow:hidden; border-radius:14px; padding:0;
  background:linear-gradient(150deg, var(--cover-from) 0%, var(--logo-blue) 45%, var(--logo-cyan) 100%);
  color:#fff; min-height:600px;
}
.cover-premium::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 8%, rgba(1,170,234,.55) 0%, rgba(1,170,234,0) 45%),
    radial-gradient(circle at 8% 95%, rgba(1,170,234,.35) 0%, rgba(1,170,234,0) 40%);
  background:
    radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--logo-cyan) 55%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 8% 95%, color-mix(in srgb, var(--logo-cyan) 35%, transparent) 0%, transparent 40%);
  pointer-events:none;
}
.cover-premium::after{
  content:""; position:absolute; left:-10%; right:-10%; bottom:-6%; height:38%;
  background:rgba(255,255,255,.05); transform:skewY(-4deg); pointer-events:none;
  border-top:1px solid rgba(255,255,255,.18);
}
.cp-inner{position:relative; z-index:1; padding:46px 44px 40px;}
.cp-availability-badge{
  position:absolute; top:20px; right:20px; z-index:2;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); border-radius:20px;
  padding:5px 14px; font-family:var(--font-body); font-size:9.5px; font-weight:600;
  letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.92);
}
.cp-head{text-align:center; padding-bottom:22px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.25);}
.cp-logo{width:96px; height:96px; object-fit:contain; background:#fff; border-radius:50%; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); margin-bottom:16px;}
.cp-name{font-family:var(--font-display); font-weight:800; font-size:40px; letter-spacing:3px; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.25);}
.cp-rule{width:70px; height:2px; background:linear-gradient(90deg, transparent, #fff, transparent); margin:14px auto;}
.cp-tag{font-size:12px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.85); font-weight:600;}

.cp-panel{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:26px 30px;}
.cp-panel h2{font-family:var(--font-display); font-size:22px; font-weight:700; color:#fff; margin-bottom:14px; letter-spacing:.5px;}
.cp-panel p{font-size:12.5px; line-height:1.8; color:rgba(255,255,255,.88); margin:0 0 12px;}
.cp-commit{font-size:12.5px; font-weight:700; color:#fff; margin:16px 0 8px;}
.cp-bullets{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:10px;}
.cp-bullets li{font-size:12.5px; line-height:1.5; padding-left:22px; position:relative; color:rgba(255,255,255,.92);}
.cp-bullets li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--logo-cyan); font-weight:900; background:#fff; border-radius:50%; width:15px; height:15px; display:flex; align-items:center; justify-content:center; font-size:9px; top:1px;}
.cp-bullets b{color:#fff;}

.cp-footer{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); font-size:11px; color:rgba(255,255,255,.85); text-align:center;}
.cp-footer .cf-item b{display:block; color:#fff; font-size:10px; letter-spacing:1px; text-transform:uppercase; margin-bottom:3px; font-weight:700;}

/* ---------- Subject / Client details page (exact PDF wording) ---------- */
.subject-block-pdf{margin:26px 0 20px;}
.subject-block-pdf .sj-label{font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--navy); text-transform:uppercase; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px;}
.subject-block-pdf .subject-input{font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--navy); text-transform:uppercase; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; width:100%; border:none; margin-top:4px; display:block; resize:none; overflow:hidden; white-space:pre-wrap; overflow-wrap:break-word; line-height:1.5; background:transparent; font-family:inherit;}
.subject-block-pdf .subject-input:focus{outline:none; background:rgba(130,177,229,.12); border-radius:4px;}
.pdf-field-row{margin:16px 0;}
.pdf-field-row .pf-label{font-family:var(--font-head); font-weight:800; font-size:13.5px; color:var(--navy); text-transform:uppercase;}
.pdf-field-row input{font-family:var(--font-head); font-weight:800; font-size:13.5px; color:var(--navy); text-transform:uppercase; border:none; border-bottom:1px dashed var(--line); padding:2px 6px;}
.pdf-intro{font-size:12.5px; color:var(--ink); line-height:1.8; margin-top:22px;}

/* ---------- Technical Specifications: exact banded table from PDF ---------- */
.techspec-title{background:var(--navy); color:#fff; padding:13px 18px; font-family:var(--font-head); font-weight:800; font-size:14.5px; text-transform:uppercase; letter-spacing:.5px; text-decoration:underline; text-underline-offset:3px; border-radius:6px 6px 0 0;}
table.techspec-table{width:100%; border-collapse:collapse; margin:0 0 4px;}
table.techspec-table td{padding:14px 18px; font-size:12.5px; border:none;}
table.techspec-table td.ts-label{background:var(--navy); color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.4px; width:32%;}
table.techspec-table tr:nth-child(odd) td.ts-value{background:var(--sky); color:var(--ink); font-weight:600;}
table.techspec-table tr:nth-child(even) td.ts-value{background:var(--sky-tint); color:var(--ink); font-weight:600;}
table.techspec-table td.ts-value input{background:transparent; border:none; font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--ink); width:100%;}
table.techspec-table td.ts-value textarea.ts-value-textarea{
  background:transparent; border:none; font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--ink);
  width:100%; resize:none; overflow:hidden; line-height:1.5; padding:0; display:block;
}
table.techspec-table td.ts-value textarea.ts-value-textarea:focus{outline:none;}
table.techspec-table td.ts-label select.ts-label-select{
  background:var(--navy); color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  border:none; font-family:var(--font-head); font-size:12.5px; width:100%; cursor:pointer; padding:2px 0;
}
table.techspec-table td.ts-label select.ts-label-select:focus{outline:none;}
table.techspec-table td.ts-label .ts-label-input{
  background:transparent; color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  border:none; font-family:var(--font-head); font-size:12.5px; width:100%;
}
table.techspec-table td.ts-label .ts-label-input::placeholder{color:rgba(255,255,255,.6); text-transform:none; font-weight:600;}
.ts-value-row-wrap{display:flex; align-items:center; gap:6px;}
.ts-value-row-wrap input,.ts-value-row-wrap textarea{flex:1;}
.techspec-footer-bar{background:var(--navy); height:22px; border-radius:0 0 6px 6px;}

.page-footer-note{display:none;}
.letterhead{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--teal); padding-bottom:16px; margin-bottom:18px; gap:20px;}
.brand{display:flex; gap:12px; align-items:center;}
.brand-mark{width:56px;height:56px;border-radius:12px; object-fit:contain; flex-shrink:0; background:#fff;}
.brand-name{font-family:var(--font-head); font-weight:800; font-size:21px; color:var(--navy);}
.brand-tag{font-size:11px; color:var(--muted); margin-top:2px;}
.company-meta{text-align:right; font-size:12px; color:var(--muted); line-height:1.6;}

.subject-block{margin:14px 0 18px;}

.sheet table{width:100%; table-layout:fixed; border-collapse:collapse; margin-top:8px; font-size:12px;}
.sheet thead th{background:var(--navy); color:#fff; font-family:var(--font-head); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; padding:9px 6px; text-align:left; text-decoration:underline; text-underline-offset:3px; word-break:normal; overflow-wrap:normal; hyphens:none;}
.sheet tbody tr{border-bottom:2px solid #fff;}
.sheet tbody tr:nth-child(odd) td{background:var(--sky);}
.sheet tbody tr:nth-child(even) td{background:var(--sky-tint);}
.sheet tbody tr td:first-child{background:var(--navy); color:#fff; text-align:center; font-weight:800; font-size:13px;}
.sheet tbody td{padding:10px 8px; vertical-align:top; overflow-wrap:break-word; color:var(--q-ink2);}
.sheet td.num{text-align:right; white-space:normal; overflow-wrap:break-word; font-variant-numeric:tabular-nums; font-weight:700; color:var(--q-ink);}
.desc-cell{overflow-wrap:break-word;}
.item-name-input{width:100%; font-weight:800; font-size:12.5px; border:none; background:transparent; color:var(--q-ink); font-family:var(--font-body); padding:2px; overflow-wrap:break-word; white-space:normal; text-decoration:underline; text-align:center;}
.item-desc-textarea{width:100%; box-sizing:border-box; border:none; background:transparent; font-size:11.5px; color:var(--q-ink2); font-family:var(--font-body); resize:vertical; min-height:60px; padding:2px; line-height:1.6; overflow-wrap:break-word; white-space:pre-wrap;}
.item-name-input:focus,.item-desc-textarea:focus{outline:none; background:rgba(255,255,255,.35); border-radius:4px;}
.mini-input{width:100%; max-width:100%; padding:5px 4px; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.75); border-radius:5px; font-size:11.5px; font-weight:700; color:var(--q-ink); text-align:right; box-sizing:border-box; -moz-appearance:textfield;}
.mini-input::-webkit-outer-spin-button,.mini-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.mini-input.unit{text-align:left;}
.gst-cell{text-align:center;}
.gst-pct-wrap{display:inline-flex; align-items:center; justify-content:center; gap:2px; margin:0 auto 4px; background:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.6); border-radius:5px; padding:5px 6px;}
.gst-cell .gst-pct-input{width:22px !important; max-width:22px; text-align:right; padding:0; border:none !important; background:transparent !important; -moz-appearance:textfield;}
.gst-pct-sign{font-size:11.5px; font-weight:700; color:var(--q-ink);}
.gst-cell .gst-amt{font-weight:700; color:var(--q-ink);}
.qty-cell{text-align:center;}
.qty-stack{display:flex; flex-direction:column; align-items:center; gap:4px;}
.qty-input{width:48px !important; text-align:center;}
.unit-input{width:60px !important; text-align:center; text-transform:uppercase; font-size:10.5px;}
.img-cell{text-align:center;}
.img-box{width:150px; max-width:100%; aspect-ratio:1/1; margin:0 auto; border-radius:8px;border:1px solid #fff; display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;}
.img-box img{width:100%;height:100%;object-fit:cover;}
.img-box.img-empty{background:transparent; border:none;}
.img-box.img-empty span{font-size:11px; color:rgba(13,39,67,.55); font-style:italic;}
.icon-btn{border:none;background:transparent;color:var(--q-ink);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:4px;}
.icon-btn:hover{background:var(--teal-light); color:var(--danger);}

.summary{margin-left:auto; width:300px; margin-top:6px; border-top:2px solid var(--navy); padding-top:10px;}
.summary-row{display:flex; justify-content:space-between; font-size:12.5px; padding:5px 2px; align-items:center;}
.summary-row label{color:var(--muted); font-weight:600;}
.summary-row input{width:110px; text-align:right; border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-size:12.5px;}
.summary-row.total-amount{font-weight:700; color:var(--navy); border-top:1px solid var(--line); margin-top:4px; padding-top:8px;}
.summary-row.grand{font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--navy); border-top:2px solid var(--navy); margin-top:6px; padding-top:10px;}
.summary-row.grand span.amt{color:var(--navy);}
.transport-note{font-size:10px; color:var(--muted); text-align:right; margin-top:-2px;}

.terms{margin-top:24px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px;}
.terms label{font-size:10px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; color:var(--navy); display:block; margin-bottom:6px;}
.terms textarea{width:100%; border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-family:var(--font-body); font-size:11px; color:var(--muted);}

.signblock{display:flex; justify-content:space-between; margin-top:28px; gap:20px;}
.sign{font-size:12px; color:var(--ink); width:100%;}
.sign .role{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:2px;}
.sign .ref-caption{font-size:10px; color:var(--muted); letter-spacing:.3px; margin-top:1px;}
.sign input{border:none; border-bottom:1px solid var(--line); font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:13px; padding:4px 2px; width:100%; margin-bottom:2px;}
.sign input.phone{font-family:var(--font-body); font-weight:500; font-size:11.5px; color:var(--muted);}
.footer-strip{text-align:center; font-size:10px; color:var(--muted); margin-top:24px; letter-spacing:.4px;}

@media (max-width:960px){
  .builder-layout{grid-template-columns:1fr;}
  .picker-panel{position:static; max-height:none;}
}
@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .sheet{padding:20px 16px;}
}

/* ---------- Print / Save-as-PDF ---------- */
@media print{
  @page{ margin:14mm 10mm 16mm; }
  html, body, *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; }
  body{ background:#fff; counter-reset:page; }
  .topnav, .picker-panel, .sheet-actions, .icon-btn, .add-btn, .add-stage-btn, .cover-page-toggle{ display:none !important; }
  .container{ max-width:100%; margin:0; padding:0; }
  .builder-layout{ display:block; }
  .sheet-panel{ width:100%; }
  .sheet{ box-shadow:none; border-radius:0; padding:0; }
  input, textarea, select{ border:none !important; background:transparent !important; padding:2px 0 !important; }
  .img-box:not(.img-empty){ border:1px solid var(--line); }
  table{ page-break-inside:auto; }
  tr{ page-break-inside:avoid; page-break-after:auto; }
  .cover-premium{ page-break-after:always; border-radius:0; min-height:250mm; margin:-14mm -10mm 0; padding:14mm 10mm 0; width:calc(100% + 20mm); }
  .subject-page-break{ page-break-before:always; }
  /* Page numbers: supported by @page margin boxes in Chromium 117+/Edge when printing to PDF.
     Falls back to nothing (no broken layout) in browsers without support. */
  @page{
    @bottom-center{ content:counter(page) " / " counter(pages); font-family:var(--font-body); font-size:9px; color:#6b7d81; }
  }
}

/* ---------- Quotation type chooser ---------- */
.chooser-head{text-align:center; margin:30px 0 26px;}
.chooser-head h1{font-size:24px;}
.chooser-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.chooser-card{
  background:#fff; border:2px solid var(--line); border-radius:14px; padding:30px 24px; text-align:center;
  transition:border-color .15s ease, transform .1s ease; display:block;
}
.chooser-card:hover{border-color:var(--aqua); transform:translateY(-2px);}
.chooser-icon{font-size:38px; margin-bottom:12px;}
.chooser-title{font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--navy); margin-bottom:8px;}
.chooser-desc{font-size:12.5px; color:var(--muted); line-height:1.5;}
.hindi{display:block; font-family:var(--font-body);}
.chooser-head h1.hindi{font-size:19px; color:var(--teal); margin-top:2px; margin-bottom:10px; font-weight:700;}
.chooser-title .hindi{font-size:12.5px; color:var(--teal); font-weight:600; margin-top:2px;}
.chooser-desc .hindi{color:#8a9a9e; font-size:11.5px; margin-top:4px;}

/* ---------- Motivational quotes slider ---------- */
.quote-slider{margin-top:40px; padding:26px 30px; background:linear-gradient(135deg,var(--navy),var(--teal)); border-radius:14px; position:relative; overflow:hidden; min-height:110px;}
.quote-slider-track{position:relative; min-height:80px;}
.quote-slide{position:absolute; inset:0; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; text-align:center; pointer-events:none;}
.quote-slide.active{opacity:1; transform:translateY(0); pointer-events:auto;}
.quote-en{color:#fff; font-family:var(--font-head); font-weight:600; font-size:15px; line-height:1.5; max-width:560px; margin:0 auto 8px;}
.quote-hi{color:rgba(255,255,255,.8); font-size:13px; max-width:560px; margin:0 auto;}
.quote-slider-dots{display:flex; justify-content:center; gap:7px; margin-top:16px;}
.quote-dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:background .2s;}
.quote-dot.active{background:#fff;}
@media (max-width:640px){ .chooser-grid{grid-template-columns:1fr;} }

/* ---------- Construction quotation specific ---------- */
.stage-list{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
.stage-row{border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fbfdfd;}
.stage-row-head{display:flex; gap:8px; align-items:center; margin-bottom:6px;}
.stage-row-head input{font-weight:700; font-family:var(--font-head); color:var(--navy); flex:1; border:none; background:transparent; font-size:12.5px;}
.stage-row textarea{width:100%; border:none; background:transparent; font-size:11.5px; color:var(--muted); resize:vertical; min-height:36px;}
.stage-row-head .icon-btn{flex-shrink:0;}
.area-calc-table{width:100%; border-collapse:collapse; margin-top:8px; font-size:12.5px;}
.area-calc-table td{padding:6px 4px; border-bottom:1px solid var(--line);}
.area-calc-table td.label{color:var(--muted);}
.area-calc-table td.val{text-align:right;}
.area-calc-table input{width:90px; text-align:right; border:1px solid var(--line); border-radius:5px; padding:4px 6px; font-size:12px;}
.area-calc-table td.label .ts-value-row-wrap{justify-content:center;}
.area-calc-table td.label .ts-value-row-wrap input{
  background:transparent; border:none; color:#fff; font-weight:800; text-align:center;
  font-family:var(--font-head); font-size:12.5px; text-transform:uppercase; width:auto;
}
.area-calc-table td.label .ts-value-row-wrap input::placeholder{color:rgba(255,255,255,.65); text-transform:none; font-weight:600;}
.area-total-row{font-weight:700; color:var(--navy);}
.cost-highlight{background:var(--teal-light); border-radius:10px; padding:16px 18px; margin-top:14px; display:flex; justify-content:space-between; align-items:center;}
.cost-highlight .label{font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:13px;}
.cost-highlight .amt{font-family:var(--font-head); font-weight:800; font-size:20px; color:var(--navy);}
.milestone-table{width:100%; border-collapse:collapse; margin-top:10px; font-size:12.5px;}
.milestone-table th{background:var(--navy); color:#fff; font-size:10px; text-transform:uppercase; padding:7px; text-align:left;}
.milestone-table td{padding:6px 7px; border-bottom:1px solid var(--line);}
.milestone-table input.pct{width:55px; text-align:right;}
.milestone-table input.label-input{width:100%; border:none; background:transparent; font-weight:600; color:#fff; text-align:left;}
.pct-warning{font-size:11px; color:var(--danger); margin-top:4px;}
.add-stage-btn{background:var(--teal-light); color:var(--teal); border:1px dashed var(--aqua); border-radius:7px; padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer; margin-top:8px;}

/* =====================================================================
   CRM — saved quotations, clients, follow-ups
   ===================================================================== */
.nav-links a.active{color:#fff; box-shadow:inset 0 -2px 0 var(--aqua); padding-bottom:4px;}
.nav-count{display:inline-block; min-width:18px; padding:1px 6px; border-radius:10px; background:#e8590c; color:#fff; font-size:10.5px; font-weight:800; text-align:center; margin-left:2px;}
.setup-banner{background:#fff4e5; color:#8a4b00; padding:10px 20px; font-size:13px; text-align:center; border-bottom:1px solid #f3d9b1;}
.flash-wrap{max-width:1200px; margin:16px auto 0; padding:0 20px;}
.flash{margin-bottom:0;}
.crumbs{font-size:12px; color:var(--muted); margin-bottom:6px;}
.empty{color:var(--muted); font-size:13px; margin:4px 0;}
.form-card.empty{text-align:center; padding:36px;}
.nowrap{white-space:nowrap;}
.r{text-align:right !important;}
.good-txt{color:var(--good); font-weight:700;}
.btn-primary.sm{padding:7px 12px; font-size:12px;}
a.btn-primary,a.btn-ghost{text-decoration:none;}
.card-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px;}
.card-head h2{margin:0;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.data-table.flat{box-shadow:none;}
.data-table tr.clickable{cursor:pointer;}
.check-label{display:flex !important; align-items:center; gap:8px; text-transform:none !important; letter-spacing:0 !important; font-size:13px !important; color:var(--ink) !important; font-weight:600 !important;}
.check-label input{width:auto !important;}

/* Status badges */
.st-badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; vertical-align:middle; white-space:nowrap;}
.st-draft{background:#eef1f4; color:#5b6b7c;}
.st-sent{background:#e3effc; color:#1d5fa8;}
.st-nego{background:#fff1dc; color:#a35b00;}
.st-hold{background:#f1ebfa; color:#6a3fa0;}
.st-won{background:#e3f6ea; color:#1f8a4c;}
.st-lost{background:#fdecea; color:#b03a2e;}
.type-tag{display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; text-transform:uppercase; letter-spacing:.3px;}
.type-product{background:#e6f6fb; color:#047a9e;}
.type-construction{background:#efeadf; color:#7a5a17;}
.late{color:#c0392b; font-weight:700;}
.today{color:#d35400; font-weight:700;}

/* KPI tiles */
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px;}
.kpi-row.three{grid-template-columns:repeat(3,1fr);}
.kpi{background:#fff; border-radius:12px; padding:16px 18px; box-shadow:0 2px 10px rgba(11,59,74,.06); color:var(--ink); display:block; text-decoration:none;}
.kpi-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700;}
.kpi-value{font-family:var(--font-head); font-weight:800; font-size:22px; color:var(--navy); margin:4px 0 2px; font-variant-numeric:tabular-nums;}
.kpi-value.good{color:var(--good);}
.kpi-sub{font-size:12px; color:var(--muted);}
.kpi-link:hover{box-shadow:0 4px 16px rgba(11,59,74,.12);}
.kpi-link.warn{border-left:4px solid #e8590c;}
.kpi-link.warn .kpi-value{color:#e8590c;}

.home-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.detail-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:18px; align-items:start;}

/* Due list + pipeline */
.due-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line);}
.due-row:last-child{border-bottom:none;}
.due-main{display:flex; flex-direction:column; min-width:0;}
.due-meta{display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap;}
.chip{display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:20px; background:var(--teal-light); color:var(--teal); font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap;}
.chip:hover{background:#d8e8f8;}
.contact-actions{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.pipe-row{display:grid; grid-template-columns:110px 1fr 130px; align-items:center; gap:10px; padding:7px 0; color:var(--ink); text-decoration:none; font-size:12.5px;}
.pipe-row:hover .pipe-bar{background:#e4ecf5;}
.pipe-bar{height:8px; background:#f0f4f8; border-radius:5px; overflow:hidden;}
.pipe-fill{display:block; height:100%; border-radius:5px;}
.pipe-fill.st-draft{background:#9aa8b6;} .pipe-fill.st-sent{background:#3d85d6;} .pipe-fill.st-nego{background:#f0a030;}
.pipe-fill.st-hold{background:#9a72cf;} .pipe-fill.st-won{background:#2fa35f;} .pipe-fill.st-lost{background:#d9584b;}
.pipe-num{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted);}

/* Lists */
.status-tabs{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px;}
.status-tabs a{padding:7px 13px; border-radius:20px; font-size:12.5px; font-weight:600; color:var(--muted); background:#fff;}
.status-tabs a.on{background:var(--navy); color:#fff;}
.filter-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.filter-bar input,.filter-bar select{padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:#fff; font-family:var(--font-body);}
.filter-bar input[type=text]{flex:1; min-width:200px;}
.pager{display:flex; justify-content:center; align-items:center; gap:14px; margin-top:16px;}
.collapsible > summary{cursor:pointer; font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:14px; list-style:none;}
.collapsible > summary::before{content:'▸ '; color:var(--aqua);}
.collapsible[open] > summary::before{content:'▾ ';}

/* Detail */
.big-amt{font-family:var(--font-head); font-weight:800; font-size:22px; color:var(--navy);}
.subject-line{font-size:12px; color:var(--muted); margin:0 0 12px; text-transform:uppercase; letter-spacing:.2px;}
.client-line{font-size:16px; color:var(--navy);}
.mini-summary,.mini-items{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px;}
.mini-summary td{padding:6px 0; border-bottom:1px solid var(--line);}
.mini-summary td:first-child{color:var(--muted); width:40%;}
.mini-items th{font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); text-align:left; padding:6px 4px; border-bottom:2px solid var(--line);}
.mini-items td{padding:7px 4px; border-bottom:1px solid var(--line);}
.other-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:13px; flex-wrap:wrap;}
.other-row:last-child{border-bottom:none;}
.other-row:hover{background:var(--teal-light);}
.fu-banner{padding:9px 12px; border-radius:8px; background:var(--teal-light); font-size:13px; margin-bottom:12px;}
.fu-banner.late{background:#fdecea; color:#a93226;}
.fu-banner.today{background:#fff1dc; color:#a35b00;}
.note-kind{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px;}
.note-kind label{font-size:12.5px !important; text-transform:none !important; letter-spacing:0 !important; color:var(--ink) !important; font-weight:500 !important; display:flex !important; align-items:center; gap:4px; cursor:pointer;}
.note-kind input{width:auto !important;}
.timeline{list-style:none; margin:0; padding:0;}
.timeline li{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line);}
.timeline li:last-child{border-bottom:none;}
.tl-icon{width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--teal-light); display:flex; align-items:center; justify-content:center; font-size:12px;}
.tl-msg{font-size:13px; line-height:1.45;}
.tl-ref{font-weight:700; font-size:11.5px; margin-right:4px;}
.tl-status .tl-msg{font-weight:600; color:var(--navy);}
.client-notes{margin-top:12px; font-size:12.5px; background:#fbfaf3; border:1px solid #efe8cc; padding:10px 12px; border-radius:8px;}
.danger-zone{text-align:right; margin-top:-6px;}

/* Follow-ups */
.fu-group{margin-bottom:24px;}
.fu-group h2 .count{background:var(--navy); color:#fff; border-radius:10px; padding:1px 8px; font-size:11px; vertical-align:middle;}
.fu-card{background:#fff; border-radius:10px; padding:14px 16px; margin-bottom:10px; box-shadow:0 2px 10px rgba(11,59,74,.06);}
.fu-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.fu-top .contact-actions{margin-top:0; align-self:flex-start;}
.fu-last{font-size:12.5px; color:var(--ink); margin-top:6px; font-style:italic;}
.fu-quick{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
.fu-quick select,.fu-quick input{padding:7px 9px; border:1px solid var(--line); border-radius:7px; font-size:12.5px; font-family:var(--font-body);}
.fu-quick .fu-note{flex:1; min-width:180px;}
.fu-quick .js-lost{min-width:140px;}

/* Builder: CRM bar, save button, client suggestions, toast */
.crm-bar{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border-radius:10px; padding:10px 16px; margin-bottom:12px; box-shadow:0 2px 10px rgba(11,59,74,.06); font-size:12.5px;}
.crm-bar-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.crm-bar-left b{font-family:var(--font-head); color:var(--navy); font-size:13.5px;}
.crm-state{color:var(--muted); display:inline-flex; align-items:center; gap:6px;}
.crm-dot{width:8px; height:8px; border-radius:50%; background:#c3ccd6; display:inline-block;}
.crm-dot.ok{background:var(--good);}
.crm-dot.dirty{background:#e8590c;}
.crm-bar-link{font-weight:600;}
.crm-bar-hint{color:var(--muted); font-size:11.5px;}
.btn-save{border:none; border-radius:8px; padding:10px 18px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font-body); background:var(--navy); color:#fff;}
.btn-save:disabled{opacity:.6; cursor:wait;}
.pf-static{font-family:var(--font-head); font-weight:800; font-size:13.5px; color:var(--navy);}
.client-suggest-wrap{position:relative;}
.client-suggest{display:none; position:absolute; left:0; top:100%; z-index:50; width:min(420px,100%); background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(11,59,74,.18); overflow:hidden; margin-top:4px;}
.cs-item{padding:9px 12px; cursor:pointer; display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--line);}
.cs-item b{font-size:13px; color:var(--navy);}
.cs-item span{font-size:11.5px; color:var(--muted);}
.cs-item:hover,.cs-item.active{background:var(--teal-light);}
.cs-foot{padding:6px 12px; font-size:10.5px; color:var(--muted); background:#f8fafc;}
.crm-toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--navy); color:#fff; padding:11px 18px; border-radius:10px; font-size:13px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:all .25s; z-index:200; max-width:90vw;}
.crm-toast.show{opacity:1; transform:translate(-50%,0);}
.crm-toast.ok{background:#1f7a46;}
.crm-toast.err{background:#b03a2e;}
.crm-toast.warn{background:#a35b00;}

@media (max-width:960px){
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .home-grid,.detail-grid{grid-template-columns:1fr;}
  .topnav-inner{flex-wrap:wrap; height:auto; padding:10px 0; gap:10px 18px;}
  .nav-links{order:3; flex-basis:100%; overflow-x:auto; padding-bottom:4px;}
  .nav-links a{white-space:nowrap;}
}
@media (max-width:560px){
  .kpi-row,.kpi-row.three{grid-template-columns:1fr 1fr;}
  .kpi-value{font-size:18px;}
  .pipe-row{grid-template-columns:96px 1fr; }
  .pipe-num{grid-column:1/-1; text-align:left; margin-top:-4px;}
  .page-head-actions{flex-wrap:wrap;}
}
@media print{
  .crm-bar, .client-suggest, .crm-toast, .setup-banner, .flash-wrap, .acting-bar{ display:none !important; }
}


/* =====================================================================
   Multi-company: brand in nav, Super Admin, settings
   ===================================================================== */
.brand-link{display:flex; align-items:center; gap:9px; min-width:0;}
.brand-logo-sm{width:30px; height:30px; border-radius:7px; object-fit:contain; background:#fff; padding:2px; flex-shrink:0;}
.brand-initial{width:30px; height:30px; border-radius:7px; background:var(--aqua); color:var(--on-accent,#fff) !important; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0;}
.brand-link .brand-text{max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff;}
.nav-account{color:rgba(255,255,255,.85) !important;}
.nav-account:hover{color:#fff !important;}
.acting-bar{background:#5b2c83; color:#fff; font-size:12.5px; padding:7px 20px; display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;}
.acting-bar button{background:#fff; color:#5b2c83; border:none; border-radius:6px; padding:5px 11px; font-weight:700; font-size:12px; cursor:pointer;}
.logo-row{display:flex; gap:16px; align-items:flex-start; margin-bottom:6px;}
.logo-preview{width:84px; height:84px; border-radius:12px; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fbfdfd; flex-shrink:0;}
.logo-preview img{width:100%; height:100%; object-fit:contain;}
.logo-preview span{font-size:11px; color:var(--muted);}
.sticky-save{position:sticky; bottom:0; background:linear-gradient(transparent, var(--bg) 35%); padding:18px 0 12px; margin-top:0;}
.creds-card{background:#eef8f1; border:1px solid #bfe3cb; border-radius:12px; padding:16px 18px; margin-bottom:18px;}
.creds-card pre{background:#fff; border:1px solid #d6ebdd; border-radius:8px; padding:12px; font-size:13px; white-space:pre-wrap; margin:10px 0; font-family:var(--font-body);}
.creds-card button.chip{border:none; cursor:pointer; font-family:var(--font-body);}
.user-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.user-row:last-of-type{border-bottom:none;}
.danger-card{border:1px solid #f3c7c2;}
.danger-card h2{color:var(--danger);}
.danger-card input,.inline-form select{padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:13px;}
.cp-name:empty, .brand-name:empty{display:none;}
@media (max-width:560px){ .brand-text{max-width:150px;} }


/* =====================================================================
   Chat
   ===================================================================== */
.chat-container{padding-bottom:20px;}
.chat-app{display:grid; grid-template-columns:320px 1fr; height:calc(100vh - 56px - 48px); min-height:460px; background:#fff; border-radius:12px; box-shadow:0 2px 14px rgba(11,59,74,.08); overflow:hidden;}
.chat-list{border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0;}
.chat-list-head{padding:16px 16px 10px; border-bottom:1px solid var(--line);}
.chat-list-head h2{margin:0;}
.chat-threads{overflow-y:auto; flex:1;}
.chat-thread{display:flex; gap:10px; align-items:center; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid #f0f4f8; padding:11px 14px; cursor:pointer; font-family:var(--font-body); color:var(--ink);}
.chat-thread:hover{background:#f6f9fc;}
.chat-thread.active{background:var(--teal-light);}
.chat-avatar{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; background:#e3effc; color:#1d5fa8;}
.chat-avatar.admin{background:#fde7d0; color:#a35b00;}
.chat-avatar.group{background:var(--navy); color:#fff; font-size:16px;}
.chat-thread-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.chat-thread-top{display:flex; justify-content:space-between; gap:8px; font-size:13.5px;}
.chat-thread-top b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--navy);}
.chat-time{font-size:10.5px; color:var(--muted); white-space:nowrap;}
.chat-thread-last{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-unread{background:#25a35a; color:#fff; border-radius:10px; font-size:10.5px; font-weight:800; padding:2px 7px; flex-shrink:0;}
.chat-main{display:flex; flex-direction:column; min-height:0; min-width:0;}
.chat-main-head{display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--line);}
.chat-title{font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:15px;}
.chat-back{display:none; border:none; background:var(--teal-light); color:var(--teal); width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer;}
.chat-messages{flex:1; overflow-y:auto; padding:16px 18px; background:#f4f7fa; display:flex; flex-direction:column; gap:4px;}
.chat-empty{margin:auto; color:var(--muted); font-size:13px; text-align:center; max-width:320px;}
.chat-day{text-align:center; margin:10px 0 6px;}
.chat-day span{background:#e4ebf2; color:#566a80; font-size:11px; font-weight:600; padding:3px 10px; border-radius:10px;}
.chat-msg{display:flex;}
.chat-msg.mine{justify-content:flex-end;}
.chat-bubble{max-width:72%; padding:7px 11px 5px; border-radius:12px; font-size:13.5px; line-height:1.45; box-shadow:0 1px 1px rgba(0,0,0,.05); overflow-wrap:anywhere;}
.chat-msg.theirs .chat-bubble{background:#fff; border-top-left-radius:4px;}
.chat-msg.mine .chat-bubble{background:#d8ecff; border-top-right-radius:4px;}
.chat-sender{font-size:11.5px; font-weight:700; color:#a35b00; margin-bottom:2px;}
.chat-meta{font-size:10px; color:#7a8a9c; text-align:right; margin-top:2px;}
.chat-text a{color:#1d5fa8; text-decoration:underline;}
.chat-older{align-self:center; border:none; background:#e4ebf2; color:var(--teal); font-size:12px; font-weight:600; padding:6px 12px; border-radius:14px; cursor:pointer; margin-bottom:6px;}
.chat-compose{display:flex; gap:8px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--line); background:#fff;}
.chat-compose textarea{flex:1; resize:none; border:1px solid var(--line); border-radius:18px; padding:9px 14px; font-family:var(--font-body); font-size:13.5px; max-height:140px; line-height:1.4;}
.chat-compose textarea:focus{outline:none; border-color:var(--aqua);}
.chat-compose .btn-primary{border-radius:18px;}
.nav-count.chat-count{background:#25a35a;}
@media (max-width:760px){
  .chat-container{padding:0;}
  .chat-app{grid-template-columns:1fr; border-radius:0; height:calc(100vh - 110px);}
  .chat-app .chat-main{display:none;}
  .chat-app.show-main .chat-list{display:none;}
  .chat-app.show-main .chat-main{display:flex;}
  .chat-back{display:inline-block;}
  .chat-bubble{max-width:85%;}
}
@media print{ .chat-app{display:none;} }


/* =====================================================================
   Leads / client stages
   ===================================================================== */
.nav-drop{position:relative;}
.nav-drop > summary{list-style:none; white-space:nowrap; cursor:pointer; color:rgba(255,255,255,.85); font-size:13px; font-weight:600;}
.nav-drop > summary::-webkit-details-marker{display:none;}
.nav-drop > summary:hover, .nav-drop > summary.active{color:#fff;}
.nav-drop > summary.active{box-shadow:inset 0 -2px 0 var(--aqua); padding-bottom:4px;}
.nav-drop-menu{position:absolute; top:calc(100% + 12px); left:-10px; background:#fff; border-radius:10px; box-shadow:0 12px 30px rgba(11,40,70,.22); min-width:220px; padding:6px; z-index:100;}
.nav-drop-menu a{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; border-radius:7px; color:var(--ink) !important; font-size:13px; font-weight:600; white-space:nowrap;}
.nav-drop-menu a:hover, .nav-drop-menu a.on{background:var(--teal-light);}
.nav-drop-menu a span{background:#eef2f6; color:var(--muted); border-radius:10px; padding:1px 8px; font-size:11px;}
.tab-n{display:inline-block; background:rgba(0,0,0,.07); border-radius:10px; padding:0 7px; font-size:11px; margin-left:3px;}
.status-tabs a.on .tab-n{background:rgba(255,255,255,.22);}
.stg-badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; vertical-align:middle; white-space:nowrap;}
.stg-lead{background:#fff1dc; color:#a35b00;}
.stg-active{background:#e3f6ea; color:#1f8a4c;}
.stg-past{background:#eef1f4; color:#5b6b7c;}
.stage-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#fff; border-radius:10px; padding:10px 14px; margin-bottom:16px; box-shadow:0 2px 10px rgba(11,59,74,.06);}
.stage-btn{border:1px solid var(--line); background:#fff; border-radius:20px; padding:6px 13px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font-body); color:var(--muted);}
.stage-btn:hover{border-color:var(--aqua); color:var(--teal);}
.stage-btn.on{cursor:default; border-color:transparent;}
.stage-btn.on.stg-lead{background:#fff1dc; color:#a35b00;}
.stage-btn.on.stg-active{background:#e3f6ea; color:#1f8a4c;}
.stage-btn.on.stg-past{background:#e6eaef; color:#3f4f60;}
.stage-hint{margin-left:6px;}
.lead-card{border-left:4px solid #f0a030;}
@media (max-width:960px){
  .nav-drop-menu{position:fixed; left:12px; right:12px; top:auto; min-width:0;}
}


/* ---------- Work stages, closing, assignment, payments ---------- */
.pipe-badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:700; background:var(--teal-light); color:var(--teal); vertical-align:middle; white-space:nowrap;}
.inline-form{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0;}
.inline-form select,.inline-form input{padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:var(--font-body); background:#fff;}
.btn-ghost.sm,.btn-danger.sm{padding:7px 12px; font-size:12px;}
.close-btn{margin-left:auto;}
.closed-bar{background:#f4f6f8; justify-content:space-between;}
.pay-bar{height:9px; background:#e6edf3; border-radius:6px; overflow:hidden;}
.pay-bar span{display:block; height:100%; background:#1f8a4c; border-radius:6px;}
.stage-bar select{padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:var(--font-body); background:#fff; max-width:100%;}

/* ---------- Chat avatars / roles ---------- */
.chat-avatar{overflow:hidden;}
.chat-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.chat-avatar.group img{object-fit:contain; background:#fff; padding:3px; box-sizing:border-box;}
.chat-role{font-size:10px; font-weight:600; color:var(--muted); opacity:.85; margin-left:4px;}

/* ---------- Locked-down view: only the admin may copy / download company data ---------- */
body.restricted{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
body.restricted input, body.restricted textarea, body.restricted select, body.restricted [contenteditable="true"]{-webkit-user-select:text; user-select:text;}
@media print{ body.restricted.no-print{display:none !important;} }

.chooser-for{background:var(--teal-light); color:var(--navy); border-radius:10px; padding:12px 16px; margin:-8px 0 18px; font-size:13.5px; text-align:center;}

/* ================= Dashboards (Home, Super Admin, Manager) ================= */
.dash-hero{position:relative; overflow:hidden; border-radius:18px; padding:26px 28px; margin-bottom:20px; color:#fff;
  background:linear-gradient(120deg, var(--navy) 0%, var(--teal) 55%, var(--aqua) 100%); box-shadow:0 10px 30px rgba(11,40,70,.18);}
.dash-hero::before,.dash-hero::after{content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.08);}
.dash-hero::before{width:320px; height:320px; right:-80px; top:-150px;}
.dash-hero::after{width:180px; height:180px; right:180px; bottom:-120px; background:rgba(255,255,255,.06);}
.dash-hero-inner{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap;}
.dash-hero h1{color:#fff; font-size:24px; margin:0 0 4px;}
.dash-hero .dash-sub{opacity:.85; font-size:13px;}
.dash-hero .dash-eyebrow{font-size:11px; letter-spacing:1.4px; text-transform:uppercase; opacity:.75; font-weight:700; margin-bottom:6px;}
.dash-hero-actions{display:flex; gap:10px; flex-wrap:wrap;}
.dash-hero .btn-hero{background:#fff; color:var(--navy); border-radius:10px; padding:10px 16px; font-weight:700; font-size:13px; border:none; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.12);}
.dash-hero .btn-hero.ghost{background:rgba(255,255,255,.16); color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.28);}
.dash-hero .btn-hero:hover{transform:translateY(-1px);}
.hero-stats{display:flex; gap:26px; margin-top:16px; flex-wrap:wrap;}
.hero-stat b{display:block; font-family:var(--font-head); font-size:20px; font-weight:800;}
.hero-stat span{font-size:11.5px; opacity:.8;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;}
.stat-card{background:#fff; border-radius:14px; padding:16px 18px; box-shadow:0 2px 12px rgba(11,59,74,.06); display:flex; gap:14px; align-items:flex-start;
  color:var(--ink); text-decoration:none; border:1px solid transparent; transition:box-shadow .15s, transform .15s;}
a.stat-card:hover{box-shadow:0 8px 22px rgba(11,59,74,.12); transform:translateY(-2px);}
.stat-icon{flex:0 0 42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; background:var(--teal-light);}
.stat-icon.green{background:#e3f6ea;} .stat-icon.orange{background:#fff1dc;} .stat-icon.red{background:#fdecea;} .stat-icon.violet{background:#f1ebfa;}
.stat-body{min-width:0; flex:1;}
.stat-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); font-weight:700;}
.stat-value{font-family:var(--font-head); font-weight:800; font-size:21px; color:var(--navy); margin:3px 0 2px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stat-sub{font-size:11.5px; color:var(--muted);}
.trend{display:inline-block; font-weight:700; font-size:11px; padding:1px 7px; border-radius:20px; margin-right:4px;}
.trend.up{background:#e3f6ea; color:#1f8a4c;} .trend.down{background:#fdecea; color:#b03a2e;} .trend.flat{background:#eef1f4; color:#5b6b7c;}
.stat-card.alert{border-color:#f6c58f;} .stat-card.alert .stat-value{color:#d9480f;}

.chart-grid{display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:16px;}
.chart-grid.even{grid-template-columns:1fr 1fr;}
.chart-grid.three{grid-template-columns:repeat(3,1fr);}
.chart-card{background:#fff; border-radius:14px; padding:16px 18px 14px; box-shadow:0 2px 12px rgba(11,59,74,.06); min-width:0;}
.chart-card .card-head{margin-bottom:6px;}
.chart-card h2{margin:0;}
.chart-card .chart-note{font-size:11.5px; color:var(--muted); margin:-2px 0 8px;}
.chart-box{position:relative; height:260px;}
.chart-box.sm{height:210px;}
.chart-box.lg{height:300px;}
.chart-box.chart-empty canvas{display:none;}
.chart-box.chart-empty::after{content:'No data yet'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px;
  background:repeating-linear-gradient(45deg, #f7f9fb, #f7f9fb 10px, #fff 10px, #fff 20px); border-radius:10px;}
.legend-list{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.legend-item{display:flex; justify-content:space-between; font-size:12.5px;}
.legend-item b{font-variant-numeric:tabular-nums;}
.mini-list .mini-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px;}
.mini-list .mini-row:last-child{border-bottom:none;}
.progress{height:6px; border-radius:6px; background:var(--teal-light); overflow:hidden; margin-top:5px;}
.progress span{display:block; height:100%; background:var(--aqua); border-radius:6px;}
.owner-chip{display:inline-flex; align-items:center; gap:6px; background:var(--teal-light); color:var(--navy); border-radius:20px; padding:2px 10px 2px 3px; font-size:11.5px; font-weight:600; white-space:nowrap;}
.owner-chip i{font-style:normal; width:20px; height:20px; border-radius:50%; background:var(--aqua); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;}
.owner-chip.sa i{background:var(--navy);}
.filter-pills{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
.filter-pills a{padding:6px 12px; border-radius:20px; background:#fff; border:1px solid var(--line); font-size:12px; color:var(--ink); font-weight:600;}
.filter-pills a.on{background:var(--navy); color:#fff; border-color:var(--navy);}
.manager-card{background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(11,59,74,.06); padding:16px 18px; margin-bottom:14px;}
.manager-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;}
.manager-id{display:flex; gap:12px; align-items:center;}
.manager-avatar{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, var(--aqua), var(--navy)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-head);}
.manager-stats{display:flex; gap:22px; flex-wrap:wrap;}
.manager-stats div{text-align:right;} .manager-stats b{display:block; font-family:var(--font-head); font-size:16px; color:var(--navy);}
.manager-stats span{font-size:11px; color:var(--muted);}
.manager-companies{margin-top:12px; border-top:1px dashed var(--line); padding-top:8px;}
.readonly-note{background:#fff8e6; border:1px solid #f4dfa6; color:#7a5a00; border-radius:10px; padding:10px 14px; font-size:12.5px; margin-bottom:16px;}
@media (max-width: 1000px){ .stat-grid{grid-template-columns:repeat(2,1fr);} .chart-grid,.chart-grid.even,.chart-grid.three{grid-template-columns:1fr;} }
@media (max-width: 560px){ .stat-grid{grid-template-columns:1fr 1fr; gap:10px;} .stat-card{padding:12px; gap:8px;} .stat-icon{display:none;} .stat-value{font-size:17px;} .chart-box.lg{height:240px;} .dash-hero{padding:20px;} .manager-stats div{text-align:left;} }

/* ---------- Home: payments received / due ---------- */
.pay-home{margin-bottom:20px;}
.pay-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px;}
.pay-kpi{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:10px; background:var(--teal-light); border:2px solid transparent; color:var(--ink); text-decoration:none;}
.pay-kpi span{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);}
.pay-kpi b{font-family:var(--font-head); font-size:20px; color:var(--good);}
.pay-kpi em{font-style:normal; font-size:11.5px; color:var(--muted);}
.pay-kpi.on{border-color:var(--aqua); background:#fff;}
.pay-filter{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.pay-filter input,.pay-filter select{padding:7px 9px; border:1px solid var(--line); border-radius:7px; font-size:13px; font-family:var(--font-body);}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.seg label{display:flex; align-items:center; gap:4px; padding:6px 11px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--teal); border-right:1px solid var(--line);}
.seg label:last-child{border-right:none;}
.seg input{margin:0;}
.seg label:has(input:checked){background:var(--aqua); color:var(--on-accent,#fff);}
.pay-sel{margin-left:auto; font-size:13px;}
.soon{color:var(--teal); font-weight:700;}
.due-box{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:12px; background:#fbfdff;}
.due-box.soon{border-color:#f0c27a; background:#fff8ec;}
.due-box.late{border-color:#f1a9a0; background:#fdecea;}
.due-box-title{font-size:13px; margin-bottom:6px;}
@media (max-width:720px){ .pay-kpis{grid-template-columns:1fr;} .pay-sel{margin-left:0; width:100%;} }

/* ---------- Quotation themes: layout touches (colours and fonts come from includes/themes.php) ---------- */
/* Serif — Royal Navy & Gold, Maroon Elegant */
.theme-serif .letterhead{border-bottom:4px double var(--navy);}
.theme-serif .brand-name{font-family:var(--font-display); letter-spacing:.5px;}
.theme-serif .cp-name{letter-spacing:2px;}
.theme-serif .cp-rule{background:linear-gradient(90deg, transparent, var(--aqua), transparent); width:110px;}
.theme-serif .techspec-title,.theme-serif .sheet thead th{letter-spacing:1px;}

/* Wave — Teal Wave */
.theme-wave .cover-premium::after{background:rgba(255,255,255,.09); transform:skewY(-7deg); height:46%;}
.theme-wave .letterhead{border-bottom:3px solid var(--aqua); box-shadow:0 3px 0 var(--sky-tint);}
.theme-wave .techspec-title{border-radius:14px 14px 0 0;}

/* Minimal — Charcoal Minimal: white front page, thin lines */
.theme-minimal .cover-premium{background:#fff; color:var(--navy); border:2px solid var(--navy);}
.theme-minimal .cover-premium::before,.theme-minimal .cover-premium::after{display:none;}
.theme-minimal .cp-head{border-bottom-color:var(--line);}
.theme-minimal .cp-logo{box-shadow:none; border:1px solid var(--line);}
.theme-minimal .cp-name,.theme-minimal .cp-panel h2,.theme-minimal .cp-commit,.theme-minimal .cp-bullets b,.theme-minimal .cp-footer .cf-item b{color:var(--navy); text-shadow:none;}
.theme-minimal .cp-tag,.theme-minimal .cp-panel p,.theme-minimal .cp-bullets li,.theme-minimal .cp-footer{color:var(--ink);}
.theme-minimal .cp-rule{background:var(--navy);}
.theme-minimal .cp-panel{background:#f7f8f9; border-color:var(--line);}
.theme-minimal .cp-bullets li::before{background:var(--navy); color:#fff;}
.theme-minimal .cp-footer{border-top-color:var(--line);}
.theme-minimal .cp-availability-badge{color:var(--navy); border-color:var(--navy); background:#fff;}
.theme-minimal .letterhead{border-bottom:1px solid var(--navy);}

/* Luxury — Black Gold Luxury: framed front page, gold headings */
.theme-luxury .cover-premium{border:3px double var(--aqua); box-shadow:inset 0 0 0 8px #000, inset 0 0 0 9px var(--aqua);}
.theme-luxury .cp-name{color:var(--aqua);}
.theme-luxury .cp-rule{background:linear-gradient(90deg, transparent, var(--aqua), transparent); width:120px;}
.theme-luxury .cp-panel{border-color:color-mix(in srgb, var(--aqua) 55%, transparent);}
.theme-luxury .cp-panel h2,.theme-luxury .cp-commit{color:var(--aqua);}
.theme-luxury .cp-bullets li::before{background:var(--aqua); color:#000;}
.theme-luxury .sheet thead th,.theme-luxury .techspec-title{color:var(--aqua);}
.theme-luxury .sheet tbody tr td:first-child,.theme-luxury table.techspec-table td.ts-label{color:var(--aqua);}
.theme-luxury .letterhead{border-bottom:3px solid var(--aqua);}

/* Fresh — Aqua Fresh: rounded and soft */
.theme-fresh .cover-premium{border-radius:26px;}
.theme-fresh .techspec-title{border-radius:16px 16px 0 0;}
.theme-fresh .techspec-footer-bar{border-radius:0 0 16px 16px;}
.theme-fresh .img-box{border-radius:16px;}
.theme-fresh .btn-primary,.theme-fresh .btn-ghost{border-radius:22px;}
.theme-fresh .form-card,.theme-fresh .stat-card,.theme-fresh .chart-card{border-radius:18px;}
@media print{ .theme-fresh .cover-premium,.theme-minimal .cover-premium{border-radius:0;} .theme-minimal .cover-premium{border:none;} }

/* ---------- Settings: theme picker ---------- */
.theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.theme-card{position:relative; display:flex; flex-direction:column; gap:3px; border:2px solid var(--line); border-radius:12px; padding:8px; cursor:pointer; background:#fff; transition:border-color .15s;}
.theme-card:hover{border-color:var(--sky);}
.theme-card.on{border-color:var(--aqua); box-shadow:0 0 0 3px var(--teal-light);}
.theme-card input{position:absolute; top:10px; right:10px; margin:0;}
.tc-preview{display:flex; gap:5px; height:74px; margin-bottom:4px;}
.tc-cover{flex:0 0 42%; border-radius:7px; background:linear-gradient(150deg, var(--tc), var(--tm) 50%, var(--tg)); position:relative;}
.tc-cover i{position:absolute; left:20%; right:20%; top:40%; height:5px; border-radius:3px; background:rgba(255,255,255,.85);}
.tc-minimal .tc-cover{background:#fff; border:2px solid var(--tp);}
.tc-minimal .tc-cover i{background:var(--tp);}
.tc-luxury .tc-cover{border:2px solid var(--ta);}
.tc-luxury .tc-cover i{background:var(--ta);}
.tc-fresh .tc-cover{border-radius:14px;}
.tc-sheet{flex:1; display:flex; flex-direction:column; gap:3px; padding:4px; border:1px solid #eef1f4; border-radius:7px;}
.tc-head{height:12px; border-radius:3px; background:var(--tp);}
.tc-row{flex:1; border-radius:2px; border-left:8px solid var(--tp);}
.tc-row.a{background:var(--tb);}
.tc-row.b{background:color-mix(in srgb, var(--tb) 42%, #fff);}
.tc-name{font-weight:700; font-size:12.5px; color:var(--ink);}
.tc-desc{font-size:11px; color:var(--muted); line-height:1.35;}
.tc-fonts{font-size:10.5px; color:var(--teal); font-weight:600;}

/* ---------- Settings: Guide & FAQ ---------- */
.guide-card{margin-top:22px;}
.guide-sec{font-family:var(--font-head); font-size:13px; color:var(--teal); text-transform:uppercase; letter-spacing:.5px; margin:16px 0 6px;}
.guide-q{border-bottom:1px solid var(--line); padding:8px 0;}
.guide-q summary{cursor:pointer; font-weight:600; font-size:13.5px; color:var(--navy);}
.guide-q p{margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--ink);}
.guide-q p.hindi-line{color:var(--muted); font-size:12.5px; margin-top:4px;}

/* ---------- Subscription: payment details & proofs ---------- */
.pay-details{border:2px solid var(--aqua);}
.pay-amount{font-size:14px;}
.pay-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.pay-box{background:var(--teal-light); border-radius:10px; padding:12px 14px; font-size:13px;}
.pay-box h3{margin:0 0 8px;}
.pay-table{border-collapse:collapse; width:100%;}
.pay-table th{text-align:left; font-weight:600; color:var(--muted); font-size:12px; padding:4px 8px 4px 0; white-space:nowrap; vertical-align:top;}
.pay-table td{padding:4px 0; overflow-wrap:anywhere;}
.copy-btn{border:none; background:none; cursor:pointer; font-size:12px; padding:0 2px;}
.upi-btn{margin-top:8px;}
.pay-qr{margin-top:10px; text-align:center;}
.pay-qr img{width:180px; max-width:100%; height:auto; border-radius:8px; background:#fff; padding:6px; border:1px solid var(--line);}
.wa-box{margin-top:14px; padding:12px 14px; border-radius:10px; background:#e9f8ee; font-size:13px;}
.wa-chip{background:#25d366; color:#fff; margin-left:6px;}
.pay-note{margin:8px 0 0; font-size:12.5px; line-height:1.6;}
.proof-row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px;}
.proof-row:last-child{border-bottom:none;}
.proof-row.pending{background:#fff8ec; margin:0 -10px; padding:10px; border-radius:8px;}
.proof-main{display:flex; flex-direction:column; gap:3px; min-width:0;}
.proof-actions{display:flex; flex-direction:column; gap:6px; align-items:flex-end;}
.proof-alert{border-left:4px solid #e8590c;}

/* ---------- Chat: edit / delete, 90-day notice ---------- */
.chat-retention{padding:6px 18px; font-size:11.5px; color:#7a5a00; background:#fff8e1; border-bottom:1px solid #f3e2a9;}
.chat-retention span{color:#9a7a2a;}
.chat-msg{align-items:center; gap:4px;}
.chat-tools{display:flex; gap:2px; opacity:0; transition:opacity .15s;}
.chat-msg:hover .chat-tools,.chat-msg:focus-within .chat-tools{opacity:1;}
@media (hover:none){ .chat-tools{opacity:.75;} }
.chat-tool{border:none; background:#fff; border-radius:50%; width:26px; height:26px; cursor:pointer; font-size:12px; box-shadow:0 1px 2px rgba(0,0,0,.12);}
.chat-tool:hover{background:var(--teal-light);}
.chat-deleted{font-style:italic; color:#7a8a9c;}
.chat-msg.is-deleted .chat-bubble{background:#f1f3f5 !important;}
.chat-edited{font-style:italic;}
.chat-admin-see{margin-top:4px; font-size:11.5px;}
.chat-admin-see summary{cursor:pointer; color:#a35b00; font-weight:600;}
.chat-old{margin-top:4px; padding:5px 8px; border-left:3px solid #f0a030; background:#fff8ec; border-radius:4px; color:#5b4a2a; font-size:12.5px;}
.chat-editbar{padding:6px 14px; font-size:12px; background:var(--teal-light); color:var(--teal); border-top:1px solid var(--line);}

/* ---------- WhatsApp API (v9) ---------- */
.chip.wa-crm{background:#e7f8ee; color:#137a3d; border-color:#bfe8cf;}
.chip.wa-crm:hover{background:#d3f2df;}
.wa-tag{display:inline-block; font-size:10.5px; font-weight:700; color:#137a3d; background:#e7f8ee; border-radius:10px; padding:1px 7px; margin-left:4px; white-space:nowrap;}
.wa-tpl{border-top:1px solid var(--line); padding-top:12px; margin-top:12px;}
.wa-tpl:first-of-type{border-top:none; margin-top:0;}
.wa-tpl-text{background:#f6f9fc; border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.6; margin-top:8px;}
.wa-search{margin-top:8px;}
.wa-search input{width:100%; border:1px solid var(--line); border-radius:16px; padding:7px 12px; font-size:13px;}
.wa-avatar{background:#e7f8ee; color:#137a3d;}
.wa-app .chat-main-head .chip{flex-shrink:0;}
.wa-tag-line{font-size:10.5px; font-weight:700; color:#137a3d; margin-bottom:3px;}
.wa-file{font-size:12.5px; font-weight:600; background:rgba(255,255,255,.6); border-radius:6px; padding:4px 8px; margin-bottom:4px;}
.wa-error{font-size:11.5px; color:var(--danger); margin-top:4px;}
.wa-failed-bubble{border:1px solid #f1b8b0;}
.wa-read{color:#1d8fe0;}
.wa-failed{color:var(--danger); font-weight:700;}
.wa-compose{border-top:1px solid var(--line); background:#fff; padding:10px 12px; max-height:55vh; overflow-y:auto;}
.wa-window-note{font-size:12.5px; color:#7a5a00; background:#fff8e1; border-radius:8px; padding:7px 10px;}
.wa-window-note span{color:#9a7a2a; display:block; margin-top:2px;}
.wa-tpl-box{margin-top:8px;}
.wa-tpl-box > summary{cursor:pointer; font-weight:700; color:var(--navy); font-size:13.5px; padding:4px 0;}
.wa-tpl-form{margin-top:8px;}
.wa-kinds{display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:10px; font-size:13.5px;}
.wa-kinds label{display:flex; align-items:center; gap:5px; cursor:pointer;}
.wa-preview{background:#f6f9fc; border-radius:8px; padding:7px 10px; margin:4px 0 8px; line-height:1.5;}
.wa-preview:empty{display:none;}
@media (max-width:760px){ .wa-app .chat-main-head{padding:10px 12px;} .wa-compose{max-height:60vh;} }
@media (max-width:760px){ .wa-tpl-fields{grid-template-columns:1fr;} }
button.chip{border:none; cursor:pointer; font-family:inherit;}

/* ---------- Public legal pages (privacy.php, terms.php) ---------- */
.legal-body{background:var(--bg);}
.legal-wrap{max-width:820px; margin:0 auto; padding:0 16px;}
.legal-top{background:var(--navy); padding:16px 0;}
.legal-doc{background:var(--paper); border:1px solid var(--line); border-radius:12px; margin:24px auto; padding:28px 32px; line-height:1.65; font-size:14.5px;}
.legal-doc h2{margin:24px 0 8px; font-size:16px;}
.legal-doc ul,.legal-doc ol{padding-left:22px;}
.legal-doc li{margin:4px 0;}
.legal-foot{font-size:12.5px; color:var(--muted); padding:0 0 32px; text-align:center;}
.legal-links{text-align:center; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted);}
.legal-links a{color:var(--muted);}
@media (max-width:640px){.legal-doc{padding:20px 16px; margin:16px auto; border-radius:10px;}}

/* ---------- Public home page (includes/landing.php) ---------- */
.land-nav{display:flex; align-items:center; justify-content:space-between;}
.land-login{color:#fff; font-weight:600; font-size:13px; background:rgba(255,255,255,.14); padding:7px 14px; border-radius:8px;}
.land-hero{background:linear-gradient(135deg,var(--navy),var(--teal)); color:#fff; padding:56px 0 60px;}
.land-hero h1{color:#fff; font-size:32px; line-height:1.25; max-width:640px; margin:0 0 14px;}
.land-hero p{font-size:16px; line-height:1.6; max-width:640px; color:rgba(255,255,255,.9); margin:0;}
.land-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;}
.land-cta .btn-ghost{background:rgba(255,255,255,.15); color:#fff;}
.land-section{margin:36px 0;}
.land-section h2{font-size:20px; margin-bottom:14px;}
.land-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;}
.land-card{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px; line-height:1.6; font-size:14px;}
.land-card h3{margin:6px 0 6px;}
.land-card p{margin:0 0 8px;}
.land-ic{font-size:24px;}
.land-steps{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px 18px 18px 38px; line-height:1.7; font-size:14.5px; margin:0;}
.land-steps li{margin:6px 0;}
@media (max-width:640px){.land-hero{padding:36px 0 40px;} .land-hero h1{font-size:24px;}}

/* ---------- Field Tracking ---------- */
.field-st{display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; background:#f1f3f5; color:#495057; white-space:nowrap;}
.field-st-on{background:#e9f8ee; color:#2b8a3e;} .field-st-stale{background:#fff4e6; color:#d9480f;} .field-st-out{background:#fdecea; color:#c92a2a;}
.field-hero{border-top:4px solid #ced4da;}
.field-hero-on{border-top-color:#2b8a3e;} .field-hero-stale{border-top-color:#e8590c;} .field-hero-out{border-top-color:#c92a2a;}
.field-hero-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.field-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 4px; text-align:center;}
.field-stats div{background:var(--teal-light); border-radius:10px; padding:10px 6px;}
.field-stats b{display:block; font-family:var(--font-head); font-size:18px; color:var(--navy);}
.field-stats span{font-size:11px; color:var(--muted);}
.field-help{font-size:13px; color:var(--muted); margin:14px 0 4px;}
.field-action{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.field-big{width:100%; padding:16px !important; font-size:16px !important; border-radius:12px !important;}
.btn-primary.field-big.good{background:#2b8a3e;}
.field-selfie-btn{display:block; text-align:center; padding:14px; border:2px dashed var(--line); border-radius:12px; cursor:pointer; font-weight:600; color:var(--navy);}
.field-selfie-preview{width:120px; height:120px; object-fit:cover; border-radius:50%; margin:0 auto; display:block;}
.field-sharing{background:#e9f8ee; color:#1f6f33; border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:16px;}
.field-duty-bar{background:#e9f8ee; color:#1f6f33; padding:7px 20px; font-size:12.5px; text-align:center; border-bottom:1px solid #c6ecd2;}
.field-duty-bar a{color:inherit;}
.field-on-dot{background:#2b8a3e !important;}
.field-client-pick{position:relative;}
.field-suggest{position:absolute; left:0; right:0; top:100%; z-index:20; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); overflow:hidden;}
.field-suggest button{display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line); padding:10px 12px; cursor:pointer; font-family:var(--font-body);}
.field-suggest button:hover{background:var(--teal-light);}
.field-suggest button span{display:block; font-size:11.5px; color:var(--muted);}
.field-visit-list{list-style:none; margin:0; padding:0;}
.field-visit-list li{padding:10px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px;}
.field-visit-list li:last-child{border-bottom:0;}
.field-visit-list .chip{align-self:flex-start;}
.field-live{display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:16px; margin-bottom:10px;}
.field-map{height:560px; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(11,59,74,.08); background:#e9ecef; z-index:0;}
.field-people{max-height:560px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;}
.field-person{background:#fff; border-radius:12px; padding:12px 14px; box-shadow:0 2px 10px rgba(11,59,74,.06); border-left:4px solid #ced4da;}
.field-person-on{border-left-color:#2b8a3e;} .field-person-stale{border-left-color:#e8590c;} .field-person-out{border-left-color:#c92a2a;}
.fp-head{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.fp-meta{font-size:12.5px; margin-top:4px;}
.fp-actions{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.fp-actions button.chip{border:0; cursor:pointer; font-family:var(--font-body);}
.field-pin span,.field-dot span{display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; color:#fff; font-weight:700; font-size:12px; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35);}
.field-dot span{font-size:11px;}
.field-thumb{width:44px; height:44px; object-fit:cover; border-radius:8px; display:block;}
.field-thumb.lg{width:100%; height:auto; max-height:220px; margin-top:8px;}
.field-addr{max-width:260px; white-space:normal;}
@media (max-width: 860px){
  .field-live{grid-template-columns:1fr;}
  .field-map{height:380px;}
  .field-people{max-height:none;}
}
.field-client-list .field-client{padding:14px 16px; margin-bottom:10px;}
.field-sec{font-size:15px; margin:18px 0 10px; color:var(--navy);}
.field-task{background:#fff8e6; border-radius:10px; padding:10px 12px; margin-bottom:10px; font-size:13px;}

/* v9.5 visit detail */
.field-detail-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:10px;}
.field-detail-grid > div{display:flex; flex-direction:column; gap:2px; background:var(--bg-soft, #f6f4fb); border-radius:10px; padding:10px 12px;}
.field-task-box{margin-top:10px; padding:10px 12px; border-radius:10px; background:#fff8e6; display:flex; flex-direction:column; gap:4px;}
.field-note-text{white-space:normal; margin:0;}
.field-photo-full{max-width:100%; max-height:520px; border-radius:12px; display:block; margin-top:6px;}
.field-map.field-map-sm{height:280px; margin-bottom:10px;}
a.field-visit-link{display:block; color:inherit; text-decoration:none;}
a.field-visit-link:hover{box-shadow:0 4px 16px rgba(80,40,140,.14);}
@media (max-width:640px){ .field-detail-grid{grid-template-columns:repeat(2,1fr);} }

/* v9.5 site location + live status */
.field-site-row{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding:8px 0 10px; border-bottom:1px solid var(--line); margin-bottom:10px;}
.field-site-edit{width:100%;}
.field-site-edit > summary{cursor:pointer; display:inline-block;}
.field-site-form{margin-top:8px; display:flex; flex-direction:column; gap:8px;}
.js-site-picker input{width:100%;}
.js-site-picker .fp-actions{margin-top:6px;}
.field-map.field-map-pick{height:300px; margin-top:8px;}
.field-live{margin-top:8px; padding:10px 12px; border-radius:10px; background:#eef8f1; display:flex; flex-direction:column; gap:8px;}
.field-live-map{height:220px; border-radius:10px; overflow:hidden; z-index:0;}

/* v9.5 chat @mentions */
.chat-compose{position:relative;}
.chat-mention{color:var(--aqua); font-weight:600; background:rgba(109,40,217,.08); border-radius:4px; padding:0 2px;}
.chat-mention.me{background:#ffe8a3; color:#5c3d00;}
.chat-msg.mine .chat-mention{background:rgba(255,255,255,.22); color:inherit;}
.chat-msg.mentions-me .chat-bubble{box-shadow:0 0 0 2px #f5c542;}
.chat-msg.flash .chat-bubble{animation:chatFlash 2.4s ease;}
@keyframes chatFlash{0%,40%{box-shadow:0 0 0 4px #f5c542;}100%{box-shadow:none;}}
.chat-mention-pick{position:absolute; left:10px; bottom:100%; margin-bottom:6px; background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(30,20,60,.18); min-width:240px; max-width:90%; max-height:260px; overflow:auto; z-index:20; padding:4px;}
.chat-mention-pick button{display:block; width:100%; text-align:left; border:0; background:none; padding:8px 10px; border-radius:8px; font:inherit; cursor:pointer;}
.chat-mention-pick button.on,.chat-mention-pick button:hover{background:#f1ecfb;}

/* v9.5 notification bell */
.bell{position:relative;}
.bell-btn{position:relative; background:rgba(255,255,255,.12); border:0; color:#fff; width:36px; height:36px; border-radius:50%; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.bell-btn:hover{background:rgba(255,255,255,.22);}
.bell-count{position:absolute; top:-3px; right:-4px; background:#e03131; color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px; line-height:18px; border-radius:9px; padding:0 4px; text-align:center;}
.bell-count[hidden]{display:none;}
.bell-panel{position:absolute; right:0; top:44px; width:340px; max-width:calc(100vw - 24px); background:#fff; color:var(--ink); border-radius:12px; box-shadow:0 12px 36px rgba(20,10,50,.25); z-index:1000; overflow:hidden; font-size:13.5px;}
.bell-head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line);}
.bell-push{padding:10px 14px; background:#f6f2ff; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; font-size:12.5px;}
.bell-push[hidden], .bell-panel[hidden]{display:none;}
.bell-list{max-height:380px; overflow:auto;}
.bell-item{display:flex; gap:10px; padding:10px 14px; border-bottom:1px solid #f0eef5; color:inherit; text-decoration:none;}
.bell-item:hover{background:#faf8ff;}
.bell-item.unread{background:#fff8e6;}
.bell-ic{flex:0 0 28px; height:28px; border-radius:50%; background:#efe9fb; display:flex; align-items:center; justify-content:center; font-weight:700; color:#6d28d9;}
.bell-main{display:flex; flex-direction:column; gap:2px; min-width:0;}
.bell-body{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:560px){ .bell-panel{position:fixed; right:12px; left:12px; top:60px; width:auto;} }

/* v9.5 Clients menu */
.nav-drop-sep{height:1px; background:var(--line); margin:4px 6px;}
.nav-drop-menu a.nav-drop-add{color:var(--aqua) !important;}
.nav-drop-menu a span.hot{background:#ffe3e3; color:#c92a2a;}

/* v9.5 online payment */
.pay-online{border:2px solid #d9ccf7;}
.pay-gw-row{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0;}
.pay-gw-row form{margin:0;}
.pay-gw-btn{min-width:220px;}
body.pay-redirect{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); margin:0; padding:16px;}
body.pay-redirect .pay-box{background:#fff; border-radius:14px; padding:28px 24px; max-width:420px; text-align:center; box-shadow:0 8px 30px rgba(20,10,50,.12);}
.pay-spinner{width:38px; height:38px; margin:0 auto 12px; border:4px solid #e9e3f7; border-top-color:#6d28d9; border-radius:50%; animation:paySpin 1s linear infinite;}
@keyframes paySpin{to{transform:rotate(360deg);}}

/* v9.5 payment gateway cards (Super Admin) */
.pg-card{border:1px solid var(--line); border-radius:10px; margin:10px 0; background:#fcfbff;}
.pg-card > summary{cursor:pointer; padding:12px 14px; display:flex; gap:10px; align-items:center; list-style:none;}
.pg-card > summary::-webkit-details-marker{display:none;}
.pg-card > summary::before{content:'▸'; color:var(--muted);}
.pg-card[open] > summary::before{content:'▾';}
.pg-body{padding:0 14px 12px;}

/* v9.5 Settings page: side menu + one section at a time */
.settings-page{max-width:1120px;}
.settings-layout{display:grid; grid-template-columns:230px 1fr; gap:22px; align-items:start;}
.settings-nav{position:sticky; top:14px; background:#fff; border-radius:14px; padding:10px; box-shadow:0 2px 10px rgba(11,59,74,.06); display:flex; flex-direction:column; gap:2px;}
.settings-nav .sn-group{font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); padding:10px 10px 4px;}
.settings-nav a{display:block; padding:9px 10px; border-radius:8px; color:var(--ink); font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap;}
.settings-nav a:hover{background:#f4f1fb;}
.settings-nav a.on{background:var(--aqua); color:var(--on-accent,#fff);}
.settings-sec{display:none;}
.settings-sec.on{display:block;}
.settings-sec-head{margin:2px 0 12px;}
.settings-sec-head h2{margin:0 0 2px; font-size:20px;}
.settings-sec-head p{margin:0;}
.settings-save{position:sticky; bottom:0; display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:14px 0 12px; background:linear-gradient(transparent, var(--bg) 35%);}
.settings-saved{color:var(--good, #2b8a3e); font-weight:700;}
.settings-dirty{color:#c2410c; font-weight:600; font-size:13px;}
.guide-search{width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:14px; margin-bottom:12px; background:#fff;}
.settings-sec .guide-card > h3, .settings-sec .guide-card > h3 + .hint{display:none;}
@media (max-width:860px){
  .settings-layout{grid-template-columns:1fr; gap:12px;}
  .settings-nav{flex-direction:row; overflow-x:auto; top:0; z-index:5; padding:8px; border-radius:12px; -webkit-overflow-scrolling:touch;}
  .settings-nav .sn-group{display:none;}
  .settings-nav a{flex:0 0 auto; padding:8px 12px; background:#f4f1fb;}
}

/* v9.5: the hidden attribute always hides, even on elements with a display rule */
[hidden]{display:none !important;}

/* v9.5: Super Admin → Companies */
.co-search{padding:8px 10px; border:1px solid var(--line); border-radius:8px; min-width:240px;}
.co-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(440px, 1fr)); gap:14px;}
.co-card{background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(11,59,74,.06); padding:16px 18px; display:flex; flex-direction:column; gap:12px; scroll-margin-top:80px;}
.co-card.off{background:#fbf6f6; border:1px solid #f1d4d4;}
.co-card:target{box-shadow:0 0 0 2px var(--aqua);}
.co-head{display:flex; gap:12px; align-items:flex-start;}
.co-title{min-width:0; flex:1;}
.co-title a b{font-size:15.5px;}
.co-facts{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;}
.co-facts div{background:#f5f8fa; border-radius:8px; padding:7px 9px; min-width:0;}
.co-facts span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted, #6b7c85); font-weight:600;}
.co-facts b{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.co-facts b.late{color:#c92a2a;}
.co-facts em{display:block; font-style:normal; font-size:11px; color:var(--muted, #6b7c85);}
.co-sub{font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--navy); margin-bottom:4px;}
.co-admin{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #eef2f4; flex-wrap:wrap;}
.co-admin:first-of-type{border-top:0;}
.co-actions{display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid #eef2f4; padding-top:10px;}
.btn-danger-soft{background:#fff0f0; color:#c92a2a; border:1px solid #f3c4c4; border-radius:8px; padding:8px 14px; font:inherit; font-weight:600; cursor:pointer;}
.btn-danger-soft.sm{padding:5px 10px; font-size:12.5px;}
.btn-danger-soft:hover{background:#ffe3e3;}
.mgr-admin-off{color:#c92a2a; font-weight:600;}
@media (max-width:560px){ .co-grid{grid-template-columns:1fr;} .co-facts{grid-template-columns:repeat(2, 1fr);} .co-search{min-width:0; width:100%;} }

/* ---------- v9.7.1: phone screens / Android app — nothing may push the page wider than the screen ---------- */
input, select, textarea{max-width:100%;}
.grid > *, .kpi-row > *, .logo-row > *, .card-head > *, .detail-grid > *, .form-card, .table-scroll{min-width:0;}
.card-head{flex-wrap:wrap;}
@media (max-width:560px){
  .user-row{flex-wrap:wrap;}
  .user-row .row-actions-cell{white-space:normal;}
  .search-bar{flex-wrap:wrap;}
  .search-bar input[type=text]{flex:1 1 100%;}
  .search-bar select{flex:1 1 0; min-width:0;}
  .grid[style*="repeat(3"]{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:420px){
  .grid, .grid.two, .grid[style*="repeat(3"]{grid-template-columns:1fr !important;}
  .kpi-row.three{grid-template-columns:1fr 1fr;}
}

/* ---------- v9.7.3 phone: menu button, bigger form text ---------- */
.nav-menu-btn{display:none;}
@media (max-width:760px){
  .nav-menu-btn{display:inline-flex; align-items:center; gap:6px; order:2; margin-left:auto; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:8px; padding:7px 13px; font:600 14px var(--font-body); cursor:pointer;}
  .brand-link{order:1;}
  .nav-user{order:3; flex-wrap:wrap;}
  .nav-links{order:4; display:none !important;}
  .topnav.menu-open .nav-links{display:grid !important; grid-template-columns:1fr 1fr; gap:6px; overflow:visible; padding:2px 0 8px; flex-basis:100%;}
  .topnav.menu-open .nav-links > a, .topnav.menu-open .nav-drop > summary{display:block; padding:11px 12px; background:rgba(255,255,255,.08); border-radius:8px; white-space:normal; box-shadow:none; font-size:14px; color:#fff;}
  .topnav.menu-open .nav-links > a.active, .topnav.menu-open .nav-drop > summary.active{background:rgba(255,255,255,.22); box-shadow:none; padding-bottom:11px;}
  .topnav.menu-open .nav-drop[open]{grid-column:1/-1;}
  .topnav.menu-open .nav-drop-menu{position:static; margin-top:6px; min-width:0; box-shadow:none;}
  .topnav.menu-open .nav-drop-menu a{white-space:normal;}
  /* 16px text in form boxes: phones (iPhone) do not zoom in when you tap a box (the quotation sheet keeps its own sizes) */
  main.page input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.sheet *),
  main.page select:not(.sheet *), main.page textarea:not(.sheet *), .login-card input:not([type=checkbox]){font-size:16px !important;}
  .lh-table{min-width:880px;}
  .lh-table .badge{white-space:nowrap;}
}
@media (max-width:760px){
  .inline-form{max-width:100%;}
  .inline-form select{min-width:0; max-width:100%;}
}

/* ---------- Profile photos (menu + Users list): always a small round thumbnail ---------- */
.nav-account{display:inline-flex; align-items:center; gap:7px; min-width:0;}
.nav-avatar{width:28px; height:28px; min-width:28px; border-radius:50%; object-fit:cover; display:block; border:1.5px solid rgba(255,255,255,.6); background:#fff;}
.user-avatar-sm{width:26px; height:26px; border-radius:50%; object-fit:cover; vertical-align:middle; margin-right:6px; display:inline-block;}
.logo-preview img{object-fit:cover;}