/* ============================================================================
 * DHANAM CUSTOMER-APP THEME  (Figma "Customer Facing Dhanam App" re-skin)
 * ----------------------------------------------------------------------------
 * Loaded LAST in index.html, so its cascade wins over styles.css +
 * dhanam-theme.css. Everything here is either:
 *   (a) a --dh-* design token,
 *   (b) a .dh-* component class (inert until used by a converted screen), or
 *   (c) a rule scoped to `body.dh-customer` (added on customer login only).
 * Staff / prospect screens are NEVER affected (they don't get .dh-customer).
 *
 * Owner: Claude Code. Ink + antique-gold palette, Inter body + Playfair
 * Display headings. Lifted verbatim from the approved POC (_skin_poc/).
 * PR 1 of the screen-by-screen re-skin: foundation only — no screen markup
 * is converted yet; later PRs rewrite each cust*Screen to use .dh-* parts.
 * ==========================================================================*/

:root {
  /* Palette — exact values from the Figma theme.css */
  --dh-bg:        #FFFFFF;
  --dh-ink:       #0A0A0A;
  --dh-soft:      #3A3A3A;
  --dh-muted:     #8A8A8A;
  --dh-muted2:    #6B6B6B;
  --dh-faint:     #C4C4C4;
  --dh-faint2:    #AAAAAA;
  --dh-gold:      #C9962A;
  --dh-gold-light:#E8C96A;
  --dh-gold-dim:  rgba(201,150,42,0.10);
  --dh-gold-dim2: rgba(201,150,42,0.12);
  --dh-gold-border:rgba(201,150,42,0.25);
  /* Dark-gold card surface (replaces the old pure-black cards). Warm bronze
     gradient — light text + light-gold accents read cleanly on it. */
  --dh-cardgrad:  linear-gradient(150deg, #6E5320 0%, #503C15 50%, #3A2B0E 100%);
  --dh-oncard-muted: rgba(255,246,230,0.66);
  --dh-error:     #D94040;
  --dh-error-dim: rgba(217,64,64,0.08);
  --dh-success:   #1A7F4B;
  --dh-success-dim:rgba(26,127,75,0.08);
  --dh-warn:      #C05C00;
  --dh-warn-dim:  rgba(192,92,0,0.08);
  --dh-surface:   #F6F6F6;
  --dh-surface2:  #F8F8F8;
  --dh-border:    rgba(0,0,0,0.08);
  --dh-border2:   rgba(0,0,0,0.07);
  --dh-serif:     'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Cross-device parity: font/spacing scales for Android WebView text rendering differences.
     iOS WKWebView (iPhone) is the design reference (scale = 1.0).
     Android WebView renders text wider and with more line-height by default.
     These variables are overridden in html.platform-android to compress layout. */
  --dh-font-scale: 1;
  --dh-card-pad-scale: 1;
  --dh-line-height-tight: 1.35;
  --dh-line-height-normal: 1.45;
  --dh-letter-spacing-tight: 0;
}

/* ---------------------------------------------------------------------------
 * ANDROID PLATFORM PARITY — WebView text rendering compensation.
 * Android WebView renders fonts with different metrics than iOS WKWebView.
 * This parity layer tightens text rendering on Android to match iPhone layout. */
html.platform-android {
  --dh-font-scale: 0.96;
  --dh-card-pad-scale: 0.95;
  --dh-line-height-tight: 1.30;
  --dh-line-height-normal: 1.40;
  --dh-letter-spacing-tight: -0.02em;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

html.platform-android body {
  letter-spacing: -0.3px;
  word-spacing: -0.5px;
}

/* ---------------------------------------------------------------------------
 * LOGIN SCREEN — Figma "Customer Facing Dhanam App" white+gold.
 * NOT scoped to body.dh-customer (the login shows pre-login, before that class
 * is set), so these rules are targeted at #loginScreen specifically.
 * ------------------------------------------------------------------------- */
#loginScreen #loginLogo img { width: 150px; max-width: 62%; height: auto; }
#loginScreen #loginPanelTitle {
  font-family: var(--dh-serif);
  font-weight: 700; letter-spacing: -0.01em; color: var(--dh-ink);
}
/* phone-first OTP form: gold primary button to match the landing */
#loginScreen #loginSubmitBtn {
  background: var(--dh-gold); color: var(--dh-ink); border: none; border-radius: 14px;
  font-weight: 700; box-shadow: 0 4px 16px rgba(201,150,42,.30);
}
#loginScreen #loginSubmitBtn:hover { background: var(--dh-gold); filter: brightness(0.97); }
/* signup lives on the landing now — hide the redundant in-form "Sign Up" button */
#loginScreen #loginSignupBtn { display: none !important; }
/* rounder inputs to match the design */
#loginScreen .login-input-wrap { border-radius: 13px; }

/* ---------------------------------------------------------------------------
 * FLOW CHROME — apply/signup wizard shell (Dhanam theme). The wizard opens for
 * logged-in customers; the .dh-wizmodal class is added to its .modal.
 * ------------------------------------------------------------------------- */
.dh-wizmodal { border-radius: 20px; }
.dh-wizmodal .modal-header h2 {
  font-family: var(--dh-serif);
  font-weight: 700; color: var(--dh-ink); font-size: 18px; letter-spacing: -0.01em;
}
/* Generic step bodies: dh-ify the form fields across EVERY wizard step at once
   (identity / address / nominee / kyc inputs / review …) without touching each
   renderer. Custom inline-styled boxes (product banner, KYC consent boxes) get
   their own per-renderer passes. */
.dh-wizmodal #wizContent h3 {
  font-family: var(--dh-serif); font-weight: 700; color: var(--dh-ink);
  font-size: 16px; margin: 0 0 14px; letter-spacing: -0.01em;
}
.dh-wizmodal .form-group label { color: var(--dh-soft); font-weight: 600; font-size: 13px; }
.dh-wizmodal #wizContent input,
.dh-wizmodal #wizContent select,
.dh-wizmodal #wizContent textarea {
  border: 1.5px solid var(--dh-border); border-radius: 13px; background: var(--dh-bg);
  color: var(--dh-ink); font-size: 16px; padding: 12px 14px; box-sizing: border-box;
}
.dh-wizmodal #wizContent input:focus,
.dh-wizmodal #wizContent select:focus,
.dh-wizmodal #wizContent textarea:focus {
  outline: none; border-color: var(--dh-gold); box-shadow: 0 0 0 3px var(--dh-gold-dim);
}
/* generic in-body buttons (Verify Aadhaar etc.) → gold, unless already a dh-btn */
.dh-wizmodal #wizContent .btn-primary:not(.dh-btn) {
  background: var(--dh-gold); color: var(--dh-ink); border: none; border-radius: 13px;
  font-weight: 700; box-shadow: 0 4px 14px rgba(201,150,42,.28);
}

/* Offline-payment + similar dynamically-built flow modals (cheque / cash …).
   Tag the modal's inner box with .dh-flowmodal; this dh-ifies its inline-styled
   inputs + buttons via !important (the file inputs keep a dashed upload look,
   and the load-bearing capture="environment" attribute is untouched). */
.dh-flowmodal h2,
.dh-flowmodal h3 { font-family: var(--dh-serif); font-weight: 700; color: var(--dh-ink); letter-spacing: -0.01em; }
/* Card + chrome polish so a legacy-markup .modal tagged .dh-flowmodal reads as
   the customer theme (rounded card, gold header rule, dh-radius footer). */
.dh-flowmodal { border-radius: 18px !important; }
.dh-flowmodal .modal-header { border-bottom: 1px solid var(--dh-border) !important; }
.dh-flowmodal .modal-footer { border-top: 1px solid var(--dh-border) !important; }
.dh-flowmodal input:not([type=file]),
.dh-flowmodal select,
.dh-flowmodal textarea {
  border: 1.5px solid var(--dh-border) !important; border-radius: 13px !important;
  background: var(--dh-bg) !important; color: var(--dh-ink) !important;
}
.dh-flowmodal input:not([type=file]):focus,
.dh-flowmodal select:focus,
.dh-flowmodal textarea:focus {
  outline: none !important; border-color: var(--dh-gold) !important;
  box-shadow: 0 0 0 3px var(--dh-gold-dim) !important;
}
.dh-flowmodal input[type=file] {
  border: 1.5px dashed var(--dh-border) !important; border-radius: 12px !important;
  background: var(--dh-surface) !important;
}
.dh-flowmodal .btn-primary {
  background: var(--dh-gold); color: var(--dh-ink); border: none; border-radius: 13px;
  font-weight: 700; box-shadow: 0 4px 14px rgba(201,150,42,.28);
}
.dh-flowmodal .btn-secondary { border-radius: 13px; }

/* ---------------------------------------------------------------------------
 * (c) SCOPED BASE — customer experience only.
 * Conservative: white surface + Playfair on the existing heading hooks so the
 * foundation reads as an upgrade even before screens are individually rebuilt.
 * ------------------------------------------------------------------------- */
body.dh-customer #appContainer { background: var(--dh-bg); }

body.dh-customer .welcome-title {
  font-family: var(--dh-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dh-ink);
}
body.dh-customer .welcome-sub { color: var(--dh-muted); }

