/* ==========================================================================
   AddLogs — application design system
   Supports light + dark themes via Bootstrap 5.3's [data-bs-theme] attribute.
   Purely presentational: no selector here is required by any JS behavior,
   except the theme toggle in layout/main.php which flips data-bs-theme.
   ========================================================================== */

:root {
  /* One brand, not two. The logo and the sidebar rail are crimson, so the
     brand ramp is crimson as well — before this, every card, button and hero
     in the app was indigo and sat awkwardly beside a red sidebar. The deep
     end (--brand-dark) stays warm maroon and the far end (--brand-3) tips to
     amber, which is what gives the hero its depth without leaving the family.
     --accent is the cool counterweight used for links and charts. */
  --brand: #dc2626;
  --brand-dark: #7f1d1d;
  --brand-light: #fef2f2;
  --brand-2: #ef4444;
  --brand-3: #f97316;
  --brand-glow: rgba(220, 38, 38, 0.28);
  --link: #9f1239;
  --accent: #0f766e;
  --accent-light: #ccfbf1;

  --ink: #0f172a;
  --ink-soft: #475569;
  --muted: #6b7280;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --sidebar-bg: #ffffff;
  --sidebar-bg-2: #ffffff;
  --sidebar-active: rgba(220, 38, 38, 0.08);
  --sidebar-text: #57606f;
  --sidebar-text-soft: #9aa3b2;
  --sidebar-border: #ebedf2;
  --sidebar-ink: #111827;
  --sidebar-hover-bg: rgba(17, 24, 39, 0.045);
  --sidebar-shadow: none;
  /* Editorial red — scoped to the sidebar so the rest of the app keeps
     its indigo brand colour. */
  --sidebar-accent: #dc2626;
  --sidebar-accent-2: #b91c1c;
  --sidebar-accent-soft: rgba(220, 38, 38, 0.10);
  --sidebar-accent-glow: rgba(220, 38, 38, 0.30);

  --surface: #f3f4f9;
  --surface-2: #eceefb;
  --surface-card: #ffffff;
  --topbar-bg: rgba(255, 255, 255, 0.85);

  --border: #e5e7eb;
  --border-soft: #eef0f4;

  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 2px 6px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 28px rgba(17, 24, 39, 0.10), 0 30px 70px rgba(17, 24, 39, 0.14);

  --success: #059669;
  --success-bg: #ecfdf5;
  --success-ink: #065f46;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-ink: #92400e;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-ink: #991b1b;
  --info: #0284c7;
  --info-bg: #eff6ff;
  --info-ink: #1e40af;

  --scrollbar-thumb: #cbd5e1;

  color-scheme: light;
}

/* ---------- Dark theme overrides ---------- */
[data-bs-theme="dark"] {
  --brand: #f87171;
  --brand-dark: #991b1b;
  --brand-light: rgba(248, 113, 113, 0.14);
  --brand-2: #fca5a5;
  --brand-3: #fb923c;
  --brand-glow: rgba(248, 113, 113, 0.35);
  --link: #fda4af;
  --accent: #2dd4bf;
  --accent-light: rgba(45, 212, 191, 0.14);

  --ink: #e5e9f2;
  --ink-soft: #aab3c5;
  --muted: #8792a6;

  --sidebar-bg: #05070d;
  --sidebar-bg-2: #05070d;
  --sidebar-active: rgba(248, 113, 113, 0.14);
  --sidebar-accent: #f87171;
  --sidebar-accent-2: #ef4444;
  --sidebar-accent-soft: rgba(248, 113, 113, 0.14);
  --sidebar-accent-glow: rgba(248, 113, 113, 0.32);
  --sidebar-text: #c7cee0;
  --sidebar-text-soft: #6b7690;
  --sidebar-border: rgba(255, 255, 255, 0.05);
  --sidebar-ink: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-shadow: none;

  --surface: #0b0f19;
  --surface-2: #10162400;
  --surface-card: #131a29;
  --topbar-bg: rgba(11, 15, 25, 0.85);

  --border: #23293b;
  --border-soft: #1b2132;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3), 0 10px 26px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 34px rgba(0, 0, 0, 0.45), 0 34px 80px rgba(0, 0, 0, 0.55);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --success-ink: #6ee7b7;
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --warning-ink: #fcd34d;
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --danger-ink: #fca5a5;
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.12);
  --info-ink: #7dd3fc;

  --scrollbar-thumb: #2b3245;

  color-scheme: dark;
}

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

html, body { height: 100%; }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.925rem;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
/* Vivid crimson is the action colour — buttons, the active nav rail, badges.
   Links use a deeper tone so a dense list of headlines reads as text rather
   than as a wall of alerts, and table links stay ink-coloured until hover. */
a { color: var(--link); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--brand); }
.table a, .table a:visited { color: var(--ink); }
.table a:hover { color: var(--brand); }

/* Refined, accessible focus ring app-wide */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.quick-action:focus-visible,
.quicklink:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 6px;
}
code { color: #be185d; background: #fdf2f8; padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 0.85em; }
[data-bs-theme="dark"] code { color: #f9a8d4; background: rgba(244, 114, 182, 0.12); }

hr { border-color: var(--border-soft); }
.text-muted { color: var(--muted) !important; }

/* ---------- Auth pages ---------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(1000px 500px at 100% 110%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(135deg, var(--brand-dark), var(--brand) 55%, var(--brand-2));
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[data-bs-theme="dark"] .auth-card { border-color: var(--border); }

.auth-brand {
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
}

.auth-card .form-control {
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
}

.auth-card .btn-primary {
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  font-weight: 600;
}

/* ---------- App shell ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 258px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 1.05rem 0.7rem 1.1rem;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--sidebar-border);
  box-shadow: var(--sidebar-shadow);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  z-index: 30;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  color: var(--sidebar-ink);
  padding: 0.35rem 0.5rem 1.35rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.sidebar .brand .brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-dark));
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 4px 10px var(--brand-glow);
}

.sidebar .nav-link {
  color: var(--sidebar-text);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.1rem;
  font-size: 0.855rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  position: relative;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}

/* Trailing pills (counts, NEW) sit hard right like the reference rail. */
.sidebar .nav-link .nav-badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.22rem 0.4rem;
  border-radius: 999px;
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-soft);
  flex-shrink: 0;
}
.sidebar .nav-link .nav-badge-new {
  background: var(--sidebar-accent-soft);
  color: var(--sidebar-accent);
}
.sidebar-collapsed .nav-badge { display: none; }

.sidebar .nav-link i {
  width: 1.1rem;
  text-align: center;
  font-size: 0.98rem;
  color: var(--sidebar-text-soft);
  transition: color 0.16s var(--ease), transform 0.16s var(--ease);
}

.sidebar .nav-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-ink);
}

.sidebar .nav-link:hover i { color: var(--sidebar-ink); transform: translateX(1px); }

.sidebar .nav-link.active {
  background: var(--sidebar-active);
  color: var(--sidebar-accent);
  font-weight: 600;
}

.sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: -0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 58%;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-accent);
}

.sidebar .nav-link.active i { color: var(--sidebar-accent); }
.sidebar .nav-link.active:hover { background: var(--sidebar-active); color: var(--sidebar-accent); }
.sidebar .nav-link.active:hover i { color: var(--sidebar-accent); }

.sidebar .nav-link.disabled {
  color: var(--sidebar-text-soft);
  opacity: 0.6;
  cursor: not-allowed;
}
.sidebar .nav-link.disabled i { color: var(--sidebar-text-soft); }

.sidebar .nav-link .bi-box-arrow-up-right { color: var(--sidebar-text-soft); }

.sidebar .nav-section-label {
  text-transform: uppercase;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--sidebar-text-soft);
  padding: 1.05rem 0.7rem 0.35rem;
}
.sidebar .nav-section-label:first-child { padding-top: 0.2rem; }

/* Thin, unobtrusive scrollbar for long menus. */
.sidebar-nav { scrollbar-width: thin; scrollbar-color: var(--sidebar-border) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 999px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.topbar {
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 58px;
}

.topbar-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* Borderless topbar controls, as in the reference chrome. */
.topbar-ghost-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.02rem;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.topbar-ghost-btn:hover { background: var(--surface-2); color: var(--ink); }
.topbar-ghost-btn .bi-sun { display: none; }
[data-bs-theme="dark"] .topbar-ghost-btn .bi-moon { display: none; }
[data-bs-theme="dark"] .topbar-ghost-btn .bi-sun { display: inline-block; }
[data-bs-theme="dark"] .topbar-ghost-btn:hover { background: rgba(255, 255, 255, 0.07); }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: none;
  background: transparent;
  padding: 0.25rem 0.4rem;
  border-radius: 10px;
  text-align: left;
  transition: background-color 0.15s ease;
}
.topbar-user:hover { background: var(--surface-2); }
[data-bs-theme="dark"] .topbar-user:hover { background: rgba(255, 255, 255, 0.07); }
.topbar-user::after { display: none; }
.topbar-user .avatar-circle { background: linear-gradient(140deg, var(--sidebar-accent), var(--sidebar-accent-2)); }
.topbar-user-info { flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar-user-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.topbar-user-role { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }

/* ---------- Page footer bar ---------- */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--muted);
  font-size: 0.75rem;
}
.app-footer-left,
.app-footer-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.app-footer a { color: var(--muted); }
.app-footer a:hover { color: var(--sidebar-accent); }
.app-footer-brand { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--ink); }
.app-footer-brand i { color: var(--sidebar-accent); }
.app-footer-ver {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.app-footer-dot { opacity: 0.45; }
.app-footer-status { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--success); font-weight: 600; }
.app-footer-dotmark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
  transform: translateY(-1px);
}

.theme-toggle .bi-sun-fill { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; }

.content {
  padding: 1.75rem;
  flex: 1;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--ink);
}

.card.shadow-sm,
.card.border-0.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--border-soft);
}

.stat-card {
  position: relative;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--stat-accent, var(--brand)), transparent 140%);
  opacity: 0.9;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.stat-card .stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  background: var(--stat-accent, var(--brand));
  box-shadow: 0 6px 14px var(--brand-glow);
}

.stat-card .stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.87rem;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease), box-shadow 0.18s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-sm { border-radius: 7px; }

.btn-primary {
  background: linear-gradient(155deg, var(--brand-2), var(--brand) 70%);
  border-color: var(--brand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 6px 14px var(--brand-glow);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(155deg, var(--brand), var(--brand-dark) 70%);
  border-color: var(--brand-dark);
}

.btn-light {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink-soft);
}

[data-bs-theme="dark"] .btn-light {
  background: var(--border-soft);
  border-color: var(--border);
  color: var(--ink);
}

.btn-outline-secondary {
  border-color: var(--border);
  color: var(--ink-soft);
}

.btn-outline-secondary:hover {
  background: var(--surface);
  border-color: #d1d5db;
  color: var(--ink);
}

.btn-outline-danger:hover { box-shadow: none; }

.btn:focus,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-glow);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
  background-color: var(--surface-card);
  color: var(--ink);
  border-radius: 8px;
  border-color: var(--border);
  font-size: 0.88rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-card);
  color: var(--ink);
  border-color: var(--brand-2);
}

.form-control::placeholder { color: var(--muted); }

.form-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.form-text { font-size: 0.78rem; color: var(--muted); }

/* ---------- Tables ---------- */
.table {
  font-size: 0.87rem;
  margin-bottom: 0;
  color: var(--ink);
}

.table thead th,
.table > :not(caption) > * > th {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
  border-bottom-width: 1px;
  border-color: var(--border-soft);
  background: var(--surface-2, transparent);
}

[data-bs-theme="dark"] .table thead th { background: rgba(255, 255, 255, 0.03); }

.table-light,
.table > :not(caption) > * > * {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  border-color: var(--border-soft);
}

.table td, .table th {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-color: var(--border-soft);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--brand-light);
  color: var(--ink);
}

.table-responsive { border-radius: var(--radius); }

/* ---------- Badges ---------- */
.badge {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.4em 0.75em;
  border-radius: 999px;
}

/* Soft, muted badge fills read as more premium than solid Bootstrap colors */
.badge.bg-success { background-color: var(--success-bg) !important; color: var(--success-ink) !important; }
.badge.bg-warning { background-color: var(--warning-bg) !important; color: var(--warning-ink) !important; }
.badge.bg-danger  { background-color: var(--danger-bg) !important; color: var(--danger-ink) !important; }
.badge.bg-info    { background-color: var(--info-bg) !important; color: var(--info-ink) !important; }
.badge.bg-secondary { background-color: var(--border-soft) !important; color: var(--ink-soft) !important; }
.badge.bg-primary { background-color: var(--brand-light) !important; color: var(--brand-dark) !important; }

