/* app.css — shared visual polish layer, loaded after each page's inline theme.
   Additive only: enhances the existing dark-navy / electric-blue identity with
   depth, hierarchy, and refined interactions. Never changes layout structure. */

:root{
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 4px 16px -4px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px -8px rgba(0,0,0,.55);
  --accent-soft: rgba(88,166,255,.14);
  --accent-line: rgba(88,166,255,.55);
  --surface-2: #202b3d;
}

/* ── Page canvas: subtle depth instead of flat fill ─────────────────────── */
html,body{
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(88,166,255,.06), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(63,185,80,.04), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* ── Nav: layered bar with a hairline highlight ─────────────────────────── */
nav{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(1.1);
}
.nav-logo{ letter-spacing:.02em; }
nav a{ transition: color .15s, border-color .15s; }
nav a.active{ border-bottom-width:2px; }

/* ── Cards: gradient surface, soft shadow, crisper header ───────────────── */
.card,.batch-card{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--border) 82%, #000);
  transition: box-shadow .18s, border-color .18s, transform .12s;
}
.card:hover{ box-shadow: var(--shadow-lg); }
.card-hdr,.batch-card-hdr{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.card-hdr h2{ letter-spacing:.06em; }

/* ── Dashboard stat tiles: bigger number, color accent, real hover lift ── */
.stats-row{ gap: .85rem; }
.stat{
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-md);
  padding: 1rem 1.15rem 1.05rem;
  overflow: hidden;
}
.stat::before{                       /* top accent hairline */
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background: var(--accent); opacity:.5; transition: opacity .18s, height .18s;
}
.stat:has(.green)::before{ background: var(--green); }
.stat:has(.yellow)::before{ background: var(--yellow); }
.stat:has(.red)::before{ background: var(--red); }
.stat:has(.blue)::before{ background: var(--accent); }
.stat:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.stat:hover::before{ opacity:.95; height:4px; }
.stat-val{ font-size: 1.7rem; letter-spacing:-.01em; }
.stat-lbl{ text-transform: uppercase; letter-spacing:.06em; font-size:.68rem; }

/* ── Quick-action cards: lift + accent ring on hover ────────────────────── */
.quick-card{ transition: transform .12s, border-color .18s, box-shadow .18s; }
.quick-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }

/* ── Leads metrics strip: read as one instrument panel ──────────────────── */
.stats-bar{
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--bg);
  border-radius: var(--r) var(--r) 0 0;
}
.stat-pill{
  background: var(--surface-2);
  border:1px solid color-mix(in srgb, var(--border) 80%, #000);
  border-radius: 999px;
  padding:.2rem .7rem;
  box-shadow: var(--shadow-sm);
}
.stat-pill:hover{ border-color: var(--accent-line); }

/* ── Filter controls: focus ring, smoother ──────────────────────────────── */
.filter-bar{ background: linear-gradient(180deg, rgba(255,255,255,.015), transparent), var(--bg); }
.filter-bar select,.filter-bar input[type=text]{ transition: border-color .15s, box-shadow .15s; }
.filter-bar select:focus,.filter-bar input:focus{ box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Status badges: pill glow, clearer states ───────────────────────────── */
[class*="badge-"]{
  border-radius:999px; padding:.16rem .55rem; font-weight:600;
  letter-spacing:.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.badge-running,.badge-claimed{ animation: pulseSoft 1.8s ease-in-out infinite; }
@keyframes pulseSoft{ 0%,100%{opacity:1} 50%{opacity:.72} }

/* ── Tables: refined header + smoother row hover ────────────────────────── */
thead th{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
tbody tr{ transition: background .12s; }
tbody tr:hover td{ background: var(--accent-soft) !important; }

/* ── Buttons: primary gets weight, ghost buttons get feedback ───────────── */
button:not([class]),
.btn-primary,
button[type=submit]{
  background: linear-gradient(180deg, var(--accent), #3f82e6);
  border:1px solid #3f82e6; color:#fff; font-weight:600;
  box-shadow: var(--shadow-sm); transition: filter .15s, transform .1s, box-shadow .15s;
}
button:not([class]):hover,
.btn-primary:hover,
button[type=submit]:hover{ filter: brightness(1.08); box-shadow: var(--shadow-md); }
button:active{ transform: translateY(1px); }
.refresh-btn{ transition: color .15s, border-color .15s, background .15s; }
.refresh-btn:hover{ border-color: var(--accent-line); background: var(--accent-soft); }

/* ── Shared row-action icon buttons (edit=pencil, delete=bin) ──────────── */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; background:none;
  border:1px solid transparent; border-radius:6px; color:var(--muted);
  cursor:pointer; font-size:.95rem; line-height:1; vertical-align:middle;
  transition: color .15s, border-color .15s, background .15s;
}
.icon-btn:hover{ color:var(--text); border-color:var(--border); background:rgba(255,255,255,.04); }
.icon-btn.danger:hover{ color:var(--red); border-color:rgba(248,81,73,.35); background:rgba(248,81,73,.08); }
.icon-btn.accent:hover{ color:var(--accent); border-color:rgba(88,166,255,.35); }
.icon-btn.ok:hover{ color:var(--green); border-color:rgba(63,185,80,.35); }
.icon-btn.warn:hover{ color:var(--yellow); border-color:rgba(210,153,34,.35); }

/* ── Themed scrollbars ──────────────────────────────────────────────────── */
*{ scrollbar-width: thin; scrollbar-color: #33415a transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#33415a; border-radius:6px; border:2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#43536e; }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* ══ Responsive layer — phones & small tablets ═══════════════════════════ */
@media (max-width: 820px){
  /* Nav: swipe sideways instead of clipping links off-screen */
  nav{
    overflow-x:auto; overflow-y:hidden; gap:1.1rem; padding:0 .9rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  nav::-webkit-scrollbar{ display:none; }
  nav a{ flex-shrink:0; }
  nav .spacer{ flex:0 0 .25rem; }

  /* Tighter page gutters */
  .page, main{ padding:.9rem !important; }
  h1{ font-size:1rem; }

  /* Campaigns split view: sidebar stacks above the editor */
  .layout{ grid-template-columns:1fr !important; min-height:auto !important; }
  .sidebar{
    border-right:none !important; border-bottom:1px solid var(--border);
    max-height:38vh;
  }
  .editor{ padding:1rem !important; }

  /* Multi-column grids collapse */
  .stats-row{ grid-template-columns:repeat(3,1fr) !important; }
  .cards-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .row2, .field-row.two, .err-meta-grid{ grid-template-columns:1fr !important; }

  /* Toolbars and strips wrap instead of overflowing */
  .card-hdr, .filter-bar, .bulk-bar, .meta-strip, .stats-bar, .tab-bar{
    flex-wrap:wrap; row-gap:.45rem;
  }
  .meta-strip{ gap:.5rem 1rem; }

  /* Wide tables keep their natural width and scroll inside their wrapper
     (leads/workers/firewall/dashboard/users tables sit in overflow-x divs) */
  div[style*="overflow-x"] > table{ min-width:720px; }
  .m-box{ padding:1.1rem 1.15rem; }

  /* Comfortable touch targets */
  .refresh-btn, .btn-sm, .link-btn, .add-btn{ padding:.42rem .7rem; }
  nav a{ padding:.6rem 0; }
}

@media (max-width: 480px){
  .stats-row{ grid-template-columns:repeat(2,1fr) !important; }
  .cards-grid{ grid-template-columns:1fr !important; }
  .stat-val{ font-size:1.3rem; }
  .card-hdr h2{ font-size:.72rem; }
  .al-overlay{ padding:.75rem .5rem; }
}

/* ── Profile menu: avatar + dropdown, pinned to the right of the nav (after
   the flex-grow .spacer every page's nav ends with) ─────────────────────── */
.qa-profile{ position:relative; display:inline-flex; align-items:center; margin-left:.6rem; }
.qa-profile-btn{
  width:2.05rem; height:2.05rem; padding:0; border-radius:50%;
  background: linear-gradient(180deg, var(--accent), #3f82e6);
  border:1px solid #3f82e6; box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: box-shadow .15s, transform .1s;
}
.qa-profile-btn:hover{ box-shadow: var(--shadow-md); }
.qa-profile-btn:active{ transform: translateY(1px); }
.qa-profile-avatar{ color:#fff; font-weight:700; font-size:.78rem; letter-spacing:.02em; }

.qa-profile-menu{
  position:absolute; top:calc(100% + .55rem); right:0; z-index:60;
  min-width:15rem; padding:.85rem .9rem;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: opacity .12s, transform .12s, visibility .12s;
}
.qa-profile-menu.open{ opacity:1; visibility:visible; transform: translateY(0); }
.qa-profile-name{ font-weight:600; color:var(--text); font-size:.92rem; }
.qa-profile-user{ color:var(--muted); font-size:.78rem; margin-top:.1rem; }
.qa-profile-roles{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; }
.qa-profile-role-badge{
  display:inline-block; border-radius:999px; padding:.16rem .55rem;
  font-size:.68rem; font-weight:600; letter-spacing:.02em;
  background: var(--accent-soft); color: var(--accent);
  border:1px solid var(--accent-line);
}
.qa-profile-role-badge.admin{ background: rgba(248,81,73,.14); color:var(--red); border-color: rgba(248,81,73,.55); }
.qa-profile-role-badge.executive{ background: rgba(210,153,34,.14); color:var(--yellow); border-color: rgba(210,153,34,.55); }
.qa-profile-role-badge.manager{ background: rgba(63,185,80,.14); color:var(--green); border-color: rgba(63,185,80,.55); }
.qa-profile-signout{
  display:block; width:100%; margin-top:.75rem; padding:.42rem .6rem;
  background:transparent; color:var(--text); border:1px solid var(--border);
  border-radius: calc(var(--r) - 2px); font-weight:600; font-size:.82rem;
  cursor:pointer; transition: border-color .15s, background .15s;
}
.qa-profile-signout:hover{ border-color: var(--red); background: rgba(248,81,73,.1); color: var(--red); }

@media (max-width: 820px){
  .qa-profile{ flex-shrink:0; }
}