/* Section titles inside customer screens pick up the serif display face. */
body.dh-customer .cust-screen .section-title,
body.dh-customer [id^="cust"] .section-title {
  font-family: var(--dh-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Gold becomes the single accent on customer screens. */
body.dh-customer { --accent: var(--dh-gold); }

/* ===========================================================================
 * (b) COMPONENT LIBRARY — .dh-* classes (namespaced; inert until used).
 * These are the building blocks the per-screen PRs assemble into the Figma
 * layouts. Ported verbatim from the approved _skin_poc.
 * =========================================================================*/

/* — typography helpers — */
.dh-serif { font-family: var(--dh-serif); }
.dh-row   { display: flex; align-items: center; }
.dh-between { justify-content: space-between; }

/* — buttons — */
.dh-btn {
  width: 100%; padding: 16px 0; border-radius: 14px; border: none;
  font-size: 15px; font-weight: 700; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.dh-btn-gold    { background: var(--dh-gold); color: var(--dh-ink); box-shadow: 0 4px 16px rgba(201,150,42,.30); }
.dh-btn-outline { background: var(--dh-bg); border: 1.5px solid var(--dh-border); color: var(--dh-ink); font-weight: 600; }
.dh-btn-dark    { background: var(--dh-ink); color: #fff; }
/* Disabled state — was invisible (button looked clickable but wasn't),
   which made the PL apply screen feel broken ("Confirm & continue does
   nothing" — Suren report 2026-06-21). Now the customer sees the dim
   state immediately. */
.dh-btn:disabled,
.dh-btn[disabled] { opacity: .45; box-shadow: none; cursor: not-allowed; filter: grayscale(.25); }

/* — cards — */
.dh-card     { background: var(--dh-bg); border: 1.5px solid var(--dh-border2); border-radius: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.dh-darkcard { background: var(--dh-cardgrad); border-radius: 20px; padding: 24px 22px; color: #fff; }
.dh-darkcard .dh-cap { font-size: 13px; color: var(--dh-oncard-muted); }
.dh-darkcard .dh-big { font-family: var(--dh-serif); font-size: 34px; font-weight: 700; color: #fff; margin: 4px 0; }

/* — portfolio hero card (Home) — */
.dh-pcard  { background: var(--dh-cardgrad); border-radius: 22px; padding: 22px 20px 18px; box-shadow: 0 8px 28px rgba(80,60,21,.28); }
.dh-pcap   { color: var(--dh-oncard-muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.dh-pval   { color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.1; margin: 4px 0 8px; }
.dh-ppill  { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,243,212,0.14); border: 1px solid rgba(232,201,106,0.40); border-radius: 20px; padding: 3px 10px; font-size: 11px; color: var(--dh-gold-light); font-weight: 600; }
.dh-pstats { display: flex; border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px; margin-top: 16px; }
.dh-pstat  { flex: 1; }
.dh-pstat + .dh-pstat { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.07); margin-left: 14px; }
.dh-pstat .l { color: var(--dh-oncard-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.dh-pstat .v { font-size: 13px; font-weight: 600; margin-top: 2px; }

/* — portfolio carousel (Home): 4 swipeable dark cards, one card per view — */
.dh-pcarousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 6px 0 10px; }
.dh-pcarousel::-webkit-scrollbar { display: none; }
.dh-pcard-slide { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; scroll-snap-align: center; cursor: pointer; }
.dh-pcard-slide:active { transform: scale(0.992); }
.dh-pcard-soon { opacity: .6; cursor: default; }
.dh-pcard-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--dh-gold-light); }
.dh-pdots { display: flex; gap: 6px; justify-content: center; margin: 0 0 18px; }
.dh-pdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dh-faint); transition: all .2s; }
.dh-pdots i.dh-active { width: 18px; border-radius: 3px; background: var(--dh-gold); }

/* Announcement slides — side-scroll carousel (root/HO published). */
/* align-items: flex-start so each slide sizes to its OWN content. A two-line
   announcement renders in a small box; a long one grows. JS resizes the
   carousel container to the active slide's height on swipe so the page
   doesn't leave whitespace below short slides. */
/* overflow-y: hidden is LOAD-BEARING — CSS spec auto-derives `overflow-y: auto`
   when overflow-x is set to a scrolling value. Without the explicit hidden, a
   tall slide produces a vertical scroll INSIDE the carousel (customers can
   scroll within a single announcement card, which they shouldn't). */
.dh-anncarousel { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 6px 0 10px; transition: height .22s ease; }
.dh-anncarousel::-webkit-scrollbar { display: none; }
.dh-annslide { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; scroll-snap-align: center; align-self: flex-start;
  background: var(--dh-card, #fff); border: 1px solid var(--dh-border, rgba(0,0,0,.08)); border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  display: flex; flex-direction: column; min-height: 120px; position: relative; }
.dh-annmedia { width: 100%; aspect-ratio: 16 / 9; background: var(--dh-surface, #F3EFE6); overflow: hidden; flex: 0 0 auto; }
.dh-anntext { padding: 14px 16px 16px; flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* Optional "highlight" mode — admin toggles per announcement. Pulsing gold
   border + warm gradient background + lifted shadow. Animation defaults to
   ~2s pulse; respects prefers-reduced-motion so a tired phone or screen-
   reader user gets the bright look without the motion. */
.dh-annslide--highlight {
  background: linear-gradient(135deg, #FFF8E7 0%, #FFEFC2 100%);
  border-color: var(--dh-gold, #C9962A);
  box-shadow: 0 4px 16px rgba(201, 150, 42, 0.25);
  animation: dh-annPulse 2.4s ease-in-out infinite;
}
.dh-annslide--highlight .dh-anntitle { color: #6B4A0E; }
.dh-annslide--highlight .dh-annbody  { color: #6B4A0E; opacity: 0.85; }
.dh-annslide--highlight::before {
  content: ""; position: absolute; inset: -2px; border-radius: 18px; pointer-events: none;
  border: 2px solid rgba(201, 150, 42, 0.45);
  animation: dh-annPulseBorder 2.4s ease-in-out infinite;
}
@keyframes dh-annPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(201, 150, 42, 0.25); }
  50%      { box-shadow: 0 6px 22px rgba(201, 150, 42, 0.55); }
}
@keyframes dh-annPulseBorder {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.005); }
}
@media (prefers-reduced-motion: reduce) {
  .dh-annslide--highlight,
  .dh-annslide--highlight::before { animation: none; }
}
/* Text-only slide: centre the text inside the box; padding scales with content. */
.dh-annslide--textonly .dh-anntext {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px;
}
/* Rich-text body — let the announcement's own inline styling (font-size /
   font-family / bold / italic / underline) render. white-space: pre-line
   keeps legacy plain-text bodies wrapping at their \n. */
.dh-annbody b, .dh-annbody strong { font-weight: 700; }
.dh-annbody i, .dh-annbody em { font-style: italic; }
.dh-annbody u { text-decoration: underline; }
.dh-annbody span { display: inline; }
.dh-annslide--textonly .dh-anntag, .dh-annslide--textonly .dh-anntitle,
.dh-annslide--textonly .dh-annbody, .dh-annslide--textonly .dh-annlink { text-align: center; }
.dh-anntag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; margin-bottom: 6px; }
.dh-anntitle { font-family: var(--dh-serif, 'Playfair Display', serif); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--dh-ink, #0A0A0A); letter-spacing: -.01em; }
.dh-annbody { font-size: 13px; color: var(--dh-muted2, #6B6B6B); line-height: 1.55; margin-top: 6px; white-space: pre-line; }
.dh-annlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--dh-gold, #C9962A); text-decoration: none; }

/* Flashing-text palettes — deep base pulses to a bright glow and back, ~2s
   per cycle. Used as <span class="ann-flash ann-flash-<palette>"> on the
   accent words inside an announcement body. Defined here for the customer
   carousel; the staff editor injects identical keyframes into its modal so
   the preview matches. `prefers-reduced-motion` users see a static colour. */
.ann-flash { animation: ann-flash-cycle 2s ease-in-out infinite; font-weight: 700; }
.ann-flash-gold  { --c1:#A07816; --c2:#FFD96B; color: var(--c1); }
.ann-flash-ocean { --c1:#0E7490; --c2:#5EE9F4; color: var(--c1); }
.ann-flash-rose  { --c1:#8E2745; --c2:#FF8AAB; color: var(--c1); }
.ann-flash-mint  { --c1:#1F6E54; --c2:#7DF1C2; color: var(--c1); }
.ann-flash-royal { --c1:#3F35A8; --c2:#B5A8FF; color: var(--c1); }
@keyframes ann-flash-cycle {
    0%, 100% { color: var(--c1); text-shadow: none; }
    50%      { color: var(--c2); text-shadow: 0 0 8px var(--c2); }
}
@media (prefers-reduced-motion: reduce) {
    .ann-flash { animation: none; }
}

/* "Chat now" floating button — customer only, anchored above the tab bar. */
#custChatFab { display: none; }
body.dh-customer #custChatFab,
body.dh-prospect #custChatFab {
  position: fixed; right: 16px; z-index: 1200;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 16px);
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: none; border-radius: 50%; background: var(--dh-gold, #C9962A); color: var(--dh-ink, #0A0A0A);
  cursor: grab; touch-action: none;
  box-shadow: 0 8px 22px rgba(201,150,42,.40), 0 2px 6px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .12s ease,
              left .18s ease, right .18s ease, top .18s ease, bottom .18s ease;
}
body.dh-customer #custChatFab:active,
body.dh-prospect #custChatFab:active { transform: scale(.96); }
body.dh-customer #custChatFab.dh-fab-dragging,
body.dh-prospect #custChatFab.dh-fab-dragging {
  cursor: grabbing; transform: scale(1.08);
  box-shadow: 0 14px 32px rgba(201,150,42,.50), 0 4px 10px rgba(0,0,0,.20);
  transition: none;
}
body.dh-customer #custChatFab:disabled,
body.dh-prospect #custChatFab:disabled { opacity: .6; cursor: default; }
#custChatFab .dh-fabicon { display: inline-flex; }
#custChatFab .dh-fablabel,
#custCallFab .dh-fablabel { display: none; }

/* — portfolio card: gold sparkline + eye (hide/show values) — */
.dh-pcard { position: relative; }
.dh-spark { margin: 14px 0 2px; height: 40px; }
.dh-eye { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.06); border: none; display: flex; align-items: center; justify-content: center; color: var(--dh-faint2); cursor: pointer; z-index: 2; padding: 0; }
.dh-eye:active { background: rgba(255,255,255,.12); }
body.dh-values-hidden .dh-pval,
body.dh-values-hidden .dh-pstat .v,
body.dh-values-hidden .dh-ppill { filter: blur(7px); user-select: none; pointer-events: none; }

/* — product hub: clean 2-up "open a new product" cards (de-hardcoded) — */
.dh-prodhubcard { padding: 16px; cursor: default; display: flex; flex-direction: column; background: rgba(201,150,42,0.05); border-color: var(--dh-gold-border); }
.dh-prodhubcard-soon { opacity: .62; cursor: default; }
/* Top row of each product card: icon on the left, an optional badge ("Open
   now") pinned to the top-right and vertically aligned with the icon. */
.dh-prodhub-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(12px * var(--dh-card-pad-scale)); }
/* Title on a SINGLE line so all four cards stay equal height and the tag line
   ("Up to 13% p.a." vs "Vault-grade · insured") lines up across cards. Sized to
   fit the longest title ("Safe Deposit Locker") on a phone; ellipsis is a
   defensive guard for any hypothetical longer product name. */
.dh-prodhub-title { display: block; font-size: 13px; font-weight: 600; color: var(--dh-ink); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-prodhub-tag { font-size: 11px; color: var(--dh-muted); line-height: 1.45; }
.dh-prodhub-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--dh-gold); cursor: pointer; }
.dh-prodhub-more { margin-top: 8px; align-self: flex-start; background: none; border: none; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--dh-muted); cursor: pointer; text-decoration: underline; }

/* — service tile grid (Home) — */
.dh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dh-tile  { background: var(--dh-bg); border-radius: 18px; padding: 14px 8px; border: 1.5px solid var(--dh-border2); box-shadow: 0 2px 8px rgba(0,0,0,.04); display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.dh-tile.dh-dis { opacity: .5; }
.dh-tchip { width: 42px; height: 42px; border-radius: 14px; background: var(--dh-gold-dim); border: 1px solid rgba(201,150,42,.18); display: flex; align-items: center; justify-content: center; color: var(--dh-gold); font-size: 19px; }
.dh-tile.dh-dis .dh-tchip { background: var(--dh-surface); border-color: var(--dh-border); color: var(--dh-faint); }
.dh-tlabel { font-size: 12px; font-weight: 600; color: var(--dh-ink); line-height: 1.2; }
.dh-tile.dh-dis .dh-tlabel { color: var(--dh-faint); }
.dh-tsub  { font-size: 10px; color: var(--dh-muted); margin-top: 2px; }

/* — pills / badges — */
.dh-pill      { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--dh-muted); background: var(--dh-bg); border: 1px solid var(--dh-border); border-radius: 20px; padding: 3px 9px; }
.dh-pill-gold { color: var(--dh-gold); background: var(--dh-gold-dim); border-color: var(--dh-gold-border); }
.dh-pill-ok   { color: var(--dh-success); background: var(--dh-success-dim); border-color: rgba(26,127,75,.2); }
.dh-pill-warn { color: var(--dh-warn); background: var(--dh-warn-dim); border-color: rgba(192,92,0,.2); }
.dh-badge     { font-size: 9px; font-weight: 700; color: var(--dh-ink); background: var(--dh-gold); border-radius: 20px; padding: 2px 8px; letter-spacing: .3px; }

/* — list row (activity / NCD holdings) — */
.dh-arow  { display: flex; align-items: center; gap: 12px; background: var(--dh-bg); border-radius: 16px; padding: 13px 14px; border: 1.5px solid var(--dh-border2); box-shadow: 0 1px 4px rgba(0,0,0,.04); text-align: left; }
.dh-arow.dh-due { background: var(--dh-error-dim); border-color: rgba(217,64,64,.2); }
.dh-achip { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.dh-listcard { width: 100%; text-align: left; background: var(--dh-surface2); border: 1.5px solid rgba(0,0,0,.09); border-radius: 16px; padding: 18px; }

/* — alert (due banner) — */
.dh-alert { padding: 14px 16px; border-radius: 16px; background: var(--dh-error-dim); border: 1.5px solid rgba(217,64,64,.25); display: flex; align-items: center; gap: 12px; text-align: left; }
.dh-alert .t { font-size: 13px; font-weight: 700; color: var(--dh-error); }
.dh-alert .s { font-size: 12px; color: #A02020; margin-top: 1px; }

/* — screen header (back · title · action) — */
.dh-shead { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--dh-border); }
.dh-shead .dh-back { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--dh-muted); font-size: 20px; }
.dh-shead .dh-title { font-size: 16px; font-weight: 600; color: var(--dh-ink); }
.dh-shead .dh-sp { flex: 1; }

/* — numpad + PIN boxes (OTP / MPIN) — */
.dh-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dh-key { height: 54px; border-radius: 14px; background: var(--dh-bg); border: 1.5px solid var(--dh-border); font-size: 20px; font-weight: 500; color: var(--dh-ink); display: flex; align-items: center; justify-content: center; font-family: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.dh-key.dh-del { background: var(--dh-surface); }
.dh-pinbox { width: 46px; height: 54px; border-radius: 14px; background: var(--dh-surface); border: 1.5px solid var(--dh-border); display: flex; align-items: center; justify-content: center; }
.dh-pinbox.dh-on { background: var(--dh-ink); border-color: var(--dh-gold); box-shadow: 0 0 0 3px var(--dh-gold-dim); }
.dh-pinbox .dh-fill { width: 9px; height: 9px; border-radius: 50%; background: var(--dh-gold); }

/* — product cards (Products hub) — */
.dh-prodcard { background: var(--dh-bg); border-radius: 20px; overflow: hidden; border: 1.5px solid var(--dh-border2); box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.dh-prodcard.dh-open { border-color: var(--dh-gold); box-shadow: 0 4px 20px rgba(201,150,42,.12); }
.dh-prodicon { width: 46px; height: 46px; border-radius: 15px; background: var(--dh-gold-dim); border: 1px solid rgba(201,150,42,.18); display: flex; align-items: center; justify-content: center; color: var(--dh-gold); font-size: 20px; flex-shrink: 0; }
.dh-statsrow { display: flex; border-top: 1px solid var(--dh-border2); }
.dh-statcell { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 4px; }
.dh-statcell + .dh-statcell { border-left: 1px solid var(--dh-border2); }
.dh-statcell .l { font-size: 9px; color: var(--dh-faint); text-transform: uppercase; letter-spacing: .4px; }
.dh-statcell .v { font-size: 12px; font-weight: 700; color: var(--dh-gold); margin-top: 2px; }

/* — payment chooser tiles (checkout) — */
.dh-paytile { width: 100%; text-align: left; display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 16px; border: 1.5px solid var(--dh-border); background: var(--dh-bg); }
.dh-paytile.dh-primary { border-color: var(--dh-gold); background: var(--dh-gold-dim); }
.dh-ptchip { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }

/* — bottom tab nav (customer mobile shell) — */
.dh-bottomnav { display: flex; align-items: center; justify-content: space-around; height: 68px; background: var(--dh-bg); border-top: 1px solid var(--dh-border2); box-shadow: 0 -4px 16px rgba(0,0,0,.05); }
.dh-navbtn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; position: relative; background: none; border: none; cursor: pointer; flex: 1; min-width: 0; }
.dh-navbtn .dh-nicon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--dh-muted); transition: background .18s, color .18s; }
.dh-navbtn.dh-active .dh-nicon { background: var(--dh-ink); color: var(--dh-gold); }
.dh-navbtn .dh-nlabel { font-size: 10px; color: var(--dh-muted); white-space: nowrap; }
.dh-navbtn.dh-active .dh-nlabel { color: var(--dh-ink); font-weight: 700; }
.dh-navbtn .dh-navtab { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; border-radius: 2px; background: var(--dh-gold); }

/* ===========================================================================
 * CUSTOMER MOBILE SHELL — bottom nav replaces the sidebar (PR: customer shell)
 * Everything below only applies under body.dh-customer, so staff keep the
 * sidebar + hamburger untouched.
 * =========================================================================*/

/* Hide the sidebar + hamburger for customers — navigation is the bottom nav. */
body.dh-customer .sidebar { display: none !important; }
body.dh-customer .sidebar-overlay { display: none !important; }
body.dh-customer .hamburger-btn { display: none !important; }
/* main-content takes the full width once the sidebar is gone. */
body.dh-customer .main-content { margin-left: 0 !important; width: 100% !important; }
/* leave room for the fixed bottom nav so the last content isn't hidden. */
body.dh-customer .content-area { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

/* My Payments (re-skinned): the legacy desktop table is replaced by the dh
   stacked cards (#custPaymentsCards) — hide the table for customers. */
body.dh-customer #custPaymentsTableWrap { display: none !important; }

/* Fixed bottom nav (created once in JS, CSS-gated to customers). */
#custBottomNav { display: none; }
body.dh-customer #custBottomNav {
  display: flex; align-items: stretch; justify-content: space-around;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--dh-bg); border-top: 1px solid var(--dh-border2);
  box-shadow: 0 -4px 18px rgba(0,0,0,.06); font-family: var(--font, 'Inter', sans-serif);
}

/* Customer brand mark in the topbar (tap → Home/dashboard). */
#custTopHome { display: none; }
body.dh-customer #custTopHome {
  display: inline-flex; align-items: center; cursor: pointer;
  background: none; border: none; padding: 4px; margin-right: 4px;
  font-family: inherit;
}
#custTopHome .dh-brandmark {
  width: 34px; height: 34px; border-radius: 11px; background: var(--dh-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--dh-ink);
  font-family: var(--dh-serif); flex-shrink: 0;
}
#custTopHome:active .dh-brandmark { transform: scale(0.94); }
#custTopHome .dh-brandlogo {
  width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;
}
#custTopHome:active .dh-brandlogo { transform: scale(0.94); }

/* Customer name chip in the topbar (tap → My Profile). */
#custTopChip { display: none; }
body.dh-customer #custTopChip {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: none; border: none; padding: 4px; font-family: inherit;
}
#custTopChip .dh-avatar {
  width: 34px; height: 34px; border-radius: 11px; background: var(--dh-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--dh-ink); font-family: var(--dh-serif);
  flex-shrink: 0;
}
#custTopChip .dh-cname { font-size: 13px; font-weight: 600; color: var(--dh-ink); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 330px) { #custTopChip .dh-cname { display: none; } }

/* "More" bottom sheet. */
#custMoreSheet { position: fixed; inset: 0; z-index: 1300; display: none; }
#custMoreSheet.dh-open { display: block; }
#custMoreSheet .dh-sheet-scrim { position: absolute; inset: 0; background: rgba(10,10,10,.42); }
#custMoreSheet .dh-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--dh-bg); border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 82vh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(0,0,0,.22);
}
#custMoreSheet .dh-sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--dh-border); margin: 8px auto 14px; }
#custMoreSheet .dh-sheet-hd { font-family: var(--dh-serif); font-size: 18px; font-weight: 600; color: var(--dh-ink); margin: 0 2px 6px; }
#custMoreSheet .dh-sheet-sub { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dh-muted); margin: 16px 2px 8px; }
.dh-sheet-row {
  width: 100%; display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 13px 12px; border-radius: 14px; border: none; background: none; cursor: pointer;
  font-family: inherit; color: var(--dh-ink);
}
.dh-sheet-row:active { background: var(--dh-surface); }
.dh-sheet-row .dh-srchip { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--dh-gold-dim); color: var(--dh-gold); border: 1px solid rgba(201,150,42,.18); }
.dh-sheet-row .dh-srlabel { flex: 1; font-size: 14px; font-weight: 600; }
.dh-sheet-row .dh-srsub { font-size: 12px; color: var(--dh-muted); font-weight: 400; }
.dh-sheet-row .dh-srchev { color: var(--dh-faint); flex-shrink: 0; }
.dh-sheet-row.dh-danger .dh-srchip { background: var(--dh-error-dim); color: var(--dh-error); border-color: rgba(217,64,64,.2); }
.dh-sheet-row.dh-danger .dh-srlabel { color: var(--dh-error); }
.dh-sheet-badge { background: var(--dh-error); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9999px; margin-left: 6px; }

/* ===========================================================================
 * PERSONAL LOAN JOURNEY (custLoan) — borrower DLA, re-skinned.
 * Goal: make it EASY to get a loan — visible progress, plain language, big
 * gold CTAs, friendly waiting states. Composes the .dh-* parts above.
 * =========================================================================*/
.dh-loanwrap { display: flex; flex-direction: column; gap: 14px; }
.dh-loanwrap .dh-card { padding: 20px; }

/* progress stepper — always shows how far along the borrower is */
.dh-steps { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.dh-steps i { height: 4px; border-radius: 2px; background: var(--dh-border); flex: 1; transition: background .25s; }
.dh-steps i.dh-done { background: var(--dh-gold-light); }
.dh-steps i.dh-on  { background: var(--dh-gold); }
.dh-stepcap { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dh-muted); margin: 10px 0 2px; }

/* form fields */
.dh-flabel { display: block; font-size: 13px; font-weight: 600; color: var(--dh-ink); margin: 16px 0 7px; }
.dh-flabel:first-child { margin-top: 0; }
.dh-input { width: 100%; padding: 13px 14px; border: 1.5px solid var(--dh-border); border-radius: 13px; font-size: 16px; font-family: inherit; color: var(--dh-ink); background: var(--dh-bg); box-sizing: border-box; }
.dh-input:focus { outline: none; border-color: var(--dh-gold); box-shadow: 0 0 0 3px var(--dh-gold-dim); }

/* amount slider */
.dh-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--dh-border); outline: none; margin: 12px 0 2px; }
.dh-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--dh-gold); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(201,150,42,.45); cursor: pointer; }
.dh-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--dh-gold); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(201,150,42,.45); cursor: pointer; }
.dh-srange { display: flex; justify-content: space-between; font-size: 11px; color: var(--dh-muted); }

