/* ============================================================
   openvervo — ui.css
   Styles for the shared pieces in js/ui.js: modal, toast, plan
   banner, station switcher, history timeline, badges. Uses the
   tokens from base.css, so light/dark follow the theme.
   ============================================================ */

/* ── OUTLINE CARDS ──
   Cards on the dashboard and the sidebar panel have no fill, only a hairline,
   so the page behind shows through: a soft grey on light, a lighter grey on
   dark. One value so every outlined surface matches. */
:root{--card-line:rgba(167,167,184,0.42);--card-line-w:1.5px;}
[data-theme="dark"]{--card-line:rgba(255,255,255,0.26);}
/* filled tiles inside outlined cards: whitish on the light page, the quiet grey on dark */
:root{--tile:#ffffff;--tile-hover:#f0f0f0;}
[data-theme="dark"]{--tile:var(--surface2);--tile-hover:var(--border);}

/* ── CARDS & WORDS (shared) ──
   The card language of the dashboard, available to every page: an outlined card
   with a quiet header, and short written explanations ("what this is") in place
   of decorative charts. */
.dcard{
  background:transparent;
  border:var(--card-line-w,1.5px) solid var(--card-line);
  border-radius:20px;
  padding:22px 24px;
  min-width:0;
  display:flex;flex-direction:column;gap:14px;
}
.dcard--flush{padding:0;gap:0;overflow:hidden;}
.dcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;}
.dcard--flush > .dcard-head{box-sizing:content-box;min-height:28px;padding:22px 24px 12px;}
.dcard-label{font-size:0.95rem;font-weight:500;color:var(--text2);}
.dcard-sub{font-size:0.8rem;color:var(--text3);line-height:1.5;}
.dcard-note{font-size:0.78rem;line-height:1.55;color:var(--text3);}
.dcard-note b{color:var(--text2);font-weight:600;}
.dcard-foot{padding:14px 24px 20px;border-top:1px dashed var(--card-line);}
.ins-list{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0;}
.ins-k{font-size:0.8rem;font-weight:600;color:var(--text);margin-bottom:3px;}
.ins-t{font-size:0.88rem;line-height:1.55;color:var(--text2);}
.ins-t b{color:var(--text);font-weight:600;}

/* ── READ-ONLY ACCOUNT ──
   A lapsed subscription is read-only. The server enforces it (402);
   this just stops the UI offering controls that can't work. */
.is-read-only [data-write]{display:none !important;}

