/* DKB SEO Dashboard — demo replica. Palette lifted from the app's globals.css */
:root{
  --navy:#1e3060; --blue-1:#24457c; --blue-2:#27599a; --blue-3:#2e6eb7;
  --blue-4:#358ccb; --blue-5:#3caae1;
  --red:#ca2036; --red-dark:#811424;
  --ink:#282829; --gray:#6b6b6a; --gray-2:#969697; --wash:#f1f2f2;
  --bg:#ffffff; --card:#ffffff; --border:#e6e8eb; --radius:0.625rem;
  --green:#15803d; --green-bg:#dcfce7; --green-br:#bbf7d0;
  --red-fg:#991b1b; --red-bg:#fee2e2; --red-br:#fecaca;
  --amber:#a16207; --amber-bg:#fef3c7;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--wash); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- shell */
.app{display:flex;min-height:100vh}
.sidebar{
  width:256px;flex:0 0 256px;background:var(--navy);color:var(--wash);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sb-head{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.12)}
.sb-head img{height:26px;width:auto;filter:brightness(0) invert(1)}
.sb-head span{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;opacity:.6}
.sb-group{padding:.75rem .5rem}
.sb-label{font-size:11px;color:rgba(241,242,242,.55);padding:.25rem .75rem .4rem;font-weight:500}
.sb-item{display:flex;align-items:center;gap:.6rem;padding:.42rem .75rem;margin:1px .25rem;
  border-radius:6px;color:var(--wash);text-decoration:none;font-size:13.5px;font-weight:450}
.sb-item:hover{background:var(--blue-1)}
.sb-item.on{background:var(--blue-1);font-weight:600}
.sb-item.on .ic{color:var(--blue-5)}
.ic{width:16px;height:16px;flex:0 0 16px;opacity:.9}
.sb-sub{margin:1px .25rem 1px 1.55rem;padding-left:.6rem;border-left:1px solid rgba(255,255,255,.14)}
.sb-sub a{display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem;border-radius:5px;
  color:rgba(241,242,242,.72);text-decoration:none;font-size:12.5px}
.sb-sub a:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-foot{margin-top:auto;padding:.85rem 1rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;color:rgba(241,242,242,.6)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.25rem;background:var(--bg);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20}
.crumb{font-size:13px;color:var(--gray);font-weight:500}
.demo-flag{display:inline-flex;align-items:center;gap:.4rem;font-size:11.5px;font-weight:600;
  background:var(--amber-bg);color:var(--amber);padding:.24rem .55rem;border-radius:5px;
  border:1px solid #fde68a}
.content{padding:1.1rem 1.25rem 3rem;display:flex;flex-direction:column;gap:.85rem}

/* ---------------------------------------------------------------- bits */
.pg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
h1{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.sub{margin-top:2px;font-size:12px;color:var(--gray)}
.chip{display:inline-flex;align-items:center;gap:.45rem;height:32px;padding:0 .7rem;
  border:1px solid var(--border);background:var(--card);border-radius:6px;font-size:12px;font-weight:500}
.btn{display:inline-flex;align-items:center;gap:.4rem;height:32px;padding:0 .75rem;border-radius:6px;
  background:var(--blue-1);color:#fff;font-size:12.5px;font-weight:500;border:none;cursor:pointer}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--border)}

.grid{display:grid;gap:.7rem}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.split{grid-template-columns:2fr 1fr}
@media (max-width:1200px){.g5,.g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-h{padding:.75rem .9rem .1rem}
.card-t{font-size:13px;font-weight:600;color:var(--ink)}
.card-d{font-size:11.5px;color:var(--gray);margin-top:1px}
.card-b{padding:.75rem .9rem .9rem}

.kpi{padding:.8rem .9rem;display:block;text-decoration:none;color:inherit;position:relative}
.kpi:hover{border-color:var(--blue-4)}
.kpi .k-t{font-size:11.5px;color:var(--gray);font-weight:500}
.kpi .k-v{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:.25rem;color:var(--navy)}
.kpi .k-s{font-size:11px;color:var(--gray-2);margin-top:.2rem}
.badge{display:inline-flex;align-items:center;gap:.2rem;font-size:11px;font-weight:600;
  padding:.1rem .35rem;border-radius:4px;border:1px solid}
.b-up{background:var(--green-bg);color:var(--green);border-color:var(--green-br)}
.b-dn{background:var(--red-bg);color:var(--red-fg);border-color:var(--red-br)}
.b-nu{background:var(--wash);color:var(--gray);border-color:var(--border)}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:11px;font-weight:600;color:var(--gray);text-transform:uppercase;
  letter-spacing:.05em;padding:.5rem .6rem;border-bottom:1px solid var(--border)}
td{padding:.55rem .6rem;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbfc}
.t-scroll{overflow-x:auto}

.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:11px;font-weight:600;
  padding:.15rem .45rem;border-radius:999px}
.p-ok{background:var(--green-bg);color:var(--green)}
.p-warn{background:var(--amber-bg);color:var(--amber)}
.p-bad{background:var(--red-bg);color:var(--red-fg)}
.p-neut{background:var(--wash);color:var(--gray)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.hp{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0;
  border-bottom:1px solid var(--border);font-size:12.5px}
.hp:last-child{border-bottom:none}
.bar-wrap{height:6px;background:var(--wash);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;background:var(--blue-3);border-radius:3px}
.legend{display:flex;gap:1rem;font-size:11.5px;color:var(--gray);margin-top:.5rem}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.3rem}
.muted{color:var(--gray)}
.small{font-size:11.5px}
.right{text-align:right}
.note{font-size:11.5px;color:var(--gray);background:var(--wash);border:1px solid var(--border);
  border-radius:6px;padding:.5rem .65rem}

/* cards should not stretch to match a taller sibling column */
.grid{align-items:start}

/* ------------------------------------------- collapsible sidebar sections */
.sb-row{position:relative;display:flex;align-items:center}
.sb-row .sb-item{flex:1;padding-right:1.9rem}
.sb-caret{
  position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--wash);opacity:.55;cursor:pointer;
  padding:.18rem;display:flex;align-items:center;border-radius:4px;
}
.sb-caret:hover{opacity:1;background:rgba(255,255,255,.12)}
.sb-caret:focus-visible{outline:2px solid var(--blue-5);outline-offset:1px;opacity:1}
.sb-caret svg{width:14px;height:14px;transition:transform .18s ease}
.sb-section.open .sb-caret svg{transform:rotate(90deg)}
.sb-section .sb-sub{display:none}
.sb-section.open .sb-sub{display:block}
.sb-sub a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.sb-sub a.on .ic{color:var(--blue-5);opacity:1}
@media (prefers-reduced-motion:reduce){.sb-caret svg{transition:none}}