/* ==========================================================================
   BOYODO design tokens — the single source
   --------------------------------------------------------------------------
   Why this file exists: four token systems were in play and they disagreed —
   boyodo.css declares :root TWICE (lines 3 and 288) with different values,
   boyodo_admin_premium.css falls back to the older set, boyodo-dashboard.css
   has its own, and the Flutter app has a fourth. Four primaries, four inks,
   three teals. See docs/BOYODO_DESIGN_TOKENS.md for the full comparison.

   THIS FILE IS A NO-OP BY CONSTRUCTION. Every active value below is exactly
   what boyodo.css line 288 already renders today, so linking it cannot change
   a single pixel. That is deliberate: nothing in this repository has been
   rendered or re-verified yet, and a token file that quietly restyles the
   whole site would be indistinguishable from a bug.

   The corrections we actually want are at the bottom, commented, with the
   reasoning attached. Turn them on in the same commit as the rendered
   before/after, not before it.

   Link order: this file BEFORE boyodo.css, so these are defaults the existing
   sheet can still override during the transition.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------
     Currently-rendering values, from boyodo.css line 288. */
  --boyodo-blue:   #075fe6;
  --boyodo-indigo: #0100dc;
  --boyodo-accent: #2f7dff;
  --boyodo-teal:   #1557c7;   /* NOT teal — see the correction block below */

  /* ---- Content ---------------------------------------------------------- */
  --boyodo-ink:    #071a33;
  --boyodo-muted:  #51677f;

  /* ---- Surfaces --------------------------------------------------------- */
  --boyodo-bg:     #f1f7ff;
  --boyodo-card:   #fff;
  --boyodo-line:   #d6e3f3;

  /* ---- Gradient --------------------------------------------------------- */
  --boyodo-gradient: linear-gradient(135deg, #0100dc 0%, #075fe6 55%, #173b8f 100%);

  /* ---- Radius ----------------------------------------------------------
     The brief asks for 18–24px. The site's card radius is 24; the admin panel
     runs 12–20. Both are represented rather than averaged, because a settings
     input and a hero card should not share a corner. */
  --boyodo-radius:    24px;
  --boyodo-radius-md: 18px;
  --boyodo-radius-sm: 12px;
  --boyodo-radius-pill: 999px;

  /* ---- Spacing — the 8px rhythm the brief specifies --------------------- */
  --boyodo-s2:  2px;
  --boyodo-s4:  4px;
  --boyodo-s8:  8px;
  --boyodo-s12: 12px;
  --boyodo-s16: 16px;
  --boyodo-s24: 24px;
  --boyodo-s32: 32px;
  --boyodo-s40: 40px;

  /* ---- Touch target ----------------------------------------------------
     48, not 44. 44 is the iOS minimum and 48 the Android one; using the larger
     everywhere means a single number cannot be wrong on either platform. This
     matches Flutter's Byd.tap for the same reason. */
  --boyodo-tap: 48px;

  /* ---- Elevation -------------------------------------------------------
     Two levels only. A third invites "slightly more shadow" decisions that
     nobody can tell apart at a glance. */
  --boyodo-shadow: 0 1px 2px rgba(18,54,85,.06), 0 18px 45px -28px rgba(13,72,126,.38);
  --boyodo-shadow-lg: 0 24px 55px -34px rgba(13,72,126,.55);

  /* ---- Motion ----------------------------------------------------------- */
  --boyodo-motion: .22s cubic-bezier(.22,1,.36,1);
  --boyodo-motion-fast: .12s cubic-bezier(.22,1,.36,1);

  /* ---- Type ------------------------------------------------------------- */
  --boyodo-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --boyodo-font-display: 'Sora', 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* ---- Reduced motion ------------------------------------------------------
   Declared here as well as in boyodo.css so the guarantee travels with the
   tokens: any surface that adopts this file gets the accessibility behaviour
   without having to remember it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --boyodo-motion: 0s;
    --boyodo-motion-fast: 0s;
  }
}