/* ---------- Alerts ---------- */
.alert {
  border: none;
  border-radius: var(--radius);
  font-size: 0.88rem;
  box-shadow: var(--shadow-sm);
}

.alert-success { background: var(--success-bg); color: var(--success-ink); }
.alert-danger { background: var(--danger-bg); color: var(--danger-ink); }
.alert-warning { background: var(--warning-bg); color: var(--warning-ink); }
.alert-info { background: var(--info-bg); color: var(--info-ink); }

/* ---------- Modals ---------- */
.modal-content {
  background: var(--surface-card);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--border-soft);
  padding: 1.1rem 1.4rem;
}

.modal-body { padding: 1.4rem; }

.modal-footer {
  border-top: 1px solid var(--border-soft);
  padding: 1rem 1.4rem;
}

.modal-title { font-weight: 600; }

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: 10px;
}

.dropdown-item { color: var(--ink-soft); }
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--surface);
  color: var(--ink);
}
.dropdown-divider { border-color: var(--border-soft); }

/* ---------- Pagination / nav-tabs ---------- */
.pagination .page-link {
  border-radius: 8px;
  margin: 0 2px;
  border-color: var(--border);
  color: var(--ink-soft);
  background: var(--surface-card);
}
.pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .page-item.disabled .page-link { background: transparent; }

.nav-tabs {
  border-color: var(--border-soft);
}

.nav-tabs .nav-link {
  border: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.87rem;
}

.nav-tabs .nav-link.active {
  color: var(--brand-dark);
  border-bottom: 2px solid var(--brand);
  background: transparent;
}

/* ---------- Sidebar: brand row, collapse, user card ---------- */
.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0.45rem 0.95rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar .brand { display: flex; align-items: center; gap: 0.65rem; padding: 0; }

.sidebar .brand .brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--sidebar-accent), var(--sidebar-accent-2));
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 6px 14px var(--sidebar-accent-glow);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-name { font-weight: 700; color: var(--sidebar-ink); font-size: 1.02rem; letter-spacing: -0.01em; }
.brand-sub {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--sidebar-text-soft);
  letter-spacing: 0.12em;
  margin-top: 0.12rem;
}

.sidebar-collapse-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--sidebar-border);
  background: transparent;
  color: var(--sidebar-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-collapse-btn:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-ink); }

/* Bootstrap's .nav sets flex-wrap:wrap; in a fixed-height column that
   makes an overlong menu wrap into a second column instead of
   scrolling (the last items appeared beside the top of the rail). */
.sidebar-nav { flex: 1; min-height: 0; flex-wrap: nowrap; overflow-y: auto; overflow-x: hidden; }

.sidebar-user {
  border-top: 1px solid var(--sidebar-border);
  margin-top: 0.75rem;
  padding-top: 0.85rem;
}

.sidebar-user-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.5rem;
  margin-bottom: 0.3rem;
  border-radius: 10px;
  background: var(--sidebar-hover-bg);
}
.sidebar .sidebar-user-row .avatar-circle {
  background: linear-gradient(140deg, var(--sidebar-accent), var(--sidebar-accent-2));
}

.avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-dark));
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-circle.avatar-sm { width: 24px; height: 24px; font-size: 0.68rem; }

.sidebar-user-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sidebar-user-name { color: var(--sidebar-ink); font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { color: var(--sidebar-text-soft); font-size: 0.72rem; }

.sidebar-user-actions { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; flex-shrink: 0; }
.sidebar-user-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--sidebar-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-user-btn:hover { background: var(--sidebar-bg); color: var(--sidebar-accent); }

/* Collapsed sidebar: icon rail only */
.sidebar-collapsed .sidebar { width: 84px; }
.sidebar-collapsed .brand-text,
.sidebar-collapsed .nav-section-label,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .sidebar-user-info,
.sidebar-collapsed .sidebar-user-actions {
  display: none;
}
.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }
.sidebar-collapsed .sidebar .nav-link { justify-content: center; }
.sidebar-collapsed .sidebar-user-row { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .sidebar-top { justify-content: center; }
.sidebar-collapsed .sidebar-collapse-btn { display: none; }

/* ---------- Topbar: search ---------- */
.topbar-search {
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
  color: var(--muted);
  min-width: 240px;
  flex: 0 1 320px;
  margin-right: 0.25rem;
}
.topbar-search i { font-size: 0.95rem; }
.topbar-search input {
  border: none;
  background: transparent;
  outline: none;
  color: var(--ink);
  font-size: 0.85rem;
  flex: 1;
  min-width: 0;
}
.topbar-search input::placeholder { color: var(--muted); }
.topbar-search kbd {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
}

/* ---------- Dashboard: hero, charts, quick actions ---------- */
/* ---------- Page head (used on every module's list/settings page) ---------- */
.page-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

/* The header icon on every module page.
   54 views had painted this with an inline `style="background:#xxxxxx"` —
   twenty-odd different hues picked one page at a time, none of which knew
   about the tenant's accent, so Categories was green while the app was
   crimson. The gradient is declared once here and wins over those inline
   styles (the one place !important is the right tool: editing 54 views to
   delete a colour each is more churn and more drift). A page that genuinely
   needs its own colour can set --page-icon. */
.page-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  flex-shrink: 0;
  background: var(--page-icon, linear-gradient(135deg, var(--brand), var(--brand-dark))) !important;
  box-shadow: 0 6px 14px var(--brand-glow);
}

.page-head-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  line-height: 1.25;
}

.page-head-sub { font-size: 0.78rem; color: var(--muted); }

.page-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 700px) {
  .page-head-actions { margin-left: 0; width: 100%; }
}

/* ---------- Business verification (exact port of press_ci4's
   business-proof/index.php card) ----------
   Scoped bv- classes so this one page can match press_ci4's white
   card / red-button look pixel-for-pixel without touching the rest
   of vPaper's theme. --bv-brand mirrors press_ci4's default brand
   color (#e31507) used on that screen. */
:root { --bv-brand: #e31507; }
[data-bs-theme="dark"] { --bv-brand: #f04438; }

.bv-card {
  background: var(--surface-card);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--border);
}

.bv-heading { margin-bottom: 0.25rem; font-weight: 700; }
.bv-sub { color: var(--muted); font-size: 0.8125rem; margin-bottom: 1.5rem; }

.bv-status-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 0.95rem 1.1rem;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}

.bv-status-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.bv-status-icon.is-none    { color: var(--muted); }
.bv-status-icon.is-pending { color: var(--warning-ink); }
.bv-status-icon.is-approved { color: var(--success-ink); }
.bv-status-icon.is-rejected { color: var(--danger-ink); }

.bv-status-label { font-weight: 700; }
.bv-status-label.is-none    { color: var(--muted); }
.bv-status-label.is-pending { color: var(--warning-ink); }
.bv-status-label.is-approved { color: var(--success-ink); }
.bv-status-label.is-rejected { color: var(--danger-ink); }

.bv-status-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.bv-status-reason { font-size: 0.8rem; color: var(--danger-ink); margin-top: 4px; }
.bv-status-file { margin-left: auto; flex-shrink: 0; }

.bv-btn-brand {
  background: var(--bv-brand);
  border-color: var(--bv-brand);
  color: #fff;
  font-weight: 600;
}
.bv-btn-brand:hover,
.bv-btn-brand:focus {
  background: var(--bv-brand);
  border-color: var(--bv-brand);
  color: #fff;
  filter: brightness(0.92);
}

@media (max-width: 560px) {
  .bv-status-box { flex-wrap: wrap; }
  .bv-status-file { margin-left: 0; }
}

/* ---------- News Categories: hero banner, stat tiles, styled list ----------
   Scoped nc- classes for app/Views/news_categories/index.php. */
.nc-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  color: #fff;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  box-shadow: var(--shadow-md);
}
.nc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 60px);
  pointer-events: none;
}
.nc-hero-text { position: relative; z-index: 1; max-width: 60%; }
.nc-hero-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: .35rem; }
.nc-hero-text h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .4rem; color: #fff; }
.nc-hero-text p { font-size: 0.85rem; color: rgba(255,255,255,.85); margin: 0; max-width: 420px; }
.nc-hero-art { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nc-hero-tag { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 0.85rem; line-height: 1.35; text-align: right; opacity: .92; }
.nc-hero-art svg { width: 108px; height: 90px; flex-shrink: 0; }
@media (max-width: 760px) {
  .nc-hero { flex-direction: column; align-items: flex-start; }
  .nc-hero-text { max-width: 100%; }
  .nc-hero-art { align-self: flex-end; }
}

.nc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.nc-list-sub { font-size: 0.78rem; color: var(--muted); }
.nc-list-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nc-search { position: relative; }
.nc-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.85rem; }
.nc-search input {
  width: 220px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--ink);
  padding: 0 12px 0 32px;
  font-size: 0.82rem;
  outline: 0;
}
.nc-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.nc-sort { width: auto; font-size: 0.8rem; }

.btn-nc-add {
  background: var(--sidebar-accent, #dc2626);
  border-color: var(--sidebar-accent, #dc2626);
  color: #fff;
  font-weight: 600;
}
.btn-nc-add:hover, .btn-nc-add:focus {
  background: var(--sidebar-accent-2, #b91c1c);
  border-color: var(--sidebar-accent-2, #b91c1c);
  color: #fff;
}

.nc-row-name { display: flex; align-items: center; gap: 10px; }
.nc-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}
.nc-row-desc { max-width: 360px; }
.nc-badge-articles {
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 700;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 3px 10px;
}
.nc-badge-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--success-bg);
  color: var(--success-ink);
  font-weight: 600;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 3px 10px;
}
.nc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; }

/* ---------- Add Category color picker + list swatch ----------
   .nc-color-row/.nc-color-hint sit under the inline Add Category form's
   color input (left panel, see place-card above); .nc-swatch is the same
   color rendered as a small chip in the Categories list's Color column. */
.nc-color-row { display: flex; align-items: center; gap: 0.6rem; }
.nc-color-row input[type="color"] { width: 44px; height: 34px; padding: 3px; flex-shrink: 0; }
.nc-color-hint { font-size: 0.76rem; color: var(--muted); }
.nc-swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 4px;
  margin-right: 6px; vertical-align: middle; border: 1px solid rgba(0,0,0,.08);
}

/* ---------- Journalist Areas: search + assignment filter ----------
   Scoped ja- classes for app/Views/journalist_areas/index.php. Same
   visual treatment as the News Categories toolbar (.nc-search/.nc-sort)
   but kept as its own small block since the two pages aren't related. */
.ja-toolbar { position: relative; }
.ja-tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ja-search { position: relative; }
.ja-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.85rem; }
.ja-search input {
  width: 220px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--ink);
  padding: 0 12px 0 32px;
  font-size: 0.82rem;
  outline: 0;
}
.ja-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.ja-filter { width: auto; font-size: 0.8rem; }

/* ---------- Place management cards (Districts, Mandals) ----------
   Shared by app/Views/place_districts and app/Views/place_mandals so the
   two pages (and any future one under Place) stay visually identical
   instead of drifting via copy-pasted per-view <style> blocks. */
.place-card .card-body { padding: 1.3rem 1.4rem; }

.place-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.place-card-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--brand-2), var(--brand) 70%);
  color: #fff; font-size: 0.95rem;
}
.place-card-icon-muted { background: var(--surface); color: var(--ink-soft); }
.place-card-title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--ink); }
.place-card-sub { font-size: 0.76rem; color: var(--muted); width: 100%; margin-top: -0.5rem; }
.place-count-badge {
  margin-left: auto; background: var(--brand-light); color: var(--brand-dark);
  font-weight: 700; font-size: 0.78rem; border-radius: 999px; padding: 0.15rem 0.6rem;
}
[data-bs-theme="dark"] .place-count-badge { background: rgba(129, 140, 248, 0.18); color: var(--brand); }

.place-empty-hint {
  display: flex; align-items: flex-start; gap: 0.5rem;
  background: var(--warning-bg); color: var(--warning-ink);
  border: 1px solid rgba(217, 119, 6, 0.25); border-radius: 10px;
  padding: 0.65rem 0.8rem; font-size: 0.8rem; margin-bottom: 1rem;
}
.place-empty-hint i { margin-top: 0.15rem; }
.place-empty-hint a { color: inherit; text-decoration: underline; font-weight: 600; }

