:root {
    --accent: #ffe0b2;         /* AppSheet peach header/footer */
    --accent-deep: #f5a623;
    --ink: #2b2b2b;
    --muted: #757575;
    --bg: #ffffff;
    --card: #ffffff;
    --line: #e0e0e0;
    --danger: #c62828;
    --ok: #2e7d32;
    --warn: #f9a825;
    /* AppSheet menu group dot colors */
    --dot-finance: #8e24aa;
    --dot-xray: #f9a825;
    --dot-daily: #2e7d32;
    --dot-history: #ef6c00;
    --dot-audit: #1565c0;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    font-size: 17px; color: var(--ink); background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  /* ===== Header (AppSheet view bar) ===== */
  header {
    background: var(--accent); padding: 10px 8px;
    display: flex; align-items: center; gap: 6px;
    position: sticky; top: 0; z-index: 20;
    min-height: 56px;
  }
  header .icon-btn {
    border: none; background: none; font-size: 1.3rem; padding: 8px;
    cursor: pointer; color: var(--ink); border-radius: 50%; line-height: 1;
    flex: 0 0 auto;
  }
  header .icon-btn:active { background: rgba(0,0,0,.08); }
  header .vdot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
  header h1 {
    font-size: 1.1rem; font-weight: 500; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ===== Bottom nav (AppSheet footer) ===== */
  nav.footer {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    background: var(--accent); display: flex;
    border-top: 1px solid rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom);
  }
  nav.footer button {
    flex: 1; border: none; background: none; cursor: pointer;
    padding: 8px 4px 10px; color: var(--ink);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: .78rem; font-family: inherit;
  }
  nav.footer button .fico { font-size: 1.15rem; line-height: 1; }
  nav.footer button.active { font-weight: 700; }
  nav.footer button.active::after {
    content: ''; width: 42px; height: 3px; background: var(--ink);
    border-radius: 2px; margin-top: 2px;
  }

  /* ===== Drawer menu (AppSheet hamburger) ===== */
  .drawer-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30;
    display: none;
  }
  .drawer {
    position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 340px;
    background: #fff; z-index: 31; transform: translateX(-102%);
    transition: transform .22s ease; display: flex; flex-direction: column;
    box-shadow: 2px 0 14px rgba(0,0,0,.2);
  }
  .drawer.open { transform: translateX(0); }
  .drawer-head {
    display: flex; align-items: center; gap: 12px; padding: 18px 16px;
    border-bottom: 1px solid var(--line);
  }
  .drawer-head .logo {
    width: 44px; height: 44px; border-radius: 8px; background: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  }
  .drawer-head .t { font-size: 1.15rem; font-weight: 500; }
  .drawer-list { flex: 1; overflow-y: auto; padding: 6px 0; }
  .drawer-list button {
    display: flex; align-items: center; gap: 14px; width: 100%;
    border: none; background: none; cursor: pointer; text-align: left;
    padding: 13px 18px; font-size: .95rem; color: var(--ink); font-family: inherit;
  }
  .drawer-list button:active { background: #f5f5f5; }
  .drawer-list button.active { background: #fff3e0; }
  .drawer-list .mico { color: var(--muted); font-size: 1.05rem; width: 22px; text-align: center; }
  .drawer-list .mdot { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; }
  .drawer-foot {
    border-top: 1px solid var(--line); padding: 14px 18px;
    font-size: .8rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  main { padding: 12px 12px 92px; max-width: 720px; margin: 0 auto; }

  .card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 8px; padding: 14px; margin-bottom: 12px;
  }
  .section-h {
    margin: 14px 4px 8px; font-size: .82rem; font-weight: 700;
    color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  }

  /* ===== Forms ===== */
  label.field { display: block; margin-bottom: 14px; }
  label.field span.lbl { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 5px; }
  label.field span.req { color: var(--danger); }
  input[type=date], input[type=number], input[type=text], textarea, select {
    width: 100%; padding: 12px; font-size: 1rem; color: var(--ink);
    border: 1px solid #ccc; border-radius: 6px; background: #fff; font-family: inherit;
  }
  input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-deep); border-color: transparent; }
  textarea { min-height: 70px; resize: vertical; }

  .type-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .type-buttons button {
    padding: 12px 6px; font-size: .82rem; font-weight: 600; border-radius: 6px;
    border: 1.5px solid #ccc; background: #fff; color: var(--muted); cursor: pointer; font-family: inherit;
  }
  .type-buttons button.selected { background: var(--accent); border-color: var(--accent-deep); color: var(--ink); }

  /* AppSheet-style camera box */
  .photo-field { margin-bottom: 14px; }
  .photo-field .lbl { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 5px; }
  .photo-field input[type=file] { display: none; }
  .photo-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    min-height: 74px; padding: 12px; border: 1px solid #ccc; border-radius: 6px;
    background: #fff; color: var(--muted); font-size: 1.2rem; cursor: pointer; font-family: inherit;
  }
  .photo-btn span { font-size: .82rem; }
  .photo-btn.has-photo { border-color: var(--ok); color: var(--ok); }
  .photo-thumb { max-height: 110px; border-radius: 6px; margin-top: 8px; display: block; }

  .total-line {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 4px 2px; font-weight: 700; font-size: 1.1rem;
  }

  button.primary {
    width: 100%; padding: 14px; font-size: 1rem; font-weight: 700;
    border: none; border-radius: 6px; background: var(--accent-deep); color: #fff;
    cursor: pointer; font-family: inherit;
  }
  button.primary:disabled { opacity: .55; }
  button.ghost {
    width: 100%; padding: 12px; font-size: .95rem; font-weight: 600;
    border: 1.5px solid var(--accent-deep); border-radius: 6px;
    background: #fff; color: var(--accent-deep); cursor: pointer; font-family: inherit;
  }

  .msg { padding: 12px 14px; border-radius: 6px; margin-bottom: 12px; font-size: .92rem; display: none; }
  .msg.ok { background: #e8f5e9; color: var(--ok); display: block; }
  .msg.err { background: #fdecea; color: var(--danger); display: block; }
  .msg.warn { background: #fff8e1; color: #8d6e00; display: block; }

  /* ===== AppSheet two-line list rows ===== */
  .lrow {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 13px 2px; border-bottom: 1px solid #eee;
  }
  .lrow:last-child { border-bottom: none; }
  .lrow .lmain { min-width: 0; flex: 1; }
  .lrow .lt { font-weight: 500; font-size: .98rem; }
  .lrow .lb { font-size: .95rem; color: var(--ink); margin-top: 3px; }
  .lrow .ltag {
    font-size: .68rem; color: var(--muted); text-transform: uppercase;
    letter-spacing: .04em; text-align: right; flex: 0 0 auto; padding-top: 3px;
  }

  /* ===== AppSheet tables ===== */
  .tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; }
  .tbl table { border-collapse: collapse; width: 100%; font-size: .82rem; white-space: nowrap; }
  .tbl th {
    text-align: left; font-weight: 600; color: var(--ink);
    padding: 10px 12px; border-bottom: 2px solid var(--line);
    position: sticky; top: 0; background: var(--card);
  }
  .tbl td { padding: 11px 12px; border-bottom: 1px solid #eee; }
  .tbl tr:last-child td { border-bottom: none; }
  .tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .tbl td.chev { color: #bbb; padding-left: 4px; }

  /* colored status dot (AppSheet format rules) */
  .sdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; }
  .sdot.red { background: var(--danger); }
  .sdot.green { background: var(--ok); }
  .sdot.yellow { background: var(--warn); }
  .st { font-weight: 600; font-size: .8rem; }
  .st.ok { color: var(--ok); }
  .st.bad { color: var(--danger); }
  .st.warn { color: #8d6e00; }

  /* stat boxes (dashboard cards) */
  .summary-strip { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .summary-strip .box {
    flex: 1 1 45%; background: var(--card); border: 1px solid var(--line);
    border-radius: 8px; padding: 12px; min-width: 42%;
  }
  .summary-strip .box .v { font-weight: 700; font-size: 1.05rem; }
  .summary-strip .box .k { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

  .filter-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
  .filter-row select, .filter-row input { flex: 1; }

  .dep-actions { margin-top: 8px; display: flex; gap: 8px; }
  .dep-actions button {
    background: none; border: 1px solid #ccc; border-radius: 6px;
    padding: 6px 14px; font-size: .8rem; color: #555; cursor: pointer; font-family: inherit;
  }
  .dep-actions button.danger { color: var(--danger); }

  .void-badge { color: var(--danger); font-size: .72rem; font-weight: 700; }
  .voided { text-decoration: line-through; opacity: .5; }

  /* ===== Modal (kapalit ng pangit na browser prompts) ===== */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; display: none;
  }
  .modal {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(92%, 460px); max-height: 86vh; overflow-y: auto;
    background: #fff; border-radius: 12px; padding: 18px; z-index: 41; display: none;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
  }
  .modal-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
  .modal-actions { display: flex; gap: 10px; margin-top: 6px; }
  .modal-actions button { flex: 1; }

  /* ===== Toast (kapalit ng pangit na alert dialogs) ===== */
  .toast {
    position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px);
    background: #323232; color: #fff; padding: 12px 18px; border-radius: 8px;
    font-size: .9rem; max-width: 90%; text-align: center; z-index: 50;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  .spinner {
    display: none; margin: 30px auto; width: 34px; height: 34px;
    border: 4px solid var(--accent); border-top-color: var(--accent-deep);
    border-radius: 50%; animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .empty { text-align: center; color: var(--muted); padding: 28px 10px; font-size: .9rem; }

  /* ===== Go-live notice (Jul 2026 operational tables) ===== */
  .golive-notice {
    background: #fff8e6; border: 1px solid #f0d9a0; border-left: 4px solid var(--accent-deep);
    border-radius: 8px; padding: 16px; margin: 4px 0;
  }
  .golive-notice .gl-t { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
  .golive-notice .gl-b { font-size: .86rem; color: var(--muted); line-height: 1.45; }
  .golive-notice .gl-btn {
    margin-top: 12px; border: 1px solid var(--accent-deep); background: #fff;
    color: var(--accent-deep); border-radius: 8px; padding: 9px 16px;
    font-size: .88rem; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  .golive-notice .gl-btn:active { background: #fdf2dc; }

  /* ===== TEST ENVIRONMENT banner ===== */
  .test-banner {
    position: sticky; top: 0; z-index: 30;
    background: repeating-linear-gradient(45deg, #b71c1c, #b71c1c 12px, #8e1414 12px, #8e1414 24px);
    color: #fff; font-size: .78rem; font-weight: 700; text-align: center;
    padding: 7px 10px; letter-spacing: .3px;
  }
  .test-banner + header { top: 32px; }

  /* ===== Photo viewer / lightbox (Area 3) ===== */
  .photo-chip {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--line); border-radius: 6px; background: #faf8f5;
    padding: 2px 8px; font-size: .78rem; color: var(--accent-deep);
    cursor: pointer; font-family: inherit; margin: 1px 2px 1px 0; white-space: nowrap;
  }
  .photo-chip:active { background: #f0ece5; }
  .lightbox-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 60;
    display: none; align-items: center; justify-content: center; flex-direction: column;
  }
  .lightbox-overlay.open { display: flex; }
  .lightbox-stage {
    flex: 1; display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 0; padding: 10px;
  }
  .lightbox-stage img {
    max-width: 96vw; max-height: 78vh; border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6); object-fit: contain;
  }
  .lightbox-caption { color: #eee; font-size: .85rem; padding: 4px 12px; text-align: center; }
  .lightbox-bar {
    display: flex; gap: 10px; padding: 12px; align-items: center; justify-content: center;
  }
  .lightbox-bar button {
    border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08);
    color: #fff; border-radius: 8px; padding: 10px 16px; font-size: .95rem;
    cursor: pointer; font-family: inherit; min-width: 54px;
  }
  .lightbox-bar button:disabled { opacity: .3; cursor: default; }
  .lightbox-msg { color: #fff; text-align: center; font-size: .9rem; padding: 20px; max-width: 86vw; }
  .lightbox-spin {
    width: 34px; height: 34px; border: 4px solid rgba(255,255,255,.25);
    border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite;
  }

  /* ===== Filter bar + pagination (Area 4) ===== */
  .filter-bar {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: flex-end;
  }
  .filter-bar .f {
    display: flex; flex-direction: column; gap: 3px; flex: 1 1 130px; min-width: 110px;
  }
  .filter-bar .f.wide { flex: 2 1 200px; }
  .filter-bar .f > span { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
  .filter-bar input, .filter-bar select {
    border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
    font-size: .88rem; font-family: inherit; background: #fff; width: 100%;
  }
  .filter-bar .clear-btn {
    border: 1px solid #ccc; background: none; border-radius: 8px; padding: 8px 12px;
    font-size: .8rem; color: var(--muted); cursor: pointer; font-family: inherit; flex: 0 0 auto;
  }
  .pager {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 10px 0 4px; flex-wrap: wrap;
  }
  .pager button {
    border: 1px solid var(--line); background: #fff; border-radius: 8px;
    padding: 8px 16px; font-size: .9rem; cursor: pointer; font-family: inherit;
  }
  .pager button:disabled { opacity: .35; cursor: default; }
  .pager .range { font-size: .8rem; color: var(--muted); }
  .retry-box { text-align: center; padding: 16px; }
  .retry-box button {
    border: 1px solid var(--accent-deep); color: var(--accent-deep); background: none;
    border-radius: 8px; padding: 8px 18px; cursor: pointer; font-family: inherit; margin-top: 8px;
  }

/* =====================================================================
   BrightSmile PORTFOLIO DEMO — responsive/mobile refinement layer.
   Injected AFTER the production stylesheet by both demo builders
   (build_local_demo.py and build_apps_script_demo.py). Production
   Styles.html is never modified — this file only extends it.

   Design intent: the app is used one-handed on a phone. Every control a
   thumb must hit is ≥44px, nothing collides below 320px, tables scroll
   inside their own container with the key column pinned, and desktop
   keeps the authentic centered-column look of the real product.
   ===================================================================== */

/* ---------- tap targets & focus (all widths) ---------- */
input[type=date], input[type=number], input[type=text], select {
  min-height: 48px;
}
textarea { min-height: 84px; }
button.primary { min-height: 52px; }
button.ghost { min-height: 48px; }
.type-buttons button { min-height: 48px; }
.photo-chip { padding: 6px 10px; min-height: 34px; }
.pager button { min-height: 44px; }
.retry-box button { min-height: 44px; padding: 10px 18px; }
/* the inline retry button carries a style attribute, so it needs !important
   to reach a thumb-sized target */
.retry-inline { min-height: 44px !important; padding: 10px 16px !important; }
.golive-notice .gl-btn { min-height: 44px; }
.lightbox-bar button { min-height: 46px; }
.modal-actions button { min-height: 48px; }
.filter-bar input, .filter-bar select {
  min-height: 44px;
  font-size: 16px;              /* readable + no iOS focus zoom */
}
.filter-bar .clear-btn { min-height: 44px; }
.tbl button { min-height: 38px; }          /* row actions: Send/Edit/Void */
.dep-actions { flex-wrap: wrap; }          /* 3 buttons never overflow a card */
.dep-actions button { min-height: 40px; padding: 9px 14px; }
#exp-items > .card > .lrow button,
#xray-items > .card > .lrow button { min-height: 40px; padding: 6px 10px; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; }

/* ---------- date-range rows: date inputs have an intrinsic min-width and
   refuse to shrink, which forced page overflow at 320px on the Expense
   Dashboard. Let them shrink, and stack them on the smallest phones. ------ */
.filter-row { flex-wrap: wrap; }
.filter-row input, .filter-row select { min-width: 0; flex: 1 1 45%; }

/* ---------- long content must wrap, never clip ---------- */
.lrow .lt, .lrow .lb { overflow-wrap: anywhere; }
.summary-strip .box .v { overflow-wrap: anywhere; }
.golive-notice .gl-b { overflow-wrap: anywhere; }
.msg { overflow-wrap: anywhere; }

/* ---------- modal: always inside the viewport, actions reachable ---------- */
.modal { max-height: min(86vh, calc(100dvh - 20px)); }
.modal .photo-thumb { max-width: 100%; height: auto; }

/* Long edit modals scroll internally; without this, Save/Cancel sit below the
   fold. Pin the action bar to the bottom of the modal so the primary action is
   always visible while the fields scroll underneath it. */
.modal .modal-actions {
  position: sticky; bottom: -18px;          /* flush with the modal's padding */
  margin: 6px -18px -18px; padding: 10px 18px 16px;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 14px -10px rgba(0, 0, 0, .22);
}
@media (max-width: 374px) {
  .modal .modal-actions { bottom: -14px; margin: 6px -14px -14px; padding: 10px 14px 14px; }
}

/* ---------- tables: pin the identifying column on phones ---------- */
@media (max-width: 767px) {
  .tbl th:first-child, .tbl td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--card);
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, .14);
  }
  .tbl th:first-child { z-index: 3; }      /* corner over both axes */
}

/* ---------- ≤430px: standard phones ---------- */
@media (max-width: 430px) {
  main { padding: 10px 10px 96px; }
  .card { padding: 12px; }
  .tbl { margin: 0 -12px; padding: 0 12px; }
  header h1 { font-size: 1rem; }
  .filter-bar .f { flex: 1 1 44%; min-width: 44%; }   /* max two per row */
  .filter-bar .f.wide { flex-basis: 100%; }
  .filter-bar .clear-btn { flex: 1 1 100%; }
  .summary-strip .box { flex: 1 1 46%; min-width: 46%; }
  nav.footer button { font-size: .72rem; padding: 7px 2px 9px; }
}

/* ---------- ≤374px: small phones (320–360) ---------- */
@media (max-width: 374px) {
  .filter-bar .f { flex-basis: 100%; min-width: 100%; }  /* one field per row */
  .filter-row input[type=date] { flex-basis: 100%; }     /* stacked date range */
  .summary-strip .box { flex-basis: 100%; min-width: 100%; }
  .type-buttons { grid-template-columns: 1fr; }          /* stacked choices */
  nav.footer button { font-size: .68rem; }
  .lrow { gap: 8px; }
  .demo-watermark { font-size: .54rem; padding: 3px 8px; }
  .modal { width: min(96%, 460px); padding: 14px; }
}

/* ---------- desktop: keep the authentic centered column, breathe a bit ---- */
@media (min-width: 1024px) {
  main { max-width: 760px; }
  .summary-strip .box { flex: 1 1 30%; min-width: 30%; }
}

/* =====================================================================
   BrightSmile PORTFOLIO DEMO — responsive/mobile refinement layer.
   Injected AFTER the production stylesheet by both demo builders
   (build_local_demo.py and build_apps_script_demo.py). Production
   Styles.html is never modified — this file only extends it.

   Design intent: the app is used one-handed on a phone. Every control a
   thumb must hit is ≥44px, nothing collides below 320px, tables scroll
   inside their own container with the key column pinned, and desktop
   keeps the authentic centered-column look of the real product.
   ===================================================================== */

/* ---------- tap targets & focus (all widths) ---------- */
input[type=date], input[type=number], input[type=text], select {
  min-height: 48px;
}
textarea { min-height: 84px; }
button.primary { min-height: 52px; }
button.ghost { min-height: 48px; }
.type-buttons button { min-height: 48px; }
.photo-chip { padding: 6px 10px; min-height: 34px; }
.pager button { min-height: 44px; }
.retry-box button { min-height: 44px; padding: 10px 18px; }
/* the inline retry button carries a style attribute, so it needs !important
   to reach a thumb-sized target */
.retry-inline { min-height: 44px !important; padding: 10px 16px !important; }
.golive-notice .gl-btn { min-height: 44px; }
.lightbox-bar button { min-height: 46px; }
.modal-actions button { min-height: 48px; }
.filter-bar input, .filter-bar select {
  min-height: 44px;
  font-size: 16px;              /* readable + no iOS focus zoom */
}
.filter-bar .clear-btn { min-height: 44px; }
.tbl button { min-height: 38px; }          /* row actions: Send/Edit/Void */
.dep-actions { flex-wrap: wrap; }          /* 3 buttons never overflow a card */
.dep-actions button { min-height: 40px; padding: 9px 14px; }
#exp-items > .card > .lrow button,
#xray-items > .card > .lrow button { min-height: 40px; padding: 6px 10px; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; }

/* ---------- date-range rows: date inputs have an intrinsic min-width and
   refuse to shrink, which forced page overflow at 320px on the Expense
   Dashboard. Let them shrink, and stack them on the smallest phones. ------ */
.filter-row { flex-wrap: wrap; }
.filter-row input, .filter-row select { min-width: 0; flex: 1 1 45%; }

/* ---------- long content must wrap, never clip ---------- */
.lrow .lt, .lrow .lb { overflow-wrap: anywhere; }
.summary-strip .box .v { overflow-wrap: anywhere; }
.golive-notice .gl-b { overflow-wrap: anywhere; }
.msg { overflow-wrap: anywhere; }

/* ---------- modal: always inside the viewport, actions reachable ---------- */
.modal { max-height: min(86vh, calc(100dvh - 20px)); }
.modal .photo-thumb { max-width: 100%; height: auto; }

/* Long edit modals scroll internally; without this, Save/Cancel sit below the
   fold. Pin the action bar to the bottom of the modal so the primary action is
   always visible while the fields scroll underneath it. */
.modal .modal-actions {
  position: sticky; bottom: -18px;          /* flush with the modal's padding */
  margin: 6px -18px -18px; padding: 10px 18px 16px;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 14px -10px rgba(0, 0, 0, .22);
}
@media (max-width: 374px) {
  .modal .modal-actions { bottom: -14px; margin: 6px -14px -14px; padding: 10px 14px 14px; }
}

/* ---------- tables: pin the identifying column on phones ---------- */
@media (max-width: 767px) {
  .tbl th:first-child, .tbl td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--card);
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, .14);
  }
  .tbl th:first-child { z-index: 3; }      /* corner over both axes */
}

/* ---------- ≤430px: standard phones ---------- */
@media (max-width: 430px) {
  main { padding: 10px 10px 96px; }
  .card { padding: 12px; }
  .tbl { margin: 0 -12px; padding: 0 12px; }
  header h1 { font-size: 1rem; }
  .filter-bar .f { flex: 1 1 44%; min-width: 44%; }   /* max two per row */
  .filter-bar .f.wide { flex-basis: 100%; }
  .filter-bar .clear-btn { flex: 1 1 100%; }
  .summary-strip .box { flex: 1 1 46%; min-width: 46%; }
  nav.footer button { font-size: .72rem; padding: 7px 2px 9px; }
}

/* ---------- ≤374px: small phones (320–360) ---------- */
@media (max-width: 374px) {
  .filter-bar .f { flex-basis: 100%; min-width: 100%; }  /* one field per row */
  .filter-row input[type=date] { flex-basis: 100%; }     /* stacked date range */
  .summary-strip .box { flex-basis: 100%; min-width: 100%; }
  .type-buttons { grid-template-columns: 1fr; }          /* stacked choices */
  nav.footer button { font-size: .68rem; }
  .lrow { gap: 8px; }
  .demo-watermark { font-size: .54rem; padding: 3px 8px; }
  .modal { width: min(96%, 460px); padding: 14px; }
}

/* ---------- desktop: keep the authentic centered column, breathe a bit ---- */
@media (min-width: 1024px) {
  main { max-width: 760px; }
  .summary-strip .box { flex: 1 1 30%; min-width: 30%; }
}


/* =====================================================================
   Hosted BrightSmile demo — presentation layer for the portfolio build.
   Replaces the developer-style red TEST ENVIRONMENT stripe with a calm,
   professional identification bar. Still unmistakably a demo; no longer
   looks like something half-finished.
   ===================================================================== */

/* ---- top identification bar (overrides .test-banner) ---- */
.test-banner {
  background: #23303a;
  color: #e8eef3;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2px;
  text-align: left;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-brand { font-weight: 700; letter-spacing: .3px; }
.pd-sep { opacity: .4; }
.pd-tag {
  background: var(--accent-deep); color: #23303a;
  border-radius: 999px; padding: 2px 9px;
  font-size: .62rem; font-weight: 800; letter-spacing: .09em;
}
.pd-sub { opacity: .72; font-size: .68rem; }
.pd-mode:empty { display: none; }
.pd-mode {
  margin-left: auto; border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 2px 9px;
  font-size: .6rem; font-weight: 800; letter-spacing: .09em;
}
.pd-mode.owner { border-color: #7bd88f; color: #7bd88f; }

@media (max-width: 430px) {
  .test-banner { padding: 7px 11px; gap: 6px; }
  .pd-sub { display: none; }          /* keep the bar to one line on phones */
}

/* ---- drawer demo block ---- */
.demo-block {
  margin: 10px 12px 4px; padding: 11px 12px; border-radius: 10px;
  background: #f4f7f9; border: 1px solid #dbe4ea;
}
.demo-title {
  font-size: .62rem; font-weight: 800; letter-spacing: .12em;
  color: #56707f; margin-bottom: 3px;
}
.demo-who { font-size: .82rem; font-weight: 600; color: #23303a; margin-bottom: 8px; }
.demo-roles { display: flex; gap: 6px; }
.demo-role-btn {
  flex: 1; font-family: inherit; font-size: .76rem; font-weight: 600;
  padding: 9px 4px; border-radius: 7px; cursor: pointer; min-height: 40px;
  border: 1px solid #c6d4dd; background: #fff; color: #40586a;
}
.demo-role-btn.active { background: #23303a; border-color: #23303a; color: #fff; }
.demo-note { margin-top: 9px; font-size: .68rem; line-height: 1.4; color: #6b8395; }