/* ═══════════════════════════════════════════════════════════════════
   ui_refresh.css · Franchisee Portal look & feel refresh (Nov 2, 2026)
   Loaded LAST (end of index.html), so it sits on top of the original styles.
   Goal: easier to read and tap for every franchisee, including older users:
     • bigger, darker text where it was small or faint
     • clearer page titles and a clearer "you are here" in the menu
     • 44px tap targets, phone inputs at 16px (no more iPhone auto-zoom)
     • softer cards with a visible open state, visible keyboard focus
     • a branded Dashboard welcome with 4 one-tap actions (ui_refresh.js)
   To switch the refresh off: remove the ui_refresh.css and ui_refresh.js lines at the end of index.html.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Colours: faint text was below readable contrast ── */
:root{ --dim2:#6b7f72; --ui-shadow:0 1px 2px rgba(15,50,32,.06),0 4px 14px rgba(15,50,32,.06); --ui-shadow-h:0 2px 4px rgba(15,50,32,.08),0 10px 24px rgba(15,50,32,.10); --brand-deep:#0b6b2e; --brand-orange:#f28705; }
[data-theme="dark"]{ --dim2:#86a896; --ui-shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25); --ui-shadow-h:0 2px 4px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.35); --brand-deep:#0e7a37; }

body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ── Keyboard focus is always visible ── */
:where(button,a,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:10px; }

/* ═════════════ SIDEBAR ═════════════ */
.sidebar{ width:258px; padding:18px 14px; }
.sidebar-brand{ padding:4px 8px 16px; }
.sidebar-brand-icon{ width:40px; height:40px; }
.sidebar-brand .tname{ font-size:12.5px; letter-spacing:.4px; font-weight:900; }
.sidebar-brand .tsub{ font-size:10px; letter-spacing:.8px; color:var(--dim); font-weight:700; }
.side-nav{ gap:3px; }
/* menu labels: still in capitals, but bigger and darker */
.side-link,.side-nav .side-link,.nav-group-body .side-link{ font-size:12.5px !important; letter-spacing:.35px; font-weight:800; color:var(--cream); opacity:.82; min-height:44px; padding:10px 12px; border-radius:12px; }
.side-link .si,.nav-group-hdr .si{ font-size:17px; width:22px; }
.side-link:hover{ opacity:1; background:var(--overlay); }
/* you are here: a solid green pill */
.side-link.active{ opacity:1; background:linear-gradient(135deg,var(--accent),var(--accent2)) !important; color:#fff !important; box-shadow:0 4px 12px rgba(22,163,74,.28); }
[data-theme="dark"] .side-link.active{ background:linear-gradient(135deg,#15803d,#166534) !important; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.side-link.active .nav-f10-badge,.side-link.active .chat-count-badge{ filter:brightness(1.1); }
/* group headers: neutral when merely open, green only when you are inside that group */
.nav-group-hdr{ font-size:12.5px; letter-spacing:.35px; font-weight:900; color:var(--cream); opacity:.82; min-height:44px; border-radius:12px; }
.nav-group-hdr.open{ background:transparent; color:var(--cream); }
.nav-group-hdr:hover{ opacity:1; }
.nav-group:has(.side-link.active) > .nav-group-hdr{ color:var(--gold2); opacity:1; }
.nav-arrow{ font-size:11px; color:var(--dim); }
/* items inside a group hang from a thin guide line */
.nav-group-body{ margin:2px 0 8px 21px; padding-left:8px; border-left:2px solid var(--border); }
.nav-group-body .side-link{ padding-left:12px; }
.sidebar-footer .btn{ min-height:42px; font-size:13px; }

/* ═════════════ TOP BAR ═════════════ */
.topbar{ box-shadow:0 1px 0 var(--border), 0 6px 18px rgba(15,50,32,.04); border-bottom:none; }
.topbar-in{ padding:12px 20px; }
.tb-page-title{ font-size:1.6rem; letter-spacing:.8px; line-height:1; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-user-name{ font-size:14px; font-weight:800; }
.tb-user-tier{ font-size:12px; font-weight:800; }
.avatar{ width:40px; height:40px; font-size:15px; }
.theme-toggle,.tb-chat-btn{ width:40px; height:40px; }

/* ═════════════ PAGE TITLES & TEXT ═════════════ */
.page > .section-title:first-child,.page > .section-title:first-of-type{ font-family:'Bebas Neue',cursive; font-size:2.1rem; letter-spacing:.8px; line-height:1.05; margin:28px 0 6px; color:var(--cream); }
.section-title{ font-size:1.2rem; font-weight:900; }
.section-desc{ font-size:14.5px; line-height:1.6; color:var(--dim); max-width:780px; margin-bottom:18px; }
.banner{ font-size:14px; }
.empty-state,.dd-note{ font-size:14px; }

/* ═════════════ CARDS (the tap-to-open rows) ═════════════ */
.dd{ border:1px solid var(--border); box-shadow:var(--ui-shadow); border-radius:18px; transition:border-color .15s, box-shadow .2s, transform .15s; }
.dd:hover{ box-shadow:var(--ui-shadow-h); }
.dd[open]{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--ui-shadow-h); }
.dd>summary{ min-height:64px; padding:14px 16px; }
.dd>summary .dd-ic{ flex-basis:44px; height:44px; border-radius:14px; font-size:22px; background:linear-gradient(135deg,var(--accent-soft),rgba(242,135,5,.10)); }
.dd>summary .dd-tx b{ font-size:16px; }
.dd>summary .dd-tx small{ font-size:13.5px; }
.dd>summary .dd-val{ font-size:15px; color:var(--gold2); }
.dd>summary .dd-ch{ width:28px; height:28px; flex-basis:28px; background:var(--overlay); }
.dd[open]>summary .dd-ch{ background:var(--accent-soft); color:var(--gold2); }
.dd-compact .dd>summary{ min-height:60px; padding:12px 14px; }
.dd-compact .dd>summary .dd-ic{ flex-basis:40px; height:40px; font-size:20px; }
.dd-compact .dd>summary .dd-tx b{ font-size:15.5px; }
.dd-compact .dd>summary .dd-tx small{ font-size:13px; }
.dd-compact .dd>summary .dd-val{ font-size:14.5px; }
.dd-list{ gap:10px; }
.dd-morebtn{ min-height:44px; padding:0 18px; border-radius:99px; border:1px solid var(--border-strong) !important; background:var(--card) !important; font-size:14px !important; font-weight:800; color:var(--cream) !important; box-shadow:var(--ui-shadow); }

/* ═════════════ BUTTONS, TABS, FORMS ═════════════ */
.btn{ min-height:46px; font-size:14.5px; border-radius:12px; font-weight:800; }
.btn-small{ min-height:40px; font-size:13.5px; padding:8px 16px; }
.btn-gold{ box-shadow:0 4px 12px rgba(22,163,74,.22); }
.btn-gold:hover{ filter:brightness(1.05); }
.ttab{ font-size:12.5px; padding:9px 16px; min-height:40px; border-radius:99px; border-width:1.5px; }
.field label{ font-size:13.5px; font-weight:800; }
.field input,.field select,.form-inline input,.form-inline select,.form-inline textarea,.goal-field input,.goal-field select,.goal-field textarea,:where(.page) textarea{ font-size:15px; min-height:46px; border-radius:12px; border-width:1.5px; }
:where(.page) textarea{ min-height:96px; }
.field input:focus,.field select:focus,.form-inline input:focus,.form-inline select:focus,.form-inline textarea:focus,.goal-field input:focus,.goal-field select:focus,.goal-field textarea:focus,:where(.page) textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none; }
::placeholder{ color:var(--dim2); opacity:1; }

/* small chips and pills in trackers were 11px */
.lead-actions select,.lead-actions button,.activity-add-row select,.activity-add-row input{ font-size:13px; min-height:38px; }
.icon-btn{ font-size:13px; min-height:36px; }

/* ═════════════ DASHBOARD WELCOME (built by ui_refresh.js) ═════════════ */
.hero.hero-v2{ position:relative; overflow:hidden; text-align:left; margin-top:22px; padding:22px 22px 20px; border-radius:22px; color:#fff;
  background:radial-gradient(120% 140% at 100% 0%, rgba(242,135,5,.35) 0%, rgba(242,135,5,0) 45%), linear-gradient(135deg,#0d8a3f 0%,#0b6b2e 55%,#07501f 100%);
  box-shadow:0 10px 30px rgba(11,107,46,.25); }
.hero.hero-v2:after{ content:""; position:absolute; right:-40px; bottom:-60px; width:220px; height:220px; border-radius:50%; border:28px solid rgba(255,255,255,.06); pointer-events:none; }
.hero.hero-v2 .hero-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.hero.hero-v2 .hero-date{ font-size:13.5px; font-weight:800; letter-spacing:.3px; opacity:.9; }
.hero.hero-v2 .hero-chip{ font-size:12px; font-weight:900; letter-spacing:.3px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:99px; padding:3px 10px; }
.hero.hero-v2 h1{ color:#fff; font-size:2.4rem; letter-spacing:1px; line-height:1; margin:2px 0 6px; }
.hero.hero-v2 p{ color:rgba(255,255,255,.88); font-size:15px; }
.hero-actions{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.hero-actions button{ display:flex; align-items:center; gap:10px; min-height:58px; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12);
  color:#fff; font:inherit; font-size:14.5px; font-weight:900; text-align:left; cursor:pointer; transition:background .15s, transform .12s; -webkit-tap-highlight-color:transparent; }
.hero-actions button:hover{ background:rgba(255,255,255,.2); }
.hero-actions button:active{ transform:scale(.98); }
.hero-actions .qi{ flex:0 0 36px; height:36px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.hero-actions .ql small{ display:block; font-size:12px; font-weight:700; opacity:.85; margin-top:1px; }
.page[data-page="dashboard"] .hero.hero-v2,.page[data-page="dashboard"] .dd-compact{ max-width:960px; margin-left:auto; margin-right:auto; }
.hero.hero-v2 + .dd-list{ margin-top:16px; }
[data-theme="dark"] .hero.hero-v2{ box-shadow:0 10px 30px rgba(0,0,0,.4); }

/* ═════════════ PHONES ═════════════ */
@media (max-width:880px){
  .sidebar{ width:286px; }
  .tb-page-title{ font-size:1.18rem !important; }
  .tb-user-info{ display:none; }
  /* 16px stops iPhones from zooming into a box when you tap it */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{ font-size:16px !important; }
  .page > .section-title:first-child,.page > .section-title:first-of-type{ font-size:1.8rem; margin-top:20px; }
  .section-desc{ font-size:14.5px; }
  .hero.hero-v2{ padding:18px 16px 16px; border-radius:20px; margin-top:14px; }
  .hero.hero-v2 h1{ font-size:2rem; }
  .hero-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .hero-actions button{ min-height:56px; font-size:14px; padding:8px 10px; gap:8px; }
  .hero-actions .qi{ flex-basis:32px; height:32px; font-size:17px; border-radius:10px; }
}
@media (max-width:360px){ .hero-actions .ql small{ display:none; } }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }