/* mca-button-kit.css — JaldiCare shared button design system (merge candidate, 6 Nov 2026)
   One structural approach for every button on every role page:
   icon (left) + readable text label, shared radius/padding/font rhythm, shared focus ring.
   Widths are NOT forced equal - each button keeps its own width per its context.
   Standalone stylesheet: does not modify main.css; loaded after it. */

:root{
  --mca-btn-radius:12px;          /* shared corner radius for action buttons */
  --mca-btn-radius-sm:10px;       /* small buttons */
  --mca-btn-pad:13px 18px;        /* large buttons */
  --mca-btn-pad-sm:8px 12px;      /* small buttons */
  --mca-btn-font:600 15px/1.25 'Noto Sans Devanagari','Noto Sans',system-ui,sans-serif;
  --mca-btn-font-sm:600 13px/1.25 'Noto Sans Devanagari','Noto Sans',system-ui,sans-serif;
  --mca-btn-blue:#1e3a8a;         /* primary (dark blue per owner; no green/teal) */
  --mca-btn-blue2:#1d4fa0;
  --mca-btn-red:#b3261e;
  --mca-btn-line:#cbd5e1;
  --mca-ic-size:18px;             /* icon size in large buttons */
  --mca-ic-gap:8px;               /* fixed gap between icon and label, everywhere */
  --mca-focus:#fbbf24;            /* shared visible focus ring */
}

/* Browser-default buttons (classless dialogs etc.) previously fell back to a
   different font and size - every button now starts from the same base. */
button{font-family:inherit}

/* ---- icon placement rule: icon left of label, vertically centred, fixed gap ---- */
.mca-bicon{display:inline-flex!important;align-items:center;justify-content:center;gap:var(--mca-ic-gap)}
.mca-bicon .mca-bic{display:inline-flex;flex:none;align-items:center;justify-content:center}
.mca-bicon .mca-bic svg{width:var(--mca-ic-size);height:var(--mca-ic-size);display:block}
.mca-bicon .mca-bic-end{margin-left:auto}

/* ---- shared focus ring for every button kind ---- */
.primary-btn:focus-visible,.ghost-btn:focus-visible,.mini-btn:focus-visible,
.link-btn:focus-visible,.cta:focus-visible,.chip:focus-visible,.med-pick:focus-visible,
.lang-pill:focus-visible,.mini-toggle:focus-visible,.svc-pick:focus-visible,
.emerg-btn:focus-visible,.dl-top-btn:focus-visible,.mca-btn:focus-visible,
.mca-notice27-ok:focus-visible,.stat-btn:focus-visible,.splash-btn:focus-visible{
  outline:3px solid var(--mca-focus);outline-offset:2px}