.plan-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 20px;
  background:var(--amber-dim);
  color:var(--amber);
  font-size:0.82rem;font-weight:500;line-height:1.45;
  border-bottom:1px solid rgba(181,121,15,0.25);
}
.plan-banner a,.plan-banner button{
  flex-shrink:0;
  background:none;border:1.5px solid currentColor;border-radius:8px;
  padding:5px 12px;
  font-family:var(--font);font-size:0.76rem;font-weight:600;
  color:inherit;text-decoration:none;cursor:pointer;
}
@media(max-width:768px){
  .plan-banner{padding:10px 16px;flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ── MODAL ── */
.ui-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;transition:opacity 0.15s;
}
.ui-overlay.show{opacity:1;}
.ui-modal{
  width:100%;max-width:440px;max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;
  background:var(--bg);
  border-radius:16px;
  box-shadow:var(--card-shadow-hover);
  transform:translateY(8px);transition:transform 0.15s;
  overflow:hidden;
}
.ui-modal.wide{max-width:600px;}
.ui-overlay.show .ui-modal{transform:translateY(0);}
.ui-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 22px 6px;
}
.ui-modal-title{
  font-weight:700;font-size:1.1rem;letter-spacing:-0.02em;color:var(--text);
}
.ui-modal-sub{font-size:0.82rem;color:var(--text3);margin-top:3px;line-height:1.45;}
.ui-modal-x{
  background:none;border:none;cursor:pointer;color:var(--text3);
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.ui-modal-x:hover{background:var(--surface2);color:var(--text);}
.ui-modal-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.ui-modal-body{padding:10px 22px 4px;overflow-y:auto;font-size:0.88rem;color:var(--text2);line-height:1.55;}
.ui-modal-actions{display:flex;gap:10px;padding:16px 22px 20px;}
.ui-btn{
  flex:1;height:44px;
  border-radius:10px;
  font-family:var(--font);font-size:0.875rem;font-weight:600;
  cursor:pointer;
  border:1.5px solid var(--border);
  background:var(--surface);color:var(--text2);
  transition:border-color 0.15s,opacity 0.15s;
}
.ui-btn:hover{border-color:var(--border-hi);color:var(--text);}
.ui-btn.primary{background:var(--text);border-color:var(--text);color:var(--bg);}
.ui-btn.primary:hover{opacity:0.9;}
.ui-btn.danger{background:var(--red);border-color:var(--red);color:#fff;}
.ui-btn:disabled{opacity:0.5;cursor:default;}
.ui-modal .fld{margin-bottom:12px;}
.ui-modal .fld input{font-size:0.95rem;padding:11px 13px;}
.ui-error{
  font-size:0.78rem;color:var(--red);
  background:var(--red-dim);border-radius:8px;padding:9px 12px;margin-bottom:12px;
  display:none;
}
.ui-error.show{display:block;}

/* ── TOAST ── */
.ui-toasts{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:1100;display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;
}
@media(max-width:768px){.ui-toasts{bottom:84px;}}
.ui-toast{
  background:var(--text);color:var(--bg);
  font-size:0.82rem;font-weight:500;
  padding:10px 16px;border-radius:10px;max-width:min(92vw,460px);
  box-shadow:var(--card-shadow-hover);
  opacity:0;transform:translateY(6px);transition:opacity 0.18s,transform 0.18s;
}
.ui-toast.show{opacity:1;transform:translateY(0);}
.ui-toast.error{background:var(--red);color:#fff;}

/* ── CONNECTION BANNER ── */
.ui-conn{
  position:fixed;top:0;left:0;right:0;z-index:1200;
  padding:8px 14px;text-align:center;
  font-size:0.8rem;font-weight:500;line-height:1.4;
  transform:translateY(-100%);transition:transform 0.2s;
  pointer-events:none;
}
.ui-conn.show{transform:translateY(0);}
.ui-conn.offline{background:var(--text);color:var(--bg);}
.ui-conn.retry{background:var(--amber);color:#fff;}
.ui-conn.online{background:var(--green);color:#fff;}
@media(prefers-reduced-motion:reduce){.ui-conn{transition:none;}}

/* ── STATION SWITCHER ── */
.stn-switch{position:relative;min-width:0;}
.stn-pill{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font);font-size:0.82rem;font-weight:500;color:var(--text3);
  max-width:100%;
  transition:color 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.stn-pill:hover{color:var(--text2);}
.stn-pill-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stn-pill svg{
  width:13px;height:13px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;
  transition:transform 0.18s;
}
.stn-pill.open svg{transform:rotate(180deg);}
.stn-menu{
  position:absolute;top:calc(100% + 8px);left:0;
  min-width:230px;max-width:min(90vw,320px);
  background:var(--bg);border-radius:12px;box-shadow:var(--card-shadow-hover);
  overflow:hidden;z-index:600;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity 0.15s,transform 0.15s,visibility 0.15s;
}
.stn-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.stn-menu-label{
  font-size:0.65rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text3);padding:11px 14px 6px;
}
.stn-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 14px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--font);
}
.stn-item:hover{background:var(--surface2);}
.stn-item-name{font-size:0.85rem;font-weight:500;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stn-item-code{font-size:0.68rem;color:var(--text3);letter-spacing:0.05em;}
.stn-item svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.stn-divider{height:1px;background:var(--border);margin:4px 0;}
.stn-add{
  display:flex;align-items:center;gap:9px;
  width:calc(100% - 16px);margin:6px 8px 8px;padding:11px 14px;
  background:none;border:1.5px dashed var(--border);border-radius:9px;cursor:pointer;
  font-family:var(--font);font-size:0.82rem;font-weight:500;color:var(--text3);
  transition:border-color 0.15s,color 0.15s;
}
.stn-add:hover{border-color:var(--border-hi);color:var(--text2);}
.stn-add small{display:block;font-size:0.68rem;font-weight:400;margin-top:1px;}

/* ── BADGES ── */
.ui-badge{
  display:inline-block;
  font-size:0.62rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;
  background:var(--surface2);color:var(--text3);
}
.ui-badge.green{background:var(--green-dim);color:var(--green);}
.ui-badge.red{background:var(--red-dim);color:var(--red);}
.ui-badge.amber{background:var(--amber-dim);color:var(--amber);}

/* ── HISTORY TIMELINE ── */
.hist-list{display:flex;flex-direction:column;gap:0;margin:4px 0 8px;}
.hist-item{
  position:relative;padding:0 0 18px 20px;
  border-left:2px solid var(--border);margin-left:5px;
}
.hist-item:last-child{border-left-color:transparent;padding-bottom:4px;}
.hist-item::before{
  content:'';position:absolute;left:-6px;top:3px;
  width:10px;height:10px;border-radius:50%;
  background:var(--border-hi);border:2px solid var(--bg);
}
.hist-item.create::before{background:var(--green);}
.hist-item.edit::before{background:var(--accent);}
.hist-item.delete::before{background:var(--red);}
.hist-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hist-who{font-size:0.85rem;font-weight:600;color:var(--text);}
.hist-when{font-size:0.74rem;color:var(--text3);}
.hist-changes{margin-top:7px;display:flex;flex-direction:column;gap:5px;}
.hist-change{
  font-size:0.78rem;color:var(--text2);
  background:var(--surface2);border-radius:8px;padding:7px 10px;line-height:1.45;
}
.hist-change b{color:var(--text);font-weight:600;}
.hist-from{color:var(--red);text-decoration:line-through;text-decoration-thickness:1px;}
.hist-to{color:var(--green);font-weight:600;}
.hist-note{font-size:0.76rem;color:var(--text3);margin-top:5px;}

/* ── "differs on purpose" toggle (meter replaced / re-dip) ── */
.ovr{
  display:flex;align-items:flex-start;gap:8px;
  font-size:0.72rem;color:var(--text3);line-height:1.4;cursor:pointer;
  margin-top:2px;
}
.ovr input{margin-top:2px;accent-color:var(--accent);}
.ovr b{color:var(--text2);font-weight:600;}

@media(max-width:560px){
  .ui-overlay{align-items:flex-end;padding:0;}
  .ui-modal,.ui-modal.wide{max-width:none;border-radius:16px 16px 0 0;max-height:88dvh;}
}

/* ── PAGE HEADER (every owner page) ──
   Same shape as the dashboard's top: the title, then a black banner carrying the
   one-line description. The banner's height is what puts the first row of cards
   level with the sidebar panel (fixed at 13.5rem on every page). */
.main .page-header,.main .page-head-top{display:flex;flex-direction:column;gap:24px;align-items:stretch;text-align:left;}
.page-header .page-sub,.page-head-top .page-sub,.head .sub{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;
  min-height:6.125rem;padding:18px 28px;margin:0;border-radius:20px;
  /* black on the light theme, white on the dark one: --text / --bg already swap */
  background:var(--text);color:var(--bg);border:var(--card-line-w,1.5px) solid var(--text);
  font-size:1.05rem;line-height:1.45;
}
.page-sub .page-price{font-weight:600;color:inherit;margin:0;font-size:inherit;}
@media(max-width:768px){
  .page-header .page-sub,.page-head-top .page-sub,.head .sub{min-height:0;padding:14px 18px;font-size:0.95rem;}
}

/* ── SKELETON TILES ── placeholders for filled tiles use the tile colour, so they read on the page */
.skeleton.sk-tile{background:linear-gradient(90deg,var(--tile) 25%,var(--tile-hover) 50%,var(--tile) 75%);background-size:200% 100%;}

/* ── PHONES ──
   Tap targets of at least ~40px and labels of at least 11px, without changing how anything looks on a
   desktop. Small inline controls get an invisible hit area (::after) rather than being made bigger. */
@media(max-width:768px){
  .stn-pill,.chart-range-pill,.dcard-link,.flag-action,.m-act,.manager-logout,.log-sheet-view-link,.text-action,.back-chevron{position:relative;}
  .stn-pill::after,.chart-range-pill::after,.dcard-link::after,.flag-action::after,.m-act::after,.manager-logout::after,
  .log-sheet-view-link::after,.text-action::after,.back-chevron::after,.eye-btn::after{content:'';position:absolute;inset:-12px -10px;}
  .back-chevron::after{inset:-10px;}
  /* buttons that are visibly small get a little more height instead (body prefix: outrank each page's own rules) */
  body .btn-secondary,body .btn-solid,body .btn-ghost-sm,body .act-btn{min-height:38px;}
  body .range-btn,body .period button{padding-top:10px;padding-bottom:10px;}
  body .filter-btn{min-height:38px;}
  body .cal-nav button{width:36px;height:36px;}
  /* labels that were under 11px */
  body .metric-label,body .th,body .flag,body .flag-tag,body .status-text,body .m-status,body .sel-date-label,body .comp-type,
  body .ccd-label,body .cal-day-label,body .ui-badge,body .staff-avatar,body .log-item-badge{font-size:0.7rem;}
  /* bottom sheets never grow taller than the screen: they scroll inside instead of running off the top */
  body .sheet,body .bottom-sheet{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
}

/* ── custom select (UI.enhanceSelect): the app's own menu instead of the OS-drawn list ── */
.ui-select{position:relative;}
.ui-select-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:transparent;border:var(--card-line-w,1.5px) solid var(--card-line);border-radius:12px;
  padding:11px 12px;font-family:var(--font);font-size:0.9rem;color:var(--text);
  cursor:pointer;text-align:left;transition:border-color 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.ui-select-btn:hover{border-color:var(--text3);}
.ui-select.open .ui-select-btn,.ui-select-btn:focus-visible{border-color:var(--text);outline:none;}
.ui-select-btn:disabled{opacity:0.55;cursor:default;}
.ui-select-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-select-chevron{width:13px;height:13px;flex-shrink:0;fill:none;stroke:var(--text3);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.18s;}
.ui-select.open .ui-select-chevron{transform:rotate(180deg);}
.ui-select-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--bg);border:var(--card-line-w,1.5px) solid var(--card-line);border-radius:12px;
  box-shadow:var(--card-shadow-hover);
  overflow-y:auto;max-height:240px;padding:4px 0;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity 0.15s,transform 0.15s,visibility 0.15s;
  z-index:600;
}
.ui-select.up .ui-select-menu{top:auto;bottom:calc(100% + 6px);transform:translateY(4px);}
.ui-select.open .ui-select-menu{opacity:1;visibility:visible;transform:translateY(0);}
.ui-select-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;font-size:0.88rem;font-weight:500;color:var(--text);cursor:pointer;
  transition:background 0.12s;
}
.ui-select-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-select-item:hover,.ui-select-item.focus{background:var(--surface2);}
.ui-select-item.active{font-weight:600;}
.ui-select-item svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}