/* ============================================================
   AgenticVani — App UI design system
   Ported from the Shiva Hair Studio webapp, made multi-tenant:
   brand colours come from CSS variables set per-tenant in the
   layout (--brand-50/100/500/600/700). Neutrals stay slate so
   the same design reads well for every business type.
   Presentation only — no app logic lives here.
   ============================================================ */

:root{
  /* Neutral palette (brand shades are injected per-tenant in the layout) */
  --bg:#f6f7f9;
  --card:#ffffff;
  --border:#e8ecf1;
  --border-strong:#dbe1e9;
  --text:#1f2937;
  --heading:#111827;
  --muted:#6b7280;
  --muted-2:#9aa3af;
  --success:#16a34a;
  --danger:#dc2626;
  --warning:#f59e0b;
  --info:#0284c7;
  --shadow:0 1px 3px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.04);
  --shadow-lg:0 10px 25px rgba(17,24,39,.12);
  /* Safe fallbacks in case the layout doesn't set brand vars */
  --brand-50:#f5f3ff;
  --brand-100:#ede9fe;
  --brand-500:#7c3aed;
  --brand-600:#6d28d9;
  --brand-700:#5b21b6;
}

*{box-sizing:border-box}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--brand-600);text-decoration:none}

/* Inputs — scoped so we never clobber Tailwind-styled inputs in
   views that haven't been converted yet. */
.ds-field input,.ds-field select,.ds-field textarea,
.form-group input,.form-group select,.form-group textarea,
.search-bar input{
  font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--border-strong);
  border-radius:10px;background:#fff;color:var(--text);width:100%;-webkit-appearance:none
}
.form-group input[type=checkbox],.form-group input[type=radio],
.ds-field input[type=checkbox],.ds-field input[type=radio]{width:auto;-webkit-appearance:auto;appearance:auto;accent-color:var(--brand-600);height:18px}
.ds-field input:focus,.ds-field select:focus,.ds-field textarea:focus,
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
.search-bar input:focus{
  outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 18%,transparent)
}

/* On touch devices iOS Safari auto-zooms any focused control below 16px and
   leaves the page zoomed, shifting the fixed bottom nav out of frame. */
@media (pointer: coarse){
  .form-group input,.form-group select,.form-group textarea,
  .ds-field input,.ds-field select,.ds-field textarea,
  .search-bar input,
  .bill-items .item,.bill-items .qty,.bill-items .price,
  .login-card input{font-size:16px}
}

/* ===== Password field with a show/hide eye ===== */
.pw-field{position:relative}
.pw-field input{padding-right:46px !important}
.pw-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:8px;padding:0}
.pw-toggle:hover{color:var(--brand-700);background:var(--brand-50)}
.pw-toggle:focus-visible{outline:2px solid var(--brand-500);outline-offset:1px}
.pw-toggle svg{width:19px;height:19px}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,var(--brand-50) 0%,var(--brand-100) 100%)}
.login-card{background:#fff;padding:32px 28px;border-radius:24px;width:100%;max-width:400px;box-shadow:0 25px 60px rgba(17,24,39,.18)}
.login-logo{text-align:center;margin-bottom:20px}
.login-logo .circle{width:96px;height:96px;border-radius:50%;background:var(--brand-50);margin:0 auto 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 4px 16px color-mix(in srgb,var(--brand-600) 22%,transparent);position:relative}
.login-logo .circle .mono{font-family:Georgia,serif;font-size:34px;font-style:italic;font-weight:700;color:var(--brand-700);line-height:1}
.login-logo .circle .sub{font-size:9px;color:var(--brand-600);font-weight:700;letter-spacing:2px;margin-top:4px;text-transform:uppercase}
.login-logo .brand-name{font-size:18px;font-weight:700;color:var(--heading);letter-spacing:-.3px}
.login-card .sub-tagline{color:var(--muted);text-align:center;margin-bottom:18px;font-size:13px}
.login-card label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px;margin-top:14px}
.login-card .demo-creds{margin-top:16px;padding:10px 12px;background:var(--brand-50);border-radius:10px;font-size:12px;color:var(--brand-700);text-align:center}