/* ---- large action buttons: one shared shape ---- */
.primary-btn,.cta,.splash-btn,.mca-btn,.mca-btn-primary{
  font:var(--mca-btn-font);padding:var(--mca-btn-pad);border:none;border-radius:var(--mca-btn-radius);
  background:var(--mca-btn-blue);color:#fff;cursor:pointer;min-height:48px;box-sizing:border-box}
.cta{width:auto}                                  /* cta previously had NO styles at all (browser default) */
.splash-btn{min-height:0}
.primary-btn:hover:not(:disabled),.cta:hover:not(:disabled),.mca-btn-primary:hover:not(:disabled){background:#16307a}
.primary-btn:disabled,.cta:disabled,.mca-btn:disabled{opacity:.55;cursor:default}

/* ---- ghost / secondary ---- */
.ghost-btn,.mini-btn.ghost,.mca-btn-ghost{
  font:var(--mca-btn-font);padding:12px 16px;border:1px solid var(--mca-btn-line);border-radius:var(--mca-btn-radius);
  background:#fff;color:#000;cursor:pointer;min-height:48px;box-sizing:border-box}
.mini-btn.ghost{min-height:0;font:var(--mca-btn-font-sm);padding:var(--mca-btn-pad-sm)}

/* ---- small buttons ---- */
.mini-btn{
  font:var(--mca-btn-font-sm);padding:var(--mca-btn-pad-sm);border-radius:var(--mca-btn-radius-sm);
  border:1px solid var(--mca-btn-line);cursor:pointer;background:#fff;color:#000;
  --mca-ic-size:15px;--mca-ic-gap:6px;box-sizing:border-box}
.mini-btn.ok{background:var(--mca-btn-blue);border-color:transparent;color:#fff}
.mini-btn.no{color:var(--mca-btn-red)}
.mini-btn.tt-blue{background:var(--mca-btn-blue2);border-color:transparent;color:#fff}
.mini-btn.tt-maroon{background:#9f1239;border-color:transparent;color:#fff}

/* ---- text buttons keep their light look but gain the same icon+label rule ---- */
.link-btn{--mca-ic-size:14px;--mca-ic-gap:5px;border-radius:8px;padding:6px 8px;color:#000}
.link-btn:hover:not(:disabled){background:#1e3a8a14}

/* ---- pills: shared pill family, blue (not teal/green) accents ---- */
.chip,.med-pick,.lang-pill,.mini-toggle{
  --mca-ic-size:14px;--mca-ic-gap:6px;box-sizing:border-box}
.chip{border-color:var(--mca-btn-line)}
.chip.on{background:var(--mca-btn-blue2);border-color:var(--mca-btn-blue2);color:#fff}
.med-pick{border-color:var(--mca-btn-blue2);color:var(--mca-btn-blue2)}
.med-pick.on{background:var(--mca-btn-blue2);color:#fff;border-color:var(--mca-btn-blue2)}
.svc-icon{color:var(--mca-btn-blue2)}

/* ---- small classless dialog buttons (unsaved-data guard etc.) ---- */
button.mca-btn{min-height:0}
button.mca-btn-ghost{background:#fff;color:#000;border:1px solid var(--mca-btn-line)}

/* ---- popup OK/close (post-login notice) ---- */
.mca-notice27-ok{--mca-ic-size:16px}

/* ---- clickable stat cards: trailing chevron, card layout untouched ---- */
.stat-btn{position:relative}
.mca-bicon-end .mca-bic-end{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin-left:0}
.mca-bicon-end{padding-right:34px}

/* ---- stat card with a real leading icon (e.g. refresh) reads as one row ---- */
.stat-btn.mca-bicon-row{flex-direction:row;justify-content:center;gap:6px}
.mca-bicon-end .mca-bic-end svg{width:var(--mca-ic-size);height:var(--mca-ic-size);display:block}

/* ---- narrow screens: stat cards wrap into 2x2 instead of cramming ---- */
.stat-row{flex-wrap:wrap}
.stat-row .stat{flex:1 1 40%;min-width:0;box-sizing:border-box}
.stat-row .stat span{overflow-wrap:anywhere}
@media (min-width: 641px){
  .stat-row{flex-wrap:nowrap}
  .stat-row .stat{flex:1 1 0}
}

/* ---- v5z3 attribution picker (किसने मापा / खुद / केयरगिवर): EXCLUDED ----
   Dense data-entry micro-control inside a max-64px table cell; inline styles carry
   its look. Kit JS never decorates inside .vp-attrwrap/.vp-attropts/.vp-attrcell.
   Defensive CSS: if any future kit rule tags a button there, undo the kit layout
   and hide any injected icon slot so trigger and self/caregiver chips stay unchanged. */
.vp-attrcell .mca-bic, .vp-attrcell .mca-bic-end{display:none!important}
.vp-attrcell button.mca-bicon, .vp-attrcell button.mca-bicon-end,
.vp-attrcell button.mca-bicon-row{display:inline-block!important;padding-right:0!important}

/* ---- owner steering 19:23 (voice wamid...EEUA): big module tiles half width, 2 per row ----
   Scope: module-tile grids (.svc-grid holding .tile-row). NOT patient/visit cards
   (.visit-card), NOT menu-drawer rows (.menu-list), NOT tile-sub sub-rows, NOT dialogs. */
.svc-grid:has(> .tile-row){display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svc-grid:has(> .tile-row) > .tile-row{width:auto;min-width:0;margin:0}
/* small phones: tighter tile so both names stay fully readable (no clipping) */
@media (max-width: 420px){
  .svc-grid:has(> .tile-row){gap:8px}
  .svc-grid:has(> .tile-row) > .tile-row{padding:10px;gap:8px}
  .svc-grid:has(> .tile-row) > .tile-row .mi{width:32px;height:32px;font-size:15px;border-radius:9px;flex:0 0 32px}
  .svc-grid:has(> .tile-row) > .tile-row b{font-size:14.5px}
  .svc-grid:has(> .tile-row) > .tile-row small{font-size:11.5px}
}

/* ---- reviewer guard 19:34 (isolated REV4 candidate): non-tile children of a
   tile-grid container span full width - customer pickLead mounts a MyHealth
   module child inside .svc-grid; forced 2-col would squash it. CSS-only; JS
   1b0a249f unchanged. */
.svc-grid:has(> .tile-row) > :not(.tile-row){grid-column:1/-1}

/* FIX D (item 12): the button-kit .svc-grid:has(> .tile-row) rule (specificity 0,2,0) was
   overriding the main.css @media(min-width:1024px) 3-column intent (0,1,0) at every width.
   This same-specificity later rule restores the 3-column grid whenever the layout viewport
   is at least 1024px. The app fixes the layout viewport to 1280px on all devices (one
   desktop layout everywhere; on phones the same layout shows scaled and the user zooms),
   so this rule also takes effect at phone size. Pinch-zoom is unaffected. */
@media(min-width:1024px){.svc-grid:has(> .tile-row){grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}