.place-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 600;
  border: none;
}
a.place-pill {
  color: var(--brand-dark); background: var(--brand-light);
  transition: background-color 0.15s ease, color 0.15s ease;
}
a.place-pill:hover { background: var(--brand-2); color: #fff; }
[data-bs-theme="dark"] a.place-pill { background: rgba(129, 140, 248, 0.18); color: var(--brand); }
[data-bs-theme="dark"] a.place-pill:hover { background: var(--brand); color: #fff; }

.place-foot-note { margin-top: 0.85rem; font-size: 0.78rem; color: var(--muted); }

.place-breadcrumb { font-size: 0.78rem; color: var(--muted); }
.place-breadcrumb a { color: var(--muted); text-decoration: underline; }
.place-breadcrumb a:hover { color: var(--brand-dark); }

@media (max-width: 991px) {
  .place-layout .col-lg-4 { order: 2; }
  .place-layout .col-lg-8 { order: 1; }
}

/* ---------- Settings-style cards (Header Settings) ---------- */
.set-card { border: 1px solid var(--border-soft); border-radius: var(--radius); margin-bottom: 22px; background: var(--surface-card); }
.set-card > .set-head { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; }
.set-card > .set-head h5 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.set-card > .set-head .set-note { font-size: 12px; color: var(--muted); }
.set-card > .set-body { padding: 16px; }
.set-card > .set-foot { padding: 12px 16px; border-top: 1px solid var(--border-soft); background: var(--surface); display: flex; align-items: center; gap: 12px; border-radius: 0 0 var(--radius) var(--radius); }
.set-status { font-size: 13px; color: var(--ink-soft); }

.hero-copy { flex: 1 1 auto; min-width: 0; }

/* ---------- Full-page form layout (New Journalist) ----------
   .jn-* classes for app/Views/journalists/create.php — a dedicated page
   instead of the old Add Journalist popup, laid out as a main content
   column + a right-hand action/settings sidebar (matching the app's other
   full-page editors). Kept generic enough to reuse for a future full-page
   form without inventing a second near-identical block. */
.jn-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.jn-topbar-title { font-size: 1.3rem; font-weight: 700; margin: 0; color: var(--ink); }
.jn-topbar-crumb { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }
.jn-topbar-crumb a { color: var(--muted); text-decoration: underline; }
.jn-topbar-crumb a:hover { color: var(--brand-dark); }

.jn-card { border-radius: var(--radius-lg); overflow: hidden; }
.jn-card-head {
  padding: 0.75rem 1.1rem; font-weight: 700; font-size: 0.88rem; color: var(--ink);
  border-bottom: 1px solid var(--border-soft); background: var(--surface);
  display: flex; align-items: center;
}
.jn-card-head i { color: var(--brand); }

.chart-donut-box { width: 140px; height: 140px; flex-shrink: 0; position: relative; }
.chart-donut-box canvas { width: 100% !important; height: 100% !important; }

.hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(680px 280px at 92% -10%, rgba(255,255,255,0.20), transparent 62%),
    radial-gradient(520px 240px at 0% 120%, rgba(0,0,0,0.18), transparent 60%),
    linear-gradient(118deg, var(--brand-dark) 0%, var(--brand) 58%, var(--brand-3) 158%);
  box-shadow: 0 14px 34px rgba(127, 29, 29, 0.22);
}

.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.35;
  pointer-events: none;
  mask-image: linear-gradient(120deg, #fff, transparent 70%);
}

.hero-banner > * { position: relative; z-index: 1; }

.hero-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.8); }
.hero-name { color: #fff; font-size: 1.7rem; font-weight: 800; margin: 0.15rem 0 0.4rem; letter-spacing: -0.02em; }
.hero-sub { color: rgba(255,255,255,0.9); font-size: 0.9rem; margin-bottom: 0.6rem; max-width: 480px; }
.hero-date { color: rgba(255,255,255,0.88); font-size: 0.82rem; }
.hero-banner .btn-light { background: #fff; color: var(--brand-dark); border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
/* Bootstrap's .btn-light goes dark with the dark theme, which left the hero's
   main action nearly invisible against the red. The hero is always a dark
   surface, so its buttons stay light in both themes. */
[data-bs-theme="dark"] .hero-banner .btn-light,
[data-bs-theme="dark"] .hero-banner .btn-light:hover { background: #fff; color: #7f1d1d; }
.hero-banner .btn-light:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.hero-banner .btn-outline-light { border-color: rgba(255,255,255,0.55); }
.hero-banner .btn-outline-light:hover { color: var(--brand-dark); background: #fff; }

.hero-quote {
  flex-shrink: 0;
  max-width: 260px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  text-align: right;
}
.hero-quote i { font-size: 1.4rem; color: rgba(255,255,255,0.6); }

/* Dark mode needs its own hero surface. The dark-theme brand tokens are
   deliberately LIGHTER (they have to read as text and buttons against a dark
   page), but the hero uses the ramp as a background — so inheriting them made
   the banner louder at night than it is by day. These are fixed deep tones,
   and the dot texture is dialled back with them. */
[data-bs-theme="dark"] .hero-banner,
[data-bs-theme="dark"] .j360-hero {
  background:
    radial-gradient(680px 280px at 92% -10%, rgba(255,255,255,0.09), transparent 62%),
    radial-gradient(520px 240px at 0% 120%, rgba(0,0,0,0.40), transparent 60%),
    linear-gradient(118deg, #17080c 0%, #5d151c 54%, #7c2d12 150%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] .hero-banner::after,
[data-bs-theme="dark"] .j360-hero::after { opacity: 0.16; }
[data-bs-theme="dark"] .hero-quote {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

/* ---------- Your Plan ----------------------------------------------------
   A subscription is a membership, so it reads as a ticket rather than as
   another white card: a dark brand body, a perforated stub holding the
   price and status, and a punched notch where the two meet. It sits right
   under the hero and deliberately echoes it (same ramp, same dotted
   texture) without competing — the hero is bright, this is deep.
------------------------------------------------------------------------- */
.plan-ticket {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(520px 200px at 8% -30%, rgba(255,255,255,0.16), transparent 62%),
    linear-gradient(100deg, #2b0a10 0%, var(--brand-dark) 46%, #a51b1b 100%);
  box-shadow: 0 10px 26px rgba(127, 29, 29, 0.20);
}

.plan-ticket::before {          /* hairline sheen along the top edge */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent 70%);
  z-index: 2;
}

.plan-ticket::after {                     /* the same dot texture as the hero */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.30;
  mask-image: linear-gradient(100deg, #fff, transparent 65%);
  pointer-events: none;
}

.plan-ticket-main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  min-width: 0;
}

.plan-crest {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.plan-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
}
.plan-name {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0.1rem 0 0.15rem;
}
.plan-note {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

/* the stub: separated by a punched, dashed perforation */
.plan-ticket-stub {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.2rem;
  padding: 1.15rem 1.5rem 1.15rem 1.9rem;
  background: rgba(0,0,0,0.16);
  border-left: 2px dashed rgba(255,255,255,0.40);
}
/* the two notches that make the perforation read as a tear line */
.plan-ticket-stub::before,
.plan-ticket-stub::after {
  content: '';
  position: absolute;
  left: -11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
}
.plan-ticket-stub::before { top: -11px; }
.plan-ticket-stub::after  { bottom: -11px; }

.plan-price {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.plan-price .cur { font-size: 0.95rem; font-weight: 700; opacity: 0.85; margin-right: 1px; }
.plan-price-none { opacity: 0.5; }
.plan-billing {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}

.plan-pill {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.plan-pill i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
}
.plan-pill.is-off i { background: #cbd5e1; box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.2); }

/* Nothing assigned yet. A washed-out red just looks muddy, so the empty
   state goes deep slate and keeps crimson only on the crest — it reads as
   "not set up" rather than as a faded plan. */
.plan-ticket.is-empty {
  background:
    radial-gradient(520px 200px at 8% -30%, rgba(255,255,255,0.10), transparent 62%),
    linear-gradient(100deg, #1b2030 0%, #262d3f 55%, #333b50 100%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
}
.plan-ticket.is-empty .plan-crest {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: rgba(255,255,255,0.22);
}
.plan-ticket.is-empty .plan-name { color: rgba(255,255,255,0.94); }

/* Same reasoning as the hero: fixed deep tones at night, not the lighter
   dark-theme ramp. */
[data-bs-theme="dark"] .plan-ticket {
  background:
    radial-gradient(520px 200px at 8% -30%, rgba(255,255,255,0.08), transparent 62%),
    linear-gradient(100deg, #170709 0%, #4d1218 48%, #6d2016 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}
[data-bs-theme="dark"] .plan-ticket::after { opacity: 0.16; }
[data-bs-theme="dark"] .plan-ticket.is-empty {
  background:
    radial-gradient(520px 200px at 8% -30%, rgba(255,255,255,0.07), transparent 62%),
    linear-gradient(100deg, #10141e 0%, #171d2a 55%, #1f2636 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

@media (max-width: 640px) {
  .plan-ticket { flex-direction: column; }
  .plan-ticket-stub {
    align-items: flex-start;
    border-left: 0;
    border-top: 2px dashed rgba(255,255,255,0.34);
    padding: 0.9rem 1.4rem;
  }
  .plan-ticket-stub::before { top: -11px; left: -11px; }
  .plan-ticket-stub::after  { top: -11px; bottom: auto; left: auto; right: -11px; }
}
.hero-quote p { font-size: 0.85rem; font-style: italic; margin: 0.4rem 0 0.25rem; color: #fff; }
.hero-quote span { font-size: 0.72rem; color: rgba(255,255,255,0.75); }

.stat-foot { font-size: 0.74rem; padding-top: 0.5rem; border-top: 1px solid var(--border-soft); }

.legend-row { padding: 0.3rem 0; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.5rem; }

.quicklink {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--surface);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.quicklink i { color: var(--brand); transition: transform 0.18s var(--ease); }
.quicklink:hover { background: var(--brand-light); color: var(--brand-dark); transform: translateX(2px); }
.quicklink:hover i { transform: scale(1.1); }

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  height: 100%;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.quick-action i {
  font-size: 1.1rem;
  color: var(--brand);
  transition: transform 0.2s var(--ease);
}
.quick-action:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
  background: var(--surface-card);
  color: var(--brand-dark);
}
.quick-action:hover i { transform: scale(1.12); }
.quick-action.disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Journalist 360° — profile hero, pill tabs, timeline, ID card ----------
   Shared by journalists/view360.php and journalists/directory360.php. Reuses
   the same tokens/gradient recipe as .hero-banner rather than inventing a new
   palette, so this reads as part of the app, not a bolted-on module. */
.j360-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-radius: var(--radius-lg);
  padding: 1.9rem 2rem;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(680px 280px at 92% -10%, rgba(255,255,255,0.20), transparent 62%),
    radial-gradient(520px 240px at 0% 120%, rgba(0,0,0,0.18), transparent 60%),
    linear-gradient(118deg, var(--brand-dark) 0%, var(--brand) 58%, var(--brand-3) 158%);
  box-shadow: 0 14px 34px rgba(127, 29, 29, 0.22);
  margin-bottom: 1.25rem;
}
.j360-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.35;
  pointer-events: none;
  mask-image: linear-gradient(120deg, #fff, transparent 70%);
}
.j360-hero > * { position: relative; z-index: 1; }

.j360-identity { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.j360-hero-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
  color: #fff; font-size: 1.3rem;
}
.j360-avatar-ring {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  padding: 3px; background: linear-gradient(155deg, rgba(255,255,255,.9), rgba(255,255,255,.25));
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.j360-avatar-ring img,
.j360-avatar-ring .j360-avatar-fallback {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.j360-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); color: #fff; font-size: 1.6rem;
}
.j360-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.75); text-transform: uppercase; }
.j360-name { color: #fff; font-size: 1.55rem; font-weight: 800; margin: 0.1rem 0 0.3rem; letter-spacing: -0.02em; line-height: 1.2; }
.j360-meta { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.82rem; color: rgba(255,255,255,0.9); }
.j360-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.j360-meta i { opacity: 0.85; }

.j360-status-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle;
  background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.35);
}
.j360-status-pill.is-active { background: rgba(52, 211, 153, 0.25); border-color: rgba(52, 211, 153, 0.5); }
.j360-status-pill.is-suspended { background: rgba(251, 191, 36, 0.25); border-color: rgba(251, 191, 36, 0.5); }
.j360-status-pill.is-revoked { background: rgba(248, 113, 113, 0.25); border-color: rgba(248, 113, 113, 0.5); }
.j360-status-pill.is-draft { background: rgba(148, 163, 184, 0.25); border-color: rgba(148, 163, 184, 0.5); }
.j360-status-pill.is-generated { background: rgba(56, 189, 248, 0.25); border-color: rgba(56, 189, 248, 0.5); }
.j360-status-pill.is-archived { background: rgba(148, 163, 184, 0.25); border-color: rgba(148, 163, 184, 0.5); }
.j360-status-pill i { font-size: 0.55rem; }

.j360-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }
.j360-hero-actions .btn-light { color: var(--brand-dark); border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-weight: 600; }
.j360-hero-actions .btn-light:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.j360-hero-actions .btn-outline-light { border-color: rgba(255,255,255,0.55); font-weight: 600; }
.j360-hero-actions .btn-outline-light:hover { color: var(--brand-dark); background: #fff; }

.j360-stat-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.j360-stat {
  min-width: 88px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 0.5rem 0.85rem;
  text-align: center;
}
.j360-stat-val { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.j360-stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.78); margin-top: 0.15rem; }

/* Pill tabs replacing Bootstrap's default underline nav-tabs */
.j360-tabs {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 0.3rem; margin-bottom: 1.25rem;
}
.j360-tabs .nav-link {
  border: 0; border-radius: 999px; padding: 0.5rem 1rem;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.j360-tabs .nav-link:hover { background: var(--surface-card); color: var(--ink); }
.j360-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff; box-shadow: 0 4px 12px var(--brand-glow);
}
.j360-tabs .nav-link .badge { background: rgba(0,0,0,0.12); color: inherit; font-weight: 700; }
.j360-tabs .nav-link.active .badge { background: rgba(255,255,255,0.28); color: #fff; }
@media (max-width: 991px) { .j360-tabs { border-radius: var(--radius); overflow-x: auto; flex-wrap: nowrap; } }

/* Content cards */
.j360-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-soft); }
.j360-card-head {
  padding: 0.85rem 1.15rem; font-weight: 700; font-size: 0.88rem; color: var(--ink);
  border-bottom: 1px solid var(--border-soft); background: var(--surface);
  display: flex; align-items: center; gap: 0.55rem;
}
.j360-card-head .j360-card-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--brand-2), var(--brand) 70%);
  color: #fff; font-size: 0.8rem;
}

.j360-kv { display: flex; flex-direction: column; gap: 0.85rem; }
.j360-kv-row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px dashed var(--border-soft); }
.j360-kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.j360-kv-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.j360-kv-val { font-size: 0.88rem; color: var(--ink); font-weight: 600; text-align: right; }

.j360-empty { text-align: center; padding: 1.75rem 1rem; color: var(--muted); }
.j360-empty i { font-size: 1.6rem; opacity: 0.45; display: block; margin-bottom: 0.5rem; }
.j360-empty p { margin: 0; font-size: 0.85rem; }

/* Vertical timeline (Journalist History / Activity History) */
.j360-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.j360-timeline::before {
  content: ''; position: absolute; left: 13px; top: 4px; bottom: 4px; width: 2px;
  background: var(--border-soft);
}
.j360-timeline li { position: relative; display: flex; gap: 0.75rem; padding-bottom: 1.15rem; }
.j360-timeline li:last-child { padding-bottom: 0; }
.j360-timeline-dot {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.j360-timeline-label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.j360-timeline-note { font-size: 0.79rem; color: var(--ink-soft); margin-top: 0.1rem; }
.j360-timeline-time { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }

/* Press ID card visual (Press Card tab) */
.j360-idcard {
  border-radius: 18px; padding: 1.4rem 1.5rem; color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(135deg, var(--brand-dark), var(--brand) 60%, var(--brand-3) 140%);
  box-shadow: var(--shadow-lg);
}
.j360-idcard-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1rem; }
.j360-idcard-org { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); font-weight: 700; }
.j360-idcard-body { display: flex; gap: 1.1rem; align-items: center; }
.j360-idcard-photo {
  width: 62px; height: 62px; border-radius: 12px; flex-shrink: 0; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.6);
}
.j360-idcard-photo-fallback {
  width: 62px; height: 62px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; border: 2px solid rgba(255,255,255,0.4);
}
.j360-idcard-name { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.15rem; }
.j360-idcard-role { font-size: 0.78rem; color: rgba(255,255,255,0.85); margin-bottom: 0.5rem; }
.j360-idcard-id { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.82rem; letter-spacing: 0.04em; background: rgba(255,255,255,0.16); border-radius: 6px; padding: 0.15rem 0.55rem; display: inline-block; }
.j360-idcard-foot { display: flex; justify-content: space-between; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px dashed rgba(255,255,255,0.3); font-size: 0.72rem; color: rgba(255,255,255,0.85); }

/* Media Gallery */
.j360-media-tile { position: relative; border-radius: 12px; overflow: hidden; display: block; }
.j360-media-tile img { transition: transform 0.25s var(--ease); }
.j360-media-tile:hover img { transform: scale(1.06); }
.j360-media-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.45rem 0.6rem 0.35rem;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  color: #fff; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Directory picker cards */
.j360-dir-card {
  border-radius: var(--radius-lg); border: 1px solid var(--border-soft);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.j360-dir-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.j360-dir-avatar-ring {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 0.7rem; padding: 3px;
  background: linear-gradient(155deg, var(--brand-2), var(--brand-3));
}
.j360-dir-avatar-ring img, .j360-dir-avatar-ring .j360-avatar-fallback {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex;
  align-items: center; justify-content: center; background: var(--surface); color: var(--muted); font-size: 1.4rem;
}
.j360-dir-role { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.6rem; }
.j360-dir-view {
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  font-size: 0.76rem; font-weight: 700; color: var(--brand-dark);
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem;
}
.j360-dir-card:hover .j360-dir-view { opacity: 1; transform: translateY(0); }

/* ---------- Document Generator ---------- */
.j360-stat-chip { background: #f9fafb; border: 1px solid #eef0f3; border-radius: .6rem; padding: .6rem .5rem; text-align: center; }
.j360-stat-chip-val { font-size: 1.15rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
.j360-stat-chip-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; margin-top: .15rem; }

.doc-wizard-steps { display: flex; gap: .5rem; }
.doc-wizard-step { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: #fff; border-radius: .6rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); font-size: .82rem; font-weight: 600; color: #9ca3af; }
.doc-wizard-step span { width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; flex-shrink: 0; }
.doc-wizard-step.active { color: var(--brand); }
.doc-wizard-step.active span { background: var(--brand); color: #fff; }
.doc-wizard-step.done { color: #16a34a; }
.doc-wizard-step.done span { background: #16a34a; color: #fff; }

.doc-cat-btn { padding: .6rem .5rem; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: .5rem; font-size: .82rem; font-weight: 600; color: #374151; cursor: pointer; text-align: center; transition: all .15s; }
.doc-cat-btn:hover { border-color: var(--brand); }
.doc-cat-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.doc-type-list { min-height: 40px; }
.doc-type-btn { display: inline-block; margin: 3px; padding: .4rem .75rem; border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; font-size: .8rem; cursor: pointer; }
.doc-type-btn:hover { border-color: var(--brand); }
.doc-type-btn.active { background: var(--brand-light); color: var(--brand); border-color: var(--brand); font-weight: 600; }

.doc-search-results { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; box-shadow: 0 8px 20px rgba(0,0,0,.1); max-height: 220px; overflow-y: auto; display: none; }
.doc-search-row { padding: .5rem .75rem; font-size: .85rem; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
.doc-search-row:hover { background: #f9fafb; }

.doc-tpl-card { display: flex; align-items: center; gap: .5rem; border: 1px solid #e5e7eb; border-radius: .5rem; padding: .5rem .6rem; cursor: pointer; font-size: .8rem; }
.doc-tpl-card input { margin: 0; }
.doc-tpl-swatch { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.doc-tpl-name { font-weight: 600; flex: 1; }
.doc-tpl-meta { font-size: .72rem; }
.doc-tpl-card:has(input:checked) { border-color: var(--brand); background: var(--brand-light); }

.doc-preview-card { position: sticky; top: 1rem; }
.doc-a4-preview { aspect-ratio: 210/297; background: #fff; border: 1px solid #e5e7eb; border-radius: .4rem; padding: 1rem; font-size: .78rem; overflow-y: auto; }
.doc-a4-header { display: flex; justify-content: space-between; border-bottom: 2px solid var(--brand); padding-bottom: .5rem; margin-bottom: .75rem; }
.doc-a4-org { font-weight: 700; color: var(--brand); font-size: .85rem; }
.doc-a4-doctype { font-weight: 600; color: #6b7280; }
.doc-a4-body p { margin: 0 0 .4rem; }
#documentMatter { font-family: Georgia, 'Times New Roman', serif; line-height: 1.6; }
.doc-matter-preview {
  font-family: Georgia, 'Times New Roman', serif; line-height: 1.8; font-size: 0.92rem; color: #1f2937;
  white-space: pre-wrap; background: #fbfbfa; border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 1.5rem 1.75rem; position: relative;
}
.doc-matter-preview::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--brand-dark), var(--brand-3)); border-radius: var(--radius) 0 0 var(--radius);
}
.doc-recipient-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--brand-2), var(--brand) 70%); color: #fff; font-weight: 800; font-size: 1.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .topbar-search { display: none !important; }
}

.sidebar-backdrop { display: none; }

/* Phones/tablets: the sidebar becomes a slide-in drawer, opened by the
   topbar's sidebar button, instead of a full-height block stacked above
   the page (which pushed every page's content off-screen). */
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar,
  .sidebar-collapsed .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform 0.25s ease, background-color 0.2s ease;
    z-index: 1045;
    padding-bottom: 0.75rem;
  }
  .sidebar-open .sidebar { transform: none; }
  .sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1040;
  }
  html.sb-lock, html.sb-lock body { overflow: hidden; }
  .topbar { gap: 0.4rem; }
  .topbar-title { font-size: 0.95rem; }
  .main-area { width: 100%; }
  .content { padding: 1.1rem; }
  .topbar { padding: 0.75rem 1.1rem; }
  .hero-banner { flex-direction: column; align-items: stretch; }
  .hero-quote { max-width: none; text-align: left; }
}

/* ---------- Customize panel -------------------------------------------- */
.cz-panel { width: 340px; }
.cz-panel .offcanvas-header { border-bottom: 1px solid var(--border-soft); }
.cz-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem;
}
.cz-help { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: 0.75rem 0 0; }

.cz-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.cz-sw {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent; padding: 0; cursor: pointer;
  background: var(--sw, #999);
  display: grid; place-items: center;
  color: #fff; font-size: 0.85rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.cz-sw i { opacity: 0; transform: scale(0.6); transition: all 0.14s var(--ease); }
.cz-sw:hover { transform: translateY(-2px); }
.cz-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.cz-sw.on i { opacity: 1; transform: scale(1); }
.cz-sw-custom {
  position: relative; overflow: hidden; cursor: pointer;
  background: conic-gradient(#ef4444, #f59e0b, #22c55e, #0ea5e9, #6366f1, #d946ef, #ef4444);
}
.cz-sw-custom input { position: absolute; inset: -6px; width: 200%; height: 200%; border: 0; padding: 0; cursor: pointer; opacity: 0; }

/* a live sample so the choice is judged in context, not as a dot */
.cz-preview { margin-top: 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.cz-preview-hero {
  padding: 0.85rem 0.95rem; color: #fff;
  background:
    radial-gradient(240px 120px at 92% -20%, rgba(255,255,255,0.20), transparent 62%),
    linear-gradient(118deg, var(--brand-dark) 0%, var(--brand) 58%, var(--brand-3) 158%);
}
.cz-preview-eyebrow {
  display: block; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75;
}
.cz-preview-hero strong { font-size: 0.95rem; }
.cz-preview-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.95rem; flex-wrap: wrap; }
.cz-preview-row a { font-size: 0.82rem; font-weight: 600; }
.cz-chip {
  font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 7px;
  color: var(--brand); background: var(--brand-light);
}
[data-bs-theme="dark"] .cz-chip { background: var(--brand-light); }
.cz-actions { margin-top: 1.1rem; }

/* ==========================================================================
   NEWS — editorial newsroom console
   --------------------------------------------------------------------------
   One page, three layouts (table / editorial / cards) sharing one visual
   language. Everything below is presentational and page-scoped under the
   nw- prefix; no selector here is required by any JS behaviour except
   .nw-pick / .is-picked, which the selection script toggles.

   No new colour tokens are invented: the page reads the app's existing
   design system (--surface-card, --border, --ink, --muted, --brand …) so
   dark mode, and the tenant's own accent from the Customize panel, both
   come through for free.
   ========================================================================== */

.nw {
  /* Page-local aliases. Named so the intent is readable at the use site,
     and so a future theme only has to move the app tokens. */
  --nw-surface:  var(--surface-card);
  --nw-hover:    color-mix(in srgb, var(--brand) 4%, transparent);
  --nw-line:     var(--border-soft);
  --nw-line-2:   var(--border);
  --nw-head-bg:  color-mix(in srgb, var(--surface) 65%, var(--surface-card));
  --nw-radius:   14px;
  /* Latin from Inter, Telugu from Noto Sans Telugu — one declaration, the
     browser picks per glyph, so headlines stay legible in both scripts. */
  --nw-type:     'Inter', 'Noto Sans Telugu', -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Header ------------------------------------------------------ */
.nw-count {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 9px; padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--brand);
  background: var(--brand-light);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  vertical-align: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Status strip ------------------------------------------------ */
.nw-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.nw-tab {
  flex: 1 1 0;
  min-width: 128px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 13px;
  border: 1px solid var(--nw-line-2);
  border-radius: 11px;
  background: var(--nw-surface);
  text-decoration: none;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.16s var(--ease);
}
.nw-tab:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--nw-line-2)); transform: translateY(-1px); }
.nw-tab-k {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.nw-tab-k i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nw-tab-v { font-size: 1.12rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.nw-tab.is-on { border-color: var(--brand); background: var(--brand-light); }
.nw-tab.is-on .nw-tab-v { color: var(--brand); }
.nw-tab.k-all   .nw-tab-k { color: var(--ink-soft); }
.nw-tab.k-ok    .nw-tab-k { color: #16a34a; }
.nw-tab.k-draft .nw-tab-k { color: #d97706; }
.nw-tab.k-hold  .nw-tab-k { color: #dc2626; }
.nw-tab.k-off   .nw-tab-k { color: #94a3b8; }
.nw-tab.k-all .nw-tab-k i { display: none; }

/* ---------- Panel ------------------------------------------------------- */
/* overflow stays visible so the row action menu can escape the panel;
   the corners are rounded on the cells instead of clipped here. */
.nw-panel {
  background: var(--nw-surface);
  border: 1px solid var(--nw-line-2);
  border-radius: var(--nw-radius);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
}
[data-bs-theme="dark"] .nw-panel { box-shadow: none; }

/* ---------- Toolbar ----------------------------------------------------- */
.nw-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--nw-line);
}
.nw-search { position: relative; flex: 1 1 240px; min-width: 190px; }
.nw-search > i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 0.86rem; color: var(--muted); pointer-events: none;
}
.nw-search input {
  width: 100%; height: 34px;
  padding: 0 12px 0 32px;
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--nw-line-2);
  border-radius: 9px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.nw-search input::placeholder { color: var(--muted); }
.nw-search input:focus {
  outline: 0; background: var(--nw-surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.nw-sel {
  width: auto;
  flex: 0 0 auto;
  max-width: 190px;
  height: 34px;
  padding: 0 28px 0 11px;
  font-size: 0.79rem; font-weight: 500;
  color: var(--ink-soft);
  background-color: var(--surface);
  border: 1px solid var(--nw-line-2);
  border-radius: 9px;
  background-position: right 9px center;
  background-size: 13px 10px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.nw-sel:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.nw-sel.is-set { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); background-color: var(--brand-light); font-weight: 600; }

.nw-go {
  height: 34px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.79rem; font-weight: 600;
  color: #fff; background: var(--brand);
  border: 1px solid var(--brand); border-radius: 9px;
  transition: filter 0.15s var(--ease);
}
.nw-go:hover { filter: brightness(1.06); color: #fff; }
.nw-clear {
  height: 34px; padding: 0 11px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--muted); background: none;
  border: 1px solid transparent; border-radius: 9px;
  text-decoration: none;
}
.nw-clear:hover { color: var(--brand); background: var(--brand-light); }

/* Segmented layout switcher */
.nw-seg {
  display: inline-flex; align-items: center;
  margin-left: auto;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--nw-line-2);
  border-radius: 10px;
  gap: 2px;
}
.nw-seg a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px;
  font-size: 0.74rem; font-weight: 600;
  color: var(--muted); text-decoration: none;
  border-radius: 7px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.nw-seg a i { font-size: 0.82rem; }
.nw-seg a:hover { color: var(--ink); }
.nw-seg a.on {
  color: var(--ink);
  background: var(--nw-surface);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}
[data-bs-theme="dark"] .nw-seg a.on { background: var(--surface-card); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.nw-seg a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- Bulk bar ---------------------------------------------------- */
.nw-bulk {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  font-size: 0.8rem; color: var(--ink);
  background: var(--brand-light);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
}
.nw-bulk strong { font-variant-numeric: tabular-nums; }

/* ---------- Table ------------------------------------------------------- */
.nw-wrap { border-radius: 0 0 var(--nw-radius) var(--nw-radius); }
.nw-table {
  width: 100%;
  font-family: var(--nw-type);
  border-collapse: separate;
  border-spacing: 0;
}
.nw-table thead th {
  position: sticky;
  /* clears the app's sticky topbar (min-height 58px) */
  top: 58px;
  z-index: 3;
  padding: 9px 12px;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  background: var(--nw-head-bg);
  border-bottom: 1px solid var(--nw-line-2);
  white-space: nowrap;
  text-align: left;
}
.nw-table thead th a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.nw-table thead th a:hover { color: var(--brand); }
.nw-table thead th i { font-size: 0.7rem; }
.nw-sort-idle { opacity: 0.3; }

.nw-table tbody td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--nw-line);
  vertical-align: middle;
  background: transparent;
}
.nw-table tbody tr { transition: background 0.16s var(--ease); }
.nw-table tbody tr:hover { background: var(--nw-hover); }
.nw-table tbody tr:hover .nw-title { color: var(--brand); }
.nw-table tbody tr.is-picked { background: var(--brand-light); }
.nw-table tbody tr:last-child td { border-bottom: 0; }
.nw-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--nw-radius); }
.nw-table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--nw-radius); }

.nw-check { width: 40px; }
.nw-check .form-check-input { margin: 0; cursor: pointer; }
.nw-col-num { width: 62px; }
.nw-num-cell { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.nw-col-tn { width: 76px; }
.nw-title-cell { min-width: 260px; max-width: 420px; }
.nw-col-act { width: 96px; }

/* Thumbnail */
.nw-tn {
  width: 52px; height: 42px;
  border-radius: 8px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--nw-line);
}
.nw-tn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-tn span {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 0.95rem;
  color: var(--cat, #94a3b8);
  background: color-mix(in srgb, var(--cat, #94a3b8) 11%, transparent);
}

/* Headline + summary */
.nw-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--nw-type);
  font-size: 0.9rem; font-weight: 600; line-height: 1.45;
  color: var(--ink); text-decoration: none;
  transition: color 0.15s var(--ease);
}
.nw-title:hover { color: var(--brand); }
.nw-excerpt {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-family: var(--nw-type);
  font-size: 0.75rem; font-weight: 400; line-height: 1.45;
  color: var(--muted);
}
/* reporter/date repeated under the headline, shown only once those
   columns are dropped on narrow screens */
.nw-inline-meta { display: none; margin-top: 6px; font-size: 0.7rem; color: var(--muted); gap: 10px; flex-wrap: wrap; }
.nw-inline-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Category badge */
.nw-cat {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--cat, #64748b) 78%, #0b1220);
  background: color-mix(in srgb, var(--cat, #64748b) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat, #64748b) 20%, transparent);
}
[data-bs-theme="dark"] .nw-cat {
  color: color-mix(in srgb, var(--cat, #94a3b8) 50%, #ffffff);
  background: color-mix(in srgb, var(--cat, #94a3b8) 22%, transparent);
  border-color: color-mix(in srgb, var(--cat, #94a3b8) 30%, transparent);
}

/* Reporter */
.nw-rep { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.nw-av {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark));
}
.nw-rep-name {
  font-size: 0.76rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}

/* Date */
.nw-date { white-space: nowrap; }
.nw-date span { display: block; font-size: 0.76rem; font-weight: 500; color: var(--ink-soft); }
.nw-date em { font-style: normal; font-size: 0.68rem; color: var(--muted); }

/* Status */
.nw-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600;
  color: var(--ink-soft); white-space: nowrap;
}
.nw-status i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.nw-status.is-ok    i { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.14); }
.nw-status.is-draft i { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.14); }
.nw-status.is-off   i { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,0.16); }
.nw-status.is-hold  i { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.14); }

/* Views — quiet at zero, present when it matters.
   NB: the <td> must stay a table-cell; only the inline badge flexes, or the
   cell drops out of the table's column grid and the row tears. */
td.nw-views {
  font-size: 0.76rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
span.nw-views {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.76rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
td.nw-views i, span.nw-views i { font-size: 0.85rem; opacity: 0.5; margin-right: 5px; }
span.nw-views i { margin-right: 0; }
.nw-views.is-zero { color: var(--muted); }

/* ---------- Row actions ------------------------------------------------- */
.nw-actions { display: inline-flex; align-items: center; gap: 5px; }
.nw-act {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.nw-act:hover { color: var(--brand); background: var(--brand-light); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.nw-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nw-act.is-danger:hover { color: #fff; background: #dc2626; border-color: #dc2626; }
.nw-table tbody tr:hover .nw-act,
.nw-table tbody tr:focus-within .nw-act { border-color: var(--nw-line-2); }
.nw-table tbody tr:hover .nw-act:hover { border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.nw-menu { --bs-dropdown-min-width: 10rem; padding: 5px; border-radius: 11px; border: 1px solid var(--nw-line-2); box-shadow: var(--shadow-md); background: var(--nw-surface); }
.nw-menu .dropdown-item { border-radius: 7px; font-size: 0.8rem; padding: 7px 10px; display: flex; align-items: center; gap: 9px; color: var(--ink-soft); }
.nw-menu .dropdown-item i { font-size: 0.9rem; opacity: 0.7; width: 15px; }
.nw-menu .dropdown-item:hover { background: var(--surface); color: var(--ink); }
.nw-menu .dropdown-item.is-danger { color: #dc2626; }
.nw-menu .dropdown-item.is-danger:hover { background: rgba(220,38,38,0.1); color: #dc2626; }
.nw-menu .dropdown-divider { margin: 4px 2px; border-color: var(--nw-line); }

/* ---------- Editorial rows --------------------------------------------- */
.nw-list { display: flex; flex-direction: column; }
.nw-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--nw-line);
  transition: background 0.16s var(--ease);
}
.nw-row:last-child { border-bottom: 0; }
.nw-row:hover { background: var(--nw-hover); }
.nw-row.is-picked { background: var(--brand-light); }
.nw-row-pick { display: flex; align-items: center; }
.nw-thumb {
  flex: 0 0 auto; width: 76px; height: 56px;
  border-radius: 9px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--nw-line);
}
.nw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-thumb-empty {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 1.1rem; color: var(--cat, #94a3b8);
  background: color-mix(in srgb, var(--cat, #94a3b8) 11%, transparent);
}
.nw-main { flex: 1 1 auto; min-width: 0; }
.nw-top { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; flex-wrap: wrap; }
.nw-meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 0.72rem; color: var(--muted); flex-wrap: wrap; }
.nw-meta span { display: inline-flex; align-items: center; gap: 5px; }
.nw-meta i { font-size: 0.8rem; opacity: 0.65; }
.nw-num { opacity: 0.5; font-variant-numeric: tabular-nums; }
.nw-row .nw-actions { flex: 0 0 auto; opacity: 0.45; transition: opacity 0.16s var(--ease); }
.nw-row:hover .nw-actions,
.nw-row:focus-within .nw-actions { opacity: 1; }
@media (hover: none) { .nw-row .nw-actions { opacity: 1; } }
.nw-list .nw-title { -webkit-line-clamp: 2; }

/* ---------- Cards ------------------------------------------------------- */
.nw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; padding: 14px; }
.nw-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--nw-line-2); border-radius: 12px;
  background: var(--nw-surface); overflow: hidden;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
}
.nw-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--nw-line-2)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.nw-card.is-picked { border-color: var(--brand); }
.nw-card-pick { position: absolute; top: 9px; left: 9px; z-index: 2; }
.nw-card-cover { position: relative; aspect-ratio: 16/10; background: var(--surface); }
.nw-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-card-cover > span:not(.nw-cat) {
  width: 100%; height: 100%; display: grid; place-items: center; font-size: 1.5rem;
  color: var(--cat, #94a3b8); background: color-mix(in srgb, var(--cat, #94a3b8) 11%, transparent);
}
.nw-card-cover .nw-cat { position: absolute; left: 9px; bottom: 9px; background: rgba(255,255,255,0.94); backdrop-filter: blur(4px); }
[data-bs-theme="dark"] .nw-card-cover .nw-cat { background: rgba(10,14,24,0.82); }
.nw-card-body { padding: 11px 13px 13px; flex: 1 1 auto; }
.nw-card-body .nw-excerpt { -webkit-line-clamp: 2; }
.nw-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.nw-date-inline { font-size: 0.7rem; color: var(--muted); margin-left: auto; }
.nw-card-actions { display: flex; gap: 5px; padding: 0 11px 11px; }

/* ---------- Footer / pagination ---------------------------------------- */
.nw-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--nw-line);
  font-size: 0.76rem; color: var(--muted);
}
.nw-foot strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.nw-foot .pagination { --bs-pagination-font-size: 0.78rem; margin: 0; }

/* ---------- Empty state ------------------------------------------------- */
.nw-empty { text-align: center; padding: 3.4rem 1.2rem; }
.nw-empty-ico {
  width: 58px; height: 58px; margin: 0 auto 1rem;
  display: grid; place-items: center;
  font-size: 1.5rem; color: var(--brand);
  background: var(--brand-light); border-radius: 16px;
}
.nw-empty h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 0.35rem; }
.nw-empty p { font-size: 0.82rem; color: var(--muted); margin: 0 0 1.1rem; }
.nw-empty-act { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- Responsive -------------------------------------------------- */
/* No horizontal scroller: columns are shed in order of importance and the
   reporter/date fold into the headline cell instead. */
@media (max-width: 1350px) {
  .nw-table .c-views { display: none; }
}
@media (max-width: 1180px) {
  .nw-table .c-num { display: none; }
}
@media (max-width: 1050px) {
  .nw-table .c-rep, .nw-table .c-date { display: none; }
  .nw-inline-meta { display: flex; }
}
@media (max-width: 760px) {
  .nw-table .c-cat { display: none; }
  .nw-table tbody td { padding: 11px 9px; }
  .nw-tn { width: 46px; height: 38px; }
  .nw-title { font-size: 0.86rem; }
  .nw-thumb { width: 60px; height: 46px; }
  .nw-seg { margin-left: 0; width: 100%; justify-content: space-between; }
  .nw-seg a { flex: 1; justify-content: center; }
  .nw-bar { padding: 10px; }
  .nw-tab { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 560px) {
  .nw-table .c-status { display: none; }
  .nw-row { flex-wrap: wrap; }
  .nw-row .nw-actions { margin-left: auto; }
}

/* ==========================================================================
   QUICKBAR — topbar search palette + notification bell
   --------------------------------------------------------------------------
   The search box used to be `<input readonly>` and the bell a button with no
   handler: both looked live and did nothing. These are the styles for the
   real ones. Page-scoped under qb-, reading the app's own tokens so dark
   mode and the tenant accent come through unchanged.
   ========================================================================== */

/* The topbar trigger is a button now, not an input. */
.topbar-search { cursor: text; text-align: left; }
.topbar-search > span {
  flex: 1 1 auto;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-search:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
/* As a <button> the shortcut hint wrapped onto two lines and stretched the
   trigger to 52px; it is one token, so it must not break. */
.topbar-search kbd { white-space: nowrap; flex: 0 0 auto; }

/* ---------- Bell ---------- */
.qb-bell { position: relative; }
.qb-dot {
  position: absolute; top: 3px; right: 3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  font-size: 0.58rem; font-weight: 700; line-height: 1;
  color: #fff; background: #dc2626;
  border: 2px solid var(--topbar-bg);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.qb-notes {
  width: 328px; padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  background: var(--surface-card);
  overflow: hidden;
}
.qb-notes-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.78rem;
}
.qb-notes-head strong { color: var(--ink); letter-spacing: 0.01em; }
.qb-refresh {
  width: 26px; height: 26px; display: grid; place-items: center;
  color: var(--muted); background: none; border: 0; border-radius: 7px;
  font-size: 0.85rem;
}
.qb-refresh:hover { color: var(--brand); background: var(--brand-light); }
.qb-notes-body { max-height: 340px; overflow-y: auto; }
.qb-notes-loading { padding: 2rem; text-align: center; color: var(--muted); }
.qb-notes-none { padding: 2.1rem 1rem; text-align: center; color: var(--muted); }
.qb-notes-none i { font-size: 1.5rem; color: #16a34a; display: block; margin-bottom: 0.5rem; }
.qb-notes-none p { margin: 0; font-size: 0.8rem; }

.qb-note {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.15s var(--ease);
}
.qb-note:last-child { border-bottom: 0; }
.qb-note:hover { background: var(--surface); }
.qb-note-i {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: 0.85rem;
}
.qb-note.is-hold  .qb-note-i { color: #dc2626; background: rgba(220, 38, 38, 0.10); }
.qb-note.is-draft .qb-note-i { color: #d97706; background: rgba(217, 119, 6, 0.12); }
.qb-note.is-ok    .qb-note-i { color: #16a34a; background: rgba(22, 163, 74, 0.12); }
.qb-note-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qb-note-t strong { font-size: 0.79rem; font-weight: 600; color: var(--ink); }
.qb-note-t em { font-style: normal; font-size: 0.71rem; color: var(--muted); line-height: 1.4; }

/* ---------- Command palette ---------- */
body.qb-lock { overflow: hidden; }

.qb-overlay {
  position: fixed; inset: 0; z-index: 1085;
  display: flex; justify-content: center;
  padding: 10vh 16px 16px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  animation: qbFade 0.13s var(--ease);
}
[data-bs-theme="dark"] .qb-overlay { background: rgba(2, 6, 14, 0.66); }
@keyframes qbFade { from { opacity: 0; } to { opacity: 1; } }

.qb-panel {
  width: 100%; max-width: 620px; align-self: flex-start;
  display: flex; flex-direction: column;
  max-height: 72vh;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: qbRise 0.16s var(--ease);
}
@keyframes qbRise { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

.qb-input {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.qb-input > i { font-size: 1rem; color: var(--muted); }
.qb-input input {
  flex: 1 1 auto;
  border: 0; background: none; outline: 0;
  font-size: 0.95rem; color: var(--ink);
  font-family: 'Inter', 'Noto Sans Telugu', sans-serif;
}
.qb-input input::placeholder { color: var(--muted); }
.qb-input input::-webkit-search-cancel-button { display: none; }
.qb-input kbd {
  font-size: 0.62rem; padding: 2px 6px; border-radius: 5px;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border);
}

.qb-results { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.qb-results.is-busy { opacity: 0.55; }
.qb-group {
  padding: 9px 10px 5px;
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
}
.qb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink);
}
.qb-item > i { flex: 0 0 auto; font-size: 0.92rem; color: var(--muted); width: 17px; text-align: center; }
.qb-item-t {
  flex: 1 1 auto; min-width: 0;
  font-family: 'Inter', 'Noto Sans Telugu', sans-serif;
  font-size: 0.85rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qb-item-m { flex: 0 0 auto; font-size: 0.7rem; color: var(--muted); }
.qb-item.on { background: var(--brand-light); color: var(--brand); }
.qb-item.on > i, .qb-item.on .qb-item-m { color: var(--brand); }

.qb-none { padding: 2.6rem 1rem; text-align: center; color: var(--muted); }
.qb-none i { font-size: 1.4rem; opacity: 0.5; display: block; margin-bottom: 0.55rem; }
.qb-none p { margin: 0; font-size: 0.82rem; }

.qb-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  font-size: 0.68rem; color: var(--muted);
}
.qb-foot kbd {
  font-size: 0.6rem; padding: 1px 5px; margin-right: 3px; border-radius: 4px;
  color: var(--muted); background: var(--surface-card); border: 1px solid var(--border);
}

@media (max-width: 575.98px) {
  .qb-overlay { padding: 6vh 10px 10px; }
  .qb-foot { display: none; }
  .qb-notes { width: calc(100vw - 24px); }
}

/* ==========================================================================
   REPORTS
   --------------------------------------------------------------------------
   Eleven report pages sharing one visual language, page-scoped under rp-.
   Reads the app's own tokens, so dark mode and the tenant accent from the
   Customize panel both arrive without a second palette to maintain.
   Chart colours are pulled from the same tokens at runtime (see _foot).
   ========================================================================== */

.rp {
  --rp-line: var(--border-soft);
  --rp-line-2: var(--border);
  --rp-radius: 14px;
}

/* ---------- Report tabs + range picker ---------- */
.rp-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.rp-tabs {
  display: flex; align-items: center; gap: 3px; flex: 1 1 auto;
  padding: 4px;
  background: var(--surface-card);
  border: 1px solid var(--rp-line-2);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.rp-tabs a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  font-size: 0.74rem; font-weight: 600;
  color: var(--muted); text-decoration: none;
  border-radius: 8px; white-space: nowrap;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.rp-tabs a i { font-size: 0.85rem; }
.rp-tabs a:hover { color: var(--ink); background: var(--surface); }
.rp-tabs a.on { color: #fff; background: var(--brand); }
.rp-tabs a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.rp-range { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.rp-range .nw-sel { max-width: 156px; }
.rp-range input[type="date"] { width: 142px; }

.rp-inline { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.rp-inline label { font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.rp-inline .nw-sel { width: auto; }
.rp-inline-now { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-left: auto; }

/* ---------- Stat strip ---------- */
.rp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.rp-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 15px;
  background: var(--surface-card);
  border: 1px solid var(--rp-line-2);
  border-radius: 12px;
  border-top: 3px solid var(--muted);
}
.rp-stat-k { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.rp-stat-v { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rp-stat-s { font-size: 0.68rem; color: var(--muted); }
.rp-stat.is-ok    { border-top-color: #16a34a; }
.rp-stat.is-draft { border-top-color: #d97706; }
.rp-stat.is-hold  { border-top-color: #dc2626; }
.rp-stat.is-off   { border-top-color: #94a3b8; }
.rp-stat.is-info  { border-top-color: var(--brand); }

/* ---------- Cards ---------- */
.rp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.rp-span2 { grid-column: span 2; }
@media (max-width: 1100px) {
  .rp-grid { grid-template-columns: 1fr; }
  .rp-span2 { grid-column: auto; }
}

.rp-card {
  background: var(--surface-card);
  border: 1px solid var(--rp-line-2);
  border-radius: var(--rp-radius);
  padding: 15px 16px 16px;
  margin-bottom: 12px;
  min-width: 0;
}
.rp-grid .rp-card { margin-bottom: 0; }
.rp-card > header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.rp-card > header h2 { font-size: 0.88rem; font-weight: 700; color: var(--ink); margin: 0; }
.rp-card > header span { font-size: 0.7rem; color: var(--muted); }
.rp-card > header a { font-size: 0.72rem; font-weight: 600; text-decoration: none; }

.rp-chart { position: relative; height: 248px; }
.rp-chart.is-sm { height: 196px; }

.rp-none { font-size: 0.82rem; color: var(--muted); text-align: center; padding: 2rem 1rem; margin: 0; }
.rp-sub { font-size: 0.72rem; color: var(--muted); }
.rp-ico { color: var(--muted); margin-right: 6px; font-size: 0.85rem; }

.rp-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 0.74rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--rp-line);
  border-radius: 10px;
}
.rp-note i { color: var(--brand); font-size: 0.85rem; margin-top: 1px; flex: 0 0 auto; }
.rp-note kbd {
  font-size: 0.66rem; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-card); border: 1px solid var(--rp-line-2); color: var(--ink-soft);
}

/* ---------- Tables ---------- */
.rp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.rp-table thead th {
  padding: 8px 10px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--rp-line-2);
}
.rp-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--rp-line);
  vertical-align: middle;
  color: var(--ink-soft);
}
.rp-table tbody tr:last-child td { border-bottom: 0; }
.rp-table tbody tr:hover { background: color-mix(in srgb, var(--brand) 3%, transparent); }
.rp-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-table .w1 { width: 34px; }
.rp-table strong { color: var(--ink); }
/* A -webkit-box collapses to min-content inside an auto-layout table, which
   squeezed Telugu headlines into a three-line sliver while the numeric
   columns kept all the room. The clamp lives on an inner box; the cell
   keeps a real minimum width. */
.rp-head-cell {
  min-width: 280px; max-width: 460px;
  font-family: 'Inter', 'Noto Sans Telugu', sans-serif;
  font-weight: 600; color: var(--ink);
}
.rp-head-cell > span, .rp-head-cell {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 900px) { .rp-head-cell { min-width: 180px; } }

/* Always on a <span> inside the cell, never on the <td> itself: an
   inline-grid td drops out of the table's column grid and shifts the whole
   row one column left. */
.rp-rank {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
  font-size: 0.66rem; font-weight: 700;
  color: var(--brand); background: var(--brand-light);
  font-variant-numeric: tabular-nums;
}

/* ---------- Rankings list ---------- */
.rp-rankings { list-style: none; margin: 0; padding: 0; }
.rp-rankings li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--rp-line);
  font-size: 0.8rem;
}
.rp-rankings li:last-child { border-bottom: 0; }
.rp-rank-n { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-rank-v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Meter ---------- */
.rp-meter {
  display: block; width: 100%; min-width: 70px; height: 6px;
  background: var(--surface); border-radius: 999px; overflow: hidden;
}
.rp-meter i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

/* ---------- Coverage gaps ---------- */
.rp-gaps { display: flex; flex-wrap: wrap; gap: 7px; }
.rp-gaps span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  font-size: 0.74rem; color: var(--ink-soft);
  background: var(--surface);
  border: 1px dashed var(--rp-line-2);
  border-radius: 8px;
}
.rp-gaps i { color: var(--muted); font-size: 0.78rem; }

/* ---------- Heatmap ---------- */
.rp-heat-wrap { overflow-x: auto; }
.rp-heat { border-collapse: separate; border-spacing: 2px; font-size: 0.6rem; }
.rp-heat th {
  font-size: 0.6rem; font-weight: 700; color: var(--muted);
  text-align: center; padding: 0 2px;
}
.rp-heat tbody th { text-align: right; padding-right: 7px; white-space: nowrap; }
.rp-heat td {
  width: 22px; height: 22px;
  text-align: center; vertical-align: middle;
  border-radius: 4px;
  color: transparent;
  background: var(--surface);
  background-image: linear-gradient(color-mix(in srgb, var(--brand) calc(var(--v, 0) * 100%), transparent),
                                    color-mix(in srgb, var(--brand) calc(var(--v, 0) * 100%), transparent));
}
.rp-heat td[style] { color: color-mix(in srgb, var(--ink) 80%, transparent); font-weight: 600; }
.rp-heat td[style*="--v:0.7"], .rp-heat td[style*="--v:0.8"],
.rp-heat td[style*="--v:0.9"], .rp-heat td[style*="--v:1"] { color: #fff; }

/* ---------- Print ---------- */
@media print {
  .sidebar, .topbar, .app-footer, footer, .no-print,
  .rp-bar, .page-head-actions, .qb-overlay, .qb-notes { display: none !important; }
  .app-shell, .main-area, .content { display: block !important; margin: 0 !important; padding: 0 !important; }
  body, .app-shell { background: #fff !important; }
  .rp-card, .rp-stat {
    border: 1px solid #d9dde5 !important;
    box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .rp-grid { display: block !important; }
  .rp-grid .rp-card { margin-bottom: 10px !important; }
  .rp-chart { height: 210px !important; }
  .rp-table { font-size: 0.72rem; }
  .rp-note { background: #f6f7f9 !important; }
  a[href]::after { content: none !important; }
  @page { margin: 12mm; }
}

/* ---------- One reporter ---------- */
.rp-who { display: flex; align-items: center; gap: 14px; }
.rp-who-av {
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark));
}
.rp-who-t { min-width: 0; flex: 1 1 auto; }
.rp-who-t h2 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.rp-who-t .rp-sub i { font-size: 0.78rem; }
.rp-who-link { text-decoration: none; }
.rp-who-link:hover .nw-rep-name { color: var(--brand); text-decoration: underline; }

/* ---------- PDF capture mode ----------
   html2canvas 1.4.1 cannot parse the `color(srgb …)` value Chrome resolves
   color-mix() to, so anything painted that way photographs black or
   vanishes. While `.rp-pdf` is on, those few places switch to flat colours.
   The class is added for the length of one screenshot and removed again. */
.rp-pdf .nw-cat {
  color: var(--cat, #334155) !important;
  background: #ffffff !important;
  border: 1px solid var(--cat, #cbd5e1) !important;
}
.rp-pdf .rp-table tbody tr:hover,
.rp-pdf .rp-row:hover { background: transparent !important; }
.rp-pdf .rp-heat td {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
.rp-pdf .rp-heat td[style] { font-weight: 700 !important; }
.rp-pdf .rp-note { background: #f6f7f9 !important; border-color: #e5e7eb !important; }
.rp-pdf .rp-note i { color: #dc2626 !important; }
.rp-pdf .rp-bar, .rp-pdf .page-head-actions, .rp-pdf .no-print { display: none !important; }
.rp-pdf .rp-card, .rp-pdf .rp-stat { box-shadow: none !important; border-color: #e1e5ec !important; }

/* ==========================================================================
   SETTINGS
   --------------------------------------------------------------------------
   The company's front door: two editable cards (profile and newsroom
   defaults) and a hub of tiles linking to the settings screens that already
   exist. Page-scoped under st-, reading the app's own tokens.
   ========================================================================== */

.st { --st-line: var(--border-soft); --st-line-2: var(--border); }

.st-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px) { .st-cols { grid-template-columns: 1fr; } }

.st-card {
  background: var(--surface-card);
  border: 1px solid var(--st-line-2);
  border-radius: 14px;
  padding: 16px 17px 17px;
  margin-bottom: 12px;
}
.st-cols .st-card { margin-bottom: 0; }
.st-card > header { margin-bottom: 14px; }
.st-card > header h2 { font-size: 0.9rem; font-weight: 700; color: var(--ink); margin: 0; }
.st-card > header span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

/* ---------- Fields ---------- */
.st-field { margin-bottom: 15px; }
.st-field label {
  display: block; margin-bottom: 5px;
  font-size: 0.76rem; font-weight: 600; color: var(--ink-soft);
}
.st-field .form-control, .st-field .form-select {
  font-size: 0.84rem;
  background: var(--surface);
  border: 1px solid var(--st-line-2);
  border-radius: 9px;
  color: var(--ink);
}
.st-field .form-control:focus, .st-field .form-select:focus {
  background: var(--surface-card);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.st-field small {
  display: block; margin-top: 5px;
  font-size: 0.71rem; line-height: 1.5; color: var(--muted);
}
.st-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--st-line); }

/* ---------- Read-only facts ---------- */
.st-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--st-line);
}
.st-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-facts span {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.st-facts em, .st-facts code {
  font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-facts code { font-size: 0.74rem; color: var(--ink-soft); }

.st-pill {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--st-line-2);
}
.st-pill.is-active    { color: #16a34a; background: rgba(22,163,74,.10);  border-color: rgba(22,163,74,.28); }
.st-pill.is-pending,
.st-pill.is-provisioning { color: #d97706; background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.28); }
.st-pill.is-suspended,
.st-pill.is-archived  { color: #dc2626; background: rgba(220,38,38,.10);  border-color: rgba(220,38,38,.28); }

.st-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; padding: 9px 11px;
  font-size: 0.72rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--st-line);
  border-radius: 9px;
}
.st-note i { color: var(--brand); font-size: 0.82rem; margin-top: 1px; flex: 0 0 auto; }

/* ---------- Hub tiles ---------- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(298px, 1fr)); gap: 9px; }

.st-tile {
  display: flex; align-items: flex-start; gap: 11px;
  width: 100%; text-align: left;
  padding: 12px 13px;
  background: var(--surface);
  border: 1px solid var(--st-line-2);
  border-radius: 11px;
  text-decoration: none;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.16s var(--ease);
}
.st-tile:hover {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--st-line-2));
  background: var(--surface-card);
  transform: translateY(-1px);
}
.st-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.st-tile-i {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 0.9rem; color: var(--brand);
  background: var(--brand-light);
}
.st-tile-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-tile-t strong {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink);
}
.st-tile-t em {
  font-style: normal; font-size: 0.72rem; line-height: 1.5; color: var(--muted);
}
.st-tile-go { flex: 0 0 auto; color: var(--muted); font-size: 0.8rem; margin-top: 9px; }
.st-tile:hover .st-tile-go { color: var(--brand); }

.st-ok   { color: #16a34a; font-size: 0.72rem; }
.st-todo { color: #d97706; font-size: 0.72rem; }

/* ==========================================================================
   PLATFORM DASHBOARD (pd-*)
   The Super Admin landing screen. Shares the app's tokens (--brand, --ink,
   --surface-card, --border) so it recolours with the tenant accent and
   follows [data-bs-theme="dark"] without a second set of rules.
   Purely presentational — no selector here is depended on by any JS.
   ========================================================================== */

/* ---------- Hero ---------- */
.pd-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: 1.5rem 1.65rem;
  margin-bottom: 1.1rem;
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 58%, var(--brand-3) 130%);
  box-shadow: 0 10px 30px var(--brand-glow);
}
.pd-hero-eyebrow {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}
.pd-hero-main h1 {
  /* app.css sets `h1,h2,... { color: var(--ink) }`, and a direct rule always
     beats the white this element would otherwise inherit from .pd-hero — so
     the platform name rendered near-black on the maroon end of the gradient. */
  color: #fff;
  margin: 0.2rem 0 0.25rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.pd-hero-main p { margin: 0; font-size: 0.8rem; opacity: 0.85; }

.pd-hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.pd-hero-health {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.18s var(--ease);
}
.pd-hero-health:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.pd-hero-health i { font-size: 1rem; }
.pd-hero-health.is-ok i { color: #bbf7d0; }
.pd-hero-health.is-watch i { color: #fde68a; }
.pd-hero-health span { display: flex; flex-direction: column; line-height: 1.2; }
.pd-hero-health strong { font-size: 0.78rem; font-weight: 700; }
.pd-hero-health em { font-style: normal; font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.75; }

.pd-hero-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.72rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.pd-btn:hover { background: rgba(255, 255, 255, 0.26); color: #fff; transform: translateY(-1px); }
.pd-btn.is-primary { background: #fff; color: var(--brand-dark); border-color: #fff; }
.pd-btn.is-primary:hover { background: #fff; color: var(--brand-dark); }

/* ---------- KPI tiles ---------- */
.pd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.pd-kpi {
  position: relative;
  display: block;
  padding: 1.05rem 1.1rem 0.95rem;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pd-kpi::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kpi, var(--brand));
  opacity: 0.9;
}
.pd-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--kpi, var(--brand)); }
.pd-kpi-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.55rem;
  border-radius: 9px;
  font-size: 0.95rem;
  color: var(--kpi, var(--brand));
  background: color-mix(in srgb, var(--kpi, var(--brand)) 12%, transparent);
}
/* The accent lives on the tile, so the rule strip, the icon and the hover
   border all read from one custom property. No :has() dependency. */
.pd-kpi.is-a { --kpi: var(--brand); }
.pd-kpi.is-b { --kpi: #059669; }
.pd-kpi.is-c { --kpi: #7c3aed; }
.pd-kpi.is-d { --kpi: #0284c7; }
.pd-kpi-k {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pd-kpi-v {
  display: block;
  margin: 0.12rem 0 0.2rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pd-kpi-s { display: block; font-size: 0.7rem; color: var(--muted); line-height: 1.35; }

/* ---------- Card shell ---------- */
.pd-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.95rem;
  overflow: hidden;
}
.pd-card > header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border-soft);
}
.pd-card > header h2 { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.pd-card > header span { font-size: 0.69rem; color: var(--muted); }
.pd-card > header a { margin-left: auto; font-size: 0.72rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pd-none { margin: 0; padding: 2rem 1rem; text-align: center; font-size: 0.8rem; color: var(--muted); }
.pd-note { margin: 0; padding: 0.7rem 1.1rem 0.9rem; font-size: 0.68rem; color: var(--muted); line-height: 1.5; }
.pd-more { margin: 0; padding: 0.65rem 1.1rem; font-size: 0.72rem; color: var(--muted); border-top: 1px solid var(--border-soft); }

/* ---------- Lifecycle ---------- */
.pd-life-bar {
  display: flex;
  height: 12px;
  margin: 1rem 1.1rem 0.9rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border-soft);
}
.pd-life-bar i { display: block; min-width: 4px; }
.pd-life-legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0 1.1rem 1.05rem;
}
.pd-life-legend li {
  display: grid;
  grid-template-columns: 10px auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: var(--surface);
}
.pd-life-legend li.is-zero { opacity: 0.5; }
.pd-life-legend i { grid-row: 1; width: 8px; height: 8px; border-radius: 3px; }
.pd-life-n { grid-column: 2; grid-row: 1; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.pd-life-l { grid-column: 2; grid-row: 2; font-size: 0.7rem; color: var(--ink-soft); }
.pd-life-p { grid-column: 2; grid-row: 3; font-size: 0.64rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Status colours, scoped: a bare .is-active would leak into every component
   in the app that uses that class name. */
.pd-life-bar i.is-active,  .pd-life-legend i.is-active,  .pd-dot.is-active  { background: #16a34a; }
.pd-life-bar i.is-pending, .pd-life-legend i.is-pending, .pd-dot.is-pending { background: #94a3b8; }
.pd-life-bar i.is-prov,    .pd-life-legend i.is-prov,    .pd-dot.is-prov    { background: #0284c7; }
.pd-life-bar i.is-susp,    .pd-life-legend i.is-susp,    .pd-dot.is-susp    { background: #d97706; }
.pd-life-bar i.is-arch,    .pd-life-legend i.is-arch,    .pd-dot.is-arch    { background: #dc2626; }

/* ---------- Two-column body ---------- */
/* Two columns, each ONE grid item holding a stack of cards — so a card
   added to the left never spills into the right. */
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 0.95rem; align-items: start; }
.pd-col { min-width: 0; }

/* ---------- Tenants table ---------- */
.pd-scroll { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.pd-table thead th {
  padding: 0.5rem 1.1rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.pd-table tbody td {
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--ink-soft);
}
.pd-table tbody tr:last-child td { border-bottom: 0; }
.pd-table tbody tr:hover { background: color-mix(in srgb, var(--brand) 3%, transparent); }
.pd-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-table .n strong { color: var(--ink); }
.pd-table th.pd-share { width: 110px; }

.pd-co { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; min-width: 170px; }
.pd-co span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pd-co strong { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.pd-co:hover strong { color: var(--brand); }
.pd-co em { font-style: normal; font-size: 0.64rem; color: var(--muted); letter-spacing: 0.02em; }

.pd-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.pd-dot.is-event { background: var(--brand); }

.pd-plan {
  display: inline-block;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--brand-dark);
  background: var(--brand-light);
  white-space: nowrap;
}
.pd-plan.is-none { color: var(--muted); background: var(--surface); }

.pd-meter { display: block; height: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.pd-meter i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

/* ---------- System checks ---------- */
.pd-checks { list-style: none; margin: 0; padding: 0; }
.pd-checks li {
  display: flex;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--border-soft);
}
.pd-checks li:last-child { border-bottom: 0; }
.pd-checks li > i { font-size: 0.72rem; margin-top: 0.22rem; }
.pd-checks li.is-ok > i { color: #16a34a; }
.pd-checks li.is-ready > i { color: #0284c7; }
.pd-checks li.is-warn > i { color: #d97706; }
.pd-checks span { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.pd-checks strong { font-size: 0.76rem; font-weight: 600; color: var(--ink); }
.pd-checks em { font-style: normal; font-size: 0.68rem; color: var(--muted); line-height: 1.4; }

/* ---------- Plan mix ---------- */
.pd-plans { list-style: none; margin: 0; padding: 0; }
.pd-plans li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.35rem;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--border-soft);
}
.pd-plans li:last-child { border-bottom: 0; }
.pd-plans-n { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.pd-plans-c { font-size: 0.68rem; color: var(--muted); text-align: right; white-space: nowrap; }
.pd-plans .pd-meter { grid-column: 1; grid-row: 2; }
.pd-plans-v { grid-column: 2; grid-row: 2; font-size: 0.72rem; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-plans li.is-none { grid-template-rows: auto; }
.pd-plans li.is-none .pd-plans-n { color: var(--muted); font-weight: 500; }

/* ---------- Feeds ---------- */
.pd-feed { list-style: none; margin: 0; padding: 0; }
.pd-feed li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid var(--border-soft);
}
.pd-feed li:last-child { border-bottom: 0; }
.pd-feed li > i { margin-left: 0.1rem; }
.pd-feed span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
.pd-feed strong { font-size: 0.76rem; font-weight: 600; color: var(--ink); }
.pd-feed em { font-style: normal; font-size: 0.64rem; color: var(--muted); }
.pd-feed time { font-size: 0.66rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .pd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-life-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pd-hero { padding: 1.2rem 1.1rem; }
  .pd-hero-main h1 { font-size: 1.3rem; }
  .pd-hero-side { width: 100%; }
  .pd-kpis { grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }
  .pd-life-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-table th.pd-share, .pd-table td.pd-share { display: none; }
}

/* ---------- Dark theme ---------- */
[data-bs-theme="dark"] .pd-life-legend li { background: rgba(255, 255, 255, 0.04); }
[data-bs-theme="dark"] .pd-table thead th { background: rgba(255, 255, 255, 0.03); }
[data-bs-theme="dark"] .pd-plan.is-none { background: rgba(255, 255, 255, 0.05); }
[data-bs-theme="dark"] .pd-btn.is-primary { color: #7f1d1d; }
/* The KPI accents are chosen for a white card; lift them on a dark one. */
[data-bs-theme="dark"] .pd-kpi.is-b { --kpi: #34d399; }
[data-bs-theme="dark"] .pd-kpi.is-c { --kpi: #a78bfa; }
[data-bs-theme="dark"] .pd-kpi.is-d { --kpi: #38bdf8; }
[data-bs-theme="dark"] .pd-checks li.is-ok > i { color: #34d399; }
[data-bs-theme="dark"] .pd-checks li.is-ready > i { color: #38bdf8; }
[data-bs-theme="dark"] .pd-checks li.is-warn > i { color: #fbbf24; }
[data-bs-theme="dark"] .pd-life-bar i.is-active,
[data-bs-theme="dark"] .pd-life-legend i.is-active,
[data-bs-theme="dark"] .pd-dot.is-active { background: #34d399; }

/* ==========================================================================
   PLATFORM USERS (pu-*)
   Companies and who runs them, plus the per-company login list. Reuses the
   pd-* card, table, dot and badge primitives; only the page header and the
   admin cell are new.
   ========================================================================== */

.pu-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.pu-head h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.2rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.pu-head h1 .pd-dot { width: 10px; height: 10px; }
.pu-head p { margin: 0; font-size: 0.76rem; color: var(--muted); max-width: 62ch; line-height: 1.5; }

.pu-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}
.pu-open {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease);
}
.pu-open:hover { border-color: var(--brand); color: var(--brand-dark); }

/* One row per admin: name, email, and the role that made them one. */
.pu-admins { list-style: none; margin: 0; padding: 0; }
.pu-admins li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.45rem; padding: 0.1rem 0; }
.pu-admins strong { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.pu-admins em { font-style: normal; font-size: 0.7rem; color: var(--muted); }
.pu-admins span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: var(--brand-light);
  padding: 0.08rem 0.36rem;
  border-radius: 999px;
}
.pu-noadmin { font-size: 0.74rem; color: var(--warning-ink); }

.pu-user { display: flex; flex-direction: column; line-height: 1.25; }
.pu-user strong { font-size: 0.79rem; font-weight: 600; color: var(--ink); }
.pu-user em { font-style: normal; font-size: 0.66rem; color: var(--muted); }
.pu-id { color: var(--muted); font-variant-numeric: tabular-nums; }

.pu-go { display: inline-flex; color: var(--muted); text-decoration: none; font-size: 0.85rem; }
.pd-table tbody tr:hover .pu-go { color: var(--brand); }

.pu-note { margin: 0.8rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.55; max-width: 80ch; }

@media (max-width: 640px) {
  .pu-head { flex-direction: column; align-items: flex-start; }
}

[data-bs-theme="dark"] .pu-noadmin { color: #fbbf24; }
[data-bs-theme="dark"] .pu-admins span,
[data-bs-theme="dark"] .pu-open { color: var(--brand); }

/* ---------- Platform users: sign-in flags and row actions ---------- */

.pu-flash {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.9rem;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  border: 1px solid transparent;
}
.pu-flash.is-ok  { color: var(--success-ink); background: var(--success-bg); border-color: rgba(5, 150, 105, 0.25); }
.pu-flash.is-bad { color: var(--danger-ink);  background: var(--danger-bg);  border-color: rgba(220, 38, 38, 0.25); }

/* Two small facts per login, not one ambiguous number. */
.pu-flag {
  display: inline-block;
  padding: 0.14rem 0.45rem;
  margin: 0.08rem 0.2rem 0.08rem 0;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pu-flag.is-ok   { color: var(--success-ink); background: var(--success-bg); border-color: rgba(5, 150, 105, 0.22); }
.pu-flag.is-warn { color: var(--warning-ink); background: var(--warning-bg); border-color: rgba(217, 119, 6, 0.22); }
.pu-flag.is-bad  { color: var(--danger-ink);  background: var(--danger-bg);  border-color: rgba(220, 38, 38, 0.22); }

.pu-acts { white-space: nowrap; }
.pu-act-f { display: inline; }
.pu-act {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.28rem 0.58rem;
  margin: 0.1rem 0.25rem 0.1rem 0;
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease);
}
.pu-act:hover { border-color: var(--ink-soft); color: var(--ink); }
.pu-act.is-go:hover   { color: var(--success-ink); border-color: var(--success); background: var(--success-bg); }
.pu-act.is-warn:hover { color: var(--warning-ink); border-color: var(--warning); background: var(--warning-bg); }
.pu-act.is-bad:hover  { color: var(--danger-ink);  border-color: var(--danger);  background: var(--danger-bg); }
/* Refused, not hidden: the reason is in the title and spelled out below the row. */
/* Armed by the first click; the second one submits. See company.php.
   Written with .pu-act twice so the armed state outranks .pu-act.is-bad:hover
   — the pointer is still on the button at the moment it arms. */
.pu-act.pu-act.is-armed,
.pu-act.pu-act.is-armed:hover {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
.pu-act.pu-act.is-warn.is-armed,
.pu-act.pu-act.is-warn.is-armed:hover {
  color: #fff;
  background: var(--warning);
  border-color: var(--warning);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

.pu-act.is-dead { cursor: not-allowed; opacity: 0.45; }
.pu-act.is-dead:hover { border-color: var(--border); color: var(--ink-soft); }

.pu-me {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.3rem;
  margin-left: 0.25rem;
}

.pu-table tbody tr.is-off td { opacity: 0.62; }
.pu-table tbody tr.is-off .pu-flag,
.pu-table tbody tr.is-off .pu-act { opacity: 1; }

.pu-why td {
  padding-top: 0 !important;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.69rem;
  color: var(--muted);
}
.pu-why td i { margin-right: 0.25rem; }
.pu-table tbody tr.pu-why:hover { background: transparent; }

[data-bs-theme="dark"] .pu-flash.is-ok,
[data-bs-theme="dark"] .pu-flag.is-ok   { color: #6ee7b7; background: rgba(16, 185, 129, 0.12); }
[data-bs-theme="dark"] .pu-flag.is-warn { color: #fcd34d; background: rgba(217, 119, 6, 0.14); }
[data-bs-theme="dark"] .pu-flash.is-bad,
[data-bs-theme="dark"] .pu-flag.is-bad  { color: #fca5a5; background: rgba(220, 38, 38, 0.14); }