/* ===========================================================================
   nv-functional.css — THE canonical, editable design layer (new Django stack).

   Design standard (carried over from the Laravel app): edit styling in ONE
   canonical layer, never inline. Here that layer is THIS file.

   Layering, loaded in base.html in this order:
     1. novatheme.css + novatheme-bundle.css + app.css  → FROZEN "compat"
        baseline, compiled from the Laravel build (Bootstrap + Material + the
        pe-*/nv-* component theme). Do NOT hand-edit these minified blobs.
     2. nv-functional.css (this file)                   → canonical functional
        layer for the new stack: design tokens + any new/override styling.

   Navy + light. App and admin share the tokens; admin stays visually distinct
   via its own templates (not by forking these tokens).
   =========================================================================== */

:root {
  /* Brand — aligned to the compiled theme (--md-sys-color-primary / secondary). */
  --nv-navy: #0A1628;
  --pe-navy: #0A1628;
  --nv-gold: #B0892A;

  /* Status palette — the fallbacks our templates already reference, made
     canonical here so they are themeable from one place. */
  --nv-color-success: #16a34a;
  --nv-color-warning: #f59e0b;
  --nv-color-danger:  #ef4444;
  --nv-color-muted:   #94a3b8;
}

/* Navy CTA — keep consistent regardless of compat-layer drift. */
.nv-btn-navy { background: var(--nv-navy); color: #fff; border: 1px solid var(--nv-navy); }
.nv-btn-navy:hover,
.nv-btn-navy:focus { background: #0d1e36; color: #fff; border-color: #0d1e36; }
.nv-btn-navy:disabled { opacity: .55; }

/* Project-switcher button in the top bar (new in the Django stack). */
.pe-top-bar .btn.border { border-color: var(--bs-border-color, #e4e4e7) !important; }
.pe-top-bar .btn.border:hover { background: var(--md-sys-color-surface-container, #f4f4f5); }

/* Account / Workspace left sub-nav active item → navy pill (matches the rail). */
.nv-page .dropdown-item.active {
  background: var(--nv-navy); color: #fff;
}
.nv-page .dropdown-item.active .material-symbols-outlined { color: #fff; }

/* Server-rendered SVG charts (dashboard) sit flush inside the card. */
.nv-page svg[role="img"] { display: block; }

/* Help-center is a TEXT action in the top bar — it must NOT inherit the square,
   fixed-width footprint of pe-top-bar__icon-btn (which squeezes the label onto
   two lines). Keep it on one line, auto width, sensible padding. */
.pe-top-bar__help {
  width: auto;
  white-space: nowrap;
  padding-inline: .6rem;
  font-size: 13px;
}
.pe-top-bar__help:hover { color: var(--nv-navy) !important; }

/* Apex line chart (Organic Clicks) fills its card like the Laravel build. */
.nv-page .nv-chart-canvas--md { min-height: 230px; }

/* ── Dashboard hero tile row ──────────────────────────────────────────────
   The 4-tile row's container reuses the `nv-home-hero` class, which COLLIDES
   with the MARKETING section style in app.css (`.nv-home-hero{padding:120px 0;
   …}` + radial-gradient ::before + border-bottom — unscoped, so it leaks into
   the app shell and adds a huge top/bottom empty gap). Re-scope it inside the
   app to a plain Bootstrap grid row; the tiles (.nv-home-hero-tile) keep their
   own styling. Higher specificity ([data-area=app] .nv-home-hero) wins over the
   bare marketing selector. */
[data-area="app"] .nv-home-hero,
[data-area="app"] .nv-home-modules,
[data-area="app"] .nv-home-meth,
[data-area="app"] .nv-home-stand,
[data-area="app"] .nv-home-proof,
[data-area="app"] .nv-home-cta {
  padding: 0;
  background: none;
  border-bottom: 0;
  overflow: visible;
}
[data-area="app"] .nv-home-hero::before,
[data-area="app"] .nv-home-modules::before,
[data-area="app"] .nv-home-meth::before,
[data-area="app"] .nv-home-stand::before,
[data-area="app"] .nv-home-proof::before,
[data-area="app"] .nv-home-cta::before { content: none; }

/* ───────── Admin sidebar — collapsible nav groups (accordion) ─────────
   Keeps the rail short: only the group you're in is expanded, so related
   menu items are always nearby — no scrolling up/down to hunt for them. */
.pe-app-sidebar .pe-nav-group { width: 100%; }
.pe-app-sidebar .pe-menu-toggle {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; cursor: pointer; border-radius: 8px;
  font-family: inherit; transition: background .12s ease;
}
.pe-app-sidebar .pe-menu-toggle:hover { background: rgba(15, 23, 42, .05); }
.pe-app-sidebar .pe-menu-title__label { flex: 1 1 auto; text-align: left; }
.pe-app-sidebar .pe-menu-chevron {
  font-size: 18px; line-height: 1; flex: 0 0 auto;
  color: var(--nv-color-muted, #94a3b8); transition: transform .18s ease;
}
.pe-app-sidebar .pe-nav-group.is-open > .pe-menu-toggle .pe-menu-chevron { transform: rotate(180deg); }
.pe-app-sidebar .pe-menu-sub { margin: 0; padding: 0; display: none; }
.pe-app-sidebar .pe-nav-group.is-open > .pe-menu-sub { display: block; }

/* ───────── Customer · Projects board — the row classes (.nv-proj-row*, .nv-proj-kpi,
   .nv-row-menu, .nv-plan-chip, .nv-drag-handle) are already styled by the compiled
   novatheme/app.css; only the drag-state needs adding for the new stack. ───────── */
.nv-proj-row[draggable="true"] { cursor: grab; }
.nv-proj-row.nv-dragging { opacity: .5; }
.nv-proj-row[data-href] { cursor: pointer; }
.nv-proj-row__head-actions { cursor: default; }

/* ── Crawl Explorer: per-page links + drawer detail body (Django-next port) ── */
.nv-kw__per-group{display:inline-flex;gap:2px;margin:0 .4rem}
.nv-kw__per-link{display:inline-block;padding:1px 7px;border-radius:6px;font-size:12px;color:var(--md-sys-color-on-surface-variant);text-decoration:none}
.nv-kw__per-link:hover{background:var(--md-sys-color-surface-container)}
.nv-kw__per-link.is-active{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font-weight:600}
.nv-cd-serp{padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:14px;background:var(--md-sys-color-surface-container-lowest)}
.nv-cd-serp__title{color:#1a0dab;font-size:16px;line-height:1.3;margin-bottom:2px}
.nv-cd-serp__url{color:#0b6e0b;font-size:12px;word-break:break-all;margin-bottom:4px}
.nv-cd-serp__desc{color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}
.nv-cd-list{display:grid;gap:0;margin:0 0 12px}
.nv-cd-row{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--nv-divider);font-size:13px}
.nv-cd-row dt{color:var(--md-sys-color-on-surface-variant);font-weight:500}
.nv-cd-row dd{margin:0;word-break:break-word}
.nv-cd-h{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--md-sys-color-on-surface-variant);margin:14px 0 6px}
.nv-cd-issues{list-style:none;padding:0;margin:0;display:grid;gap:5px;font-size:13px}
.nv-cd-issues li{padding:6px 8px;background:var(--md-sys-color-surface-container);border-radius:6px;word-break:break-word}
/* Crawl Explorer overview chart strip */
.nv-crawl-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.nv-crawl-chart-card{border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;padding:10px 12px;background:var(--md-sys-color-surface-container-lowest)}
.nv-crawl-chart-card__h{font-size:12px;font-weight:600;color:var(--md-sys-color-on-surface-variant);margin:0 0 4px}
.nv-chart-canvas--sm{min-height:190px}
/* Keywords sparkline (inline SVG position trend) */
.nv-kw__spark{display:inline-block;vertical-align:middle}

/* ===== Admin rail shell — level-1 group rail + level-2 sub-sidebar (mirrors the app shell) =====
   The admin <body> carries .nv-admin; we override the legacy "header on top, sidebar below"
   layout with a 64px group rail on the far left + the active group's pages in the sub-sidebar
   + an offset top bar, exactly like the customer app. */
body.nv-admin{--pe-app-rail-width:64px;--pe-app-sidebar-width:236px;--pe-app-shell-offset:300px}
@media (min-width:1024px){
  body.nv-admin .app-header{left:var(--pe-app-shell-offset,300px)!important;width:auto!important;right:0!important}
  body.nv-admin .pe-app-rail{position:fixed!important;top:0!important;left:0!important;right:auto!important;
    width:var(--pe-app-rail-width,64px)!important;height:100vh!important;z-index:1041;
    display:flex;flex-direction:column;align-items:stretch;overflow-y:auto;overflow-x:hidden}
  body.nv-admin .pe-app-sidebar{position:fixed!important;top:0!important;left:var(--pe-app-rail-width,64px)!important;
    width:var(--pe-app-sidebar-width,236px)!important;height:100vh!important;overflow-y:auto;z-index:1031;padding-top:.5rem}
  body.nv-admin .app-wrapper{margin-left:var(--pe-app-shell-offset,300px)!important}
}
/* Mobile: keep just the 56px group rail; the sub-sidebar collapses (each rail icon lands
   on its group's first page; in-page tab bars cover deeper nav). */
@media (max-width:1023.98px){
  body.nv-admin .pe-app-rail{position:fixed!important;top:0!important;left:0!important;bottom:0!important;
    width:56px!important;height:100vh!important;z-index:1041;display:flex;flex-direction:column;overflow-y:auto}
  body.nv-admin .pe-app-sidebar{display:none!important}
  body.nv-admin .app-header{left:56px!important;width:auto!important;right:0!important}
  body.nv-admin .app-wrapper{margin-left:56px!important}
}

/* ════════════════════════════════════════════════════════════════════════
   Customer app (body.nv-app) — premium, compact level-2 pillar sidebar.
   Narrower column → more room for content + its in-page contextual nav;
   refined navy/gold styling (subtle active pill + gold accent). 2026-06-27.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  body.nv-app{ --pe-app-sidebar-width:212px; }
  body.nv-app .pe-app-sidebar{ width:var(--pe-app-sidebar-width,212px); }
}
body.nv-app .pe-app-sidebar-pillar{ font-size:.95rem; letter-spacing:-.01em; padding:.3rem .9rem .45rem; }
body.nv-app .nv-sb-group{
  font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:#98a2b3; padding:.85rem .9rem .28rem; margin:0;
}
body.nv-app .nv-sb-group:first-of-type{ padding-top:.3rem; }
body.nv-app .pe-app-sidebar .nav-link{
  position:relative; display:flex; align-items:center; gap:.6rem;
  margin:1px .5rem; padding:.44rem .6rem; border-radius:8px;
  font-size:.855rem; font-weight:500; color:#344054; line-height:1.2;
  transition:background .14s ease,color .14s ease;
}
body.nv-app .pe-app-sidebar .nav-link .material-symbols-outlined{
  font-size:19px; color:#98a2b3; transition:color .14s ease;
}
body.nv-app .pe-app-sidebar .nav-link:hover{ background:rgba(10,22,40,.04); color:#0A1628; }
body.nv-app .pe-app-sidebar .nav-link:hover .material-symbols-outlined{ color:#475467; }
body.nv-app .pe-app-sidebar .nav-link.active{ background:rgba(10,22,40,.055); color:#0A1628; font-weight:600; }
body.nv-app .pe-app-sidebar .nav-link.active .material-symbols-outlined{ color:#0A1628; }
body.nv-app .pe-app-sidebar .nav-link.active::before{
  content:""; position:absolute; left:-.5rem; top:50%; transform:translateY(-50%);
  width:3px; height:1.15rem; border-radius:0 3px 3px 0; background:#d4a23c;
}
body.nv-app .pe-app-sidebar .nav-link .badge{ font-size:8.5px; padding:.12em .4em; }

/* ══════════════════════════════════════════════════════════════════════════
   Crawl Explorer — full-width layout (summary KPI strip, charts as full-width
   rows not a cramped grid, full-width URL table) + a richer URL-detail drawer
   (Hiện trạng / Chẩn đoán / Cách sửa + on-the-spot AI). Canonical layer; wins
   over the legacy novatheme/app.css crawl rules (loaded last).
   ══════════════════════════════════════════════════════════════════════════ */

/* The main column already fills the layout; drop the squeezing right aside. */
.nv-crawl-tablewrap{ width:100%; min-width:0; }
.nv-crawl-tablewrap .table,
.nv-crawl-tablewrap table{ width:100%; }

/* Summary KPI strip — one full-width row of headline counts. */
.nv-crawl-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin:4px 0 14px;
}
.nv-crawl-kpi{
  display:flex; flex-direction:column; gap:2px; padding:.6rem .8rem;
  border:1px solid var(--md-sys-color-outline-variant,#e4e7ec); border-radius:10px;
  background:var(--md-sys-color-surface-container-lowest,#fff);
}
.nv-crawl-kpi__n{ font-size:1.35rem; font-weight:700; color:#0A1628; line-height:1.1; }
.nv-crawl-kpi__l{ font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:#667085; }
.nv-crawl-kpi.is-warn .nv-crawl-kpi__n{ color:#b54708; }

/* Overview charts — collapsible, full-width stacked ROWS (not columns). */
.nv-crawl-chartwrap{ margin:0 0 16px; border:1px solid var(--md-sys-color-outline-variant,#e4e7ec); border-radius:12px; background:var(--md-sys-color-surface-container-lowest,#fff); }
.nv-crawl-chartwrap__summary{
  display:flex; align-items:center; gap:.5rem; cursor:pointer; list-style:none;
  padding:.65rem .9rem; font-weight:600; color:#0A1628; font-size:.9rem;
}
.nv-crawl-chartwrap__summary::-webkit-details-marker{ display:none; }
.nv-crawl-chartwrap__summary .material-symbols-outlined{ font-size:20px; color:#475467; }
.nv-crawl-chartwrap__hint{ margin-left:auto; font-size:.72rem; font-weight:500; color:#98a2b3; }
.nv-crawl-charts--rows{
  display:grid; grid-template-columns:1fr; gap:12px; padding:0 .9rem .9rem;
}
.nv-crawl-charts--rows .nv-crawl-chart-card{ width:100%; }
.nv-chart-canvas--row{ width:100%; min-height:200px; }

/* ── URL-detail drawer (slides over the table) ── */
.nv-crawl-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1060;
  width:min(640px,96vw); display:flex; flex-direction:column;
  background:var(--md-sys-color-surface,#fff);
  box-shadow:-8px 0 30px rgba(16,24,40,.18);
  transform:translateX(100%); visibility:hidden; pointer-events:none;
  transition:transform .18s ease, visibility .18s ease;
}
.nv-crawl-drawer.is-open{ transform:none; visibility:visible; pointer-events:auto; }
.nv-crawl-drawer__head{
  display:flex; align-items:center; gap:.5rem; padding:.8rem 1rem;
  border-bottom:1px solid var(--md-sys-color-outline-variant,#e4e7ec);
}
.nv-crawl-drawer__title{ font-weight:600; font-size:.85rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#0A1628; }
.nv-crawl-drawer__close{ background:transparent; border:0; font-size:1.4rem; line-height:1; color:#667085; cursor:pointer; padding:0 .3rem; }
.nv-crawl-drawer__close:hover{ color:#0A1628; }
.nv-crawl-drawer__body{ flex:1; overflow-y:auto; padding:1rem 1.1rem 2rem; font-size:.82rem; }
.nv-crawl-drawer-scrim{ position:fixed; inset:0; z-index:1055; background:rgba(16,24,40,.28); }

.nv-ud-actions{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.85rem; }
.nv-ud-h{
  display:flex; align-items:center; gap:.4rem; margin:1.1rem 0 .55rem;
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#475467;
}
.nv-ud-h:first-of-type{ margin-top:.2rem; }
.nv-ud-h .material-symbols-outlined{ font-size:18px; color:#98a2b3; }

/* SERP preview (current state) */
.nv-ud-serp{ padding:10px 12px; border:1px solid var(--md-sys-color-outline-variant,#e4e7ec); border-radius:8px; margin-bottom:12px; background:var(--md-sys-color-surface-container-lowest,#fff); }
.nv-ud-serp__title{ color:#1a0dab; font-size:15px; line-height:1.3; }
.nv-ud-serp__url{ color:#0b6e0b; font-size:12px; word-break:break-all; margin:2px 0 4px; }
.nv-ud-serp__desc{ color:#475467; font-size:13px; line-height:1.45; }

/* Fact grid — minmax(0,1fr) + min-width:0 stop the value cell collapsing into a
   single-character vertical column (the old drawer bug). */
.nv-ud-facts{ display:grid; grid-template-columns:1fr; gap:0; margin:0 0 4px; }
.nv-ud-fact{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:10px; padding:6px 0; border-bottom:1px solid var(--nv-divider,#f0f1f3); font-size:13px; align-items:start; }
.nv-ud-fact dt{ min-width:0; color:#667085; font-weight:500; }
.nv-ud-fact dd{ min-width:0; margin:0; overflow-wrap:anywhere; word-break:normal; color:#1d2939; }

/* Diagnosis + fix cards */
.nv-ud-clean{ display:flex; align-items:center; gap:.5rem; padding:.7rem .85rem; border-radius:8px; background:#ecfdf3; color:#067647; font-size:13px; }
.nv-ud-clean .material-symbols-outlined{ font-size:20px; }
.nv-ud-issues{ display:grid; gap:10px; }
.nv-ud-issue{ border:1px solid var(--md-sys-color-outline-variant,#e4e7ec); border-left-width:3px; border-radius:8px; padding:.7rem .85rem; background:var(--md-sys-color-surface-container-lowest,#fff); }
.nv-ud-issue--err{ border-left-color:#d92d20; }
.nv-ud-issue--warn{ border-left-color:#dc6803; }
.nv-ud-issue--info{ border-left-color:#0A1628; }
.nv-ud-issue__head{ display:flex; align-items:center; gap:.5rem; }
.nv-ud-issue__title{ font-weight:600; color:#101828; font-size:13.5px; }
.nv-ud-issue__msg{ margin-top:.35rem; font-size:12.5px; color:#475467; }
.nv-ud-sev{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.12em .5em; border-radius:999px; }
.nv-ud-sev--err{ background:#fee4e2; color:#b42318; }
.nv-ud-sev--warn{ background:#fef0c7; color:#b54708; }
.nv-ud-sev--info{ background:#eef2f6; color:#344054; }
.nv-ud-why{ margin-top:.45rem; font-size:12.5px; color:#475467; line-height:1.5; }
.nv-ud-steplabel{ margin-top:.5rem; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#98a2b3; }
.nv-ud-steps{ margin:.3rem 0 0; padding-left:1.1rem; display:grid; gap:.2rem; font-size:12.5px; color:#344054; }
.nv-ud-dups{ list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:12.5px; }
.nv-ud-dups li{ padding:6px 8px; background:var(--md-sys-color-surface-container,#f4f5f7); border-radius:6px; word-break:break-all; }

/* On-the-spot AI */
.nv-ud-ai{ margin-top:.55rem; }
.nv-ud-aibtn{
  display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .7rem;
  border:1px solid #d4a23c; border-radius:999px; background:#fffaf0; color:#92660d;
  font-size:12px; font-weight:600; cursor:pointer; transition:background .14s ease;
}
.nv-ud-aibtn:hover{ background:#fdf3dd; }
.nv-ud-aibtn:disabled{ opacity:.6; cursor:default; }
.nv-ud-aibtn .material-symbols-outlined,
.nv-ud-ai-off .material-symbols-outlined,
.nv-ud-ai-loading .material-symbols-outlined{ font-size:16px; }
.nv-ud-ai-off{ display:inline-flex; align-items:center; gap:.35rem; font-size:11.5px; color:#98a2b3; }
.nv-ud-ai-loading{ display:inline-flex; align-items:center; gap:.4rem; font-size:12px; color:#92660d; }
.nv-ud-aibox{ margin-top:.5rem; border:1px solid #f0d8a4; border-radius:8px; background:#fffaf0; padding:.6rem .75rem; }
.nv-ud-aibox__head{ display:flex; align-items:center; gap:.35rem; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#92660d; margin-bottom:.35rem; }
.nv-ud-aibox__head .material-symbols-outlined{ font-size:15px; }
.nv-ud-aibox .nv-ud-steps{ color:#5b430b; }
.nv-spin{ animation:nv-spin 1s linear infinite; }
@keyframes nv-spin{ to{ transform:rotate(360deg); } }

/* Crawler-trap recommendation banner (Crawl Explorer, internal tab). */
.nv-crawl-trap{ display:flex; gap:.75rem; align-items:flex-start; margin:0 0 16px; padding:.85rem 1rem;
  border:1px solid #fde3c4; border-left:3px solid #dc6803; border-radius:10px; background:#fffaf3; }
.nv-crawl-trap__icon{ font-size:24px; color:#dc6803; flex:none; }
.nv-crawl-trap__title{ font-size:.92rem; font-weight:600; color:#0A1628; }
.nv-crawl-trap__text{ font-size:.82rem; color:#475467; margin:.25rem 0 .4rem; line-height:1.5; }
.nv-crawl-trap__list{ margin:0 0 .4rem; padding-left:1.1rem; font-size:.8rem; color:#344054; display:grid; gap:.2rem; }
.nv-crawl-trap__list code,.nv-crawl-trap__sample code{ background:#fff; border:1px solid #f0d8a4; border-radius:4px; padding:.05em .35em; font-size:.92em; }
.nv-crawl-trap__sample{ font-size:.78rem; word-break:break-all; }

/* Project row-menu: destructive "Delete project" item. */
.nv-row-menu__item--danger{ width:100%; background:none; border:0; text-align:left; cursor:pointer; color:#b42318; }
.nv-row-menu__item--danger:hover{ background:#fef3f2; color:#b42318; }
.nv-row-menu__item--danger .material-symbols-outlined{ color:#d92d20; }

/* ════════════════════════════════════════════════════════════════════════
   Golden Standard Spacing, Height Alignment & Layout (App & Admin Parity)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --nv-layout-padding: 1.5rem;   /* ~24px: Unified outer page spacing (top, bottom, left, right) */
  --nv-block-gap: 2.25rem;       /* ~36px: Spacing between content sections/cards (Golden Ratio scaled) */
  --pe-app-header-height: 70px;
}

/* Unified outer page padding */
.app-wrapper > .container-fluid {
  padding: var(--nv-layout-padding, 1.5rem) !important;
}

/* Consolidated block-to-block vertical gaps */
.nv-page__content,
.nv-page > div.d-flex.flex-column,
.nv-page > .d-flex.flex-column,
.md-widget-grid {
  gap: var(--nv-block-gap, 2.25rem) !important;
}

/* Override Tailwind vertical spacing utility */
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--nv-block-gap, 2.25rem) !important;
}

/* Top bar height unification */
.pe-top-bar {
  height: var(--pe-app-header-height, 70px) !important;
}
.pe-top-bar__inner {
  flex: 0 0 var(--pe-app-header-height, 70px) !important;
}

/* App Rail Container adjustments */
.pe-app-rail {
  padding: 0 0 .75rem 0 !important;
}

/* App Rail Logo height unification */
.pe-app-rail__logo {
  height: var(--pe-app-header-height, 70px) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* App Rail Icon List margin */
.pe-app-rail__list {
  margin-top: .5rem !important;
}

/* ── Compact tool header: project switcher chip on the LEFT + action group right ── */
.nv-page-header--compact{ margin-bottom:.6rem; }
.nv-page-header--compact .nv-page-header__row{ align-items:center; gap:.75rem; }
.nv-th-left{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .7rem; min-width:0; }
.nv-th-left .nv-page-header__title{ margin:0; }
.nv-th-sub{ font-size:.8rem; color:#667085; white-space:nowrap; }
/* Project switcher chip — the project name IS the switcher (click → modal). */
.nv-proj-switch{
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem;
  border:1px solid var(--md-sys-color-outline-variant,#e4e7ec); border-radius:999px;
  background:var(--md-sys-color-surface-container-lowest,#fff); color:#0A1628;
  font-size:.85rem; font-weight:600; cursor:pointer; line-height:1.2;
  transition:background .14s ease, border-color .14s ease; max-width:340px;
}
.nv-proj-switch:hover{ background:rgba(10,22,40,.04); border-color:#cdd3db; }
.nv-proj-switch__ic{ font-size:17px; color:#98a2b3; flex:none; }
.nv-proj-switch__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nv-proj-switch__caret{ font-size:16px; color:#98a2b3; flex:none; }
.nv-th-actions{ display:flex; align-items:center; gap:.5rem; flex:none; }

/* ── Counts: per sub-nav item + per issue chip ── */
.nv-crawl-subnav__item{ display:flex; align-items:center; }
.nv-crawl-subnav__count{
  margin-left:auto; font-size:.72rem; font-weight:600; color:#667085;
  background:rgba(10,22,40,.05); border-radius:999px; padding:.05em .5em; min-width:1.5em; text-align:center;
}
.nv-crawl-subnav__item.is-active .nv-crawl-subnav__count{ background:rgba(10,22,40,.1); color:#0A1628; }
.nv-issue-chip__n{
  font-weight:700; font-size:.92em; opacity:.85; margin-left:.15em;
  padding-left:.4em; border-left:1px solid currentColor;
}

/* ── URL 360° modal (Crawl Explorer row → big dialog) + fragment head ───────── */
.nv-url360-modal{ border:none; box-shadow:0 24px 60px rgba(15,23,42,.28); }
.nv-url360-modal .modal-header{ background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.nv-url360-modal-body{ background:#f1f5f9; padding:1rem 1.1rem 1.25rem; }
.nv-url360-loading{ min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
/* Compact URL + actions strip that leads the inspector inside the modal. */
.nv-url360-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-bottom:.85rem; }
.nv-url360-head__url{ flex:1 1 320px; min-width:0; display:flex; align-items:center; gap:.4rem;
  font-size:13px; font-weight:600; color:#0f172a; }
.nv-url360-head__ic{ font-size:18px; color:#475569; flex:0 0 auto; }
.nv-url360-head__actions{ display:flex; gap:.4rem; flex:0 0 auto; }

/* ── Crawl Explorer Left Sub-nav full-height stretch ── */
[data-area="app"] .nv-crawl-explorer-layout {
  align-items: stretch !important;
}
[data-area="app"] .nv-crawl-subnav {
  height: 100% !important;
  max-height: none !important;
  position: relative !important;
  top: 0 !important;
}

/* ── Unify Crawl Grid URL & Title presentation (wrapping, no limits) ── */
[data-area="app"] .nv-crawl-grid__url {
  max-width: none !important;
  overflow: visible !important;
}
[data-area="app"] .nv-crawl-grid__url-text {
  display: block !important;
  white-space: normal !important;
  word-break: break-all !important;
  text-overflow: clip !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}
[data-area="app"] .nv-crawl-grid__url-title {
  display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-overflow: clip !important;
  overflow: visible !important;
}