/* tenure chips */
.dh-chips { display: flex; gap: 8px; }
.dh-chip { flex: 1; padding: 12px 6px; border-radius: 13px; border: 1.5px solid var(--dh-border); background: var(--dh-bg); font-size: 14px; font-weight: 600; color: var(--dh-soft); cursor: pointer; font-family: inherit; text-align: center; }
.dh-chip.dh-on { border-color: var(--dh-gold); background: var(--dh-gold-dim); color: var(--dh-ink); }

/* key/value breakdown (offer + KFS) */
.dh-kv { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14px; }
.dh-kv td { padding: 9px 0; border-bottom: 1px solid var(--dh-border2); overflow-wrap: anywhere; word-break: break-word; vertical-align: top; }
/* Label wraps and takes the leftover width; the value column shrinks to its
   content and never wraps, so a long label (e.g. "Documentation charge (incl.
   stamp duty)") can never overlap the amount. padding-right keeps a gap. */
.dh-kv td:first-child { width: auto; padding-right: 14px; }
.dh-kv tr:last-child td { border-bottom: none; }
.dh-kv td:first-child { color: var(--dh-muted); }
.dh-kv td:last-child { text-align: right; font-weight: 600; color: var(--dh-ink); white-space: nowrap; }
.dh-kv tr.dh-total td { font-weight: 800; color: var(--dh-ink); font-size: 15px; padding-top: 13px; }
/* Profile info cards reuse .dh-kv for text values (email, address) — these can be
   long and must wrap rather than overflow/clip, unlike the offer/KFS ₹ amounts. */
