/* ============================================================
   Zackgo Phase 2.14 — Production UI Polish
   Visual consistency, a11y, responsive. No business logic.
   Load AFTER page-specific CSS.
   ============================================================ */

:root {
  --zg-bg: #F8FAFC;
  --zg-card: #FFFFFF;
  --zg-text: #111827;
  --zg-text-2: #6B7280;
  --zg-border: #E5E7EB;
  --zg-accent: #F97316;
  --zg-success: #10B981;
  --zg-error: #EF4444;
  --zg-navy: #06231B;
  --zg-r-sm: 8px;
  --zg-r: 12px;
  --zg-r-lg: 16px;
  --zg-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --zg-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --zg-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
  --zg-focus: 0 0 0 3px rgba(245, 158, 11, 0.28);
}

/* ── Global overflow safety ── */
html { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
table { border-collapse: collapse; }

/* ── Focus (enterprise gold ring) ── */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--zg-accent) !important;
  outline-offset: 2px;
  box-shadow: var(--zg-focus);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--zg-accent) !important;
  outline-offset: 2px;
}

/* ── Skip link ── */
.zg-skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--zg-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--zg-r-sm);
  text-decoration: none;
}
.zg-skip-link:focus {
  left: 12px;
  outline: 2px solid var(--zg-accent);
  outline-offset: 2px;
}

/* ── Icon size consistency ── */
.nav-item-icon svg,
.zds-nav-item-icon svg,
.sb-nav .nav-icon svg {
  width: 16px;
  height: 16px;
}
.notif-btn svg,
.notif-bell-btn svg,
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* ── Notification dropdown alignment ── */
.zg-notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.topbar-right .zg-notif-wrap,
.topbar-right .notif-btn,
.topbar-right .notif-bell-btn {
  flex-shrink: 0;
}
.zg-notif-dropdown {
  transform-origin: top right;
}

/* Hide redundant unread dot when badge is present */
.notif-btn .nav-badge:not([style*="display: none"]):not([style*="display:none"]) ~ .notif-dot,
.notif-bell-btn .notif-bell-badge[style*="display: flex"] ~ .notif-bell-dot,
.notif-bell-btn .notif-bell-badge:not([style*="display: none"]):not([style*="display:none"]) + .notif-bell-dot {
  display: none !important;
}

/* Prefer badge over dual indicators — hide CSS mask bell when SVG present */
.notif-btn svg + .notif-dot { /* keep dot */ }
.notif-btn.has-svg-icon::before { display: none !important; content: none !important; }

/* ── Tables: horizontal scroll ── */
.table-wrap,
.tbl-wrap,
.zds-table-wrap,
.reports-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Cards / panels unified hover ── */
.card:hover,
.panel:hover,
.stat-card:hover,
.zds-card:hover,
.pub-card:hover {
  border-color: color-mix(in srgb, var(--zg-border) 70%, var(--zg-navy));
}

/* ── Empty states ── */
.empty-state,
.crm-empty,
.zds-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--zg-text-2);
}
.empty-state h3,
.crm-empty h3,
.zds-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--zg-text);
  margin-bottom: 6px;
}

/* ── Skeleton consistency ── */
.skeleton,
.zds-skeleton,
.skeleton-kpi {
  border-radius: var(--zg-r);
}

/* ── Modals a11y helpers ── */
.modal-overlay[aria-hidden="true"] { display: none !important; }
.modal .modal-close,
.modal-close {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--zg-r-sm);
}

/* ── Admin light theme token alignment ── */
[data-theme="light"] {
  --bg: #F8FAFC;
  --bg-2: #F1F5F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --border: #E5E7EB;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --amber: #F97316;
}

[data-theme="light"] .stat-card,
[data-theme="light"] .panel,
[data-theme="light"] .crm-card {
  background: #FFFFFF;
  border-color: #E5E7EB;
  border-radius: 16px;
  box-shadow: var(--zg-shadow-xs);
}

