/* =========================================================================
   Sahayak Product Design System — App shell + token-driven baselines (SHARED)
   -------------------------------------------------------------------------
   Generalised from static/css/ca/app.css into the product-neutral `sah-`
   namespace. Depends on shared/tokens.css (load it first).

   Scope:
     1. Reset + base typography (token-driven)
     2. The app SHELL: top bar (brand + nav + user menu), page container, footer
     3. Token-driven baselines so plain markup (cards, tables, buttons, banners,
        forms, badges, verdicts) inherits the system coherently.

   The shell + baselines are plain token-CSS, so a page renders with zero FOUC
   even before/without any utility layer.
   ========================================================================= */

/* ---- 1. Reset + base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sah-font-sans);
  font-size: var(--sah-text-base);
  line-height: var(--sah-leading-normal);
  color: var(--sah-text);
  background: var(--sah-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sah-space-3);
  color: var(--sah-gray-900);
  font-weight: var(--sah-weight-semibold);
  letter-spacing: var(--sah-tracking-tight);
  line-height: var(--sah-leading-snug);
}
h1 { font-size: var(--sah-text-3xl); font-weight: var(--sah-weight-bold); font-family: var(--sah-font-display); }
h2 { font-size: var(--sah-text-2xl); font-weight: var(--sah-weight-bold); font-family: var(--sah-font-display); }
h3 { font-size: var(--sah-text-xl); }
h4 { font-size: var(--sah-text-lg); }

p { margin: 0 0 var(--sah-space-3); }

a { color: var(--sah-link); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: var(--sah-text-sm); }
code, kbd, samp, .sah-mono { font-family: var(--sah-font-mono); font-size: 0.95em; }

:focus-visible { outline: none; box-shadow: var(--sah-ring); border-radius: var(--sah-radius-sm); }

/* ---- 2. APP SHELL -------------------------------------------------------- */

/* Top bar — sticky, hairline-bottom, surface background */
.sah-appbar {
  position: sticky;
  top: 0;
  z-index: var(--sah-z-header);
  display: flex;
  align-items: center;
  gap: var(--sah-space-6);
  min-height: var(--sah-header-height);
  padding: 0 var(--sah-space-6);
  /* Light + frosted: translucent off-white canvas with a blur behind it. */
  background: rgba(252, 252, 253, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--sah-border-width) solid var(--sah-border);
  box-shadow: none;
}

/* Brand lockup: mark + wordmark + product label */
.sah-brand { display: flex; align-items: center; gap: var(--sah-space-2); flex: 0 0 auto; }
.sah-brand:hover { text-decoration: none; }
.sah-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--sah-radius-md);
  background: var(--sah-brand);            /* per-product brand anchor */
  color: var(--sah-text-on-primary);
  font-weight: var(--sah-weight-bold);
  font-size: var(--sah-text-base);
  letter-spacing: -0.02em;
}
.sah-brand-name {
  font-family: var(--sah-font-display);
  font-weight: var(--sah-weight-bold);
  font-size: var(--sah-text-md);
  color: var(--sah-accent);                /* accent (deep-teal) wordmark */
  letter-spacing: var(--sah-tracking-tight);
}
.sah-brand-suffix {
  /* "Compliance" half of the unified wordmark — same size as the name, normal
     weight, muted colour (matches the marketing nav). No divider rule / no "S" box. */
  font-weight: var(--sah-weight-normal);
  font-size: var(--sah-text-md);
  color: var(--sah-text-muted);
}

/* Primary nav */
.sah-nav { display: flex; align-items: center; gap: var(--sah-space-1); flex: 1 1 auto; }
.sah-nav-link {
  display: inline-flex; align-items: center;
  padding: var(--sah-space-2) var(--sah-space-3);
  border-radius: var(--sah-radius-md);
  font-size: var(--sah-text-sm);
  font-weight: var(--sah-weight-medium);
  color: var(--sah-text-muted);
  transition: background var(--sah-transition-fast), color var(--sah-transition-fast);
}
.sah-nav-link:hover { background: var(--sah-surface-muted); color: var(--sah-text); text-decoration: none; }
.sah-nav-link.is-active { background: var(--sah-primary-50); color: var(--sah-primary-700); }

/* User menu (right cluster) */
.sah-usermenu { display: flex; align-items: center; gap: var(--sah-space-3); flex: 0 0 auto; }
.sah-usermenu-firm {
  display: inline-flex; align-items: center; gap: var(--sah-space-2);
  font-size: var(--sah-text-sm); font-weight: var(--sah-weight-medium);
  color: var(--sah-text);
}
.sah-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--sah-radius-full);
  background: var(--sah-primary-100); color: var(--sah-primary-700);
  font-size: var(--sah-text-xs); font-weight: var(--sah-weight-bold);
  text-transform: uppercase;
}