.dh-kv-info td:last-child { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

/* KFS / cost breakdown — flex rows that can NEVER overlap. Unlike the table
   (where a long label like "Documentation charge (incl. stamp duty)" could
   collide with the amount on a narrow phone), flex + space-between + gap keeps
   the two apart: the label takes the leftover width and wraps; the value holds
   its width on the right. */
.dh-kvlist { font-size: 14px; }
.dh-kvf { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--dh-border2); }
.dh-kvf:last-child { border-bottom: none; }
.dh-kvf > .k { flex: 1 1 auto; min-width: 0; color: var(--dh-muted); overflow-wrap: anywhere; word-break: break-word; }
.dh-kvf > .v { flex: 0 0 auto; text-align: right; font-weight: 600; color: var(--dh-ink); white-space: nowrap; }
.dh-kvf.dh-total { padding-top: 13px; }
.dh-kvf.dh-total > .k, .dh-kvf.dh-total > .v { font-weight: 800; color: var(--dh-ink); }
.dh-kvf.dh-total > .v { font-size: 15px; }

/* Product filter chips (My Applications list, and reusable). */
.dh-fchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dh-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--dh-border); background: var(--dh-card); color: var(--dh-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .12s, color .12s, border-color .12s; }
.dh-fchip:hover { border-color: var(--dh-gold); }
.dh-fchip.is-active { background: var(--dh-ink); color: #fff; border-color: var(--dh-ink); }
.dh-fchip-n { font-size: 11px; opacity: .7; }
.dh-fchip.is-active .dh-fchip-n { opacity: .85; }

/* centered status screens (eSign / mandate / bank / disbursal) */
.dh-icirc { width: 64px; height: 64px; border-radius: 20px; margin: 2px auto 14px; display: flex; align-items: center; justify-content: center; }
.dh-icirc-gold { background: var(--dh-gold-dim); color: var(--dh-gold); border: 1px solid var(--dh-gold-border); }
.dh-icirc-ok   { background: var(--dh-success-dim); color: var(--dh-success); border: 1px solid rgba(26,127,75,.2); }

/* misc loan-journey bits */
.dh-fineprint { font-size: 11px; color: var(--dh-muted); line-height: 1.6; }
.dh-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--dh-soft); cursor: pointer; line-height: 1.5; }
.dh-consent input { width: 19px; height: 19px; margin-top: 1px; flex-shrink: 0; accent-color: var(--dh-gold); }
.dh-trust { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.dh-loanerr  { background: var(--dh-error-dim); border: 1.5px solid rgba(217,64,64,.25); color: #A02020; padding: 11px 13px; border-radius: 13px; font-size: 13px; margin-bottom: 12px; }
.dh-loaninfo { background: var(--dh-gold-dim); border: 1px solid var(--dh-gold-border); color: #7A5D15; padding: 11px 13px; border-radius: 13px; font-size: 13px; margin-bottom: 12px; }
.dh-busy { text-align: center; padding: 30px 0; color: var(--dh-muted); font-size: 13px; }
.dh-schedrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--dh-border2); font-size: 13px; }
.dh-schedrow:last-child { border-bottom: none; }
.dh-schedscroll { max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.dh-doclink { display: flex; align-items: center; gap: 10px; padding: 12px 2px; color: var(--dh-ink); font-weight: 600; font-size: 13.5px; text-decoration: none; border-bottom: 1px solid var(--dh-border2); cursor: pointer; }
.dh-doclink:last-child { border-bottom: none; }
.dh-doclink svg { color: var(--dh-gold); flex-shrink: 0; }

/* My Credit Score — KBA answer options */
.dh-csopts { display: flex; flex-direction: column; gap: 8px; }
.dh-csopt { display: block; width: 100%; text-align: left; padding: 13px 15px; border: 1.5px solid var(--dh-border); border-radius: 12px; background: var(--dh-bg); color: var(--dh-ink); font-size: 14px; font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.dh-csopt:hover { border-color: var(--dh-gold-border); }
.dh-csopt.dh-on { border-color: var(--dh-gold); background: var(--dh-gold-dim); font-weight: 600; }

/* Profile avatar header (My Profile) */
.dh-avhead { display: flex; align-items: center; gap: 14px; }
.dh-avwrap { position: relative; flex-shrink: 0; }
.dh-av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--dh-gold-border); background: var(--dh-surface); }
.dh-av-ph { display: flex; align-items: center; justify-content: center; font-family: var(--dh-serif); font-weight: 700; font-size: 22px; color: var(--dh-gold); background: var(--dh-gold-dim); }
.dh-avcam { position: absolute; right: -3px; bottom: -3px; width: 26px; height: 26px; border-radius: 50%; background: var(--dh-gold); color: var(--dh-ink); border: 2px solid var(--dh-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dh-avmeta { min-width: 0; }
.dh-avname { font-weight: 700; font-size: 16px; color: var(--dh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Edit-Profile bottom sheet: real flex column on mobile so the sticky footer
   never overlaps the form (the old max-height math left content tucked behind
   Cancel/Save). Plus iOS home-indicator safe-area padding. Desktop unchanged. */
@media (max-width: 768px){
  #profileEditModal .modal { display: flex; flex-direction: column; }
  #profileEditModal .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; }
  #profileEditModal .modal-footer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ============================================================================
 * ELDERLY-FRIENDLY POLISH (added 2026-06-18)
 * The NCD customer base skews 60+. These rules bump readability + tap-target
 * size + contrast inside `body.dh-customer` only. Staff / prospect screens
 * are untouched. Pure CSS — no JS behaviour changes here.
 * ========================================================================== */

/* (1) BODY-TEXT SIZE — base bumps 14px → 16px across customer screens.
 *     16px is Apple HIG + Google Material's recommended minimum for readers
 *     60+. Fine-print classes bump 11px → 13px (still small but legible). */
body.dh-customer { font-size: 16px; }
body.dh-customer .dh-fineprint { font-size: 13px; line-height: 1.6; }
body.dh-customer .dh-cap { font-size: 12px; }
body.dh-customer .dh-stepcap { font-size: 12px; }
body.dh-customer .dh-pill { font-size: 12px; padding: 4px 11px; }
/* More-sheet row text — these are the most-tapped navigation surfaces. */
body.dh-customer .dh-sheet-row .dh-srlabel { font-size: 16px; }
body.dh-customer .dh-sheet-row .dh-srsub   { font-size: 13px; }
body.dh-customer #custMoreSheet .dh-sheet-hd  { font-size: 20px; }
body.dh-customer #custMoreSheet .dh-sheet-sub { font-size: 12px; }

/* (2) TAP-TARGET FLOORS — every interactive element ≥48×48 (Google a11y) and
 *     the most-tapped surfaces ≥56. Older hands miss small targets; this
 *     trades a little vertical density for fewer mistaps.                 */
body.dh-customer .dh-btn { min-height: 52px; padding-top: 14px; padding-bottom: 14px; }
body.dh-customer .dh-sheet-row { min-height: 60px; padding-top: 16px; padding-bottom: 16px; }
body.dh-customer .dh-fchip,
body.dh-customer .dh-chip { min-height: 44px; }

/* (3) CONTRAST CLEANUP — `dh-faint` (#C4C4C4 on white) is 2.0:1 — fails
 *     WCAG AA (4.5:1 for body, 3:1 for large). Pull the faint tokens down
 *     INSIDE the customer scope so elderly users can actually read the
 *     fine print. Base tokens unchanged so flow chrome stays consistent.
 *     Old --dh-muted (#8A8A8A) was 4.7:1 (just passes); bumping to #6F6F6F
 *     gives a cleaner 5.8:1.                                              */
body.dh-customer {
  --dh-muted:     #6F6F6F;
  --dh-muted2:    #555555;
  --dh-faint:     #7A7A7A;
  --dh-faint2:    #5F5F5F;
}

/* (4) "CALL SUPPORT" FAB — sits ABOVE the existing chat FAB, ink-coloured.
 *     Phone is more familiar than chat for elderly users. Inserted into the
 *     DOM by _ensureCustShell() in index.html; styles live here so all
 *     visual tweaks ship in one place.                                   */
#custCallFab { display: none; }
body.dh-customer #custCallFab,
body.dh-prospect #custCallFab {
  position: fixed; right: 16px; z-index: 1199;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 16px + 48px + 12px);
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--dh-ink); color: #fff;
  cursor: grab; touch-action: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease,
              left .18s ease, right .18s ease, top .18s ease, bottom .18s ease;
}
body.dh-customer #custCallFab:active,
body.dh-prospect #custCallFab:active { transform: scale(.96); }
body.dh-customer #custCallFab.dh-fab-dragging,
body.dh-prospect #custCallFab.dh-fab-dragging {
  cursor: grabbing; transform: scale(1.08);
  box-shadow: 0 14px 32px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.22);
  transition: none;
}
#custCallFab .dh-fabicon { display: inline-flex; }

/* ═════════════════════════════════════════════════════════════════════════════
 * PHASE 2: CSS UTILITY LIBRARY — extracting inline styles to reusable classes
 * These classes replace inline style="" attributes across customer screens.
 * All classes respect the Android parity scaling variables (--dh-font-scale, etc).
 * ═════════════════════════════════════════════════════════════════════════════ */

/* TYPOGRAPHY UTILITIES */
.dh-heading-xl { font-family: var(--dh-serif); font-size: calc(26px * var(--dh-font-scale)); font-weight: 700; color: var(--dh-ink); letter-spacing: -0.01em; line-height: 1.25; }
.dh-heading-lg { font-family: var(--dh-serif); font-size: calc(22px * var(--dh-font-scale)); font-weight: 700; color: var(--dh-ink); letter-spacing: -0.01em; line-height: 1.3; }
.dh-heading-md { font-family: var(--dh-serif); font-size: calc(18px * var(--dh-font-scale)); font-weight: 700; color: var(--dh-ink); letter-spacing: -0.01em; }
.dh-heading-sm { font-size: calc(16px * var(--dh-font-scale)); font-weight: 700; color: var(--dh-ink); }
.dh-body-lg { font-size: calc(16px * var(--dh-font-scale)); color: var(--dh-ink); line-height: 1.5; }
.dh-body-md { font-size: calc(14px * var(--dh-font-scale)); color: var(--dh-ink); line-height: 1.5; }
.dh-body-sm { font-size: calc(13px * var(--dh-font-scale)); color: var(--dh-ink); line-height: 1.5; }
.dh-body-xs { font-size: calc(12px * var(--dh-font-scale)); color: var(--dh-ink); line-height: 1.45; }
.dh-label { font-size: calc(13px * var(--dh-font-scale)); font-weight: 600; color: var(--dh-soft); }
.dh-label-sm { font-size: calc(11px * var(--dh-font-scale)); font-weight: 600; color: var(--dh-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.dh-muted { color: var(--dh-muted); }
.dh-muted2 { color: var(--dh-muted2); }
.dh-gold { color: var(--dh-gold); }
.dh-success { color: var(--dh-success); }

/* SPACING UTILITIES */
.dh-m-0 { margin: 0; }
.dh-m-2 { margin: calc(2px * var(--dh-card-pad-scale)); }
.dh-m-4 { margin: calc(4px * var(--dh-card-pad-scale)); }
.dh-m-6 { margin: calc(6px * var(--dh-card-pad-scale)); }
.dh-m-8 { margin: calc(8px * var(--dh-card-pad-scale)); }
.dh-m-10 { margin: calc(10px * var(--dh-card-pad-scale)); }
.dh-m-12 { margin: calc(12px * var(--dh-card-pad-scale)); }
.dh-m-14 { margin: calc(14px * var(--dh-card-pad-scale)); }
.dh-m-16 { margin: calc(16px * var(--dh-card-pad-scale)); }
.dh-m-18 { margin: calc(18px * var(--dh-card-pad-scale)); }
.dh-m-20 { margin: calc(20px * var(--dh-card-pad-scale)); }
.dh-m-24 { margin: calc(24px * var(--dh-card-pad-scale)); }
.dh-m-32 { margin: calc(32px * var(--dh-card-pad-scale)); }
.dh-mb-4 { margin-bottom: calc(4px * var(--dh-card-pad-scale)); }
.dh-mb-6 { margin-bottom: calc(6px * var(--dh-card-pad-scale)); }
.dh-mb-8 { margin-bottom: calc(8px * var(--dh-card-pad-scale)); }
.dh-mb-10 { margin-bottom: calc(10px * var(--dh-card-pad-scale)); }
.dh-mb-12 { margin-bottom: calc(12px * var(--dh-card-pad-scale)); }
.dh-mb-14 { margin-bottom: calc(14px * var(--dh-card-pad-scale)); }
.dh-mb-16 { margin-bottom: calc(16px * var(--dh-card-pad-scale)); }
.dh-mb-18 { margin-bottom: calc(18px * var(--dh-card-pad-scale)); }
.dh-mb-20 { margin-bottom: calc(20px * var(--dh-card-pad-scale)); }
.dh-mb-24 { margin-bottom: calc(24px * var(--dh-card-pad-scale)); }
.dh-mt-4 { margin-top: calc(4px * var(--dh-card-pad-scale)); }
.dh-mt-6 { margin-top: calc(6px * var(--dh-card-pad-scale)); }
.dh-mt-8 { margin-top: calc(8px * var(--dh-card-pad-scale)); }
.dh-mt-10 { margin-top: calc(10px * var(--dh-card-pad-scale)); }
.dh-mt-12 { margin-top: calc(12px * var(--dh-card-pad-scale)); }
.dh-mt-14 { margin-top: calc(14px * var(--dh-card-pad-scale)); }
.dh-mt-16 { margin-top: calc(16px * var(--dh-card-pad-scale)); }
.dh-mt-18 { margin-top: calc(18px * var(--dh-card-pad-scale)); }
.dh-mt-20 { margin-top: calc(20px * var(--dh-card-pad-scale)); }
.dh-mt-24 { margin-top: calc(24px * var(--dh-card-pad-scale)); }
.dh-ml-auto { margin-left: auto; }
.dh-mr-auto { margin-right: auto; }
.dh-py-6 { padding-top: calc(6px * var(--dh-card-pad-scale)); padding-bottom: calc(6px * var(--dh-card-pad-scale)); }
.dh-py-8 { padding-top: calc(8px * var(--dh-card-pad-scale)); padding-bottom: calc(8px * var(--dh-card-pad-scale)); }
.dh-py-10 { padding-top: calc(10px * var(--dh-card-pad-scale)); padding-bottom: calc(10px * var(--dh-card-pad-scale)); }
.dh-py-12 { padding-top: calc(12px * var(--dh-card-pad-scale)); padding-bottom: calc(12px * var(--dh-card-pad-scale)); }
.dh-pt-8 { padding-top: calc(8px * var(--dh-card-pad-scale)); }
.dh-pt-12 { padding-top: calc(12px * var(--dh-card-pad-scale)); }
.dh-pt-16 { padding-top: calc(16px * var(--dh-card-pad-scale)); }
.dh-pb-8 { padding-bottom: calc(8px * var(--dh-card-pad-scale)); }
.dh-pb-12 { padding-bottom: calc(12px * var(--dh-card-pad-scale)); }
.dh-pb-16 { padding-bottom: calc(16px * var(--dh-card-pad-scale)); }
.dh-p-8 { padding: calc(8px * var(--dh-card-pad-scale)); }
.dh-p-10 { padding: calc(10px * var(--dh-card-pad-scale)); }
.dh-p-12 { padding: calc(12px * var(--dh-card-pad-scale)); }
.dh-p-14 { padding: calc(14px * var(--dh-card-pad-scale)); }
.dh-p-16 { padding: calc(16px * var(--dh-card-pad-scale)); }
.dh-p-18 { padding: calc(18px * var(--dh-card-pad-scale)); }
.dh-p-20 { padding: calc(20px * var(--dh-card-pad-scale)); }
.dh-p-22 { padding: calc(22px * var(--dh-card-pad-scale)); }
.dh-px-12 { padding-left: calc(12px * var(--dh-card-pad-scale)); padding-right: calc(12px * var(--dh-card-pad-scale)); }
.dh-px-14 { padding-left: calc(14px * var(--dh-card-pad-scale)); padding-right: calc(14px * var(--dh-card-pad-scale)); }
.dh-px-16 { padding-left: calc(16px * var(--dh-card-pad-scale)); padding-right: calc(16px * var(--dh-card-pad-scale)); }

/* LAYOUT & FLEXBOX */
.dh-flex { display: flex; }
.dh-flex-col { display: flex; flex-direction: column; }
.dh-flex-between { display: flex; justify-content: space-between; align-items: center; }
.dh-flex-center { display: flex; align-items: center; justify-content: center; }
.dh-flex-left { display: flex; align-items: center; }
.dh-flex-wrap { display: flex; flex-wrap: wrap; }
.dh-gap-4 { gap: calc(4px * var(--dh-card-pad-scale)); }
.dh-gap-6 { gap: calc(6px * var(--dh-card-pad-scale)); }
.dh-gap-8 { gap: calc(8px * var(--dh-card-pad-scale)); }
.dh-gap-10 { gap: calc(10px * var(--dh-card-pad-scale)); }
.dh-gap-12 { gap: calc(12px * var(--dh-card-pad-scale)); }
.dh-gap-14 { gap: calc(14px * var(--dh-card-pad-scale)); }
.dh-gap-16 { gap: calc(16px * var(--dh-card-pad-scale)); }
.dh-flex-1 { flex: 1; }
.dh-flex-none { flex-shrink: 0; }
.dh-min-w-0 { min-width: 0; }

/* CARDS & CONTAINERS */
.dh-card-base { border-radius: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.dh-card-padded { padding: calc(18px * var(--dh-card-pad-scale)); }
.dh-card-dark { background: var(--dh-cardgrad); color: var(--dh-oncard-muted); }
.dh-card-light { background: var(--dh-gold-dim); border-color: var(--dh-gold-border); border: 1.5px solid var(--dh-gold-border); }
.dh-card-bordered { border: 1.5px solid var(--dh-border2); }
.dh-card-clickable { cursor: pointer; }

/* SECTION HEADERS */
.dh-section-header { margin-bottom: calc(14px * var(--dh-card-pad-scale)); }
.dh-section-title { font-size: calc(13px * var(--dh-font-scale)); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dh-muted); margin: calc(8px * var(--dh-card-pad-scale)) calc(4px * var(--dh-card-pad-scale)) calc(12px * var(--dh-card-pad-scale)); }

/* STATS & VALUES */
.dh-stat-container { display: flex; flex-direction: column; }
.dh-stat-label { font-size: calc(11px * var(--dh-font-scale)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dh-muted); margin-bottom: calc(4px * var(--dh-card-pad-scale)); }
.dh-stat-value { font-size: calc(24px * var(--dh-font-scale)); font-weight: 700; color: var(--dh-ink); line-height: 1.2; }
.dh-stat-value-sm { font-size: calc(18px * var(--dh-font-scale)); font-weight: 700; color: var(--dh-ink); }
.dh-stat-delta { font-size: calc(12px * var(--dh-font-scale)); font-weight: 600; color: var(--dh-success); margin-top: calc(4px * var(--dh-card-pad-scale)); }
.dh-stat-divider { width: 1px; height: auto; background: rgba(0,0,0,0.08); }

/* BUTTONS & CONTROLS */
.dh-btn-base { border: none; border-radius: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all 0.15s; }
.dh-btn-primary { background: var(--dh-gold); color: var(--dh-ink); box-shadow: 0 4px 16px rgba(201,150,42,0.30); }
.dh-btn-primary:hover { filter: brightness(0.97); }
.dh-btn-secondary { background: transparent; color: var(--dh-ink); border: 1.5px solid var(--dh-border); }
.dh-btn-secondary:hover { border-color: var(--dh-gold-border); }

/* LINE HEIGHT OVERRIDES FOR ANDROID */
.dh-line-tight { line-height: var(--dh-line-height-tight); letter-spacing: var(--dh-letter-spacing-tight); }
.dh-line-normal { line-height: var(--dh-line-height-normal); letter-spacing: var(--dh-letter-spacing-tight); }

/* TEXT ALIGNMENT */
.dh-text-left { text-align: left; }
.dh-text-center { text-align: center; }
.dh-text-right { text-align: right; }

/* VISIBILITY */
.dh-hidden { display: none !important; }
.dh-visible { display: block; }

/* BANNER & ALERT STYLES */
.dh-alert-banner {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: calc(12px * var(--dh-card-pad-scale)) calc(14px * var(--dh-card-pad-scale));
  margin-bottom: calc(14px * var(--dh-card-pad-scale));
  font-size: calc(13px * var(--dh-font-scale));
  color: #78350f;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--dh-card-pad-scale));
  flex-wrap: wrap;
}
.dh-alert-banner strong { font-weight: 700; }
.dh-alert-banner button {
  margin-left: auto;
  background: #f59e0b;
  color: #fff;
  border: none;
  padding: calc(6px * var(--dh-card-pad-scale)) calc(14px * var(--dh-card-pad-scale));
  border-radius: 6px;
  font-size: calc(12px * var(--dh-font-scale));
  font-weight: 600;
  cursor: pointer;
}

/* PRODUCT HUB STYLES */
.dh-prodhub-section {
  font-size: calc(12px * var(--dh-font-scale));
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dh-muted);
  margin: calc(8px * var(--dh-card-pad-scale)) calc(4px * var(--dh-card-pad-scale)) calc(12px * var(--dh-card-pad-scale));
}
.dh-prodhub-note {
  background: var(--dh-surface);
  border: 1px solid var(--dh-border);
  border-radius: 12px;
  padding: calc(11px * var(--dh-card-pad-scale)) calc(14px * var(--dh-card-pad-scale));
  margin-bottom: calc(14px * var(--dh-card-pad-scale));
  font-size: calc(12px * var(--dh-font-scale));
  color: var(--dh-muted2);
  line-height: var(--dh-line-height-normal);
}
/* Product hub stays 2-up at EVERY width — the 1-column phone fallback
   added in PR #305 made each card full-width and turned the dashboard
   into a long unprofessional vertical scroll (one product per screen).
   On narrow phones the gap tightens via --dh-card-pad-scale; we never
   collapse to a single column. */
.product-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(12px * var(--dh-card-pad-scale)); }
.dh-prodhub-cta {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--dh-card-pad-scale));
  font-weight: 700;
  color: var(--dh-gold);
  /* Push the CTA + the "Know more" below it to the bottom of the card so the
     footer lines up across every card in a row regardless of how much chip/
     title content sits above it (NCD's badge+rate vs Gold's one-line tag). */
  margin-top: auto;
  padding-top: calc(10px * var(--dh-card-pad-scale));
}
/* "Coming soon" cards have no CTA — bottom-pin their "Know more" directly. */
.dh-prodhubcard-soon .dh-prodhub-more { margin-top: auto; }
.dh-prodhub-more {
  background: transparent;
  border: none;
  color: var(--dh-muted2);
  font-size: calc(12px * var(--dh-font-scale));
  font-weight: 700;
  padding: calc(6px * var(--dh-card-pad-scale)) calc(12px * var(--dh-card-pad-scale));
  margin-top: calc(8px * var(--dh-card-pad-scale));
  cursor: pointer;
  text-decoration: underline;
}
.dh-prodhub-tag {
  display: flex;
  align-items: center;
  gap: calc(5px * var(--dh-card-pad-scale));
  flex-wrap: nowrap;
  /* Keep the chip on a single line — the badge ("Open now") and the rate/tag
     text ("Up to 13% p.a.") must not wrap or get shrunk into a wrap. */
  white-space: nowrap;
  font-size: calc(12px * var(--dh-font-scale));
}
.dh-prodhub-tag > * { flex: 0 0 auto; }