[data-theme="light"] .badge {
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Admin filters / search */
.admin-toolbar,
.crm-toolbar,
.zg-admin-act-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.admin-toolbar input[type="search"],
.admin-toolbar input[type="text"],
.crm-toolbar input,
.zg-notif-search {
  min-width: 0;
  max-width: 100%;
}

/* Admin modals responsive */
.modal {
  max-width: min(640px, calc(100vw - 32px)) !important;
  width: 100% !important;
  border-radius: 16px;
  box-shadow: var(--zg-shadow);
}

/* ── Executive polish ── */
.setup-check-item.optional .setup-check-label::after,
.setup-check-item.optional::after {
  content: none;
}
.setup-check-item.optional .setup-check-meta,
.setup-check-item.optional .check-label-optional {
  color: var(--zg-text-2);
  font-size: 11px;
  font-weight: 600;
}
.setup-check-item.optional {
  opacity: 0.92;
}
.setup-check-item.optional .setup-check-icon,
.setup-check-item.optional .check-icon {
  border-style: dashed;
}

.kpi-card .kpi-val,
.kpi-val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
#kpi-grid .kpi-val {
  font-size: clamp(20px, 2.2vw, 28px) !important;
}

.getting-started-card,
.company-profile-card,
.pro-lock-card,
.locked-feature-card {
  border-radius: 16px;
  border: 1px solid var(--zg-border, var(--border));
  box-shadow: var(--zg-shadow-xs);
}

/* Progress bars */
.progress-bar,
.zds-progress,
.setup-progress-track {
  height: 6px;
  border-radius: 100px;
  background: var(--zg-border, #E5E7EB);
  overflow: hidden;
}
.progress-bar > *,
.zds-progress-bar,
.setup-progress-fill {
  border-radius: 100px;
}

/* ── Clerk polish ── */
.deadline-banner {
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .deadline-countdown {
    margin-left: 0;
    width: 100%;
    text-align: left;
    padding-top: 8px;
    border-top: 1px solid #F0DCA8;
  }
}
.table-wrap.upload-history,
.history-table-wrap,
#tab-history .table-wrap {
  overflow-x: auto;
}
.period-btn.selected {
  box-shadow: 0 0 0 1px var(--zg-navy);
}
.period-btn:focus-visible {
  outline-offset: 2px;
}

/* Notice board / status widgets */
.status-widget,
.readonly-notice,
.deadline-banner {
  box-shadow: var(--zg-shadow-xs);
}

/* ── Public pages: force light enterprise (no OS dark invert) ── */
body.pub-page,
.pub-main,
.pub-container {
  background: #F8FAFC;
  color: #111827;
}

/* Soften footer contrast for readability while keeping intentional navy */
.pub-footer {
  background: #06231B;
}
.pub-footer-col-list a:focus-visible {
  color: #fff;
  outline-color: var(--zg-accent);
}