/* ==========================================================================
   PROPOSED CORRECTIONS — not active
   --------------------------------------------------------------------------
   Each of these changes rendered output, and nothing here has been rendered
   yet (the Chrome extension is not connected to the session that wrote this
   file). Enable them together with a screenshot pass at 360 / 390 / 412 /
   desktop, not before.

   1. --boyodo-teal is currently #1557c7, a mid blue. Every element asking for
      the teal accent paints blue: the primary CTA gradient (hero search
      button, .boyodo-primary, first card action, active mobile-nav item,
      login/signup submit), the hero trust-row check marks, and the feature
      card icon backgrounds. The admin panel meanwhile falls back to #00b89c
      and renders true teal — same token name, two products, two colours.

   2. The site has no green, amber or danger token at all, so the available /
      unavailable / warning states the brief specifies have no colour to use.
      Values match the Flutter app's Byd.green / Byd.amber / Byd.danger so the
      two products share literal values rather than similar ones.

:root {
  --boyodo-teal:   #00a99d;
  --boyodo-green:  #0f9d58;
  --boyodo-amber:  #f0a202;
  --boyodo-danger: #d1453b;
}
   ========================================================================== */

/* ==========================================================================
   Component layer — the shapes the Blade components in
   resources/views/components/boyodo/ render.
   --------------------------------------------------------------------------
   Every value here is a token from the block above. If a component needs a
   colour or a radius that is not a token, the token set is wrong — adding a
   loose hex here is how the four-palette problem started.
   ========================================================================== */

/* ---- Status pill --------------------------------------------------------
   Five tones, not "one per status". Colour carries urgency; a vocabulary of
   five is small enough that a patient learns it across screens, and it is why
   `tone` is derived from `status` in the component rather than passed in.

   Text colours are the darkened variants rather than the token itself: the
   token greens and ambers are chosen to read on white as a fill, not as 11px
   text on a tinted background, where they fall under 4.5:1. */