/* BADGE STYLES */
.dh-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: calc(4px * var(--dh-card-pad-scale));
  background: var(--dh-gold-dim);
  color: var(--dh-gold);
  padding: calc(3px * var(--dh-card-pad-scale)) calc(8px * var(--dh-card-pad-scale));
  border-radius: 6px;
  font-size: calc(11px * var(--dh-font-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* PRODUCT HUB CTA SECTION */
.dh-prodhub-footer {
  text-align: center;
  margin: calc(18px * var(--dh-card-pad-scale)) auto 0;
  padding: calc(16px * var(--dh-card-pad-scale));
  background: var(--dh-surface);
  border: 1px dashed var(--dh-border);
  border-radius: 14px;
}
.dh-prodhub-footer-text {
  font-size: calc(13px * var(--dh-font-scale));
  color: var(--dh-muted);
  margin-bottom: calc(10px * var(--dh-card-pad-scale));
}
.dh-prodhub-footer button {
  display: inline-flex;
  width: auto;
  padding: calc(11px * var(--dh-card-pad-scale)) calc(22px * var(--dh-card-pad-scale));
  background: var(--dh-gold);
  border-color: transparent;
  color: var(--dh-ink);
  box-shadow: 0 4px 14px rgba(201,150,42,.28);
}

/* ============================================================================
 * Collapsible NCD statement (per holding) — closed by default, native <details>
 * so it works on every WebView without JS. Chevron rotates 90° on open.
 * ========================================================================== */
.dh-ncdstmt > summary { outline: none; }
.dh-ncdstmt > summary::-webkit-details-marker { display: none; }
.dh-ncdstmt > summary::marker { content: ''; }
.dh-ncdstmt[open] > summary .dh-ncdstmt-chev { transform: rotate(90deg); }

/* ============================================================================
 * WIDE-PHONE / FOLDABLE FIX (added 2026-06-22)
 *
 * The Samsung Z Fold 5 inner screen is ~582px CSS wide in portrait — above
 * the 480px mobile breakpoint, so it triggers "tablet" rules even though the
 * device is a phone. Two problems fixed here:
 *
 * 1. PAYMENT CARDS: @media (min-width:481px) in styles.css hides
 *    .payment-cards-wrap and shows a table. Customer screens should always
 *    use the card layout — override unconditionally.
 *
 * 2. LAYOUT CAP: above 540px we cap the customer content column at 480px
 *    centred, matching a normal phone. Also caps the fixed bottom nav so it
 *    doesn't span the full ~582px.
 * ========================================================================== */

/* Fix 1 — always show mobile card layout on customer payment screen. */
body.dh-customer .payment-cards-wrap { display: block !important; }
body.dh-customer #custPaymentsTableWrap,
body.dh-customer #custPaymentsTableEl { display: none !important; }

/* Fix 2 — cap customer layout to 480px centred on screens wider than 540px
   (Z Fold inner, small tablets). Staff/prospect screens are unaffected. */
@media (min-width: 540px) {
  body.dh-customer .main-content {
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto;
  }
  /* Bottom nav is position:fixed so needs its own centering rule. */
  body.dh-customer #custBottomNav {
    width: 480px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.10);
  }
  /* More-sheet scrim and sheet-card are already full-screen — keep them so. */
  /* Scrollable sheet card: cap to 480px centred for visual consistency. */
  body.dh-customer #custMoreSheet .dh-sheet {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px 20px 0 0;
  }
}

