:root{
  --navy-900:#0b1f45; --navy-800:#123170; --cyan-500:#0aa9c9; --cyan-050:#eaf7fa;
  --sand-100:#f6f7f9; --line:#e3e7ea; --ink:#16232e; --ink-mute:#5a6a75;
  --ok:#1a9e5c; --warn:#c98a0a; --err:#d64545; --radius:12px;
  --font-body:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--sand-100)}
a{color:inherit}
h1,h2,h3{font-family:var(--font-body);color:var(--navy-900);margin:0 0 .5em}
.muted{color:var(--ink-mute)} .small{font-size:.83rem} .center{text-align:center}

.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border-radius:8px;padding:10px 16px;font-weight:600;font-size:.9rem;text-decoration:none;border:1px solid transparent;cursor:pointer;background:#eef1f3;color:var(--ink)}
.btn-primary{background:var(--navy-800);color:#fff}
.btn-primary:hover{background:var(--navy-900)}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1ea952}
.btn-danger{background:#fdecec;color:var(--err)}
.btn-danger:hover{background:#f8d3d3}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-sm{padding:6px 12px;font-size:.8rem}
.btn-lg{padding:13px 20px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Shell ---------- */
.ad-shell{display:flex;min-height:100vh}
.ad-side{width:250px;flex:none;background:var(--navy-900);color:#cfe0ee;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.ad-brand{display:flex;align-items:center;gap:10px;padding:20px 18px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.ad-side-close{display:none;margin-left:auto;background:rgba(255,255,255,.1);border:0;color:#fff;width:32px;height:32px;border-radius:8px;font-size:1rem;cursor:pointer;flex:none}
.ad-backdrop{display:none;position:fixed;inset:0;background:rgba(8,16,32,.5);z-index:25}
.ad-backdrop.show{display:block}
.ad-brand img{height:30px}
.ad-nav{flex:1;overflow-y:auto;padding:14px 10px}
.ad-group{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#7f96ab;margin:18px 10px 6px}
.ad-group:first-child{margin-top:4px}
.ad-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:#cfe0ee;font-size:.92rem;font-weight:500}
.ad-link:hover{background:rgba(255,255,255,.08)}
.ad-link.on{background:var(--cyan-500);color:#04202a;font-weight:700}
.ad-ic{width:20px;text-align:center;flex:none}
.ad-user{padding:16px 18px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;font-size:.85rem}
.ad-user .ad-role{display:block;color:#7f96ab;font-size:.75rem}
.ad-logout{color:#f3b9b9;text-decoration:none;font-weight:600}
.ad-main{flex:1;min-width:0}
.ad-topbar{display:flex;align-items:center;gap:14px;padding:18px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.ad-topbar h1{font-size:1.25rem;margin:0;flex:1}
.ad-menu-btn{display:none;background:none;border:0;font-size:1.3rem;cursor:pointer}
.ad-view-site{text-decoration:none;color:var(--navy-800);font-weight:600;font-size:.88rem}
.ad-content{padding:26px 28px 60px;max-width:1280px}

.ad-flash{padding:12px 16px;border-radius:8px;margin-bottom:18px;background:#eafbf0;border:1px solid #b7e6c6;color:#155724}
.ad-flash-error{background:#fdecec;border-color:#f3b9b9;color:#8a2222}

/* ---------- Cards / tables ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;min-width:0}
.card p{overflow-wrap:break-word}
.card + .card{margin-top:18px}
/* Grid/flex items default to min-width:auto (refuse to shrink below their
   content's natural width), which silently defeats overflow-x:auto/wrap
   fixes placed *inside* them — the overflow gets forced one level further
   out instead. Resetting it here is the actual, permanent fix; every
   previous "wrap this one table/row" patch was correct but addressed a
   symptom one level too low to matter once this was still unset. */
.grid{display:grid;gap:18px}
.grid > *{min-width:0}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-main-side{grid-template-columns:2fr 1fr;align-items:start}
@media (max-width:900px){.grid-2,.grid-3,.grid-4,.grid-main-side{grid-template-columns:1fr}}

.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.kpi .num{font-size:1.9rem;font-weight:700;color:var(--navy-900)}
.kpi .lbl{color:var(--ink-mute);font-size:.85rem}

table.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute);padding:10px 12px;border-bottom:2px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
.tbl tr:hover td{background:#fafbfc}
.tbl-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap table{border:0}
table.tbl{min-width:640px}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700}
.badge-new{background:#e6f0fb;color:#1a5fb4}
.badge-contacted,.badge-sent,.badge-lead{background:#fef3e0;color:var(--warn)}
.badge-confirmed,.badge-quoted,.badge-viewed{background:#eef0fd;color:#5b4fd6}
.badge-completed,.badge-paid,.badge-won,.badge-customer,.badge-accepted{background:#e7f8ee;color:var(--ok)}
.badge-cancelled,.badge-lost,.badge-overdue,.badge-declined,.badge-void{background:#fdecec;color:var(--err)}
.badge-draft{background:#eef1f3;color:var(--ink-mute)}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.toolbar .filters{display:flex;gap:8px;flex-wrap:wrap}
.pill-link{padding:6px 14px;border-radius:999px;background:#eef1f3;text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:600}
.pill-link.on{background:var(--navy-900);color:#fff}

/* ---------- Forms ---------- */
label.f{display:block;font-weight:600;font-size:.86rem;margin-bottom:16px;color:var(--navy-900)}
label.f small{font-weight:400;color:var(--ink-mute)}
.f input[type=text],.f input[type=email],.f input[type=number],.f input[type=date],.f input[type=time],.f input[type=password],.f input[type=url],.f select,.f textarea,
input[type=text],input[type=email],input[type=number],input[type=date],input[type=time],input[type=password],input[type=url],select,textarea{
  width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
textarea{resize:vertical}
.checkrow{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;margin-bottom:16px}
.checkrow input{width:auto;margin:0}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
@media (max-width:640px){.form-actions-pair .btn{flex:1 1 calc(50% - 5px)}}
/* <fieldset> has the same "won't shrink below content" default as a
   browser-stylesheet quirk, independent of grid/flex — reset separately. */
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;min-width:0}
legend{font-weight:700;padding:0 6px;color:var(--navy-900)}

/* login */
.login-body{background:var(--navy-900);min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);margin:0}
.login-card{background:#fff;padding:38px 34px;border-radius:14px;width:100%;max-width:360px;text-align:center}
.login-logo{height:44px;margin:0 auto 6px}
.login-card label{display:block;text-align:left;font-weight:600;font-size:.86rem;margin:16px 0 0}

/* ---------- Media library ---------- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.media-item{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;position:relative;text-align:left}
.media-item img,.media-item video{width:100%;height:100px;object-fit:cover;display:block;background:#eee}
.media-item .mi-name{display:block;padding:6px 8px;font-size:.72rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-item.selected{outline:3px solid var(--cyan-500)}
.media-upload{border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--ink-mute);margin-bottom:18px}

/* ---------- Page builder ---------- */
.builder{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.block-palette{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.block-palette h3{font-size:.9rem;margin-bottom:10px}
.palette-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#fafbfc;border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin-bottom:8px;cursor:pointer;font-size:.85rem}
.palette-item:hover{border-color:var(--cyan-500)}
.block-list{display:flex;flex-direction:column;gap:12px;min-height:80px}
.block-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.block-card.dragging{opacity:.4}
.block-card-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fafbfc;border-bottom:1px solid var(--line);cursor:grab}
.block-card-head strong{flex:1;font-size:.88rem}
.block-card-body{padding:16px}
.block-card-body.collapsed{display:none}
.repeat-item{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px;position:relative}
.repeat-item .rm-row{position:absolute;top:8px;right:8px}
.drag-placeholder{border:2px dashed var(--cyan-500);border-radius:var(--radius);height:56px}
.img-pick{display:flex;gap:12px;align-items:center;margin-top:6px}
.img-pick img{width:72px;height:72px;object-fit:cover;border-radius:8px;background:#eee;border:1px solid var(--line)}

/* ---------- Dialog / media picker modal ---------- */
dialog.modal{border:0;border-radius:14px;padding:0;width:min(760px,92vw);max-height:82vh}
dialog.modal::backdrop{background:rgba(11,31,69,.55)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-body{padding:18px 20px;overflow:auto;max-height:60vh}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}

/* ---------- CRM kanban ---------- */
.kanban{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;overflow-x:auto}
.kcol{background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-width:200px}
.kcol h4{padding:12px 14px;margin:0;border-bottom:1px solid var(--line);font-size:.85rem;display:flex;justify-content:space-between}
.kcard{margin:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:.85rem;display:block;text-decoration:none;color:var(--ink)}
.kcard:hover{border-color:var(--cyan-500)}
.kcard strong{display:block;color:var(--navy-900)}

/* ---------- Invoice editor ---------- */
.line-items{width:100%;min-width:480px;border-collapse:collapse}
.line-items th{text-align:left;font-size:.75rem;color:var(--ink-mute);padding:6px}
.line-items td{padding:6px;vertical-align:top}
.line-items input{margin:0}
.line-items input[type=text]{min-width:180px}
.doc-total-box{max-width:300px;margin-left:auto;margin-top:14px}
.doc-total-box div{display:flex;justify-content:space-between;padding:6px 0}

/* bar chart (dependency-free) */
.barchart{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:10px}
.barchart .bar{flex:1;background:var(--cyan-500);border-radius:4px 4px 0 0;min-height:2px;position:relative}
.barchart .bar:hover::after{content:attr(data-v);position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--navy-900);color:#fff;font-size:.7rem;padding:2px 6px;border-radius:4px;white-space:nowrap}
.barchart-labels{display:flex;gap:6px;margin-top:6px}
.barchart-labels span{flex:1;text-align:center;font-size:.68rem;color:var(--ink-mute)}

@media (max-width:960px){
  .ad-side{position:fixed;left:-260px;z-index:30;transition:left .2s ease}
  .ad-side.open{left:0}
  .ad-menu-btn{display:block}
  .ad-side-close{display:flex;align-items:center;justify-content:center}
  .builder{grid-template-columns:1fr}
  .block-palette{position:static}
  .kanban{grid-template-columns:repeat(6,220px)}
}