/* Page container — the consistent frame every page sits in */
.sah-page { flex: 1 1 auto; width: 100%; }
.sah-container {
  width: 100%;
  max-width: var(--sah-container-max);
  margin: 0 auto;
  padding: var(--sah-space-8) var(--sah-space-6);
}
.sah-page-head { margin-bottom: var(--sah-space-6); }
.sah-page-head h1 { margin-bottom: var(--sah-space-1); }
.sah-page-subtitle { color: var(--sah-text-muted); font-size: var(--sah-text-md); margin: 0; }

/* Footer */
.sah-footer {
  margin-top: auto;
  background: var(--sah-surface);
  border-top: var(--sah-border-width) solid var(--sah-border);
  color: var(--sah-text-muted);
  font-size: var(--sah-text-sm);
}
.sah-footer-inner {
  max-width: var(--sah-container-max); margin: 0 auto;
  padding: var(--sah-space-6);
  display: flex; flex-wrap: wrap; gap: var(--sah-space-3) var(--sah-space-6);
  align-items: center; justify-content: space-between;
}
.sah-footer a { color: var(--sah-text-muted); }
.sah-footer a:hover { color: var(--sah-text); }
.sah-footer-links { display: flex; flex-wrap: wrap; gap: var(--sah-space-2) var(--sah-space-4); align-items: center; }
.sah-footer .dpdpa-notice { margin: 0; }
.sah-footer .dpdpa-notice strong { color: var(--sah-success-700); }
.danger-link { color: var(--sah-error-600); }

/* ---- 3. TOKEN-DRIVEN BASELINES (plain markup inherits these) ------------- */

/* Buttons (.cta family kept as a compatibility alias of .sah-btn) */
.cta, .sah-btn-base {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sah-space-2);
  padding: var(--sah-space-2) var(--sah-space-4);
  border: var(--sah-border-width) solid transparent;
  border-radius: var(--sah-radius-md);
  font-family: inherit; font-size: var(--sah-text-sm); font-weight: var(--sah-weight-semibold);
  line-height: 1; cursor: pointer; text-decoration: none;
  transition: background var(--sah-transition-fast), border-color var(--sah-transition-fast), box-shadow var(--sah-transition-fast);
}
.cta:hover { text-decoration: none; }
.cta-primary {
  background: var(--sah-primary-600); color: var(--sah-text-on-primary); border-color: var(--sah-primary-600);
}
.cta-primary:hover { background: var(--sah-primary-700); border-color: var(--sah-primary-700); }
.cta-secondary {
  background: var(--sah-surface); color: var(--sah-text); border-color: var(--sah-border-strong);
}
.cta-secondary:hover { background: var(--sah-surface-muted); border-color: var(--sah-gray-400); }

/* Cards */
.sah-card {
  background: var(--sah-surface);
  border: var(--sah-border-width) solid var(--sah-border);
  border-radius: var(--sah-radius-lg);
  box-shadow: var(--sah-shadow-xs);
  padding: var(--sah-space-4);
}
/* Metric/summary cards on a dashboard */
.sah-summary-cards { display: flex; flex-wrap: wrap; gap: var(--sah-space-4) !important; }
.sah-summary-cards .sah-card {
  flex: 1 1 160px; display: flex; flex-direction: column; gap: var(--sah-space-1);
}
.sah-card-num { font-size: var(--sah-text-3xl); font-weight: var(--sah-weight-bold); color: var(--sah-gray-900); line-height: 1.1; }
.sah-card-label { font-size: var(--sah-text-sm); color: var(--sah-text-muted); }

/* Sections */
section { margin: 0 0 var(--sah-space-8); }
section > h2 { margin-bottom: var(--sah-space-4); }

/* Verdict colours (accessible) */
.verdict { font-weight: var(--sah-weight-semibold); }
.verdict-green { color: var(--sah-verdict-green); }
.verdict-amber { color: var(--sah-verdict-amber); }
.verdict-red   { color: var(--sah-verdict-red); }

/* Banners / flashes */
.sah-onboarding-banner {
  margin: 0 0 var(--sah-space-6); padding: var(--sah-space-4) var(--sah-space-5);
  border-radius: var(--sah-radius-lg);
  background: var(--sah-warning-bg); border: var(--sah-border-width) solid var(--sah-warning-border);
  color: var(--sah-warning-700);
}
.sah-onboarding-banner ul { margin: var(--sah-space-2) 0 0; padding-left: var(--sah-space-5); }