/* — Android WebView modal-open flash fix (belt-and-braces) —
   Pre-promote customer modal overlays + their card onto their own compositing
   layer so Android System WebView (Chromium) doesn't lazily promote the layer
   on the first slide-up frame — lazy promotion repaints the page underneath
   for one frame, which reads as a flash when a Know-more / Book-a-visit modal
   opens. iOS WKWebView already pre-promotes these, so this only brings Android
   in line. Pairs with the JS MutationObserver fix that stops the auto-fit
   reflow on modal insertion (the primary cause). Cosmetic / compositing-only. */
body.dh-customer .modal-overlay {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
body.dh-customer .modal {
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
 * TABLET / GALAXY FOLD / WIDE-VIEWPORT SUPPORT (added 2026-06-25)
 *
 * The customer SPA is designed for a phone (375–430px). On tablets (iPad,
 * Galaxy Tab) and Galaxy Fold INNER displays (~720–884px wide unfolded),
 * stretching edge-to-edge looks ugly. We cap the content + topbar inner
 * width and center, so the experience feels native at any size.
 *
 * Breakpoints:
 *   < 720px  → phone (existing edge-to-edge layout, untouched)
 *   ≥ 720px  → tablet / Fold-inner: cap content at 520px (centered)
 *   ≥ 1100px → larger tablet / desktop: same cap, slightly more breathing
 *
 * Login screen (pre-body.dh-customer) is handled with its own media query
 * so it works for prospects + staff too.
 * ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  /* The full-bleed surfaces (topbar, bottom nav) stay edge-to-edge for
     the typical app look, but their INNER row is capped + centered so
     the logo + chip don't drift apart on a wide screen. */
  body.dh-customer .topbar {
    padding-left: max(16px, calc((100vw - 520px) / 2)) !important;
    padding-right: max(16px, calc((100vw - 520px) / 2)) !important;
  }
  body.dh-customer .content-area {
    max-width: 520px;
    margin: 0 auto;
  }
  body.dh-customer #custBottomNav {
    max-width: 520px;
    left: 50% !important;
    transform: translateX(-50%);
    border-radius: 18px 18px 0 0;   /* visual hint that the nav is the app's footer, not the screen's */
  }
  /* FABs (chat + call) anchor near the app's right edge, not the screen's. */
  body.dh-customer #custChatFab,
  body.dh-customer #custCallFab {
    right: max(16px, calc((100vw - 520px) / 2 + 16px)) !important;
  }
  /* Login + prospect screens (pre body.dh-customer) — keep the form sane. */
  #loginScreen .login-box,
  #prospectScreen .prospect-container {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* On very narrow Fold COVER displays (~280–376px wide, ratio ~1:3) the
   existing mobile layout already works, but the bottom-nav labels can run
   out of room. Drop the label below 360px and keep just the icon. */
