/* The app frame in the approved Charcoal look (draft 7, Leon 26 Sept 2026: "it does not adhere to my instructions").
   The design's frame (erp.css .app/.side/.main/.top/.mtop/.bnav, MiSalon Charcoal skin) applied to the app's own
   markup: a charcoal side list, the page in a cream panel with rounded corners, a white top bar with the search box
   and the person's chip, and on the phone a charcoal header with the five-tab bar under it. Loaded last. */
#scApp{--c-side:#191E22;--c-side-text:#C8CDD1;--c-side-muted:#8C949B;--c-side-hover:#22282D;--c-side-active:#2E3439;
  --c-canvas:#F7F4F0;--c-sunken:#EFECE5;--c-line:#E7E2DA;--c-text:#191E22;--c-text-2:#4A5157;--c-text-3:#7A8187;--c-coral:#E35A33}

/* ---------- phone and tablet: charcoal header, cream page, white five-tab bar ---------- */
/* app.css still carries the old left rail from 1000 px (padding, a pulled-out top bar, the tabs as a column); off. */
#scApp{background:var(--c-canvas);padding-left:0}
body:has(#scApp:not(.hide)){padding-bottom:0}
#scApp>.top{margin-left:0;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0 16px;background:var(--c-side);color:#fff;border-bottom:0;gap:4px}
#scApp>.top .brand{width:auto}
#scApp>.top .brand img{width:auto;max-height:none}
#scApp>.tabs{top:auto;left:auto;right:auto;width:auto;border-right:0}
#scApp>.tabs button{min-height:52px;padding:6px 0 4px;border-radius:0}
#scApp>.top .brand img{height:30px;filter:none}
#scApp>.top .who,#scApp>.top .quickbar,#scApp>.top .actwrap>button{display:none!important}
#scApp>.top .tsearch,#scApp>.top .tq,#scApp>.top .thelp,#scApp>.top .user .dn{display:none}
#scApp>.top .sp{flex:1}
#scApp>.top .ticon{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:#E8E2D6;cursor:pointer}
#scApp>.top .ticon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#scApp>.top .user{display:flex;align-items:center;gap:10px;border:0;background:none;padding:4px;border-radius:12px;cursor:pointer;color:inherit;min-height:44px}
#scApp>.top .user .avatar{width:34px;height:34px;border-radius:50%;background:#2E3439;color:#fff;display:grid;place-items:center;font:700 13px 'Plus Jakarta Sans',system-ui,sans-serif}
#scApp>.top .user .uwho{display:none;text-align:left;line-height:1.15}
#scApp>.top .user .uwho b{display:block;font-size:13px;font-weight:600;color:var(--c-text)}
#scApp>.top .user .uwho small{display:block;font-size:11.5px;color:var(--c-text-3)}
#scApp>.wrap{background:var(--c-canvas)}
#scApp>.tabs{background:#fff;border-top:1px solid var(--c-line);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:4px 0 calc(6px + env(safe-area-inset-bottom))}
#scApp>.tabs button{font-size:11.5px;font-weight:500;color:var(--c-text-2);gap:4px}
#scApp>.tabs button.on{color:var(--c-text);font-weight:700;background:none}
#scApp>.tabs button.on::before{display:none}
#scApp>.tabs button .ic{height:auto;width:auto;background:none!important;border-radius:0;margin:0 auto}
#scApp>.tabs button.on .ic svg{stroke-width:2.1;stroke:currentColor}
#scApp>.tabs button .ic svg{stroke:currentColor}
/* the middle button: Sale, a coral pill (design .bnav .midb, Charcoal) */
#scApp>.tabs #tb2 .ic{width:44px;height:34px;border-radius:17px;background:var(--c-coral)!important;color:#fff;display:grid;place-items:center;margin-top:-2px}
#scApp>.tabs #tb2 .ic svg{width:20px;height:20px;stroke:#fff}
#scApp>.tabs #tb2{color:var(--c-text);font-weight:600}

/* the person's menu */
.umenu{position:fixed;z-index:80;right:12px;top:calc(60px + env(safe-area-inset-top));min-width:230px;background:#fff;border:1px solid var(--c-line,#E7E2DA);border-radius:14px;box-shadow:0 12px 32px rgba(25,30,34,.16);padding:6px;display:grid}
.umenu .uh{padding:10px 12px 8px;border-bottom:1px solid #EFEAE2;margin-bottom:4px}
.umenu .uh b{display:block;font-size:14px;color:#191E22}.umenu .uh small{display:block;font-size:12.5px;color:#7A8187}
.umenu button{all:unset;box-sizing:border-box;display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font:500 14.5px 'Plus Jakarta Sans',system-ui,sans-serif;color:#191E22;cursor:pointer}
.umenu button:hover,.umenu button:focus-visible{background:#F4F1EC}
.umenu button.out{color:#A8463E}
/* search results under the top bar's search box */
.tsres{position:fixed;z-index:80;background:#fff;border:1px solid #E7E2DA;border-radius:14px;box-shadow:0 12px 32px rgba(25,30,34,.16);padding:6px;display:grid;max-height:60vh;overflow:auto}
.tsres button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:6px 12px;border-radius:10px;cursor:pointer}
.tsres button b{font:600 14px 'Plus Jakarta Sans',system-ui,sans-serif;color:#191E22}.tsres button small{font-size:12.5px;color:#7A8187}
.tsres button:hover,.tsres button.on{background:#F4F1EC}
.tsres .none{padding:12px;color:#7A8187;font-size:13.5px}

/* ---------- from 1024 px: the design's desktop frame ---------- */
@media (min-width:1024px){
  #scApp.app{display:grid;grid-template-columns:248px minmax(0,1fr);grid-template-rows:auto 1fr;background:var(--c-side)}
  #scApp>.side{background:var(--c-side);color:var(--c-side-text);padding:0 10px 10px;width:248px;box-sizing:border-box}
  #scApp>.side .brand{height:64px;display:flex;align-items:center;padding:0 10px}
  #scApp>.side .brand img{height:38px}
  #scApp>.side>button{height:40px;padding:0 10px;margin:1px 0;border-radius:10px;gap:12px;color:var(--c-side-text);font:500 14.5px 'Plus Jakarta Sans',system-ui,sans-serif}
  #scApp>.side>button svg{width:19px;height:19px;stroke-width:1.7}
  #scApp>.side>button:hover{background:var(--c-side-hover);color:#fff}
  #scApp>.side>button.on{background:var(--c-side-active);color:#fff;font-weight:600}
  #scApp>.side>button.on::after{display:none}
  #scApp>.side>button .lock{width:15px;height:15px;margin-left:auto;color:var(--c-side-muted)}
  #scApp>.side .foot{border-top:0;padding:10px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c-side-muted)}
  #scApp>.side .foot .sl{height:18px;width:auto;opacity:.8}
  /* the page sits in one cream panel with rounded corners, 8 px in from the edges */
  #scApp>.top{grid-column:2;margin:8px 8px 0 0;border-radius:16px 16px 0 0;height:56px;padding:0 20px 0 16px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line);color:var(--c-text);position:sticky;top:8px}
  /* The page scrolls under the top bar: the 8 px above it and its two rounded corners stay dark, as in the design. */
  #scApp>.top::before{content:"";position:absolute;left:-8px;right:-8px;top:-8px;height:8px;background:var(--c-side);pointer-events:none}
  #scApp>.top::after{content:"";position:absolute;left:0;right:0;top:0;height:16px;pointer-events:none;
    background:radial-gradient(circle at 100% 100%,transparent 15.5px,var(--c-side) 16px) left top/16px 16px no-repeat,
               radial-gradient(circle at 0 100%,transparent 15.5px,var(--c-side) 16px) right top/16px 16px no-repeat}
  #scApp>.top .brand{display:none}
  #scApp>.top .tsearch{display:flex;align-items:center;gap:10px;flex:0 1 560px;min-width:220px;height:36px;padding:0 10px 0 12px;background:var(--c-sunken);border:1px solid transparent;border-radius:10px;color:var(--c-text-3)}
  #scApp>.top .tsearch:hover,#scApp>.top .tsearch:focus-within{border-color:#D8D1C6}
  #scApp>.top .tsearch svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  #scApp>.top .tsearch input{flex:1;min-width:0;width:auto;height:34px;border:0;margin:0;padding:0;background:none;font:500 14px 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--c-text);outline:none}
  #scApp>.top .tsearch input:focus{box-shadow:none;outline:none}
  #scApp>.top .tsearch:focus-within{box-shadow:0 0 0 3px rgba(25,30,34,.10)}
  #scApp>.top .tsearch .kbd{font:500 11px ui-monospace,monospace;color:var(--c-text-3);border:1px solid #D8D1C6;border-radius:6px;padding:2px 6px;background:#fff}
  #scApp>.top .ticon.tsbtn{display:none}
  #scApp>.top .thelp{display:grid}
  #scApp>.top .ticon{color:var(--c-text-2);width:36px;height:36px;border-radius:10px}
  #scApp>.top .ticon:hover{background:var(--c-sunken);color:var(--c-text)}
  /* My questions, where the design had its question button (draft 7) */
  #scApp>.top .tq{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:17px;background:var(--c-side);color:#fff;font:600 13px 'Plus Jakarta Sans',system-ui,sans-serif;white-space:nowrap;cursor:pointer}
  #scApp>.top .tq svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
  #scApp>.top .user .dn{display:block;width:16px;height:16px;fill:none;stroke:var(--c-text-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #scApp>.top .user{padding:4px 8px 4px 4px}
  #scApp>.top .user:hover{background:var(--c-sunken)}
  #scApp>.top .user .avatar{background:var(--c-side)}
  #scApp>.top .user .uwho{display:block}
  #scApp>.wrap{grid-column:2;margin:0 8px 8px 0;border-radius:0 0 16px 16px;max-width:none;min-height:calc(100vh - 72px);box-sizing:border-box;padding:24px 28px 56px}
  .umenu{top:66px;right:20px}
}
@media print{#scApp>.side,#scApp>.top,#scApp>.tabs{display:none!important}#scApp>.wrap{margin:0;border-radius:0}}

/* the phone's search: a sheet over the page, the dark header carries the box */
.tsheet{position:fixed;inset:0;z-index:90;background:#F7F4F0;display:flex;flex-direction:column}
.tsheet .tshead{display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top)) 8px 6px 12px;background:#191E22}
.tsheet .tsin{flex:1;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:12px;background:#fff;color:#7A8187}
.tsheet .tsin svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.tsheet .tsin input{flex:1;min-width:0;height:42px;border:0;margin:0;padding:0;background:none;outline:none;font:500 16px 'Plus Jakarta Sans',system-ui,sans-serif;color:#191E22}
.tsheet .tsx{all:unset;box-sizing:border-box;min-height:44px;padding:0 10px;display:flex;align-items:center;color:#fff;font:600 15px 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer}
.tsheet .tsres{position:static;flex:1;border:0;border-radius:0;box-shadow:none;max-height:none;background:transparent;padding:8px 8px calc(12px + env(safe-area-inset-bottom));align-content:start}
/* More's own search box (Leon's rule: a hub page has a search box) */
#mHub7 .mfind7{margin:0 0 18px;max-width:560px}