/* ===== App Shell (mobile-first) ===== */
.app{display:flex;min-height:100vh;flex-direction:column}
.main-area{display:flex;flex-direction:column;min-height:100vh}
.topbar{background:#fff;padding:11px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;box-shadow:0 1px 3px rgba(17,24,39,.04)}
.topbar .logo-mini{width:38px;height:38px;border-radius:50%;background:var(--brand-50);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-style:italic;font-weight:700;color:var(--brand-700);font-size:17px;flex-shrink:0;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.topbar h2{font-size:17px;font-weight:700;flex:1;color:var(--heading);letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.topbar .btn-icon{width:38px;height:38px;border-radius:10px;background:var(--brand-50);color:var(--brand-700);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.topbar .btn-icon:hover{background:var(--brand-100)}

.content{flex:1;padding:14px;padding-bottom:88px;overflow-y:auto}

/* Bottom navigation (mobile) */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:flex-end;padding:6px 4px calc(8px + env(safe-area-inset-bottom));z-index:40;box-shadow:0 -2px 8px rgba(17,24,39,.06)}
.bottom-nav a,.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;color:var(--muted);font-size:10px;font-weight:600;border-radius:8px;background:none;border:none;cursor:pointer;transition:all .15s}
.bottom-nav a.active,.bottom-nav button.active{color:var(--brand-700);background:var(--brand-50)}
.bottom-nav a svg,.bottom-nav button svg{width:22px;height:22px}
.bottom-nav .fab{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;width:52px;height:52px;border-radius:50%;justify-content:center;align-items:center;margin-top:-16px;box-shadow:0 6px 16px color-mix(in srgb,var(--brand-600) 45%,transparent);flex:0 0 auto}
.bottom-nav .fab svg{width:24px;height:24px}
.bottom-nav .fab span{display:none}

/* Desktop sidebar — visible only on >=1024 */
.sidebar{display:none}
@media (min-width:1024px){
  .sidebar{display:flex;flex-direction:column;width:248px;background:#fff;border-right:1px solid var(--border);height:100vh;position:fixed;top:0;left:0;padding:18px 12px;z-index:50}
  .sidebar .brand-block{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;border-bottom:1px solid var(--border);margin-bottom:12px}
  .sidebar .brand-logo{width:42px;height:42px;border-radius:50%;background:var(--brand-50);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-style:italic;font-weight:700;color:var(--brand-700);font-size:20px;flex-shrink:0;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .sidebar .brand-name{font-weight:700;color:var(--heading);font-size:14px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar .brand-tag{font-size:10px;color:var(--muted)}
  .sidebar nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
  .sidebar nav a{display:flex;align-items:center;gap:12px;padding:10px 14px;font-size:14px;font-weight:600;color:var(--muted);border-radius:10px;text-align:left}
  .sidebar nav a:hover{background:var(--brand-50);color:var(--brand-700)}
  .sidebar nav a.active{background:var(--brand-50);color:var(--brand-700)}
  .sidebar nav a svg{width:19px;height:19px;flex-shrink:0;color:var(--muted-2)}
  .sidebar nav a:hover svg,.sidebar nav a.active svg{color:var(--brand-500)}
  .sidebar .section-h{font-size:10px;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:14px 14px 6px}
  .sidebar .user-box{display:flex;align-items:center;gap:10px;padding:12px 10px 4px;border-top:1px solid var(--border);margin-top:8px}
  .sidebar .user-box .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
  .sidebar .user-box .info{flex:1;min-width:0}
  .sidebar .user-box .name{font-size:13px;font-weight:600;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar .user-box .role{font-size:11px;color:var(--muted)}
  .sidebar .user-box .logout{color:var(--muted);font-size:16px;padding:6px;cursor:pointer;background:none;border:none}
  .sidebar .user-box .logout:hover{color:var(--danger)}
  .bottom-nav{display:none}
  .main-area{margin-left:248px}
  .content{padding:24px 32px;padding-bottom:32px;max-width:1120px}
}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;transition:all .15s;cursor:pointer;border:1px solid transparent;text-decoration:none;white-space:nowrap;line-height:1.2}
.btn-primary{background:var(--brand-600);color:#fff}
.btn-primary:hover{background:var(--brand-700)}
.btn-pink{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff}
.btn-pink:hover{filter:brightness(.96)}
.btn-secondary{background:#fff;color:var(--brand-700);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--brand-50)}
.btn-success{background:var(--success);color:#fff}
.btn-danger{background:#fef2f2;color:var(--danger)}
.btn-danger:hover{background:#fee2e2}
.btn-whatsapp{background:#25d366;color:#fff}
.btn-whatsapp:hover{background:#1ea952}
.btn-call{background:#dbeafe;color:#1e40af}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--brand-50);color:var(--brand-700)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-xs{padding:4px 10px;font-size:11px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ===== Stat cards ===== */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
@media (min-width:640px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{background:#fff;padding:14px;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--border);position:relative;overflow:hidden;display:block;transition:all .15s}
a.stat-card:hover{box-shadow:var(--shadow-lg);border-color:var(--brand-500);transform:translateY(-1px)}
.stat-card .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-bottom:8px;background:var(--brand-500)}
.stat-card .icon svg{width:18px;height:18px}
.stat-card .icon.soft{background:var(--brand-50);color:var(--brand-600)}
.stat-card .corner{color:var(--muted-2);flex-shrink:0}
.stat-card .corner svg{width:19px;height:19px}
a.stat-card:active{transform:scale(.98)}
.stat-card .label{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.stat-card .value{font-size:22px;font-weight:700;color:var(--heading);margin-top:2px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stat-card .sub{font-size:10px;color:var(--muted-2);margin-top:3px}
/* NOTE: modifier is .is-alert, NOT .alert — .alert is the flash-message
   component below (same specificity, declared later) and would override the
   card padding, making alert cards shorter than their neighbours. */
.stat-card.is-alert{border-color:#fde68a;background:linear-gradient(180deg,#fffdf5,#fffbeb)}
.stat-card.is-alert .value{color:#b45309}
.stat-card.is-alert .sub{color:#a16207}
.stat-card.is-alert .icon{background:#f59e0b}
.stat-card.is-alert .rowtop svg{color:#f59e0b}
a.chip{text-decoration:none}

/* ---- List header: one counts strip + one toolbar line ---------------------
   Counts live in a single bordered strip rather than separate cards, so the
   row keeps its shape whether there are two segments or seven (loose cards
   stretched to full width when only one was shown). Each segment is a filter. */
/* width:fit-content — with two segments the strip stays compact instead of
   stretching one lonely number across the whole screen; with seven it grows to
   the full width and no further. */
.stat-strip{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;margin-bottom:10px;box-shadow:var(--shadow)}
.ss-item{flex:1 1 auto;min-width:104px;padding:11px 16px;text-decoration:none;position:relative;transition:background .12s}
.ss-item + .ss-item{box-shadow:inset 1px 0 0 var(--border)}
a.ss-item:hover{background:var(--brand-50)}
.ss-item.active{background:var(--brand-50);box-shadow:inset 0 -2.5px 0 var(--brand-600),inset 1px 0 0 var(--border)}
.ss-num{display:block;font-size:20px;font-weight:700;line-height:1.15;letter-spacing:-.4px;
  color:var(--heading);font-variant-numeric:tabular-nums}
.ss-lbl{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-item.active .ss-num{color:var(--brand-700)}
.ss-item.warn .ss-num{color:#b45309}
.ss-item.good .ss-num{color:var(--success)}
.ss-item.cold .ss-num{color:var(--muted-2)}

.list-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.lt-search{flex:1 1 220px;display:flex;align-items:center;gap:9px;height:42px;padding:0 13px;
  background:var(--card);border:1px solid var(--border);border-radius:11px;transition:border-color .12s,box-shadow .12s}
.lt-search:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.lt-search svg{width:17px;height:17px;color:var(--muted-2);flex:none}
.lt-search input{flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;font:inherit;font-size:14.5px;color:var(--text)}
.lt-select{height:42px;padding:0 32px 0 13px;border:1px solid var(--border);border-radius:11px;background:var(--card);
  font:inherit;font-size:14px;color:var(--text);cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px}
.lt-select:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.lt-clear{align-self:center;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;padding:0 6px}
.lt-clear:hover{color:var(--brand-600)}
/* On a phone, wrapping seven segments cost ~200px before the list even started.
   One swipeable row keeps every count reachable in ~56px. */
@media (max-width:640px){
  .stat-strip{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .stat-strip::-webkit-scrollbar{display:none}
  .ss-item{flex:0 0 auto;min-width:96px;padding:10px 14px}
  .ss-num{font-size:18px}
}
@media (pointer:coarse){.lt-search input,.lt-select{font-size:16px}}   /* no iOS zoom-on-focus */

/* ---- Sales trend chart ----------------------------------------------------
   A time series, drawn as a gradient area with a 2.5px line. One series, so no
   legend. Gridlines and axis stay recessive; the hover layer is a row of
   full-height cells so the target is easy to hit on a phone too. */
.chart-card{padding:16px}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.chart-total{font-size:26px;font-weight:700;color:var(--heading);letter-spacing:-.6px;line-height:1.1;font-variant-numeric:tabular-nums}
.chart-sub{font-size:12.5px;color:var(--muted);margin-top:3px}

/* Segmented control — one control, not four loose pills. */
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--bg);border:1px solid var(--border);border-radius:11px}
.seg-btn{font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:none;
  padding:6px 13px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:color .12s,background .12s}
.seg-btn:hover{color:var(--brand-700)}
.seg-btn.active{background:var(--card);color:var(--brand-700);box-shadow:0 1px 2px rgba(15,23,42,.10)}

.chart-wrap{position:relative;height:190px}
.chart-svg{display:block;width:100%;height:100%;overflow:visible}
.chart-hit{position:absolute;inset:0;display:flex}
.chart-cell{flex:1;min-width:0;height:100%}
.chart-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--brand-600);
  border:2.5px solid var(--card);box-shadow:0 1px 4px rgba(15,23,42,.25);transform:translate(-50%,-50%);pointer-events:none;transition:left .08s,top .08s}
.chart-tipbox{position:absolute;transform:translate(-50%,calc(-100% - 14px));background:var(--heading);color:#fff;
  font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:9px;white-space:nowrap;pointer-events:none;z-index:5;
  box-shadow:0 4px 14px rgba(15,23,42,.28)}
.chart-axis{display:flex;margin-top:8px}
.chart-lab{flex:1;min-width:0;text-align:center;font-size:10.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden}

/* Birth date as Day / Month / Year dropdowns — the native picker makes you step
   back a year at a time on Android, which is unusable for a birth year. */
.dob-group{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px}
.dob-group select{width:100%}

/* Membership badge on the bill screen — "this customer is on Gold". */
.member-badge{display:flex;align-items:center;gap:9px;margin-top:9px;padding:9px 13px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand-50),#fff);border:1px solid var(--brand-100)}
.member-badge[hidden]{display:none}
.mb-ic{font-size:15px;flex:none}
.mb-text{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--brand-700)}
.mb-undo{font:inherit;font-size:12px;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;flex:none}
.mb-undo:hover{color:var(--danger)}
.mb-undo[hidden]{display:none}

/* Billing: bill on the left, the sales summary on the right (wide screens). */
.billing-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.side-card{padding:0;overflow:hidden}
.side-hero{padding:18px 18px 16px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;position:relative;overflow:hidden}
.side-hero::after{content:'';position:absolute;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.10)}
.side-hero-val{font-size:28px;font-weight:700;letter-spacing:-.6px;line-height:1.1;font-variant-numeric:tabular-nums}
.side-hero-lbl{font-size:12px;opacity:.9;margin-top:4px}
.side-rows{padding:6px 18px 4px}
.side-stat{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0}
.side-stat + .side-stat{border-top:1px solid var(--border)}
.side-total{border-top:1px solid var(--border-strong) !important}
.side-lbl{font-size:13px;color:var(--muted)}
.side-val{font-size:15px;font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums}
.side-links{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px 18px}
@media (min-width:1180px){
  .billing-layout{grid-template-columns:minmax(0,760px) minmax(240px,1fr);align-items:start}
}
.stat-card.accent{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));border:none;position:relative;overflow:hidden}
.stat-card.accent::after{content:'';position:absolute;right:-22px;top:-22px;width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.10)}
.stat-card.accent .value,.stat-card.accent .label,.stat-card.accent .sub{color:#fff}
.stat-card.accent .value{font-size:26px}
.stat-card.accent .label,.stat-card.accent .sub{opacity:.9}

/* ===== Cards & sections ===== */
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.card.flush{padding:0;overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.card-header h3{font-size:15px;font-weight:700;color:var(--heading)}
.card-header .more{color:var(--brand-700);font-size:12px;font-weight:600}
.section-title{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:20px 0 10px;padding:0 2px;display:flex;align-items:center;gap:7px}
.section-title::before{content:'';width:4px;height:11px;border-radius:3px;background:var(--brand-500);flex-shrink:0}
.page-hint{font-size:13px;color:var(--muted);margin-bottom:14px}

/* Page header (greeting row) */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 2px 6px}
.page-head .page-title{font-size:19px;font-weight:800;color:var(--heading);letter-spacing:-.4px}
.page-head .page-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.page-head .end{text-align:right;flex-shrink:0}
.page-head .end .note{font-size:11px;color:var(--muted-2);margin-top:5px}

/* ===== List items =====
   display gets !important because the Tailwind CDN ships a `.list-item`
   display utility (display:list-item) that would otherwise override this,
   adding stray ::marker bullets and breaking the flex row. */
.list-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px;display:flex !important;align-items:center;gap:12px;transition:all .15s;list-style:none}
a.list-item,.list-item.clickable{cursor:pointer}
a.list-item:hover,.list-item.clickable:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px);border-color:var(--brand-500)}
.list-item .avatar{width:42px;height:42px;border-radius:50%;background:var(--brand-50);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--brand-700);font-size:16px;flex-shrink:0}
.list-item .avatar svg{width:20px;height:20px}
.list-item .info{flex:1;min-width:0}
.list-item .name{font-weight:600;font-size:14px;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .meta{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .end{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.list-item .amount{font-weight:700;color:var(--brand-700);font-size:14px}
.list-item .time{font-size:11px;color:var(--muted)}
.list-item .row-actions{display:flex;gap:6px;flex-shrink:0}

/* ===== Table (desktop lists) ===== */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table thead th{background:var(--bg);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--border)}
.data-table tbody td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text)}
.data-table tbody tr:last-child td{border-bottom:none}
/* Breathing room at the card edges — the amount column was sitting flush
   against the border, which read as a layout bug. */
.data-table thead th:first-child,.data-table tbody td:first-child,.data-table tfoot td:first-child{padding-left:20px}
.data-table thead th:last-child,.data-table tbody td:last-child,.data-table tfoot td:last-child{padding-right:20px}
.data-table tbody tr:hover{background:var(--brand-50)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ===== Badges ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
.b-regular,.b-active,.b-paid,.b-completed,.b-success{background:#dcfce7;color:#15803d}
.b-onetime,.b-brand{background:var(--brand-50);color:var(--brand-700)}
.b-lead,.b-info,.b-confirmed{background:#dbeafe;color:#1e40af}
.b-vip,.b-scheduled,.b-pending,.b-trial{background:#fef3c7;color:#92400e}
.b-inactive,.b-muted{background:#e2e8f0;color:#475569}
.b-onway,.b-partial{background:#fed7aa;color:#9a3412}
.b-progress{background:#fce7f3;color:#9d174d}
.b-cancelled,.b-danger,.b-overdue{background:#fee2e2;color:#991b1b}

/* ===== Modal (bottom-sheet on mobile) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.55);z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:ds-fadein .2s;overscroll-behavior:contain}
@keyframes ds-fadein{from{opacity:0}to{opacity:1}}
@media (min-width:768px){.modal-overlay{align-items:center;padding:20px}}
.modal{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:520px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -10px 40px rgba(0,0,0,.28);animation:ds-slideup .25s;max-height:90vh;max-height:90dvh}
@media (min-width:768px){.modal{border-radius:20px}}
@keyframes ds-slideup{from{transform:translateY(20px);opacity:.7}to{transform:translateY(0);opacity:1}}
.modal-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--brand-50);flex-shrink:0}
.modal-header h3{font-size:16px;font-weight:700;color:var(--heading)}
.modal-header .close{font-size:22px;color:var(--brand-700);cursor:pointer;line-height:1;background:rgba(255,255,255,.6);border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.modal-body{padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
.modal-footer{padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);display:flex;gap:10px;background:#fff;flex-shrink:0}
.modal-footer .btn{flex:1}

/* Forms */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-group .hint{font-size:11px;color:var(--muted);margin-top:4px}
.form-group .err{font-size:11px;color:var(--danger);margin-top:4px}
.form-group input.has-error,.form-group select.has-error,.form-group textarea.has-error{border-color:#f87171}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:540px){.form-row{grid-template-columns:1fr}}
.tag-enc{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--brand-700);background:var(--brand-50);padding:2px 6px;border-radius:6px;font-weight:700}

/* ===== Alerts / flash ===== */
.alert{border-radius:12px;padding:11px 14px;font-size:13px;margin-bottom:14px;border:1px solid transparent}
.alert-success{background:#ecfdf5;color:#15803d;border-color:#bbf7d0}
.alert-error{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.alert-info{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}
.alert-warn{background:#fffbeb;color:#92400e;border-color:#fde68a}

/* ===== Confirm dialog (replaces the browser's native confirm()) =====
   Native confirm() can't be styled, and interpolating a name into it breaks on
   an apostrophe (D'Souza) — which silently skipped confirmation entirely. */
.confirm-overlay{position:fixed;inset:0;background:rgba(17,24,39,.55);z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;animation:ds-fadein .15s}
.confirm-box{background:#fff;border-radius:18px;width:100%;max-width:390px;box-shadow:0 22px 55px rgba(17,24,39,.3);overflow:hidden;animation:ds-pop .16s ease-out}
@keyframes ds-pop{from{transform:scale(.96);opacity:.5}to{transform:scale(1);opacity:1}}
.confirm-box .cbody{padding:24px 22px 18px;text-align:center}
.confirm-box .cic{width:54px;height:54px;border-radius:50%;background:#fef2f2;color:var(--danger);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.confirm-box .cic svg{width:26px;height:26px}
.confirm-box h4{font-size:17px;font-weight:700;color:var(--heading);margin-bottom:6px;letter-spacing:-.2px}
.confirm-box .cmsg{font-size:13px;color:var(--muted);line-height:1.5}
.confirm-box .cfoot{display:flex;gap:10px;padding:0 22px 22px}
.confirm-box .cfoot .btn{flex:1;padding:12px 16px}
.confirm-box .btn-danger-solid{background:var(--danger);color:#fff}
.confirm-box .btn-danger-solid:hover{filter:brightness(.94)}
/* non-destructive variant (question, not deletion) */
.confirm-box.ask .cic{background:var(--brand-50);color:var(--brand-600)}
@media (max-width:479px){
  .confirm-overlay{align-items:flex-end;padding:0}
  .confirm-box{max-width:none;border-radius:20px 20px 0 0}
  .confirm-box .cfoot{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}

/* ===== Line-item tables (New Bill + New Deal) =====
   Size the inputs directly: with only fixed column widths the first column
   collapsed to nothing on a phone and the item picker became unusable. */
.bill-items{width:100%}
.bill-items th,.bill-items td{padding:7px 5px;vertical-align:middle}
.bill-items th:first-child,.bill-items td:first-child{padding-left:2px}
.bill-items .item,.bill-items .qty,.bill-items .price{
  width:100%;padding:9px 10px;border:1px solid var(--border-strong);border-radius:9px;
  font-size:13px;background:#fff;-webkit-appearance:none;box-sizing:border-box;color:var(--text)
}
.bill-items .item{min-width:140px;padding-right:28px}
.bill-items .qty{min-width:46px;text-align:center}
.bill-items .price{min-width:72px}
.bill-items .item:focus,.bill-items .qty:focus,.bill-items .price:focus{
  outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 18%,transparent)
}
.bill-items .line{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.bill-items .ac-menu .ac-item{padding:8px 10px;font-size:13px;cursor:pointer}
.bill-items .ac-menu .ac-item:hover{background:var(--brand-50)}
/* QA #4 — the item/service picker must work even if the Tailwind CDN is slow/blocked,
   so its positioning + open/close live here in app-ui.css (not only Tailwind utilities). */
.bill-items .item-ac{position:relative}
.bill-items .ac-toggle{position:absolute;top:0;right:4px;height:100%;display:flex;align-items:center;padding:0 4px;background:none;border:none;cursor:pointer;color:var(--muted);z-index:2}
.bill-items .ac-toggle:hover{color:var(--brand-600)}
/* position:fixed, not absolute — the items table is a horizontal scroll
   container, and any scroll container CLIPS an absolutely positioned child, so
   the suggestions were being rendered but never visible. JS anchors it. */
.bill-items .ac-menu{position:fixed;z-index:80;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);max-height:210px;overflow-y:auto;padding:4px 0}
.bill-items .ac-menu.hidden{display:none}
.bill-items .ac-opt{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;font-size:13px;text-align:left;background:none;border:none;cursor:pointer}
.bill-items .ac-opt:hover{background:var(--brand-50)}
/* On touch devices keep these at 16px too, so iOS does not zoom on focus. */
@media (pointer: coarse){
  .bill-items .item,.bill-items .qty,.bill-items .price{font-size:16px}
}

/* ===== Toast ===== */
.toast{position:fixed;top:16px;left:16px;right:16px;background:var(--heading);color:#fff;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow-lg);z-index:200;animation:ds-slidein .25s;font-size:13px;text-align:center;font-weight:600}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}
@media (min-width:768px){.toast{left:auto;right:20px;max-width:360px}}
@keyframes ds-slidein{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ===== Loading + empty ===== */
.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--muted)}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--brand-600);border-radius:50%;animation:ds-spin .8s linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty svg{width:44px;height:44px;margin:0 auto 14px;color:var(--brand-500);opacity:.55}
.empty .title{font-size:15px;font-weight:700;color:var(--heading);margin-bottom:5px}
.empty .desc{font-size:13px;color:var(--muted);margin-bottom:16px}

/* ===== Search bar ===== */
.search-bar{position:relative;margin-bottom:12px}
.search-bar svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.search-bar input{padding-left:40px;border-radius:24px}

/* ===== Filter chips ===== */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{padding:6px 12px;background:#fff;border:1px solid var(--border-strong);border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-block}
.chip.active{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}

/* ===== Detail (key/value) ===== */
.detail-section{padding:14px;background:#fff;border-radius:12px;margin-bottom:10px;border:1px solid var(--border)}
.detail-section h4{font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;margin-bottom:8px;font-weight:700}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{color:var(--heading);font-weight:600;text-align:right}

/* ===== Plan / choice cards (onboarding, plan page) ===== */
.choice{position:relative;cursor:pointer;display:block}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .box{height:100%;border:1px solid var(--border-strong);border-radius:14px;padding:14px;transition:all .15s;background:#fff}
.choice:hover .box{border-color:var(--brand-500)}
.choice input:checked + .box{border-color:var(--brand-500);background:var(--brand-50);box-shadow:0 0 0 2px var(--brand-500) inset}
.choice .box .t{font-weight:700;color:var(--heading);font-size:14px}
.choice .box .d{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}

/* ===== More sheet (mobile overflow nav) — single-column list ===== */
.more-list{display:flex;flex-direction:column}
.more-list a{display:flex;align-items:center;gap:14px;padding:13px 6px;color:var(--text);font-size:15px;font-weight:600;border-bottom:1px solid var(--border)}
.more-list a:last-child{border-bottom:none}
.more-list a svg{width:22px;height:22px;color:var(--brand-500);flex-shrink:0}
.more-list a::after{content:'›';margin-left:auto;color:var(--muted-2);font-size:20px;font-weight:400;line-height:1}
.more-list a:active{background:var(--brand-50)}

/* ===== Bottom-sheet interactions (slide-up forms, detail cards) ===== */
body.sheet-open{overflow:hidden}
/* a fetched full-page form (.card) dropped into a sheet loses its panel chrome */
.modal-body .card{border:none;box-shadow:none;padding:0;margin:0;max-width:none;background:transparent}
.modal-body .card .between{padding-top:0}
/* sheet action buttons pinned under the form */
.sheet-loading{display:flex;align-items:center;justify-content:center;padding:44px}
/* toast stack */
.toast-root{position:fixed;top:16px;left:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media (min-width:768px){.toast-root{left:auto;right:20px;width:360px}}
.toast-root .toast{position:static;animation:ds-slidein .22s}
/* row that opens a detail sheet */
.list-item.tappable{cursor:pointer}
.data-table tr.tappable{cursor:pointer}

/* Utilities used by converted views */
.muted{color:var(--muted)}
.strong{color:var(--heading);font-weight:700}
.right{text-align:right}
.nowrap{white-space:nowrap}
.tabnum{font-variant-numeric:tabular-nums}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:540px){.grid-2{grid-template-columns:1fr}}
.flex{display:flex}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gap{gap:10px}
.mt{margin-top:14px}
.hidden{display:none}
@media (min-width:1024px){.only-mobile{display:none!important}}
.only-desktop{display:none}
@media (min-width:1024px){.only-desktop{display:block}}


/* ---- Smart Daily Nudges ---- */
.nudge-card{background:linear-gradient(135deg,var(--brand-50),var(--card));border:1px solid var(--brand-100);border-radius:16px;padding:16px 16px 8px;margin-bottom:18px}
.nudge-head{font-size:13px;font-weight:700;color:var(--brand-700);display:flex;align-items:center;gap:6px;margin-bottom:10px}
.nudge-spark{font-size:15px}
.nudge-list{display:flex;flex-direction:column}
.nudge-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--brand-100);text-decoration:none;color:var(--text)}
.nudge-item:first-child{border-top:none}
.nudge-text{font-size:13.5px;line-height:1.45}
.nudge-cta{flex:none;font-size:12px;font-weight:600;color:var(--brand-700);white-space:nowrap}
@media (max-width:540px){.nudge-item{flex-direction:column;align-items:flex-start;gap:4px}}

/* ---- Ask Your Shop (AI) v3 — WhatsApp-familiar chat --------------------
   Deliberately NOT brand-themed in the chat surface: the beige wallpaper,
   green own-bubbles, tick marks and round green mic/send button are the exact
   visual grammar every Indian shopkeeper already knows from WhatsApp, so the
   AI needs zero learning. The page chrome (header, quota pill) stays branded. */
.ask-shell{max-width:680px;display:flex;flex-direction:column;min-height:calc(100vh - 150px)}
.ask-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-bottom:none;border-radius:16px 16px 0 0}
.ask-top-id{display:flex;align-items:center;gap:11px}
.ask-top-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;background:linear-gradient(135deg,var(--brand-100),var(--brand-50));border:1px solid var(--brand-100)}
.ask-top-name{font-size:16px;font-weight:700;color:var(--heading)}
.ask-top-sub{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-top:1px}
.ask-online-dot{width:7px;height:7px;border-radius:50%;background:#00a884;flex:none}
.ask-quota-pill{flex:none;font-size:11px;font-weight:600;color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-100);padding:5px 10px;border-radius:999px;white-space:nowrap}
.ask-quota-pill.low{color:var(--danger);background:#fef2f2;border-color:#fecaca}

/* Chat wallpaper — WhatsApp's warm beige, with a whisper of texture. */
.ask-log{flex:1;display:flex;flex-direction:column;gap:5px;padding:14px 12px 10px;overflow-y:auto;
  background:#efe7dd;background-image:radial-gradient(circle at 25% 15%,rgba(255,255,255,.35) 0,transparent 45%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.25) 0,transparent 40%);
  border-left:1px solid var(--border);border-right:1px solid var(--border)}
.ask-date{align-self:center;background:#fff;color:#54656f;font-size:11.5px;font-weight:500;padding:5px 12px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);margin-bottom:8px}
.ask-bubble{display:flex;align-items:flex-end;animation:askrise .18s ease-out}
.ask-bubble.me{justify-content:flex-end}
.ask-bubble + .ask-bubble{margin-top:5px}
@keyframes askrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ask-avatar{display:none}
.ask-bubble .ask-body{position:relative;max-width:82%;padding:7px 9px 8px 10px;border-radius:9px;font-size:14.5px;line-height:1.5;background:#fff;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
/* WhatsApp-style tails on the top corner */
.ask-bubble.ai .ask-body{border-top-left-radius:0}
.ask-bubble.ai .ask-body::before{content:'';position:absolute;top:0;left:-8px;width:0;height:0;border-top:0;border-right:8px solid #fff;border-bottom:10px solid transparent}
.ask-bubble.me .ask-body{background:#d9fdd3;border-top-right-radius:0}
.ask-bubble.me .ask-body::before{content:'';position:absolute;top:0;right:-8px;width:0;height:0;border-top:0;border-left:8px solid #d9fdd3;border-bottom:10px solid transparent}
/* time + ticks, floated into the last line exactly like WhatsApp */
.msg-meta{float:right;margin:8px -2px -4px 10px;font-size:10.5px;line-height:1;color:#667781;display:inline-flex;align-items:center;gap:3px;user-select:none}
.msg-meta .tk{font-size:11px;letter-spacing:-1px;color:#8696a0}
.msg-meta .tk.blue{color:#53bdeb}

/* Dock: quick-reply chips + composer on WhatsApp's grey composer strip */
.ask-dock{position:sticky;bottom:0;background:#f0f2f5;border:1px solid var(--border);border-top:none;border-radius:0 0 16px 16px;padding:8px 10px calc(10px + env(safe-area-inset-bottom))}
.ask-suggest{display:flex;gap:8px;overflow-x:auto;padding:0 0 8px;scrollbar-width:none}
.ask-suggest::-webkit-scrollbar{display:none}
.ask-chip{flex:none;font:inherit;font-size:13px;padding:7px 13px;border-radius:999px;border:1px solid rgba(0,168,132,.35);background:#fff;color:#008069;font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap;box-shadow:0 1px .5px rgba(11,20,26,.08)}
.ask-chip span{opacity:.95}
.ask-chip:hover,.ask-chip:active{background:#e7fce3;border-color:#00a884}

.ask-composer{display:flex;gap:7px;align-items:center;background:transparent;border:none;padding:0}
.ask-composer input{flex:1;min-width:0;border:none;outline:none;background:#fff;font:inherit;font-size:15px;color:#111b21;padding:12px 16px;border-radius:999px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.ask-composer input::placeholder{color:#8696a0}
/* One round green action button, like WhatsApp: mic when empty, send when typing */
.ask-mic,.ask-send{flex:none;width:46px;height:46px;border-radius:50%;border:none;background:#00a884;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,transform .08s;box-shadow:0 1px 2px rgba(11,20,26,.2)}
.ask-mic:hover,.ask-send:hover{background:#008f72}
.ask-mic:active,.ask-send:active{transform:scale(.93)}
.ask-composer.voice-on:not(.has-text) .ask-send{display:none}
.ask-composer.voice-on.has-text .ask-mic{display:none}
.ask-mic.live{background:#ea0038;animation:askpulse 1.1s infinite}
@keyframes askpulse{0%,100%{opacity:1}50%{opacity:.62}}
.ask-send.busy{opacity:.6;cursor:default}
.ask-note{text-align:center;font-size:11px;margin:7px 0 0}

.ask-typing{display:inline-flex;gap:4px;padding:3px 0}
.ask-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:inline-block;animation:askbounce 1.1s infinite}
.ask-typing i:nth-child(2){animation-delay:.15s}
.ask-typing i:nth-child(3){animation-delay:.3s}
@keyframes askbounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.nav-ai-dot{margin-left:2px;font-size:11px}
@media (pointer:coarse){.ask-composer input{font-size:16px}}