.bo-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--boyodo-radius-pill);font-size:11px;font-weight:700;line-height:1.35;white-space:nowrap;letter-spacing:.01em}
.bo-pill i{font-size:10px}
.bo-pill--positive{background:rgba(15,157,88,.12);color:#0b6b41}
.bo-pill--info{background:rgba(7,95,230,.10);color:#0a4fa8}
.bo-pill--warning{background:rgba(240,162,2,.14);color:#8a5200}
.bo-pill--negative{background:rgba(209,69,59,.12);color:#a3322a}
.bo-pill--neutral{background:rgba(81,103,127,.12);color:#40536a}

/* ---- Card --------------------------------------------------------------- */
.bo-card{display:block;padding:var(--boyodo-s16);border:1px solid var(--boyodo-line);border-radius:var(--boyodo-radius-md);background:var(--boyodo-card);box-shadow:var(--boyodo-shadow);color:inherit;text-decoration:none}
.bo-card--flush{padding:0;overflow:hidden}
.bo-card--interactive{transition:transform var(--boyodo-motion),box-shadow var(--boyodo-motion)}
.bo-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--boyodo-shadow-lg)}
/* Focus-visible, not :focus — the ring should appear for a keyboard and not
   linger after a mouse click. A card that lifts on hover and does nothing on
   Tab is unusable for anyone not holding a mouse. */
.bo-card--interactive:focus-visible{outline:3px solid rgba(7,95,230,.35);outline-offset:2px}

/* ---- Section heading ----------------------------------------------------- */
.bo-heading{display:flex;flex-wrap:wrap;gap:var(--boyodo-s8) var(--boyodo-s16);align-items:baseline;justify-content:space-between;margin:0 0 var(--boyodo-s16)}
.bo-heading__text{min-width:0}
.bo-heading__eyebrow{margin:0 0 var(--boyodo-s4);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--boyodo-muted)}
.bo-heading__title{margin:0;font-family:var(--boyodo-font-display);font-size:clamp(19px,2.2vw,24px);font-weight:800;line-height:1.2;letter-spacing:-.6px;color:var(--boyodo-ink)}
.bo-heading__subtitle{margin:var(--boyodo-s4) 0 0;font-size:13px;line-height:1.5;color:var(--boyodo-muted)}
.bo-heading__action{display:inline-flex;align-items:center;gap:7px;min-height:var(--boyodo-tap);padding:0 var(--boyodo-s12);border-radius:var(--boyodo-radius-sm);font-size:13px;font-weight:700;color:var(--boyodo-blue);text-decoration:none}
.bo-heading__action:hover{background:rgba(7,95,230,.07)}
.bo-heading__action:focus-visible{outline:3px solid rgba(7,95,230,.35);outline-offset:2px}
.bo-heading__action i{font-size:11px}

/* ---- Empty / error / offline --------------------------------------------- */
.bo-empty{display:flex;flex-direction:column;align-items:center;gap:var(--boyodo-s8);padding:var(--boyodo-s32) var(--boyodo-s16);border:1px dashed var(--boyodo-line);border-radius:var(--boyodo-radius-md);background:var(--boyodo-card);text-align:center}
.bo-empty__icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--boyodo-s4);border-radius:var(--boyodo-radius-sm);background:rgba(7,95,230,.08);color:var(--boyodo-blue);font-size:19px}
.bo-empty--error .bo-empty__icon{background:rgba(209,69,59,.10);color:#a3322a}
.bo-empty--offline .bo-empty__icon{background:rgba(240,162,2,.14);color:#8a5200}
.bo-empty__title{margin:0;font-size:15px;font-weight:700;color:var(--boyodo-ink)}
.bo-empty__message{margin:0;max-width:46ch;font-size:13px;line-height:1.55;color:var(--boyodo-muted)}
.bo-empty__action{display:inline-flex;align-items:center;gap:8px;min-height:var(--boyodo-tap);margin-top:var(--boyodo-s8);padding:0 var(--boyodo-s24);border-radius:var(--boyodo-radius-sm);background:var(--boyodo-blue);color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.bo-empty__action:hover{background:#0653c9;color:#fff}
.bo-empty__action:focus-visible{outline:3px solid rgba(7,95,230,.4);outline-offset:2px}

/* ---- Loading skeleton ---------------------------------------------------- */
.bo-skel{display:flex;flex-direction:column;gap:var(--boyodo-s8)}
.bo-skel--card{padding:var(--boyodo-s16);border:1px solid var(--boyodo-line);border-radius:var(--boyodo-radius-md);background:var(--boyodo-card)}
.bo-skel__row{display:flex;gap:var(--boyodo-s12);align-items:center;margin-bottom:var(--boyodo-s4)}
.bo-skel__stack{flex:1;display:flex;flex-direction:column;gap:var(--boyodo-s8)}
.bo-skel__avatar{width:52px;height:52px;flex:none;border-radius:var(--boyodo-radius-sm)}
.bo-skel__line{height:12px;border-radius:6px}
.bo-skel__avatar,.bo-skel__line{background:linear-gradient(90deg,#eef3f9 25%,#f7fafd 37%,#eef3f9 63%);background-size:400% 100%;animation:bo-skel-shimmer 1.4s ease-in-out infinite}
@keyframes bo-skel-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* The shimmer stops entirely, rather than slowing down. Someone who has asked
   the OS for reduced motion is often asking because movement makes them ill;
   a slower pulse is still a pulse. The flat tint still reads as "not content
   yet", which is the whole job. */
@media (prefers-reduced-motion: reduce){
  .bo-skel__avatar,.bo-skel__line{animation:none;background:#eef3f9}
  .bo-card--interactive{transition:none}
  .bo-card--interactive:hover{transform:none}
}

/* Screen-reader-only text, for the skeleton's live region. Tailwind ships
   `sr-only` but the admin panel does not load Tailwind, and a loading state
   that announces nothing is a loading state a screen reader user waits out
   in silence. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Stat tile ----------------------------------------------------------
   `tabular-nums` is not decoration here: a column of rupee figures that do not
   line up is a column an admin has to read digit by digit. */
.bo-stat{display:flex;flex-direction:column;gap:var(--boyodo-s4);height:100%;padding:var(--boyodo-s16);border:1px solid var(--boyodo-line);border-radius:var(--boyodo-radius-md);background:var(--boyodo-card)}
.bo-stat__label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--boyodo-muted)}
.bo-stat__value{font-family:var(--boyodo-font-display);font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.8px;color:var(--boyodo-ink);font-variant-numeric:tabular-nums}
.bo-stat--sm .bo-stat__value{font-size:20px;letter-spacing:-.4px}
.bo-stat__hint{font-size:11.5px;line-height:1.45;color:var(--boyodo-muted)}

/* The tint is the tone. Borders shift with it too, so the tiles group at a
   glance without anyone reading the labels. */
.bo-stat--positive{border-color:rgba(15,157,88,.28);background:rgba(15,157,88,.05)}
.bo-stat--positive .bo-stat__value{color:#0b6b41}
.bo-stat--warning{border-color:rgba(240,162,2,.32);background:rgba(240,162,2,.06)}
.bo-stat--warning .bo-stat__value{color:#8a5200}
.bo-stat--negative{border-color:rgba(209,69,59,.28);background:rgba(209,69,59,.05)}
.bo-stat--negative .bo-stat__value{color:#a3322a}
.bo-stat--info{border-color:rgba(7,95,230,.24);background:rgba(7,95,230,.05)}
.bo-stat--info .bo-stat__value{color:#0a4fa8}

/* ---- Bulk action bar -----------------------------------------------------
   Appears only when rows are selected, and states the count and the total in
   the button itself. "Settle 12 bookings — ₹6,000.00" is a sentence somebody
   can check before pressing; "Settle" is not. */
.bo-bulk{display:flex;flex-wrap:wrap;gap:var(--boyodo-s12);align-items:center;justify-content:space-between;padding:var(--boyodo-s12) var(--boyodo-s16);border:1px solid rgba(7,95,230,.28);border-radius:var(--boyodo-radius-md);background:rgba(7,95,230,.06)}
.bo-bulk[hidden]{display:none}
.bo-bulk__count{font-size:13px;font-weight:700;color:var(--boyodo-ink);font-variant-numeric:tabular-nums}
.bo-bulk__note{font-size:11.5px;color:var(--boyodo-muted)}
.bo-bulk__actions{display:flex;flex-wrap:wrap;gap:var(--boyodo-s8)}
.bo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--boyodo-tap);padding:0 var(--boyodo-s16);border:1px solid var(--boyodo-line);border-radius:var(--boyodo-radius-sm);background:var(--boyodo-card);font-family:inherit;font-size:13px;font-weight:700;color:var(--boyodo-ink);cursor:pointer;text-decoration:none}
.bo-btn:hover{background:var(--boyodo-bg);color:var(--boyodo-ink)}
.bo-btn:focus-visible{outline:3px solid rgba(7,95,230,.35);outline-offset:2px}
.bo-btn--primary{border-color:transparent;background:var(--boyodo-blue);color:#fff}
.bo-btn--primary:hover{background:#0653c9;color:#fff}
/* A disabled control still has to say why. `title` carries the reason; the
   cursor and opacity say that pressing will not help. */
.bo-btn[disabled],.bo-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:auto}

/* Stat grid. auto-fit + min(100%,…) so it goes to one column at 360px with no
   breakpoint, and cannot produce a horizontally scrolling page. */
.bo-stat-grid{display:grid;gap:var(--boyodo-s12);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}