/* Forms (baseline; full component coverage in components.css) */
.form-row { margin-bottom: var(--sah-space-4); display: flex; flex-direction: column; }
.form-row label { font-size: var(--sah-text-sm); font-weight: var(--sah-weight-medium); color: var(--sah-text-muted); margin-bottom: var(--sah-space-1); }
.form-row input, .form-row select, .form-row textarea {
  padding: var(--sah-space-2) var(--sah-space-3);
  border: var(--sah-border-width) solid var(--sah-border-strong);
  border-radius: var(--sah-radius-md);
  font-family: inherit; font-size: var(--sah-text-base); color: var(--sah-text);
  background: var(--sah-surface);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--sah-primary-500); box-shadow: var(--sah-ring); outline: none; }

/* Calendar widget list */
.sah-calendar-widget ul { list-style: none; margin: 0; padding: 0; }
.sah-calendar-widget li {
  padding: var(--sah-space-3) var(--sah-space-4);
  background: var(--sah-surface);
  border: var(--sah-border-width) solid var(--sah-border);
  border-radius: var(--sah-radius-md);
  margin-bottom: var(--sah-space-2);
  font-size: var(--sah-text-sm);
}

/* Quick actions row */
.sah-quick-actions { display: flex; flex-wrap: wrap; gap: var(--sah-space-3) !important; }

/* Utility */
.sah-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sah-space-4); }

/* Responsive: collapse nav spacing on small screens */
@media (max-width: 720px) {
  .sah-appbar { gap: var(--sah-space-3); padding: 0 var(--sah-space-4); flex-wrap: wrap; }
  .sah-nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .sah-container { padding: var(--sah-space-6) var(--sah-space-4); }
}

/* =========================================================================
   +1 POLISH — MOBILE PASS + SHELL MICRO-INTERACTIONS (ADDITIVE)
   -------------------------------------------------------------------------
   Strictly additive: desktop (≥720px) rendering is byte-for-byte unchanged.
   These rules only (a) improve small-screen behaviour of the shared shell so
   it is genuinely usable on a phone — the mobile-first Indian audience — and
   (b) add subtle, reduced-motion-safe interaction polish. No existing rule is
   overridden at desktop width.
   ========================================================================= */

/* Smooth, motion-safe scrolling + tap highlight cleanup */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
a, button, .sah-btn, .sah-nav-link { -webkit-tap-highlight-color: transparent; }

/* Brand mark gets a faint press affordance fleet-wide (mark only, no layout). */
.sah-brand-mark { transition: transform var(--sah-transition-fast); }
.sah-brand:hover .sah-brand-mark { transform: scale(1.04); }

/* Tablet / small-laptop: tighten the page gutters before the phone breakpoint. */
@media (max-width: 1024px) {
  .sah-container { padding-left: var(--sah-space-5); padding-right: var(--sah-space-5); }
}

/* Phone pass (≤720px): make the shared SHELL + data surfaces phone-friendly.
   Only touches small screens, so nothing changes on desktop. */
@media (max-width: 720px) {
  /* App bar: keep brand + user menu on the first row, nav wraps below.
     "Compliance" stays visible on mobile — it is now part of the wordmark, not a
     droppable per-product suffix (matches the marketing nav on phones too). */
  .sah-usermenu { margin-left: auto; }
  .sah-usermenu-firm span:not(.sah-avatar) { display: none; }  /* avatar only */
  .sah-nav { gap: var(--sah-space-1); padding-bottom: var(--sah-space-2);
             -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sah-nav::-webkit-scrollbar { display: none; }
  .sah-nav-link { white-space: nowrap; }

  /* Wide data tables become horizontally scrollable instead of clipped. */
  .sah-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sah-table { min-width: 560px; }

  /* Summary/metric cards stack one-up so the numbers stay legible. */
  .sah-summary-cards .sah-card { flex-basis: 100%; }

  /* Footer stacks instead of cramming two columns. */
  .sah-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--sah-space-3); }

  /* Modals use (almost) the full width on a phone. */
  .sah-modal { padding: var(--sah-space-3); }
  .sah-modal-panel { max-width: 100%; }

  /* Headings step down so a long page title never overflows. */
  h1 { font-size: var(--sah-text-2xl); }
}

/* Very small phones (≤420px): give content the full gutter budget. */
@media (max-width: 420px) {
  .sah-container { padding-left: var(--sah-space-4); padding-right: var(--sah-space-4); }
  .sah-toast-container { left: var(--sah-space-4); right: var(--sah-space-4); max-width: none; }
}