@media (max-width: 360px) {
  body.dh-customer .dh-navbtn .dh-nlabel { font-size: 10px; }
  body.dh-customer .dh-navbtn { padding: 6px 4px; }
}

/* ===========================================================================
 * iOS: stop the login screen auto-zooming on focus.
 *
 * ROOT CAUSE: Mobile Safari / WKWebView zoom the page in whenever a focused
 * form control has a computed font-size BELOW 16px. `styles.css` sets
 * `.login-input-wrap input { font-size: 15px !important }`, so tapping the
 * phone/username field zoomed the page and the customer had to pinch back out.
 * The viewport meta is fine (`width=device-width, initial-scale=1`) and
 * deliberately still allows pinch-zoom, so suppressing zoom via
 * `maximum-scale=1` / `user-scalable=no` is NOT the fix — that would break
 * accessibility for everyone on every screen.
 *
 * 16px is the exact threshold, so this is a 1px bump on iOS only.
 * `@supports (-webkit-touch-callout: none)` is true on iOS Safari/WKWebView and
 * false on Android Chrome and every desktop browser, so Android and desktop
 * keep the designed 15px untouched.
 *
 * Lives here (Claude-owned) rather than in styles.css (Emergent-owned) per
 * OWNERSHIP.md; dhanam-app.css loads last, so this !important wins the cascade.
 * ======================================================================== */
