/* ==========================================================================
   Dropwebs app shell + admin. Built on the Design MD tokens (dw.css). Adds the
   premium SaaS layout (sidebar, topbar, location selector) and a WordPress-style
   admin with clean CRUD list tables. No new colors - tokens only.
   ========================================================================== */

/* ---- app shell ---- */
.shell{ display:grid; grid-template-columns:16rem 1fr; min-height:100vh; background:var(--grey) }
.side{ background:var(--dark); color:var(--inv); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto }
.side__brand{ display:flex; align-items:center; gap:.6rem; padding:1.35rem 1.35rem; font-family:var(--display); font-weight:800; letter-spacing:var(--tr-brand); color:#fff }
.side__brand .brand__mark{ width:1.35rem; height:1.35rem; border-radius:.42rem; background:linear-gradient(150deg,var(--coral),#6B1D0B) }
.side__nav{ display:flex; flex-direction:column; gap:.15rem; padding:.5rem .75rem; flex:1 }
.side__nav a{ display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border-radius:var(--r-md); color:var(--inv-m); font-weight:700; font-size:.92rem; transition:background var(--t1),color var(--t1) }
.side__nav a:hover{ background:rgba(255,255,255,.06); color:#fff }
.side__nav a.is-active{ background:var(--coral-btn); color:#fff }
.side__nav a.is-active .ic{ opacity:1 }
.side__nav .ic{ width:1.1rem; height:1.1rem; display:inline-block; opacity:.8; flex:none }
.side__sec{ font-size:.68rem; letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--inv-s); padding:1rem .95rem .3rem }
.side__foot{ padding:1rem 1.1rem; border-top:1px solid var(--line-inv); font-size:.8rem; color:var(--inv-s) }

.main{ min-width:0; display:flex; flex-direction:column }
.topbar{ display:flex; align-items:center; gap:1rem; padding:1rem clamp(1rem,3vw,2rem); background:rgba(255,255,255,.9); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20 }
.topbar__title{ font-family:var(--display); font-weight:800; font-size:1.1rem }
.topbar__actions{ margin-left:auto; display:flex; align-items:center; gap:.6rem }
.content{ padding:clamp(1.25rem,3vw,2.4rem); max-width:78rem; width:100%; margin-inline:auto }

/* location selector */
.locsel{ position:relative }
.locsel__btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border:1px solid var(--line-2); border-radius:var(--r-pill); background:#fff; font-weight:700; font-size:.88rem }
.locsel__menu{ position:absolute; top:calc(100% + .4rem); left:0; min-width:16rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-3); padding:.35rem; display:none; z-index:30; max-height:60vh; overflow:auto }
.locsel.open .locsel__menu{ display:block }
.locsel__menu a{ display:block; padding:.55rem .7rem; border-radius:var(--r-sm); font-size:.9rem; color:var(--fg) }
.locsel__menu a:hover{ background:var(--grey) }

/* ---- dashboard (natural SaaS overview) ---- */
.dash-hero{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.25rem;
  padding:1.5rem 1.6rem; margin-bottom:1.25rem;
  background:linear-gradient(145deg,#1d1d1d 0%,#2a211c 55%,#3a2418 100%);
  color:#fff; border-radius:var(--r-xl); position:relative; overflow:hidden;
}
.dash-hero::after{
  content:""; position:absolute; width:18rem; height:18rem; border-radius:50%;
  background:rgba(224,81,43,.28); filter:blur(50px); right:-4rem; top:-6rem; pointer-events:none;
}
.dash-hero__copy{ position:relative; z-index:1; max-width:36rem }
.dash-hero__hello{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.72); margin-bottom:.45rem }
.dash-hero__title{ font-family:var(--display); font-weight:800; font-size:clamp(1.45rem,2.8vw,2rem); line-height:1.15; color:#fff; margin:0 }
.dash-hero__lede{ margin-top:.65rem; color:rgba(255,255,255,.86); font-size:.95rem; line-height:1.5 }
.dash-hero__lede b{ color:#fff }
.dash-hero__actions{ position:relative; z-index:1; display:flex; gap:.6rem; flex-wrap:wrap }
.dash-hero .btn--line{ color:#fff; border-color:rgba(255,255,255,.35) }
.dash-hero .btn--line:hover{ background:#fff; color:var(--dark) }

.dash-stats{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.75rem;
}
.dash-stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1rem 1.05rem;
  display:flex; flex-direction:column; gap:.25rem; min-width:0;
}
.dash-stat__n{ font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,2vw,1.75rem); line-height:1; color:var(--dark) }
.dash-stat__n.is-warn{ color:var(--coral-hi) }
.dash-stat__l{ font-size:.75rem; color:var(--fg-mute); font-weight:600 }
.dash-stat--plan .dash-stat__n{ letter-spacing:.02em }

.dash-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.15rem; align-items:start }
.dash-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.dash-panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.15rem; border-bottom:1px solid var(--line);
}
.dash-panel__head h3{ margin:0; font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--dark) }
.dash-list{ list-style:none; margin:0; padding:0 }
.dash-list li{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.15rem; border-bottom:1px solid var(--line);
}
.dash-list li:last-child{ border-bottom:0 }
.dash-list strong{ display:block; color:var(--dark); font-size:.95rem }
.dash-list span{ display:block; margin-top:.2rem; font-size:.8rem; color:var(--fg-mute) }
.dash-links{ display:flex; gap:.65rem; flex-wrap:wrap; font-size:.82rem; font-weight:700 }
.dash-links a{ color:var(--fg-mute) }
.dash-links a:hover{ color:var(--coral-hi) }
.dash-empty{ padding:1.5rem 1.15rem; color:var(--fg-mute); font-size:.92rem }
.dash-activity{ list-style:none; margin:0; padding:.25rem 0 }
.dash-activity li{
  display:flex; justify-content:space-between; gap:1rem; padding:.7rem 1.15rem;
  border-bottom:1px solid var(--line); font-size:.85rem; color:var(--fg);
}
.dash-activity li:last-child{ border-bottom:0 }
.dash-activity time{ color:var(--fg-soft); white-space:nowrap }

@media(max-width:1100px){
  .dash-stats{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media(max-width:800px){
  .dash-grid{ grid-template-columns:1fr }
  .dash-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .dash-hero{ padding:1.25rem }
}

.mini-meter{ width:7rem; height:.4rem; border-radius:var(--r-pill); background:var(--grey-2); overflow:hidden }
.mini-meter>span{ display:block; height:100%; background:linear-gradient(90deg,var(--coral),var(--coral-btn)) }

/* stat row */
.kpirow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:1rem }
.kpicard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:1.15rem 1.25rem; display:block; color:inherit; text-decoration:none }
.kpicard .n{ font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1 }
.kpicard .l{ font-size:.78rem; color:var(--fg-soft); margin-top:.35rem }
.kpicard .n.coral{ color:var(--coral-hi) }

/* empty / loading / error states */
.state{ text-align:center; padding:clamp(2rem,6vw,4rem) 1.5rem; background:#fff; border:1px dashed var(--line-2); border-radius:var(--r-lg) }
.state h3{ margin-bottom:.5rem }
.spinner{ width:1.4rem; height:1.4rem; border:3px solid var(--grey-2); border-top-color:var(--coral); border-radius:50%; animation:spin .8s linear infinite; display:inline-block }
@keyframes spin{ to{ transform:rotate(360deg) } }
.is-busy{ opacity:.6; pointer-events:none }

/* ---- WordPress-style admin ---- */
.adminwrap{ display:grid; grid-template-columns:14.5rem 1fr; min-height:100vh; background:#f4f4f2 }
.adminside{ background:#1d1d1d; color:#e9e9e9; position:sticky; top:0; height:100vh; overflow-y:auto }
.adminside__brand{ padding:1.1rem 1.2rem; font-family:var(--display); font-weight:800; letter-spacing:var(--tr-brand); color:#fff; border-bottom:1px solid rgba(255,255,255,.08) }
.adminside a{ display:block; padding:.7rem 1.2rem; color:#c9c9c9; font-size:.9rem; font-weight:600; border-left:3px solid transparent }
.adminside a:hover{ background:#2a2a2a; color:#fff }
.adminside a.is-active{ background:#111; color:#fff; border-left-color:var(--coral) }
.adminmain{ min-width:0 }
.admintop{ display:flex; align-items:center; gap:1rem; padding:.9rem 1.4rem; background:#fff; border-bottom:1px solid #e2e2e2; position:sticky; top:0; z-index:10 }
.admintop h1{ font-size:1.15rem; font-family:var(--display); font-weight:800 }
.admintop .right{ margin-left:auto; display:flex; align-items:center; gap:.75rem; font-size:.85rem; color:var(--fg-mute) }
.admincontent{ padding:1.4rem }

.panel{ background:#fff; border:1px solid #e2e2e2; border-radius:.5rem; box-shadow:0 1px 2px rgba(0,0,0,.04) }
.panel__head{ display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; border-bottom:1px solid #ececec }
.panel__head h2{ font-size:1rem; font-family:var(--display); font-weight:800 }
.panel__body{ padding:1.1rem }

.wp-table{ width:100%; border-collapse:collapse; font-size:.88rem }
.wp-table th{ text-align:left; padding:.7rem .9rem; background:#fbfbfb; border-bottom:1px solid #e6e6e6; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#6b6b6b; white-space:nowrap }
.wp-table td{ padding:.7rem .9rem; border-bottom:1px solid #efefef; vertical-align:middle }
.wp-table tr:hover td{ background:#fafafa }
.wp-actions{ display:flex; gap:.4rem; flex-wrap:wrap }
.wp-actions a, .wp-actions button{ font-size:.78rem; font-weight:700; padding:.35rem .7rem; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--fg); cursor:pointer }
.wp-actions .view{ }
.wp-actions .edit:hover{ background:var(--dark); color:#fff; border-color:var(--dark) }
.wp-actions .danger{ color:#9a2a12; border-color:#f0cfc7 }
.wp-actions .danger:hover{ background:#9a2a12; color:#fff }
.pill{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; padding:.22rem .6rem; border-radius:var(--r-pill); background:#eee; color:#555 }
.pill.ok{ background:#e7f3ec; color:#1e6b3a } .pill.warn{ background:#fbeedd; color:#8a5300 }
.pill.danger{ background:#fbe6e1; color:#9a2a12 } .pill.mut{ background:#eef; color:#4a4a7a }
.masked{ font-family:ui-monospace,Menlo,monospace; color:#999; letter-spacing:1px }

.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
.form-grid .full{ grid-column:1/-1 }
.form-grid label{ display:flex; flex-direction:column; gap:.35rem; font-size:.78rem; font-weight:700; color:var(--fg-mute) }
.form-grid input, .form-grid select, .form-grid textarea{ min-height:2.8rem; padding:.5rem .75rem; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; font:inherit }
.form-grid input:focus, .form-grid select:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(224,81,43,.14) }
.checkline{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.85rem }

.admin-login{ min-height:100vh; display:grid; place-items:center; background:#1d1d1d; padding:2rem }
.admin-login__card{ width:min(100%,24rem); background:#fff; border-radius:.7rem; padding:2rem; box-shadow:0 20px 60px rgba(0,0,0,.4) }

@media(max-width:900px){
  .shell{ grid-template-columns:1fr } .side{ position:fixed; z-index:60; width:16rem; transform:translateX(-100%); transition:transform var(--t2) var(--e) }
  .side.open{ transform:none }
  .adminwrap{ grid-template-columns:1fr } .adminside{ position:fixed; z-index:60; width:14.5rem; transform:translateX(-100%); transition:transform var(--t2) var(--e) }
  .adminside.open{ transform:none }
  .menu-toggle{ display:inline-grid !important }
  .form-grid{ grid-template-columns:1fr }
}
.menu-toggle{ display:none; width:2.6rem; height:2.6rem; place-items:center; border-radius:var(--r-pill); background:#202020; border:0; cursor:pointer; flex-shrink:0 }
.menu-toggle span{ display:block; width:18px; height:2px; background:#fff; position:relative; border-radius:1px }
.menu-toggle span::before, .menu-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; border-radius:1px }
.menu-toggle span::before{ top:-6px } .menu-toggle span::after{ top:6px }
.menu-toggle:hover{ background:#000 }

/* ---- header squeeze: coral 1px border when stuck (per brand request) ---- */
/* Header stuck coral border is defined in dw.css (.hdr.is-stuck .hdr__bar) */

/* ---- Google auth button + divider ---- */
.or-divider{ display:flex; align-items:center; gap:.75rem; margin:1.1rem 0; color:var(--fg-soft); font-size:.78rem }
.or-divider::before,.or-divider::after{ content:""; flex:1; height:1px; background:var(--line) }
.gbtn{ gap:.6rem }
.gmark{ display:inline-grid; place-items:center; width:1.4rem; height:1.4rem; border-radius:50%;
  background:conic-gradient(from -45deg,#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0 100%);
  color:#fff; font-family:var(--display); font-weight:800; font-size:.85rem; line-height:1 }

/* ---- premium tuning ---- */
.kpicard{ transition:transform var(--t2) var(--e), box-shadow var(--t2) }
.kpicard:hover{ transform:translateY(-3px); box-shadow:var(--sh-2) }
.side__nav a{ position:relative }
.content{ animation:fadeUp .5s var(--e) both }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ---- ensure legible contrast: dark text on light, white on dark ---- */
.bg-white, .bg-grey, .content, .panel__body, .card{ color:var(--fg) }
.side, .bg-dark, .adminside{ color:var(--inv) }

/* ---- responsive: fluid type + safe wrapping on every size ---- */
@media(max-width:640px){
  .content{ padding:1rem }
  .kpirow{ grid-template-columns:repeat(2,1fr) }
  .table-wrap{ font-size:.82rem }
  .topbar__title{ font-size:1rem }
  .locsel__menu{ left:auto; right:0 }
}
@media(max-width:420px){
  .kpirow{ grid-template-columns:1fr 1fr }
  .tabs{ width:100% }
}

/* real logo mark image overrides the placeholder gradient square */
img.brand__mark{ background:none !important; display:inline-block; border-radius:.42rem }

/* ---- Tool guide drawer ---- */
.tool-head{ padding:1.1rem 1.25rem; border:1px solid var(--line); border-radius:var(--r); background:var(--surface, #fff) }
.guide-drawer{ position:fixed; inset:0; z-index:80 }
.guide-drawer[hidden]{ display:none !important }
.guide-drawer__backdrop{ position:absolute; inset:0; background:rgba(10,12,16,.45) }
.guide-drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(26rem,100%);
  background:var(--surface,#fff); border-left:1px solid var(--line);
  box-shadow:-12px 0 40px rgba(0,0,0,.12);
  display:flex; flex-direction:column; animation:guideIn .22s ease
}
@keyframes guideIn{ from{ transform:translateX(12px); opacity:.6 } to{ transform:none; opacity:1 } }
.guide-drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1rem 1.1rem; border-bottom:1px solid var(--line)
}
.guide-drawer__body{ padding:1.1rem; overflow:auto; flex:1 }
body.guide-open{ overflow:hidden }

/* ---- inline keyword editor (Keyword Analyzer) ---- */
.kw-form{ display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)) }
.kw-form label{ display:flex; flex-direction:column; gap:.35rem; min-width:0 }
.kw-form label > span{
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-soft);
}
.kw-form input[type=text]{
  width:100%; min-height:2.5rem; padding:.5rem .75rem; font:inherit; font-size:.9rem;
  color:var(--fg); background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.kw-form input[type=text]:focus{
  outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(224,81,43,.13);
}
.kw-form__actions{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
}

/* ---- billing: keep the Wise reference box aligned with its button ---- */
.pay-wise input[type=text]{
  width:100%; min-height:2.5rem; margin:.4rem 0 .6rem; padding:.5rem .75rem; font:inherit; font-size:.9rem;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; color:var(--fg);
}
.pay-wise input[type=text]:focus{
  outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(224,81,43,.13);
}