/* Babo CRM skin "Dark Orange" / "White Orange" (Nick, 8 Nov 2026). Layout, functions and class names are untouched: this file only
   recolours the design system of app.css, swaps the font for Inter, and adds the data stream with the logo behind the
   sidebar. Active when <html data-skin="babo"> (settings key ui_theme); without it the stock light/dark theme renders as before. */
html[data-skin=babo]:root{
  --bg:#050505;--panel:rgba(17,17,19,.86);--ink:#f5f5f6;--ink-2:#b4b4b9;--ink-3:#7a7a81;--line:rgba(255,255,255,.085);--line-2:rgba(255,255,255,.05);
  --accent:#ff7210;--accent-ink:#ff9224;--accent-soft:rgba(255,114,16,.16);--accent-hover:#ff8a30;--blue:#ff9224;--blue-soft:rgba(255,114,16,.18);
  --good:#2fd36b;--good-soft:rgba(47,211,107,.16);--warn:#f5b31a;--warn-soft:rgba(245,179,26,.16);--bad:#ff4d36;--bad-soft:rgba(255,77,54,.16);--neutral-soft:rgba(255,255,255,.07);
  --side:rgba(9,9,11,.78);--side-ink:#cfcfd4;--side-dim:#8a8a90;--side-active:rgba(255,122,26,.14);--side-line:rgba(255,255,255,.07);
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--display:"Inter","Segoe UI",system-ui,sans-serif;--mono:"Inter","Segoe UI",system-ui,sans-serif;
  --r:12px;--r-sm:9px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 14px 40px -24px rgba(0,0,0,.9);--shadow-float:0 18px 50px -16px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);
  --hover:rgba(255,122,26,.06);--glow:0 0 0 1px rgba(255,122,26,.18),0 0 18px -6px rgba(255,122,26,.3);
  color-scheme:dark;
}
/* the soft orange glow from the right that fades out towards the middle */
html[data-skin=babo] body{background-color:#050505;background-image:radial-gradient(80vw 140vh at 110% 50%,rgba(255,110,30,.16),rgba(255,90,20,.05) 38%,transparent 60%);background-attachment:fixed;background-repeat:no-repeat}
html[data-skin=babo] a{color:var(--accent-ink)}
/* surfaces: slightly translucent panels with a thin light edge; floating menus stay opaque so nothing shows through them */
html[data-skin=babo] .panel,html[data-skin=babo] .tile,html[data-skin=babo] .msg{box-shadow:var(--shadow)}
html[data-skin=babo] .cmd-sug,html[data-skin=babo] .mcard,html[data-skin=babo] .drawer,html[data-skin=babo] .tt-stmenu,html[data-skin=babo] .dd-body,html[data-skin=babo] .addrs,html[data-skin=babo] .toast{background:#121214}
html[data-skin=babo] .toast{color:var(--ink);border:1px solid var(--line)}
html[data-skin=babo] .cmdbar form{background:rgba(255,255,255,.04);border-color:var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html[data-skin=babo] th{background:#0b0b0c}
html[data-skin=babo] tr:hover td{background:var(--hover)}
html[data-skin=babo] input[type=text],html[data-skin=babo] input[type=email],html[data-skin=babo] input[type=number],html[data-skin=babo] input[type=date],html[data-skin=babo] input[type=password],html[data-skin=babo] select,html[data-skin=babo] textarea{background:rgba(255,255,255,.04)}
html[data-skin=babo] input:focus,html[data-skin=babo] select:focus,html[data-skin=babo] textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
/* the primary action is orange with a soft glow; the hot counters in the sidebar are orange too, red stays for real faults */
html[data-skin=babo] .btn.primary,html[data-skin=babo] button.primary{background:linear-gradient(180deg,#ff8a2e,#ff6a14);border-color:transparent;color:#fff;box-shadow:0 0 14px -4px rgba(255,122,26,.45)}
html[data-skin=babo] .btn.primary:hover,html[data-skin=babo] button.primary:hover{background:linear-gradient(180deg,#ff9a48,#ff7a26);border-color:transparent}
html[data-skin=babo] button,html[data-skin=babo] .btn{background:rgba(255,255,255,.04)}
html[data-skin=babo] button:hover,html[data-skin=babo] .btn:hover{background:rgba(255,255,255,.08)}
html[data-skin=babo] .btn.primary:hover,html[data-skin=babo] button.primary:hover{background:linear-gradient(180deg,#ff9a48,#ff7a26)}
html[data-skin=babo] .side .count.hot{background:var(--accent);color:#fff;box-shadow:0 0 8px -2px rgba(255,122,26,.5)}
html[data-skin=babo] .tile.accent::before{box-shadow:0 0 10px var(--accent)}
html[data-skin=babo] .dot.good{box-shadow:0 0 6px var(--good)}html[data-skin=babo] .dot.warn{box-shadow:0 0 6px var(--warn)}html[data-skin=babo] .dot.bad{box-shadow:0 0 6px var(--bad)}html[data-skin=babo] .dot.accent{box-shadow:0 0 6px var(--accent)}
html[data-skin=babo] .brief-col.first{box-shadow:0 0 18px -12px rgba(255,122,26,.4)}
/* ---------- sidebar: glass surface, every row on its own dark button so the labels stay readable over the data stream ---------- */
html[data-skin=babo] .side{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid var(--side-line)}
html[data-skin=babo] .side>*{position:relative;z-index:1}
html[data-skin=babo] .side>.sidefx{z-index:0}
html[data-skin=babo] .side .brand img{box-shadow:var(--glow)}
html[data-skin=babo] .side a{background:rgba(12,12,14,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html[data-skin=babo] .side .sub a{background:rgba(12,12,14,.62)}
html[data-skin=babo] .side a:hover{background:rgba(255,122,26,.10);box-shadow:inset 0 0 0 1px rgba(255,122,26,.18)}
html[data-skin=babo] .side a.active{background:linear-gradient(90deg,rgba(255,122,26,.22),rgba(255,122,26,.06));box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px rgba(255,122,26,.2)}
html[data-skin=babo] .side .cat,html[data-skin=babo] .side .theme-toggle,html[data-skin=babo] .side .status{background:rgba(5,5,6,.55);border-radius:8px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
html[data-skin=babo] .side .status{border-top-color:transparent}
html[data-skin=babo] .side .status i{box-shadow:0 0 6px var(--good)}html[data-skin=babo] .side .status i.busy{box-shadow:0 0 6px var(--accent)}html[data-skin=babo] .side .status i.err{box-shadow:0 0 6px var(--bad)}
/* the particle field: a soft orange fade from the left edge that dies out to the right, with faint specks, over the whole height */
.sidefx{display:none}
html[data-skin=babo] .sidefx{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden;background:linear-gradient(90deg,rgba(255,114,16,.13),rgba(255,114,16,.05) 45%,transparent 80%)}
html[data-skin=babo] .sidefx .particles{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
html[data-skin=babo] .sidefx .stream,html[data-skin=babo] .sidefx .logo{display:none}
/* main page: the mirrored particle fade on the right edge, fixed so it stays while the page scrolls */
.mainfx{display:none}
html[data-skin=babo] .mainfx{display:block;position:fixed;top:0;right:0;bottom:0;width:300px;z-index:-1;pointer-events:none;overflow:hidden;background:linear-gradient(270deg,rgba(255,114,16,.10),rgba(255,114,16,.04) 45%,transparent 80%)}
html[data-skin=babo] .mainfx .particles{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
/* top bar: logged-in user and log out on the right */
html[data-skin=babo] .srvbar{background:rgba(17,17,19,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* sidebar group titles: icon, orange rule underneath, a little more presence (Nick, 8 Nov 2026) */
html[data-skin=babo] .side .cat{color:var(--ink-2);font-size:12.5px;letter-spacing:.01em;text-transform:none;padding:14px 10px 6px;margin:0 0 3px;border-radius:0;background:rgba(5,5,6,.6);border-bottom:1px solid rgba(255,122,26,.45);box-shadow:0 1px 0 rgba(255,122,26,.08);justify-content:flex-start;gap:7px}
html[data-skin=babo] .side .cat .chev{margin-left:auto}
html[data-skin=babo] .side .cat .cic{display:inline-flex;color:var(--accent)}
html[data-skin=babo] .side .cat .cic svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
html[data-skin=babo] .side .cat:hover{color:var(--ink)}
/* sidebar typography (Nick, 8 Nov 2026): every row the same font, size, weight, height and text offset, Dashboard included;
   the generic orange link colour never reaches the sidebar; group titles share the rows' icon size and text offset (36px) */
html[data-skin=babo] .side a,html[data-skin=babo] .side .sub a{color:var(--side-ink);font-family:var(--sans);font-size:13.5px;font-weight:400;line-height:20px;padding:6px 10px;gap:0}
html[data-skin=babo] .side a .ico,html[data-skin=babo] .side .sub a .ico{width:16px;height:16px;margin-right:10px;color:var(--side-dim)}
html[data-skin=babo] .side a.active,html[data-skin=babo] .side a:hover,html[data-skin=babo] .side .sub a.active,html[data-skin=babo] .side .sub a:hover{color:#fff}
html[data-skin=babo] .side a.active .ico,html[data-skin=babo] .side a:hover .ico{color:#fff}
html[data-skin=babo] .side .cat{font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:16px;padding:14px 10px 6px;gap:10px}
html[data-skin=babo] .side .cat .cic svg{width:16px;height:16px;stroke-width:1.75}
html[data-skin=babo] .side .count{font-family:var(--sans);font-size:11px;font-weight:600;line-height:18px;padding:0 7px}
html[data-skin=babo] .side .brand{font-family:var(--sans);font-size:15px;font-weight:700;line-height:20px}
html[data-skin=babo] .side .brand small{font-size:11px;font-weight:500;line-height:20px}
/* login page */
html[data-skin=babo] .login .brand img{box-shadow:var(--glow)}

/* ---------- White Orange (Nick, 8 Nov 2026): the same skin on white. Day/Night in the sidebar flips data-mode; everything above still applies ---------- */
html[data-skin=babo][data-mode=light]:root{
  --bg:#f7f7f8;--panel:rgba(255,255,255,.82);--ink:#17171a;--ink-2:#55555c;--ink-3:#85858d;--line:rgba(0,0,0,.09);--line-2:rgba(0,0,0,.055);
  --accent:#f26a00;--accent-ink:#d85f00;--accent-soft:rgba(242,106,0,.12);--accent-hover:#ff7a14;--blue:#d85f00;--blue-soft:rgba(242,106,0,.14);
  --good:#149a4a;--good-soft:rgba(20,154,74,.12);--warn:#b47b00;--warn-soft:rgba(180,123,0,.14);--bad:#d93a22;--bad-soft:rgba(217,58,34,.12);--neutral-soft:rgba(0,0,0,.05);
  --side:rgba(255,255,255,.72);--side-ink:#2a2a2f;--side-dim:#6f6f77;--side-active:rgba(242,106,0,.12);--side-line:rgba(0,0,0,.07);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px -18px rgba(0,0,0,.18);--shadow-float:0 18px 50px -16px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.05);
  --hover:rgba(242,106,0,.05);--glow:0 0 0 1px rgba(242,106,0,.18),0 0 18px -6px rgba(242,106,0,.25);color-scheme:light}
html[data-skin=babo][data-mode=light] body{background-color:#f7f7f8;background-image:radial-gradient(80vw 140vh at 110% 50%,rgba(255,122,26,.14),rgba(255,122,26,.04) 38%,transparent 60%)}
html[data-skin=babo][data-mode=light] th{background:#f0f0f2}
html[data-skin=babo][data-mode=light] .cmd-sug,html[data-skin=babo][data-mode=light] .mcard,html[data-skin=babo][data-mode=light] .drawer,html[data-skin=babo][data-mode=light] .tt-stmenu,html[data-skin=babo][data-mode=light] .dd-body,html[data-skin=babo][data-mode=light] .addrs,html[data-skin=babo][data-mode=light] .toast{background:#fff}
html[data-skin=babo][data-mode=light] .cmdbar form{background:rgba(255,255,255,.7)}
html[data-skin=babo][data-mode=light] input[type=text],html[data-skin=babo][data-mode=light] input[type=email],html[data-skin=babo][data-mode=light] input[type=number],html[data-skin=babo][data-mode=light] input[type=date],html[data-skin=babo][data-mode=light] input[type=password],html[data-skin=babo][data-mode=light] select,html[data-skin=babo][data-mode=light] textarea{background:rgba(255,255,255,.8)}
html[data-skin=babo][data-mode=light] button,html[data-skin=babo][data-mode=light] .btn{background:rgba(255,255,255,.8)}
html[data-skin=babo][data-mode=light] button:hover,html[data-skin=babo][data-mode=light] .btn:hover{background:#fff}
html[data-skin=babo][data-mode=light] .btn.primary,html[data-skin=babo][data-mode=light] button.primary{background:linear-gradient(180deg,#ff7a14,#f06300);box-shadow:0 0 14px -4px rgba(242,106,0,.45)}
html[data-skin=babo][data-mode=light] .btn.primary:hover,html[data-skin=babo][data-mode=light] button.primary:hover{background:linear-gradient(180deg,#ff8a2e,#f56a08)}
html[data-skin=babo][data-mode=light] .side{background:rgba(255,255,255,.7);border-right:1px solid var(--side-line)}
html[data-skin=babo][data-mode=light] .side .brand{color:#17171a}
html[data-skin=babo][data-mode=light] .side a{background:rgba(255,255,255,.75);color:#2a2a2f;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03)}
html[data-skin=babo][data-mode=light] .side .sub a{background:rgba(255,255,255,.55);color:#2a2a2f}
html[data-skin=babo][data-mode=light] .side a .ico{color:#6f6f77}
html[data-skin=babo][data-mode=light] .side a:hover{background:rgba(242,106,0,.08);color:#17171a;box-shadow:inset 0 0 0 1px rgba(242,106,0,.2)}
html[data-skin=babo][data-mode=light] .side .sub a.active,html[data-skin=babo][data-mode=light] .side .sub a:hover{color:#17171a}
html[data-skin=babo][data-mode=light] .side a.active{background:linear-gradient(90deg,rgba(242,106,0,.18),rgba(242,106,0,.05));color:#17171a;box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px rgba(242,106,0,.2)}
html[data-skin=babo][data-mode=light] .side a.active .ico,html[data-skin=babo][data-mode=light] .side a:hover .ico{color:#17171a}
html[data-skin=babo][data-mode=light] .side .count{background:rgba(0,0,0,.07);color:#2a2a2f}
html[data-skin=babo][data-mode=light] .side .cat,html[data-skin=babo][data-mode=light] .side .theme-toggle,html[data-skin=babo][data-mode=light] .side .status{background:rgba(255,255,255,.55);color:#55555c}
html[data-skin=babo][data-mode=light] .side .cat:hover,html[data-skin=babo][data-mode=light] .theme-toggle:hover{color:#17171a}
html[data-skin=babo][data-mode=light] .sidefx{background:linear-gradient(90deg,rgba(255,122,26,.16),rgba(255,122,26,.06) 45%,transparent 80%)}
html[data-skin=babo][data-mode=light] .mainfx{background:linear-gradient(270deg,rgba(255,122,26,.12),rgba(255,122,26,.04) 45%,transparent 80%)}
html[data-skin=babo][data-mode=light] .sidefx .particles,html[data-skin=babo][data-mode=light] .mainfx .particles{opacity:.9}
html[data-skin=babo][data-mode=light] .srvbar{background:rgba(255,255,255,.7)}
html[data-skin=babo][data-mode=light] .so-tabs button.on{background:#17171a;color:#fff;border-color:#17171a}
/* Day / Night switch, top right next to the user (both modes) */
html[data-skin=babo] .daynight{display:inline-flex;gap:2px;align-items:center;padding:2px;border-radius:999px;background:rgba(127,127,127,.12);margin-right:6px}
html[data-skin=babo] .daynight span{padding:0 9px;border-radius:999px;cursor:pointer;color:var(--ink-3);font-size:12px;line-height:20px}
html[data-skin=babo] .daynight span.on{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 0 10px -3px rgba(255,122,26,.6)}
html[data-skin=babo] .daynight span:not(.on):hover{color:var(--ink)}
/* ---------- Light Beams (Nick, 13 Nov 2026): the fifth theme, <html data-bg="beams"> on this skin, Night and Day. The slanted light
   beams of the ProfitSplit page at about half strength behind the whole CRM, fixed to the window; panels and table heads a little
   more see-through so the beams run on through them; no particles in the sidebar or at the page edge. :where() keeps the
   specificity of the rules above, so a page that brings its own background (ProfitSplit) still wins. */
html[data-skin=babo]:where([data-bg=beams]) body{background-color:#060607;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;background-image:
  linear-gradient(118deg,transparent 0 14%,rgba(255,255,255,.034) 14% 22%,transparent 22% 39%,rgba(255,255,255,.05) 39% 54%,transparent 54% 68%,rgba(255,255,255,.028) 68% 73%,transparent 73% 86%,rgba(255,255,255,.04) 86% 100%),
  radial-gradient(90vw 110vh at 104% -6%,color-mix(in srgb, var(--accent) 15%, transparent),transparent 62%),
  radial-gradient(70vw 90vh at -8% 108%,color-mix(in srgb, var(--accent) 8%, transparent),transparent 60%)}
html[data-skin=babo]:root:where([data-bg=beams]){--panel:rgba(17,17,19,.60)}
html[data-skin=babo]:where([data-bg=beams]) th{background:rgba(255,255,255,.03)}
html[data-skin=babo]:where([data-bg=beams]) table.tt thead th{background:rgba(13,13,15,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-skin=babo]:where([data-bg=beams]) .mainfx,html[data-skin=babo]:where([data-bg=beams]) .sidefx .particles{display:none}
html[data-skin=babo][data-mode=light]:where([data-bg=beams]) body{background-color:#eef0f3;background-image:
  linear-gradient(118deg,transparent 0 14%,rgba(255,255,255,.42) 14% 22%,transparent 22% 39%,rgba(255,255,255,.55) 39% 54%,transparent 54% 68%,rgba(255,255,255,.36) 68% 73%,transparent 73% 86%,rgba(255,255,255,.46) 86% 100%),
  radial-gradient(90vw 110vh at 104% -6%,color-mix(in srgb, var(--accent) 13%, transparent),transparent 62%),
  radial-gradient(70vw 90vh at -8% 108%,color-mix(in srgb, var(--accent) 7%, transparent),transparent 60%)}
html[data-skin=babo][data-mode=light]:root:where([data-bg=beams]){--panel:rgba(255,255,255,.58)}
html[data-skin=babo][data-mode=light]:where([data-bg=beams]) th{background:rgba(0,0,0,.025)}
html[data-skin=babo][data-mode=light]:where([data-bg=beams]) table.tt thead th{background:rgba(246,247,249,.9)}
/* a page inside a frame (mail, drawers) has no background of its own in this theme: the beams of the page around it show through */
html[data-skin=babo][data-bg=beams][data-embed] body{background:transparent}
/* the paper a mail lies on (Bart, 13 Nov 2026): broken white, a touch see-through, instead of the hard white a mail's own page is
   drawn with in a dark theme; Day and Night, HTML mails and plain-text mails alike. color-scheme:light on the frame makes the
   browser leave the mail's page clear, so the tint of the frame itself is what shows. Dark text on light paper stays. */
html[data-skin=babo]:where([data-bg=beams]) .msg iframe{color-scheme:light;background:rgba(255,255,255,.92);border-radius:6px}
html[data-skin=babo]:where([data-bg=beams]) .msg .body pre{background:rgba(255,255,255,.92)}
/* ---------- theme check, 13 Nov 2026 (every theme on this skin, Night and Day) ---------- */
/* the active chip or segment is the ink colour with the page colour as its text. The text used the panel colour, which is
   see-through in this skin (greyed text), and in Day the general button rule won over the active chip: a white pill with white
   text (Slack Auto / Manual on the ticket board) */
html[data-skin=babo] .chips a.on,html[data-skin=babo] .chips button.on,html[data-skin=babo] .so-tabs button.on,html[data-skin=babo] .prev-bar .seg button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
html[data-skin=babo] .ps-switch a.on,html[data-skin=babo] .dd>summary .cnt,html[data-skin=babo] .omail-n,html[data-skin=babo] .answers-to .num{color:var(--bg)}
/* bars that stay in view while the page scrolls under them, and small pop-overs, are dense: through a see-through panel colour the
   text behind them read through (the Queue / Send now bar under a draft) */
html[data-skin=babo] .reply .foot,html[data-skin=babo] .bulkbar,html[data-skin=babo] .bulk,html[data-skin=babo] .campfoot{background:rgba(16,16,18,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html[data-skin=babo] .addrs-box,html[data-skin=babo] .pop-body,html[data-skin=babo] .sp-edit-form{background:#121214}
html[data-skin=babo][data-mode=light] .reply .foot,html[data-skin=babo][data-mode=light] .bulkbar,html[data-skin=babo][data-mode=light] .bulk,html[data-skin=babo][data-mode=light] .campfoot{background:rgba(255,255,255,.94)}
html[data-skin=babo][data-mode=light] .addrs-box,html[data-skin=babo][data-mode=light] .pop-body,html[data-skin=babo][data-mode=light] .sp-edit-form{background:#fff}
/* a link in the mail being written is the blue the customer will see, not the skin's orange (orange on the white paper read poorly) */
html[data-skin=babo] .rich-area a{color:#0b57d0}
/* menu headings (Bart, 13 Nov 2026): the group titles bold and in the full ink colour, the items under them light, so the titles
   read as headings. Every row, Dashboard included, keeps one weight. */
html[data-skin=babo] .side .cat{font-size:13px;font-weight:700;color:var(--ink)}
html[data-skin=babo][data-mode=light] .side .cat{color:#17171a}
html[data-skin=babo] .side a,html[data-skin=babo] .side .sub a{font-weight:300}