/* Mosaic presentation layer. Existing routes, selectors, and data flows are retained. */
:root {
  /* Fixed dark palette sampled from the approved Mosaic reference. */
  color-scheme:dark;
  --danger:#f4a396; --danger-bg:#492e2b;
  --accent:#f3f5f1; --accent-dk:#dfefca; --accent-dkr:#f3f5f1;
  --accent-muted:#35462c; --accent-ring:rgba(223,239,202,.22);
  --surface:#272b31; --surface-2:#222722; --bg:#1a1c20;
  --border:#3a403c; --border-strong:#526147;
  --t1:#f3f5f1; --t2:#e1e5df; --t3:#aeb8b0;
  --online:#5e986d; --offline:#aeb8b0;
  --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:28px;
  --shadow-xs:none; --shadow-sm:none; --shadow:none;
}
body { font-family:'Segoe UI',sans-serif; background:var(--bg); }
button,input,select,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #77709b; outline-offset:3px; }
button:disabled { cursor:not-allowed; }
.layout { display:block; }
.sidebar { width:auto; height:auto; position:static; overflow:visible; display:flex; flex-direction:row; align-items:center; gap:24px; padding:24px 3.5%; background:var(--bg); border:0; border-bottom:1px solid var(--border); }
.brand { padding:0; margin:0; border:0; color:var(--t1); white-space:nowrap; font-size:15px; font-weight:650; }
.brand-mark { background:transparent; box-shadow:none; border-radius:0; transform:rotate(-8deg); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; justify-content:stretch; gap:3px; width:29px; height:29px; }
.brand-mark span { background:var(--t1); border-radius:4px; }
.brand-mark span:nth-child(2) { background:#5e986d; }
.brand-mark span:nth-child(3) { background:#aeb8b0; }
.nav-section { display:none; }
.nav { padding:0; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:3px; }
.nav a { color:var(--t3); border-radius:50px; font-size:12px; padding:10px 13px; gap:7px; }
.nav a:hover { color:var(--t1); background:#272b31; }
.nav a.active { color:var(--bg); background:var(--t1); font-weight:500; }
.nav a.active::before { display:none; }
.nav .ni { display:none; }
.sidebar .foot { margin:0; padding:0; border:0; }
#logout { color:var(--t2); font-size:12px; padding:9px 4px; white-space:nowrap; }
#logout:hover { color:var(--danger); background:var(--danger-bg); }
.main { max-width:1600px; margin:0 auto; }
.topbar { height:auto; min-height:106px; padding:30px 3.5% 18px; position:static; border:0; box-shadow:none; background:transparent; gap:15px; }
.topbar h2 { font-size:34px; font-weight:550; letter-spacing:-1.3px; }
.user-pill { background:transparent; border:0; gap:10px; padding:0; flex-wrap:wrap; }
.user-avatar { background:#3a365b; border:0; height:34px; width:34px; }
.user-avatar svg { color:#e5dffd; }
#who { font-size:12px; overflow-wrap:anywhere; }
.content { padding:8px 3.5% 40px; }
.content > p.muted { background:var(--surface); padding:28px; border-radius:var(--r-lg); }
.card { padding:26px; border:0; box-shadow:none; overflow:auto; margin-bottom:20px; }
.card h3 { font-weight:600; font-size:15px; letter-spacing:-.35px; margin-bottom:20px; }
.cards { gap:16px; }
.stat { padding:24px; border:0; box-shadow:none; }
.stat::after { display:none; }
.stat:hover { box-shadow:none; transform:none; }
.stat .label { font-size:12px; text-transform:none; letter-spacing:0; font-weight:400; }
.stat .value { font-size:31px; font-weight:550; letter-spacing:-1px; line-height:1.2; overflow-wrap:anywhere; }
.stat.alerting { background:#563c2b; }
.stat.alerting .value { color:#f7deca; }
.btn { color:var(--bg); border-radius:50px; font-weight:500; font-size:12px; padding:11px 17px; }
.btn-secondary { color:var(--t1); border:1px solid var(--border); }
.btn:hover { box-shadow:none; }
label,.filter-form label { font-size:12px; text-transform:none; letter-spacing:0; font-weight:500; }
input:not([type=checkbox]):not([type=color]):not([type=radio]),select { border-width:1px; border-radius:12px; min-height:40px; }
.muted { color:var(--t3); font-size:12px; }
.tag { background:#222722; color:#e3f1cc; font-weight:500; }
.badge-off { font-weight:500; }
.tabs { padding:5px; border:0; box-shadow:none; border-radius:24px; margin-bottom:16px; width:fit-content; max-width:100%; }
.tabs button { border-radius:50px; padding:10px 15px; font-size:12px; }
.tabs button.active { color:var(--bg); font-weight:500; }
th { font-weight:500; text-transform:none; letter-spacing:0; font-size:12px; background:var(--surface); }
td { padding-top:16px; padding-bottom:16px; }
tbody tr:hover { background:var(--surface-2); }
.pp-toolbar,.pp-actions,.page-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.pp-toolbar { margin-bottom:18px; }
.pp-actions { justify-content:flex-end; }
.pp-q { width:100% !important; max-width:280px !important; }
.pp-tbl { border-radius:12px; }
.page-heading { margin-bottom:24px; }
.page-heading h3 { font-size:22px; letter-spacing:-.6px; margin:0; font-weight:550; }
.page-heading p { margin-top:4px; }
.page-filter { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.page-filter label { margin:0; }
.mosaic-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:18px; margin-bottom:24px; }
.mosaic-grid .stat { margin:0; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.mosaic-fleet { grid-row:span 2; background:#35462c; min-height:310px; }
.mosaic-fleet .label { color:#f3f5f1; }
.mosaic-fleet .value { font-size:86px; font-weight:500; letter-spacing:-5px; color:#f3f5f1; margin:16px 0 0; }
.mosaic-fleet .fleet-total { font-size:13px; color:#e3f1cc; margin:0 0 20px; }
.mosaic-fleet .tile-link { margin-top:auto; }
.mosaic-violations { background:#563c2b; color:#f7deca; }
.mosaic-violations .label,.mosaic-violations .value { color:#f7deca; }
.mosaic-browsing { background:#3a365b; }
.mosaic-browsing .value,.mosaic-browsing .label { color:#e5dffd; }
.mosaic-policy .value { font-size:34px; }
.mosaic-domain .value { font-size:20px; line-height:1.4; letter-spacing:-.5px; }
.tile-link { display:inline-flex; align-items:center; gap:14px; color:inherit; font-size:12px; font-weight:500; text-decoration:none; padding-top:16px; }
.tile-link:hover { text-decoration:underline; }
.tile-note { font-size:12px; opacity:.85; margin-top:8px; }
.two-column { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.two-column > * { min-width:0; }
.client-layout { display:grid; grid-template-columns:255px minmax(0,1fr); gap:24px; align-items:start; }
.client-profile { background:#3a365b; color:#e5dffd; border-radius:var(--r-lg); padding:26px; }
.client-avatar { width:60px; height:60px; border-radius:20px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:#e5dffd; font-size:23px; font-weight:600; margin-bottom:22px; }
.client-profile h3 { font-size:28px; line-height:1.2; font-weight:550; letter-spacing:-1px; overflow-wrap:anywhere; }
.client-profile .muted { color:#c4bedb; }
.client-profile .profile-meta { margin:24px 0; padding:18px 0; border-block:1px solid #514b70; display:grid; gap:16px; }
.profile-meta dt { font-size:11px; color:#c4bedb; margin-bottom:3px; }
.profile-meta dd { font-size:12px; overflow-wrap:anywhere; }
.profile-actions { display:flex; flex-direction:column; gap:10px; }
.profile-actions .btn { justify-content:center; white-space:normal; }
.profile-actions select { width:100%; }
.profile-actions label { margin:0; }
.profile-actions #remoteViewBtn { background:var(--accent); color:var(--bg); }
.profile-actions #delClient { color:#ffc7bb; background:#563c2b; }
.client-workspace { min-width:0; }
.client-workspace .pp-tbl { max-height:520px; overflow:auto; }
.client-workspace .pp-tbl thead { position:sticky; top:0; z-index:1; }
.client-workspace > .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.client-workspace .stat .value { font-size:26px !important; }
.client-workspace .stat { padding:22px; }
.client-detail-tabs { margin-top:6px; }
.client-overview { margin-top:24px; }
.section-label { font-size:12px; letter-spacing:.08em; color:var(--t3); text-transform:uppercase; margin-bottom:14px; }
.client-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:16px; }
.client-tile { background:var(--surface); border-radius:22px; padding:23px; min-width:0; border:1px solid var(--border); }
.client-tile:hover { border-color:var(--border-strong); }
.client-tile dl { display:grid; gap:11px; }
.client-tile dt { color:var(--t3); font-size:11px; }
.client-tile dd { color:var(--t2); font-size:12px; overflow-wrap:anywhere; }
.client-tile .tile-host { padding-bottom:12px; border-bottom:1px solid var(--border); }
.client-tile .tile-host a { font-size:19px; font-weight:550; letter-spacing:-.5px; }
.client-tile select { width:100%; max-width:100%; }
.client-tiles-empty { padding:30px; background:var(--surface); border-radius:22px; }
.clients-surface { background:transparent; padding:0; overflow:visible; }
.clients-surface .pp-toolbar { background:var(--surface); border-radius:20px; padding:16px 20px; }
.clients-surface .pp-tbl { overflow:visible; }
.shot { width:260px; max-width:100%; border-radius:20px; padding:10px; }
.hm { max-width:100%; }
.hm-lbl,.hm-h { flex-shrink:0; }
.hm-c { flex-shrink:0; }
.lb { background:rgba(26,30,27,.96); }
.lb-meta { color:#c2cac3; }
.lb-count { overflow-wrap:anywhere; }
.lb-stage { overflow:hidden; }
.lb-stage img { min-width:0; }
.login-layout { max-width:1180px; min-height:720px; width:100%; margin:auto; display:grid; grid-template-columns:1.12fr 1fr; gap:22px; padding:32px; }
#login { background:var(--bg); padding:35px 0; }
.login-brand-panel { flex:none; max-width:none; padding:0; background:transparent; color:var(--t1); overflow:visible; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto; gap:18px; }
.login-brand-panel::before { display:none; }
.login-brand-panel .brand { grid-column:1/-1; padding:0 4px 15px; }
.login-message { grid-column:1/-1; background:#35462c; border-radius:28px; padding:35px; display:flex; flex-direction:column; justify-content:space-between; gap:30px; }
.login-message h2 { font-size:clamp(34px,4.3vw,56px); line-height:1.06; font-weight:550; letter-spacing:-2.5px; color:#f3f5f1; }
.login-message p { color:#e3f1cc; font-size:13px; max-width:300px; }
.login-small { min-height:155px; background:#3a365b; color:#e5dffd; padding:25px; border-radius:24px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
.login-small:last-child { background:#563c2b; color:#f7deca; }
.login-small span { font-size:10px; letter-spacing:.1em; }
.login-small strong { font-size:23px; line-height:1.2; font-weight:500; letter-spacing:-.7px; }
.login-form-panel { padding:40px; background:var(--surface); border-radius:28px; display:flex; align-items:center; }
.login-card { padding:0; border:0; box-shadow:none; background:transparent; max-width:360px; width:100%; margin:auto; animation:none; }
.login-form-header { margin-bottom:30px; }
.login-form-header .section-label { font-size:10px; margin-bottom:12px; }
.login-form-header h1 { font-size:32px; font-weight:550; letter-spacing:-1px; }
.login-form-header p { color:var(--t3); font-size:13px; }
.login-card .login-input-wrap input:not([type=checkbox]) { border-width:1px; min-height:48px; padding-left:46px; border-radius:12px; }
.login-btn,.login-btn:hover { border-radius:50px; box-shadow:none; padding:15px; }
.login-access { padding-top:23px; border-top:1px solid var(--border); margin-top:20px; font-size:12px; color:var(--t3); }
.login-access strong { display:block; color:var(--t2); font-weight:500; margin-top:4px; }
.app-note { padding:15px 0 0; color:var(--t3); font-size:11px; }
@media(min-width:1500px) { .client-workspace > .cards { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1150px) { .sidebar { flex-wrap:wrap; gap:15px; } .nav { order:3; flex-basis:100%; justify-content:flex-start; } .sidebar .foot { margin-left:auto; } }
@media(max-width:850px) {
  .mosaic-grid { grid-template-columns:1fr 1fr; }
  .mosaic-fleet { grid-row:auto; grid-column:1/-1; min-height:250px; }
  .mosaic-fleet .value { font-size:74px; }
  .two-column { grid-template-columns:1fr; gap:0; }
  .client-layout { grid-template-columns:210px minmax(0,1fr); gap:16px; }
  .client-profile { padding:20px; }
  .client-workspace .cards { gap:12px; }
  .client-workspace .stat { padding:16px; }
  .login-layout { padding:20px; gap:16px; }
  .login-message { padding:26px; }
  .login-form-panel { padding:27px; }
}
@media(max-width:620px) {
  .sidebar { padding:20px 18px 14px; }
  .nav a { padding:9px 12px; }
  .topbar { padding:25px 18px 18px; align-items:flex-start; flex-direction:column; gap:12px; }
  .topbar h2 { font-size:30px; }
  .content { padding:8px 16px 30px; }
  .card { padding:20px; border-radius:20px; }
  .mosaic-grid { gap:12px; }
  .mosaic-grid .stat { padding:22px; }
  .mosaic-domain .value { font-size:16px; }
  .page-heading { align-items:flex-start; }
  .client-layout { grid-template-columns:1fr; }
  .client-profile .profile-meta { grid-template-columns:1fr 1fr; }
  .profile-actions { display:grid; grid-template-columns:1fr 1fr; }
  .profile-actions label,.profile-actions select { grid-column:1/-1; }
  .client-profile h3 { font-size:27px; }
  .client-avatar { width:48px; height:48px; margin-bottom:14px; }
  .client-tiles { grid-template-columns:1fr; }
  .clients-surface { padding:0; }
  .pp-actions { flex-wrap:wrap; }
  .pp-toolbar > * { min-width:0; }
  .filter-form > div { flex:1 1 120px; min-width:0; }
  .filter-form input,.filter-form select { width:100%; }
  #login { padding:0; }
  .login-layout { display:flex; flex-direction:column; min-height:100vh; padding:18px; }
  .login-brand-panel { display:grid; gap:14px; }
  .login-small { display:none; }
  .login-message h2 { font-size:38px; letter-spacing:-1.7px; }
  .login-message { gap:20px; }
  .login-form-panel { padding:30px 24px; }
  .login-form-header h1 { font-size:28px; }
  .lb-stage { padding:10px; gap:7px; }
  .lb-nav { width:32px; height:38px; }
  input,select { font-size:16px !important; max-width:100%; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* Keep inherited light-theme accents readable on the fixed dark surfaces. */
.login-card .err { border-color:#755047; }
.login-card .err::before { color:var(--bg); }
.btn[data-del],#recStop { color:#fff; }
.grpCell .tag { color:var(--t1) !important; }
input[type=checkbox] { accent-color:#dfefca; }
input::placeholder { color:var(--t3); opacity:1; }
.mosaic-fleet,.mosaic-violations,.mosaic-browsing { color:var(--t1); }
.mosaic-violations .label,.mosaic-violations .value,.mosaic-browsing .label,.mosaic-browsing .value { color:var(--t1); }