@supports (-webkit-touch-callout: none) {
  .login-input-wrap input,
  #loginScreen input,
  #loginScreen select,
  #loginScreen textarea {
    font-size: 16px !important;
  }
}

/* ===========================================================================
 * AI welcome suggestions — a floating overlay that emerges from the chat FAB.
 *
 * Deliberately NOT part of the Home screen markup: the whole thing is appended
 * to <body> and fixed-positioned, so no existing card, banner or section moves
 * and Home keeps working underneath. No backdrop, no dimming, no modal.
 *
 * Anchoring mirrors the FAB pair (which is draggable to any of the four
 * corners) — JS sets the left/right/top/bottom inline, matching _applyFabCorner.
 * ======================================================================== */
#aiWelcomeWrap { display: none; }
body.dh-customer #aiWelcomeWrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  position: fixed; z-index: 1260;           /* above the scrim (1250) — see the scrim block */
  max-width: min(300px, calc(100vw - 32px));
  pointer-events: none;                      /* only the cards catch taps */
}
body.dh-customer #aiWelcomeWrap.is-left { align-items: flex-start; }
#aiWelcomeWrap > * { pointer-events: auto; }

/* Greeting bubble */
.dh-aigreet {
  background: var(--dh-ink, #0A0A0A); color: #fff;
  border-radius: 16px 16px 16px 6px;
  padding: 12px 14px; max-width: 100%;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  display: flex; align-items: flex-start; gap: 10px;
}
#aiWelcomeWrap.is-left .dh-aigreet { border-radius: 16px 16px 6px 16px; }
.dh-aigreet-txt { font-size: 13px; line-height: 1.45; }
.dh-aigreet-txt b { display: block; font-weight: 700; margin-bottom: 2px; }
.dh-aigreet-x {
  flex: none; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.65); font-size: 18px; line-height: 1;
  padding: 0 2px; margin: -2px -2px 0 0; font-family: inherit;
}
.dh-aigreet-x:hover { color: #fff; }

/* Suggestion chips — independent rounded cards, white + gold accent */
.dh-aichip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #fff; border: 1px solid var(--dh-gold-border, rgba(201,150,42,.28));
  border-left: 3px solid var(--dh-gold, #C9962A);
  border-radius: 14px; padding: 10px 12px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--dh-ink, #0A0A0A); text-align: left;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease;
}
.dh-aichip:active { transform: scale(.98); }
/* Product icon. Holds an inline _dhSvg (not an emoji — the customer re-skin
 * renders every icon as SVG so it looks the same on every device). The SVG
 * strokes with currentColor, so the gold here is what tints it, matching the
 * chip's gold left accent and its chevron. Class name kept for continuity. */
.dh-aichip-emoji {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  color: var(--dh-gold, #C9962A);
}
.dh-aichip-txt { flex: 1; min-width: 0; line-height: 1.35; }
.dh-aichip-arrow { flex: none; color: var(--dh-gold, #C9962A); display: inline-flex; }
.dh-ainotnow {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--dh-muted, #8A8A8A);
  padding: 2px 6px;
}

/* Fade + slide in from the FAB, staggered per item by JS.
 *
 * A TRANSITION, not an animation. If a WebView never runs it, a transition
 * simply applies the end state instantly — the overlay is visible, just
 * un-animated. A keyframe animation can strand the element in its from-state
 * (opacity:0) while it still catches taps, which is a far worse failure.
 * JS adds .is-shown per child on a setTimeout ladder (timers fire even when
 * requestAnimationFrame is deferred in a backgrounded view).
 */
#aiWelcomeWrap > * {
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .24s ease, transform .24s cubic-bezier(.2,.8,.3,1);
}
#aiWelcomeWrap > *.is-shown { opacity: 1; transform: none; }
#aiWelcomeWrap.is-out { opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }

@media (prefers-reduced-motion: reduce) {
  #aiWelcomeWrap > * { transition: none; }
  #aiWelcomeWrap.is-out { transition: none; }
}

/* ===========================================================================
 * Top edge shadow — mirrors the bottom nav's existing one.
 *
 * The "shadow at the bottom of the screen" is the bottom nav casting UPWARD
 * onto the content:  #custBottomNav { box-shadow: 0 -4px 18px rgba(0,0,0,.06) }
 * and, above 540px,                   box-shadow: 0 -4px 24px rgba(0,0,0,.10).
 * The topbar was explicitly flat (styles.css sets box-shadow:none), which is
 * why the top edge had no matching depth.
 *
 * This gives the topbar the SAME shadow with the y-offset negated, so colour,
 * opacity, blur and spread are identical and the two edges read as one
 * treatment. Both breakpoints are mirrored so they stay in step.
 *
 * Shadow ONLY — no border-bottom. The bottom nav pairs its shadow with a 1px
 * border-top, but adding a border here would occupy a pixel of layout and push
 * the content down; the brief was explicitly "no layout/spacing change".
 *
 * Nothing else moves: box-shadow paints outside the box, never affects layout,
 * and never captures pointer events, so the notification bell, profile chip and
 * every touch target behave exactly as before. The shadow points DOWNWARD, away
 * from the status bar / safe-area inset the topbar already pads for.
 *
 * Scoped to body.dh-customer — the same scope as the bottom nav it mirrors, so
 * the pair is consistent on every customer screen rather than appearing and
 * disappearing during navigation. Staff screens are untouched.
 * ======================================================================== */
body.dh-customer .topbar {
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
@media (min-width: 540px) {
  body.dh-customer .topbar {
    box-shadow: 0 4px 24px rgba(0,0,0,.10);
  }
}

/* ===========================================================================
 * AI suggestions — dimming backdrop.
 *
 * z-index is the whole design here. The existing stack is content < bottom nav
 * (1200) = chat FAB (1200). To read as a modal, the scrim has to sit ABOVE all
 * of that, with the popup above the scrim:
 *     scrim 1250  →  popup 1260   (still under #custMoreSheet at 1300)
 * The popup was 1150; raising it to 1260 is the only change to its own rule.
 *
 * The scrim is a separate fixed element rather than a ::before on the wrapper,
 * because the wrapper is pointer-events:none and sized to its content — it
 * could never cover the screen or catch an outside tap.
 *
 * Fade only. No blur (expensive to composite on mid-range Android and it would
 * change how Home *looks*, not just how bright it is), no transform, no layout
 * property — so nothing on Home can shift.
 * ======================================================================== */
#aiWelcomeScrim { display: none; }
body.dh-customer #aiWelcomeScrim {
  display: block; position: fixed; inset: 0; z-index: 1250;
  background: rgba(0, 0, 0, .38);          /* inside the 30–40% brief */
  opacity: 0; transition: opacity .24s ease;
  -webkit-tap-highlight-color: transparent;
}
body.dh-customer #aiWelcomeScrim.is-shown { opacity: 1; }
body.dh-customer #aiWelcomeScrim.is-out   { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  body.dh-customer #aiWelcomeScrim { transition: none; }
}