/* Public mobile menu button */
.pub-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #06231B;
  flex-shrink: 0;
}
.pub-nav-toggle svg { width: 20px; height: 20px; }
.pub-mobile-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}
.pub-mobile-sheet.open { display: block; }
.pub-mobile-sheet-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 88vw);
  height: 100%;
  background: #fff;
  padding: 24px 20px;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.pub-mobile-sheet-panel a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
}
.pub-mobile-sheet-panel a:hover { background: #F8FAFC; }
.pub-mobile-sheet-close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  /* Public nav — hide all desktop CTAs on mobile */
  .pub-nav-links { display: none; }
  .pub-nav-cta .pub-btn { display: none; }
  .pub-nav-cta { gap: 0; margin-left: auto; }
  .pub-nav-toggle { display: inline-flex; }

  /* Dashboard sidebars — unified mobile breakpoint */
  .sidebar { transform: translateX(-100%); }
  .sidebar.open,
  .sidebar.mobile-open { transform: translateX(0); }
  .main { margin-left: 0 !important; }
  .hamburger,
  .hamburger-clerk,
  .menu-toggle { display: inline-flex !important; }

  /* Topbar mobile layout */
  .topbar {
    padding: 0 16px !important;
    gap: 10px;
    min-height: 56px;
  }
  .topbar-left,
  .topbar-right {
    min-width: 0;
    flex-shrink: 1;
  }
  .topbar-title {
    font-size: 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
  }
  .topbar-user,
  .topbar-search,
  .topbar-chip { display: none !important; }

  /* Content padding */
  .content,
  .zds-content { padding: 16px !important; }

  /* Grids collapse */
  .upload-grid,
  .overview-top-grid,
  .content-grid,
  .kpi-grid,
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Settings layout */
  .settings-layout { grid-template-columns: 1fr !important; }
  .settings-nav {
    position: static !important;
    flex-direction: row !important;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .settings-nav-item { white-space: nowrap; flex-shrink: 0; }
}

/* ── Landing light-hero overrides (when .hero-light applied) ── */
.hero.hero-light {
  background: #F8FAFC !important;
  color: #111827 !important;
  min-height: auto !important;
  padding: 128px 40px 88px;
  border-bottom: 1px solid #E5E7EB;
}
@media (max-width: 900px) {
  .hero.hero-light {
    padding: 96px 20px 48px !important;
  }
}
@media (max-width: 640px) {
  .hero.hero-light {
    padding: 88px 16px 40px !important;
  }
}
.hero.hero-light .hero-bg::before {
  background:
    radial-gradient(ellipse 55% 45% at 88% 12%, rgba(249, 115, 22, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 12% 70%, rgba(15, 23, 42, 0.04) 0%, transparent 60%) !important;
}
.hero.hero-light .hero-bg::after {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, black 30%, transparent 80%);
}
.hero.hero-light h1 { color: #06231B !important; }
.hero.hero-light .hero-sub { color: #6B7280 !important; }
.hero.hero-light .hero-sub strong { color: #111827 !important; }
.hero.hero-light .hero-eyebrow {
  background: linear-gradient(135deg, #FFFFFF, #FFF7ED) !important;
  border-color: rgba(249, 115, 22, 0.22) !important;
  color: #64748B !important;
}
.hero.hero-light .hero-link {
  color: #06231B !important;
  border-bottom-color: #D1D5DB !important;
}
.hero.hero-light .trust-item { color: #6B7280 !important; }
.hero.hero-light .nav-sheet {
  background: rgba(248, 250, 252, 0.98) !important;
}
.hero.hero-light .nav-sheet a {
  color: #111827 !important;
  border-bottom-color: #E5E7EB !important;
}

/* Dark marketing sections → light enterprise */
.dark-section.section-light {
  background: #FFFFFF !important;
  color: #111827 !important;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
.dark-section.section-light h2,
.dark-section.section-light h3 { color: #06231B !important; }
.dark-section.section-light p { color: #6B7280 !important; }

/* ── Auth pages: reduce black panel dominance on small screens ── */
@media (max-width: 920px) {
  .left-panel {
    max-height: 220px;
    width: 100% !important;
    max-width: none !important;
  }
}

/* ── Responsive breakpoints ── */
@media (max-width: 320px) {
  .content, .zds-content, .pub-container { padding-left: 12px !important; padding-right: 12px !important; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-btn { justify-content: center; width: 100%; }
}

@media (max-width: 375px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .topbar-chip { display: none; }
}

@media (max-width: 768px) {
  .upload-grid,
  .overview-top-grid,
  .content-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1024px) {
  .upload-grid { grid-template-columns: 1fr !important; }
}

/* Prevent horizontal scroll from fixed min-widths */
@media (max-width: 640px) {
  .kpi-grid,
  .stat-grid { grid-template-columns: 1fr !important; }
  .three-col { grid-template-columns: 1fr !important; }
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px; }
  .tbl-wrap,
  .table-wrap,
  .crm-table-wrap,
  .upload-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .tbl, .upload-table, .zds-table, .crm-table {
    min-width: 520px;
  }
  .modal[style*="width"] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  .report-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
  .report-row-actions { flex-direction: row !important; width: 100%; justify-content: flex-end; }
  .pro-grid { grid-template-columns: 1fr !important; }
  .billing-hero { padding: 20px 16px !important; }
  .activation-banner-inner { padding: 18px 16px !important; }
  .deadline-banner { flex-wrap: wrap; }
  .deadline-countdown {
    margin-left: 0 !important;
    width: 100%;
    text-align: left;
    padding-top: 8px;
    border-top: 1px solid var(--border, #E5E7EB);
  }
  .ob-step-label { display: none; }
  .two-col { grid-template-columns: 1fr !important; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Screen reader only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}