/* ---- source: assets/css/styles.css ---- */

:root{
  --bg:#0b0f17; --panel:#111826; --panel-2:#0e1726; --text:#e7eefc; --muted:#a0b3d1;
  --brand:#3b82f6; --brand-2:#22d3ee; --danger:#ef4444; --success:#10b981; --warning:#f59e0b;
  --card:#0f1729; --outline:#1f2a44; --ring:rgba(59,130,246,.3); --shadow:0 10px 24px rgba(0,0,0,.35);
}

/* -----------------------------
   Appointments (calendar + list)
------------------------------ */
/* Show ~7 hour rows at a time, then scroll (keeps the page tidy) */
.ap-timegrid{ display:flex; flex-direction:column; gap:10px; position:relative; max-height: 560px; overflow:auto; padding-right:4px; }
.ap-hour{ display:grid; grid-template-columns: 64px 1fr; gap:10px; align-items:stretch; }
.ap-hour-label{ font-size:12px; color: rgba(231,238,252,0.72); padding-top:6px; }
.ap-hour-lane{ border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:12px; padding:10px; min-height:54px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; align-content:start; position:relative; overflow:hidden; }
.ap-hour-lane:before{ content:''; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0)); pointer-events:none; }

.ap-hour-empty{ grid-column: 1 / -1; padding:6px 8px; border:1px dashed rgba(255,255,255,0.10); border-radius:12px; opacity:0.75; user-select:none; }

.ap-mini{ width:100%; text-align:left; border-radius:14px; padding:10px 10px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.ap-mini:active{ transform: scale(.99); }
.ap-mini-title{ font-weight:800; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-mini-sub{ font-size:11px; opacity:0.85; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-mini.more{ background: rgba(255,255,255,0.02); border-style:dashed; opacity:0.9; display:flex; align-items:center; justify-content:center; font-weight:700; }

.ap-color-1{ background: rgba(34, 211, 238, 0.14); }
.ap-color-2{ background: rgba(59, 130, 246, 0.14); }
.ap-color-3{ background: rgba(16, 185, 129, 0.14); }
.ap-color-4{ background: rgba(245, 158, 11, 0.14); }
.ap-color-5{ background: rgba(239, 68, 68, 0.14); }
.ap-color-6{ background: rgba(168, 85, 247, 0.14); }

.ap-card.ap-color-1, .ap-mini.ap-color-1{ border-color: rgba(34, 211, 238, 0.25); }
.ap-card.ap-color-2, .ap-mini.ap-color-2{ border-color: rgba(59, 130, 246, 0.25); }
.ap-card.ap-color-3, .ap-mini.ap-color-3{ border-color: rgba(16, 185, 129, 0.25); }
.ap-card.ap-color-4, .ap-mini.ap-color-4{ border-color: rgba(245, 158, 11, 0.25); }
.ap-card.ap-color-5, .ap-mini.ap-color-5{ border-color: rgba(239, 68, 68, 0.25); }
.ap-card.ap-color-6, .ap-mini.ap-color-6{ border-color: rgba(168, 85, 247, 0.25); }


.ap-block{ position:absolute; left:10px; right:10px; border-radius:12px; padding:8px 10px; cursor:pointer; box-shadow: 0 12px 30px rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.10); }
.ap-block-title{ font-weight:800; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-block-sub{ font-size:11px; opacity:0.85; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-st-pending{ background: rgba(245, 158, 11, 0.20); }
.ap-st-confirmed{ background: rgba(34, 197, 94, 0.20); }
.ap-st_in_service, .ap-st-in_service{ background: rgba(59, 130, 246, 0.20); }
.ap-st-missed{ background: rgba(239, 68, 68, 0.20); }
.ap-st-completed{ background: rgba(148, 163, 184, 0.20); }
.ap-st-canceled{ background: rgba(148, 163, 184, 0.10); opacity:0.75; }

.ap-list{ display:flex; flex-direction:column; gap:10px; }
.ap-card{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:16px; padding:12px; }
.ap-card-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* Appointments: list + details split */
.ap-split{ display:grid; grid-template-columns: 1.05fr .95fr; gap:12px; align-items:start; }
.ap-split-left{ min-width:0; }
.ap-split-right{ min-width:0; border-left:1px solid rgba(255,255,255,0.06); padding-left:12px; overflow:hidden; }
.ap-detail-title{ font-weight:800; font-size:14px; }
.ap-detail-kv{ display:grid; grid-template-columns: 110px 1fr; gap:10px; margin-top:10px; }
.ap-detail-k{ font-size:12px; color: rgba(231,238,252,0.70); }
.ap-detail-v{ font-size:13px; overflow-wrap:anywhere; word-break:break-word; }
.ap-detail-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ap-detail-actions .btn{ padding:8px 10px; border-radius:12px; }
.ap-card.is-selected{ outline: 2px solid rgba(59,130,246,0.45); box-shadow: 0 0 0 4px rgba(59,130,246,0.12); }

/* Appointment history timeline */
.ap-history{ display:flex; flex-direction:column; gap:12px; padding:10px 0; }
.ap-hitem{ display:grid; grid-template-columns: 14px 1fr; gap:12px; align-items:start; }
.ap-hdot{ width:10px; height:10px; border-radius:999px; margin-top:6px; background: rgba(59,130,246,0.65); box-shadow: 0 0 0 4px rgba(59,130,246,0.12); }
.ap-hmain{ min-width:0; }
.ap-htop{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ap-hdetail{ margin-top:6px; font-size:13px; overflow-wrap:anywhere; word-break:break-word; }

.ap-card-actions .btn{ white-space:nowrap; }

.ap-loadmore{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid rgba(255,255,255,0.06); border-radius:14px; margin-top:10px; background: rgba(255,255,255,0.02); }

.ap-services{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.ap-service{ border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:16px; padding:10px; text-align:left; color: inherit; cursor:pointer; }
.ap-service.active{ border-color: rgba(34,197,94,0.55); background: rgba(34,197,94,0.12); }

.ap-slots{ display:flex; flex-wrap:wrap; gap:8px; }
.ap-slot{ border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:999px; padding:8px 10px; color:inherit; cursor:pointer; font-size:12px; }
.ap-slot.active{ border-color: rgba(59,130,246,0.6); background: rgba(59,130,246,0.15); }
.ap-slot:disabled{ opacity:0.45; cursor:not-allowed; }

.ap-cus-results{ display:flex; flex-direction:column; gap:8px; }
.ap-cus-hit{ text-align:left; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:14px; padding:10px; color:inherit; cursor:pointer; }
.ap-cus-hit:hover{ border-color: rgba(255,255,255,0.14); }

@media (max-width: 980px){
  .kb-board{ grid-template-columns: 1fr !important; }
  .ap-hour{ grid-template-columns: 56px 1fr; }
  .ap-services{ grid-template-columns: 1fr; }
  .ap-split{ grid-template-columns: 1fr; }
  .ap-split-right{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,0.06); padding-top:12px; }
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 1200px at 90% -10%, rgba(34,211,238,.08), transparent 40%),
              radial-gradient(1000px 1000px at -20% 110%, rgba(59,130,246,.10), transparent 55%),
              var(--bg); color:var(--text);
  /* Allow normal window scrolling on public pages (Careers, Login, etc.).
     App pages still scroll inside .content because .app-shell uses fixed viewport sizing. */
  overflow-y:auto;
  overflow-x:hidden}
a{color:inherit; text-decoration:none} .container{max-width:1200px; margin:0 auto; padding:24px}
.app-shell{display:grid; grid-template-columns:260px 1fr; height:100vh; overflow:hidden}
.sidebar{background:linear-gradient(180deg, var(--panel), var(--panel-2)); border-right:1px solid var(--outline);
  position:sticky; top:0; height:100vh; padding:18px 16px}
.brand{display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:16px;
  background:linear-gradient(135deg, rgba(59,130,246,.15), rgba(34,211,238,.10)); border:1px solid var(--outline);
  box-shadow:var(--shadow)}
.brand img{width:38px; height:38px} .brand h1{font-size:18px; margin:0; font-weight:800; letter-spacing:.3px}
.nav{margin-top:16px; display:flex; flex-direction:column; gap:6px}
.nav a{padding:12px 12px; border-radius:12px; display:flex; align-items:center; gap:10px; border:1px solid transparent}
.nav a:hover{background:rgba(255,255,255,.04); border-color:var(--outline)}
.nav a.active{background:linear-gradient(90deg, rgba(59,130,246,.15), transparent); border-color:var(--outline)}
.main{height:100vh; min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column; position:relative}
.header{display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50;
  padding:16px 20px; background:rgba(15,23,41,.8); backdrop-filter: blur(8px); border-bottom:1px solid var(--outline)}

/* Public-site top bar (e.g., Careers) */
.topbar{position:sticky; top:0; z-index:60}

.header .right{display:flex; align-items:center; gap:10px}
/* Header standardization */
.header .left{display:flex; flex-direction:column; gap:2px; min-width:0}
.header .left strong{font-size:16px; line-height:1.2}
.header .left .muted{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.header .right{min-width:0}
.search{display:flex; align-items:center; gap:8px; background:#0d1423; border:1px solid var(--outline);
  padding:10px 12px; border-radius:12px; width:380px}
.search input{flex:1; background:transparent; border:0; outline:none; color:var(--text)}
.btn{padding:10px 14px; border-radius:12px; border:1px solid var(--outline); background:linear-gradient(180deg,#0e1726,#0b1220);
  color:var(--text); cursor:pointer; transition:.2s transform}
.btn.mini{padding:7px 10px; border-radius:10px}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(180deg,#2563eb,#1d4ed8); border-color:#1d4ed8}
.btn.danger{background:linear-gradient(180deg,#ef4444,#b91c1c); border-color:#b91c1c}
.btn.success{background:linear-gradient(180deg,#10b981,#059669); border-color:#059669}
.btn.warn{background:linear-gradient(180deg,#f59e0b,#d97706); border-color:#d97706}
.btn .action-icon{display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; flex:0 0 18px; vertical-align:middle; margin-right:8px;}
.btn .action-icon svg{width:18px; height:18px; display:block;}
.btn.mini .action-icon{width:16px; height:16px; flex-basis:16px; margin-right:7px;}
.btn.mini .action-icon svg{width:16px; height:16px;}
.content{padding:20px 24px; min-width:0; overflow:auto; flex:1 1 auto; min-height:0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}

/* ==============================
   Premium page transitions
   Prevents the "jump" feeling when switching pages by:
   1) hiding content while scroll is restored
   2) revealing with a consistent micro-transition
   ============================== */
html.page-loading .content{
  opacity:1;
  transform:none;
  filter:none;
  pointer-events:auto;
}
html.page-ready .content{
  opacity:1;
  transform:none;
  filter:none;
  transition: opacity 160ms ease, transform 180ms ease, filter 220ms ease;
}
@media (prefers-reduced-motion: reduce){
  html.page-loading .content,
  html.page-ready .content{
    transform:none;
    filter:none;
    transition:none;
  }
}

/* ==============================
   Responsive safety net
   Prevent horizontal overflow from taking over the sidebar on small screens.
   ============================== */
.main, .content{min-width:0}
.content{overflow-x:hidden}

/* Media elements should never exceed their containers */
img, video, canvas{max-width:100%; height:auto}

/* Tables: keep them from forcing the layout wider than the viewport */
.table{table-layout:fixed}
.table th,.table td{overflow-wrap:anywhere; word-break:break-word}

/* Prevent wide boards/cards from pushing under/over the sidebar */
.kb-board{min-width:0}
.card{min-width:0}
.grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-6{grid-column:span 6} .col-8{grid-column:span 8} .col-12{grid-column:span 12}
.card{background:var(--card); border:1px solid var(--outline); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.card h3{margin:0 0 10px} .kpi{display:flex; align-items:center; justify-content:space-between}
.kpi .value{font-size:28px; font-weight:800} .kpi .muted{color:var(--muted); font-size:12px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px; border-bottom:1px solid var(--outline); text-align:left; font-size:14px}
.table th{color:var(--muted); font-weight:600}
.form{display:grid; gap:12px}
.input, select, textarea{width:100%; padding:10px 12px; background:#0b1220; border:1px solid var(--outline); border-radius:12px; color:var(--text)}
label{font-size:12px; color:var(--muted)}
.badge{padding:6px 10px; border-radius:999px; border:1px solid var(--outline); font-size:12px}
.badge.warn{background:rgba(245,158,11,.1); border-color:#7c5a15}
.badge.ok{background:rgba(16,185,129,.1); border-color:#1a734f}
.badge.danger{background:rgba(239,68,68,.1); border-color:#7a1c1c}
.footer{padding:20px; text-align:center; color:var(--muted); border-top:1px solid var(--outline); margin-top:40px}
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr} .sidebar{position:relative; height:auto} .search{width:100%}
  .grid{grid-template-columns:repeat(6,1fr)} .col-8,.col-6,.col-4{grid-column:span 6} .col-3{grid-column:span 3}

  /* Responsive header: wrap instead of overflowing on smaller screens */
  .header{flex-wrap:wrap; gap:12px; align-items:flex-start}
  .header .left{width:100%}
  .header .right{width:100%; flex-wrap:wrap; justify-content:space-between}
  .search{flex:1; min-width:240px}
}

@media (max-width:520px){
  .header .right{flex-direction:column; align-items:stretch}
  .btn{width:100%}
  .search{width:100%}
}

/* Smooth transitions */
body{opacity:1; transition:none}
body.page-enter{opacity:1}
.fade-out{opacity:1; transition:none}

@media (prefers-reduced-motion: reduce){
  body{opacity:1 !important; transition:none !important}
  .fade-out{opacity:1 !important; transition:none !important}
}

/* DVI status chips */
.status-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid #cfd6e6;font-size:12px}
.dot{width:10px;height:10px;border-radius:50%}
.dot.g{background:#16a34a}.dot.y{background:#f59e0b}.dot.r{background:#ef4444}
.badge.ok{border-color:#16a34a;color:#16a34a;background:#ecfdf5}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.photo-grid img{width:100%;height:90px;object-fit:cover;border-radius:10px;border:1px solid #cfd6e6}

/* DVI editor: keep primary add action reachable (bottom-sticky inside the items card) */
.dvi-items-footer{
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: linear-gradient(180deg, rgba(11,18,32,0), rgba(11,18,32,0.92) 20%, rgba(11,18,32,0.98));
  border-top: 1px solid rgba(255,255,255,.08);
}

.status-chip.selected{border-color:#93c5fd;background:#0b1220; box-shadow:0 0 0 2px rgba(147,197,253,.2) inset}

/* Inspection-only status + media controls */
.inspection-item-card .grid{row-gap:14px}
.inspection-status-row{align-items:center;gap:8px}
.inspection-status-chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;height:34px;min-height:34px;padding:0 12px;gap:0;border-width:1.5px;border-radius:15px;font-size:12px;font-weight:900;letter-spacing:.01em;line-height:1;transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;color:#eaf0ff;background:linear-gradient(180deg, rgba(14,22,43,.94), rgba(8,13,27,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);white-space:nowrap;vertical-align:middle}
.inspection-status-chip .status-chip-glow{position:absolute;inset:0 auto 0 0;width:14px;opacity:.42;background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));pointer-events:none}
.inspection-status-chip .dot{display:none}
.inspection-status-chip .status-chip-label{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:100%;line-height:1;text-align:center;padding-bottom:1px}
.inspection-status-chip.status-g{border-color:rgba(34,197,94,.55);color:#8ef0b0;background:linear-gradient(180deg, rgba(10,44,28,.96), rgba(5,24,16,.98))}
.inspection-status-chip.status-y{border-color:rgba(245,158,11,.62);color:#ffbf1f;background:linear-gradient(180deg, rgba(77,40,4,.96), rgba(44,24,3,.99))}
.inspection-status-chip.status-r{border-color:rgba(239,68,68,.62);color:#ffb2b2;background:linear-gradient(180deg, rgba(70,8,12,.96), rgba(41,5,8,.99))}
.inspection-status-chip.selected{box-shadow:0 0 0 2px rgba(255,255,255,.08) inset, 0 18px 34px rgba(4,10,25,.32);transform:translateY(-1px)}
.inspection-status-chip.status-g.selected{background:linear-gradient(180deg, rgba(20,118,64,.98), rgba(8,73,38,.98));border-color:#4ef291;color:#f3fff7;box-shadow:0 0 0 2px rgba(110,255,170,.2) inset, 0 14px 28px rgba(10,60,34,.34)}
.inspection-status-chip.status-y.selected{background:linear-gradient(180deg, rgba(194,100,13,.98), rgba(131,65,5,.99));border-color:#ffca47;color:#fff9ea;box-shadow:0 0 0 2px rgba(255,214,102,.18) inset, 0 14px 28px rgba(91,51,7,.32)}
.inspection-status-chip.status-r.selected{background:linear-gradient(180deg, rgba(150,21,32,.98), rgba(107,9,18,.99));border-color:#ff6676;color:#fff1f3;box-shadow:0 0 0 2px rgba(255,138,151,.16) inset, 0 14px 28px rgba(76,8,14,.34)}
.inspection-status-chip.is-muted{opacity:.2;filter:saturate(.32) brightness(.75);transform:scale(.975)}
.inspection-controls-row{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin-top:2px;min-width:0}.inspection-status-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}.inspection-media-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-top:0;flex:0 0 auto}
.inspection-media-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(18,28,52,.98), rgba(9,14,29,.99));color:#eef4ff;font-size:13px;font-weight:800;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease}
.inspection-media-action:hover{transform:translateY(-1px);border-color:rgba(96,165,250,.4);box-shadow:0 12px 22px rgba(6,14,30,.22)}
.inspection-media-action svg{width:15px;height:15px;display:block}.inspection-media-action.icon-only{width:34px;min-width:34px;height:34px;padding:0;border-radius:11px}.inspection-media-action.icon-only span{display:none}
.inspection-media-action.camera{color:#9dd8ff}
.inspection-media-action.upload{color:#ffd16b}
.inspection-media-action.record{color:#f6a9ff}.inspection-media-summary.compact{margin-left:auto;white-space:nowrap;font-size:12px;color:#9aa7c3;opacity:.9}
.inspection-media-summary{margin-left:auto;padding:0 12px;min-height:36px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:rgba(231,238,252,.72);font-size:11px;font-weight:700}
.inspection-media-input{display:none}
.inspection-photo-grid{margin-top:14px}
.inspection-photo-card,.inspection-media-card{position:relative;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(14,22,43,.96), rgba(8,13,27,.99));border-radius:18px;padding:12px;overflow:hidden}
.inspection-photo-card img{width:100%;height:130px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.inspection-media-grid{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.inspection-media-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.inspection-media-kind{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#cfe0ff}
.inspection-media-kind svg{width:16px;height:16px;display:block}
.inspection-media-name{font-size:13px;font-weight:700;color:#eef4ff;line-height:1.4;word-break:break-word;margin-bottom:10px}
.inspection-inline-video,.inspection-inline-audio{width:100%;border-radius:14px;background:#050812}
.inspection-inline-video{min-height:160px;max-height:220px;object-fit:cover}
.inspection-media-remove{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:12px;border:1px solid rgba(239,68,68,.28);background:rgba(127,29,29,.16);color:#ffc1c7;font-size:12px;font-weight:800}
.inspection-media-remove svg{width:14px;height:14px;display:block}
@media (max-width:980px){.inspection-media-summary{width:100%;margin-left:0;justify-content:center}}
@media (max-width:900px){.inspection-controls-row{flex-wrap:wrap}.inspection-media-summary.compact{margin-left:0;flex-basis:100%}}@media (max-width:640px){.inspection-controls-row{align-items:flex-start}.inspection-status-row{width:100%;flex-wrap:wrap}.inspection-status-chip{justify-content:flex-start}.inspection-media-toolbar{width:100%}.inspection-media-action.icon-only{width:36px;min-width:36px;height:36px}.inspection-media-grid{grid-template-columns:1fr}}

/* subtle buttons for secondary actions */
.btn.subtle{background:transparent;border:1px solid rgba(255,255,255,.12);} .btn.subtle:hover{background:rgba(255,255,255,.06);} 

/* ==========================
   Insights (Reports) page
   ========================== */
.ins-head{display:flex; flex-direction:column; gap:2px}
.ins-title{font-size:18px; font-weight:800; letter-spacing:.2px}
.ins-sub{font-size:12px; color:var(--muted)}
.ins-head-actions{gap:12px}
.ins-range{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap}
.ins-field{display:flex; flex-direction:column; gap:6px; min-width:160px}
.ins-field .input{height:40px}
.ins-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.ins-kpi-card{padding:14px}
.ins-kpi-grid{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px}
.ins-kpi{border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:14px; padding:12px; min-height:86px}
.ins-kpi .label{font-size:12px; color:var(--muted)}
.ins-kpi .value{font-size:20px; font-weight:900; margin-top:6px}
.ins-kpi .hint{font-size:12px; color:rgba(231,238,252,.72); margin-top:6px}

.ins-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px}
.ins-card-head h3{margin:0}
.ins-mini{font-size:12px; color:var(--muted)}

.table-wrap{width:100%; overflow:auto; border-radius:14px}
.table-wrap .table{min-width:520px}

@media (max-width:1100px){
  .ins-kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width:980px){
  .ins-range{width:100%}
  .ins-field{min-width:140px}
}


/* --- Sidebar scroll behavior: hide on scroll down, show on scroll up --- */
.sidebar{ overflow-y:auto; will-change:transform; transition:transform .18s ease; }

/* ==========================
   Customers (Split View)
   ========================== */
.cus-split{display:grid; grid-template-columns:360px 1fr; gap:16px; align-items:start}
.cus-left{min-width:0}
.cus-right{min-width:0}
.cus-list{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.cus-list-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px}

.cus-item{width:100%; text-align:left; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);
  border-radius:16px; padding:12px; cursor:pointer; box-shadow:none; transition:.12s transform, .12s background}
.cus-item:hover{background:rgba(255,255,255,.05)}
.cus-item:active{transform:scale(.99)}
.cus-item.selected{border-color:rgba(59,130,246,.55); box-shadow:0 0 0 2px rgba(59,130,246,.22) inset}
.cus-item .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cus-item .title{font-weight:900; font-size:14px}
.cus-item .meta{margin-top:6px; color:rgba(231,238,252,.72); font-size:12px; display:flex; gap:8px; flex-wrap:wrap}
.cus-item .sep{opacity:.6}

.cus-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.cus-name{font-size:22px; font-weight:950; letter-spacing:.2px}
.cus-sub{margin-top:4px; color:rgba(231,238,252,.72); font-size:13px; display:flex; gap:8px; flex-wrap:wrap}
.cus-sub .sep{opacity:.6}
.cus-kpis{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.cus-actions{display:flex; gap:10px; align-items:center}

.cus-tabs{display:flex; gap:8px; margin-top:14px; border-bottom:1px solid var(--outline); padding-bottom:10px; flex-wrap:wrap}
.cus-tabs .tab{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02); color:var(--text);
  border-radius:999px; padding:8px 12px; font-weight:700; font-size:13px; cursor:pointer}
.cus-tabs .tab.active{border-color:rgba(59,130,246,.55); background:rgba(59,130,246,.12)}

.cus-pane-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:12px; margin-bottom:10px; flex-wrap:wrap}

.veh-list{display:flex; flex-direction:column; gap:10px}
.veh-card{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:16px; padding:12px}
.veh-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap}
.veh-title{font-weight:900}
.veh-sub{margin-top:4px; color:rgba(231,238,252,.72); font-size:12px; line-height:1.35}
.veh-actions{display:flex; gap:8px}

.job-list{display:flex; flex-direction:column; gap:10px}
.job-row{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:16px; padding:12px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.job-title{font-weight:900}
.job-sub{margin-top:4px; color:rgba(231,238,252,.72); font-size:12px; line-height:1.35; max-width:720px}

/* dialogs */
.mb-dialog{border:none; border-radius:16px; background:#0b1220; color:#e7eefc; padding:0; max-width:720px; width:min(720px, calc(100vw - 48px));}
.mb-dialog::backdrop{background:rgba(0,0,0,.6)}

@media (max-width:980px){
  .cus-split{grid-template-columns:1fr}
}

/* ==========================
   Invoices (Split View)
   ========================== */
.inv-split{display:grid; grid-template-columns:380px 1fr; gap:16px; align-items:start}
.inv-left,.inv-right{min-width:0}
.inv-left-top{position:sticky;top:0;z-index:6}
.inv-left-top .card{backdrop-filter:saturate(1.2) blur(6px)}
.inv-list{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.inv-list-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap}

.inv-item{width:100%; text-align:left; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);
  border-radius:16px; padding:12px; cursor:pointer; box-shadow:none; transition:.12s transform, .12s background}
.inv-item:hover{background:rgba(255,255,255,.05)}
.inv-item:active{transform:scale(.99)}
.inv-item.selected{border-color:rgba(59,130,246,.55); box-shadow:0 0 0 2px rgba(59,130,246,.22) inset}
.inv-item .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.inv-item .title{font-weight:950; font-size:14px}
.inv-item .meta{margin-top:6px; color:rgba(231,238,252,.72); font-size:12px; display:flex; gap:8px; flex-wrap:wrap}
.inv-item .sep{opacity:.6}

.inv-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.inv-no{font-size:22px; font-weight:950; letter-spacing:.2px}
.inv-sub{margin-top:4px; color:rgba(231,238,252,.72); font-size:13px; display:flex; gap:8px; flex-wrap:wrap}
.inv-sub .sep{opacity:.6}
.inv-kpis{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.inv-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.inv-panels{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.inv-panel{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:16px; padding:12px}
.inv-panel-title{font-weight:900; margin-bottom:8px}
.inv-totals .row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0}
.inv-veh{font-weight:900; line-height:1.2}

.inv-section{margin-top:14px}
.inv-section-title{font-weight:950; margin-bottom:8px}
.inv-items,.inv-payments{display:flex; flex-direction:column; gap:10px}
.inv-item-row{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); border-radius:14px; padding:12px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.inv-pay-row{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); border-radius:14px; padding:12px}

.inv-filter.active{border-color:rgba(59,130,246,.55); background:rgba(59,130,246,.12)}

@media (max-width:980px){
  .inv-split{grid-template-columns:1fr}
  .inv-panels{grid-template-columns:1fr}
}

/* ==========================
   Invoice detail tabs + More menu (click-safe)
   ========================== */
.ar-section-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;position:relative;z-index:5}
.ar-section-tabs .tab{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  font-weight:750;
  cursor:pointer;
  user-select:none;
  pointer-events:auto;
}
.ar-section-tabs .tab:hover{background:rgba(255,255,255,.05)}
.ar-section-tabs .tab.is-active{border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.12)}
.ar-section-tabs .tab:focus{outline:2px solid rgba(59,130,246,.35);outline-offset:2px}

/* More actions dropdown (details/summary) */
details.ar-more{position:relative;z-index:10}
details.ar-more > summary{list-style:none;cursor:pointer}
details.ar-more > summary::-webkit-details-marker{display:none}
.ar-more-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:190px;
  padding:10px;
  display:none;
  flex-direction:column;
  gap:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,16,30,.98);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
details.ar-more[open] .ar-more-menu{display:flex}
.ar-more-menu .btn{width:100%;justify-content:flex-start}

/* Safety: decorative pseudo elements should never block clicks */
.card::before,.card::after{pointer-events:none}
.app-shell{ transition:grid-template-columns .18s ease; }

/* When hidden: collapse sidebar column and slide sidebar out
   Desktop-only safety: on small screens we use a different layout (drawer/stack),
   and collapsing the grid column can cause the "blank/disaster" behavior. */
@media (min-width: 961px){
  body.sidebar-hidden .app-shell{ grid-template-columns:0 1fr; }
  body.sidebar-hidden .sidebar{ transform:translateX(-100%); }
  body.sidebar-hidden .main{ margin-left:0 !important; }
}



/* ==========================
   Professional Sidebar v2
   ========================== */
:root{
  --sb-width: 280px;
  --sb-collapsed: 84px;
  --sb-radius: 16px;
  --sb-pad: 14px;
}

.app-shell{
  grid-template-columns: var(--sb-width) 1fr;
}

/* Sidebar container */
.sidebar{
  padding: var(--sb-pad);
  overflow-y: auto;
  background: var(--panel);
}
.sidebar::-webkit-scrollbar{ width:10px; }
.sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }

/* Brand */
.sidebar .brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: var(--sb-radius);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--outline);
  box-shadow: none;
}
.brand-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand img{ width:38px; height:38px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand-name{ font-weight: 800; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub{ font-size:12px; opacity:.7; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Search */
.sb-search{ margin-top: 12px; }
.sb-search-input{
  width:100%;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.02);
  color: inherit;
  outline: none;
}
.sb-search-input::placeholder{ opacity:.65; }
.sb-search-input:focus{ border-color: rgba(59,130,246,.55); }

/* Groups */
.nav{ margin-top: 14px; display:flex; flex-direction:column; gap: 12px; }
.sb-group{ padding: 0; }
.sb-group-title{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  margin: 2px 6px 8px 6px;
}

/* Items */
.sb-group-items{ display:flex; flex-direction:column; gap: 6px; }

/* Sidebar accent system (brand + category colors) */
.nav-item{
  /* Default accent (fallback) */
  --sb-accent: rgba(59,130,246,.92);
  --sb-accent-bg: rgba(59,130,246,.12);
  --sb-accent-bd: rgba(59,130,246,.22);

  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  position: relative;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Category + page accents (unique but consistent) */
.nav-item[data-title="Dashboard"],
.nav-item[data-title="Insights"]{
  --sb-accent: rgba(59,130,246,.95);
  --sb-accent-bg: rgba(59,130,246,.12);
  --sb-accent-bd: rgba(59,130,246,.26);
}
.nav-item[data-title="Customers"],
.nav-item[data-title="Users"],
.nav-item[data-title="Applicants"]{
  --sb-accent: rgba(20,184,166,.95);
  --sb-accent-bg: rgba(20,184,166,.12);
  --sb-accent-bd: rgba(20,184,166,.26);
}
.nav-item[data-title="Appointments"],
.nav-item[data-title="Appointment History"]{
  --sb-accent: rgba(168,85,247,.95);
  --sb-accent-bg: rgba(168,85,247,.12);
  --sb-accent-bd: rgba(168,85,247,.26);
}
.nav-item[data-title="Jobs / Work Orders"],
.nav-item[data-title="Inspections"]{
  --sb-accent: rgba(245,158,11,.95);
  --sb-accent-bg: rgba(245,158,11,.12);
  --sb-accent-bd: rgba(245,158,11,.26);
}
.nav-item[data-title="Invoices"],
.nav-item[data-title="Receivables"],
.nav-item[data-title="Cashier"],
.nav-item[data-title="Estimates"]{
  --sb-accent: rgba(34,197,94,.95);
  --sb-accent-bg: rgba(34,197,94,.12);
  --sb-accent-bd: rgba(34,197,94,.26);
}
.nav-item[data-title="Inventory"]{
  --sb-accent: rgba(249,115,22,.95);
  --sb-accent-bg: rgba(249,115,22,.12);
  --sb-accent-bd: rgba(249,115,22,.26);
}
.nav-item[data-title="DTC Library"]{
  --sb-accent: rgba(34,211,238,.95);
  --sb-accent-bg: rgba(34,211,238,.10);
  --sb-accent-bd: rgba(34,211,238,.24);
}
.nav-item[data-title="Vehicles"]{
  --sb-accent: rgba(250,204,21,.95);
  --sb-accent-bg: rgba(250,204,21,.10);
  --sb-accent-bd: rgba(250,204,21,.24);
}
.nav-item[data-title="Settings"]{
  --sb-accent: rgba(148,163,184,.92);
  --sb-accent-bg: rgba(148,163,184,.10);
  --sb-accent-bd: rgba(148,163,184,.22);
}

.nav-item:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  transform: translateY(-1px);
}
/* Color hint on hover/active for icon (text stays clean) */
.nav-item:hover .nav-ic,
.nav-item.active .nav-ic{
  color: var(--sb-accent);
}

.nav-item.active{
  background: var(--sb-accent-bg);
  border-color: var(--sb-accent-bd);
}
.nav-item.active::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--sb-accent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(0,0,0,.25);
}

.nav-ic{ width: 18px; height: 18px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px; }
.nav-ic svg{ width:18px; height:18px; fill:none; stroke: currentColor; opacity:.96; vector-effect: non-scaling-stroke; }
.nav-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Footer */
.sb-footer{
  margin-top: auto;
  padding-top: 12px;
}

/* Sidebar Repair Assistant button */
.sb-ai{ margin-top: 12px; }
.sb-ai-btn{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.12);
  color: inherit;
  cursor: pointer;
}
.sb-ai-btn:hover{ background: rgba(59,130,246,.16); }
.sb-ai-txt{ font-weight: 800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-ai-pill{
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.sb-footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.02);
}
.sb-footer-row--session{ gap: 12px; }
.sb-footer-row--logout-only{
  justify-content:stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: rgba(248,113,113,.18);
  background: rgba(127,29,29,.08);
}
.sb-session-meta{ min-width: 0; display:flex; align-items:center; gap: 10px; }
.sb-foot-label{ font-size:12px; opacity:.7; }
.sb-foot-value{ font-size:12px; font-weight:700; opacity:.9; }
.sb-logout-btn{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  flex: 1 1 auto;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(254,226,226,.96);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-align: left;
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.sb-logout-icon{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 18px;
  color: rgba(248,113,113,.98);
}
.sb-logout-icon svg{ width:18px; height:18px; }
.sb-logout-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-logout-btn:hover{
  background: rgba(127,29,29,.28);
  color: #fff;
  box-shadow: inset 3px 0 0 rgba(248,113,113,.92);
}
.sb-logout-btn:focus-visible{
  outline: 2px solid rgba(248,113,113,.78);
  outline-offset: -3px;
  background: rgba(127,29,29,.24);
}
.sb-logout-btn:active{ transform: translateY(1px); }
.sb-logout-btn[aria-busy="true"]{ cursor: wait; opacity:.82; }
#userSlot:empty,
.user-slot:empty,
.auth-user-group:empty{
  display:none !important;
}

/* Mobile drawer */
.sb-mobile-btn{
  display:none;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.02);
  color: inherit;
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
  margin-right: 10px;
}
.sb-overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index: 80;
}

@media (max-width: 900px){
  .app-shell{ grid-template-columns: 1fr; }
  .sb-mobile-btn{ display:inline-flex; align-items:center; justify-content:center; }
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(var(--sb-width), 86vw);
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 90;
    border-right: 1px solid var(--outline);
  }
  body.sb-open .sidebar{ transform: translateX(0); }
  body.sb-open .sb-overlay{ display:block; }
}

/* Works with your existing scroll hide/show class */
body.sidebar-hidden .sidebar{ transform: translateY(-12px); opacity:0; pointer-events:none; }
@media (max-width: 900px){
  body.sidebar-hidden .sidebar{ transform: translateX(-105%); opacity:1; pointer-events:auto; }
}

/* Careers form: file upload feedback */
.file-status{margin-top:8px;min-height:0}
.file-chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.file-chip img{width:42px;height:42px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.10)}
.file-doc{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.file-name{font-weight:700;font-size:13px;line-height:1.1;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-sub{font-size:12px;opacity:.9;margin-top:2px}
.file-ok{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:rgba(34,197,94,.95);font-weight:900}


/* ===== Backup banner + toast (no-backend safety) ===== */
.backup-banner{
  margin: 14px 18px 0;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}
.backup-banner .bb-title{ font-weight: 800; letter-spacing: .2px; }
.backup-banner .bb-sub{ font-size: .92rem; opacity: .9; margin-top: 2px; max-width: 70ch; }
.backup-banner .bb-actions{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.backup-banner .bb-btn{ white-space: nowrap; }

.toast-host{
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  top: max(16px, env(safe-area-inset-top));
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  isolation: isolate;
}
.toast-host.toast-root{
  right: max(16px, env(safe-area-inset-right));
  top: max(16px, env(safe-area-inset-top));
}
.toast-host.toast-root.toast-overlay{
  right: var(--toast-right, max(16px, env(safe-area-inset-right)));
  top: var(--toast-top, max(16px, env(safe-area-inset-top)));
}
.toast-host.in-dialog,
.toast-host.in-drawer{
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2147483647;
}
.toast{
  pointer-events: none;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(120,170,255,.28);
  background: rgba(5,14,30,.92);
  color:#eef4ff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.46);
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  max-width: min(var(--toast-max-width, 420px), calc(100vw - 32px));
}
.toast.show{ opacity: 1; transform: translateY(0); }
body > .toast-host.toast-root{ position: fixed !important; }

@media (max-width: 900px){
  .content{
    padding: 14px 12px 18px;
  }
  .backup-banner{
    margin: 12px 12px 0;
    flex-direction: column;
    align-items: stretch;
  }
  .backup-banner .bb-sub{
    max-width: none;
  }
  .backup-banner .bb-actions{
    width: 100%;
  }
  .backup-banner .bb-btn{
    width: 100%;
  }
}

@media (max-width: 720px){
  .backup-banner{ margin: 10px 10px 0; flex-direction: column; align-items: stretch; }
  .backup-banner .bb-sub{ max-width: none; }
  .backup-banner .bb-actions{ justify-content: flex-start; }
}

/* --- Work Orders: Kanban + Slide Editor --- */
.kb-board{display:grid; grid-template-columns:repeat(4, minmax(220px, 1fr)); gap:14px; align-items:start}
@media (max-width: 1220px){.kb-board{grid-template-columns:repeat(3, minmax(220px, 1fr));}}
@media (max-width: 980px){.kb-board{grid-template-columns:repeat(2, minmax(220px, 1fr));}}
@media (max-width: 640px){.kb-board{grid-template-columns:1fr}}
.kb-col{background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:10px; min-height:200px}
.kb-col-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 2px 10px 2px}
.kb-col-title{font-weight:900; letter-spacing:0.2px}
.kb-col-meta{font-size:12px}
.kb-cards{display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 210px); overflow:auto; padding-right:6px}
.kb-cards::-webkit-scrollbar{width:10px}
.kb-card{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:10px; cursor:grab}
.kb-card:active{cursor:grabbing}
.kb-card-top{display:flex; gap:10px; align-items:center}
.kb-wo{font-weight:900; min-width:92px}
.kb-title{font-weight:900}
.kb-sub{font-size:12px}
.kb-badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.kb-badge{font-size:11px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10)}
.kb-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap}

.drawer{position:fixed; inset:0; z-index:50; pointer-events:none}
.drawer.open{pointer-events:auto}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.55); opacity:0; transition:opacity 160ms ease}
.drawer.open .drawer-backdrop{opacity:1}
.drawer-panel{position:absolute; top:0; right:-520px; height:100%; width:min(520px, 92vw); background:rgba(18,18,22,0.98); border-left:1px solid rgba(255,255,255,0.10); box-shadow:-24px 0 60px rgba(0,0,0,0.5); transition:right 200ms ease; display:flex; flex-direction:column}
.drawer.open .drawer-panel{right:0}
.drawer-body{padding:14px; overflow:auto}
.drawer-body .card{margin:0}

/* Appointments uses a multi-step drawer but it should behave like a premium centered modal.
   Keep the generic drawer for other pages, and override only the appointments instance. */
#ap-drawer{z-index:99980}
#ap-drawer .drawer-backdrop{
  background: rgba(6,10,18,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#ap-drawer .drawer-panel{
  left: 50%;
  top: 50%;
  right: auto;
  height: auto;
  max-height: 92vh;
  width: min(860px, calc(100vw - 96px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 40px 120px rgba(0,0,0,0.55);
  overflow: hidden;
  transform: translate(-50%,-50%) scale(.98);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
#ap-drawer.open .drawer-panel{
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}
#ap-drawer .drawer-panel > .card{
  height: auto !important;
  max-height: 92vh;
}


/* Jobs / Work Orders editor: use <dialog> (top-layer) so the entry form is always visible */
#job-drawer{
  width: min(860px, calc(100vw - 96px));
  max-width: calc(100vw - 96px);
  max-height: 88vh;
  height: auto;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--card);
  /* Ensure dialog text uses app theme color (native <dialog> defaults to black). */
  color: var(--text);
  box-shadow: 0 40px 120px rgba(0,0,0,0.55);
  overflow: hidden;
}

/* Keep the Work Order title consistent (white like the rest of the app). */
#job-drawer .inv-no{ color: var(--text); }
#job-drawer::backdrop{
  background: rgba(6,10,18,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#job-drawer #job-editor{
  height: auto !important;
  max-height: 88vh;
}


/* Inspections (DVI) editor: modal (top-layer) to match the Work Orders "monster" style */
#dvi-dialog{
  width: min(920px, calc(100vw - 96px));
  max-width: calc(100vw - 96px);
  max-height: 88vh;
  height: auto;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 40px 120px rgba(0,0,0,0.55);
  overflow: hidden;
}
#dvi-dialog::backdrop{
  background: rgba(6,10,18,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#dvi-dialog #dvi-editor{
  position: relative;
  height: auto !important;
  max-height: 88vh;
  overflow: auto;
}
#dvi-dialog .inv-no{ color: var(--text); }


/* Completed Work Hub: overlay detail drawer (keeps list width stable) */
.cw-hub{position:relative}
.cw-detail-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity 160ms ease; z-index:4}
.cw-detail-backdrop.open{opacity:1; pointer-events:auto}
.cw-detail-overlay{position:absolute; top:0; right:0; bottom:0; width:min(420px, 92vw); transform:translateX(110%); opacity:0; pointer-events:none; transition:transform 220ms ease, opacity 200ms ease; z-index:5}
.cw-detail-overlay.open{transform:translateX(0); opacity:1; pointer-events:auto}
@media (min-width: 1000px){
  /* On large screens, keep the grid visible by reserving space via padding (no flex squeeze). */
  #completed-drawer .cw-body.detail-open .cw-left{padding-right:calc(min(420px, 40vw) + 12px)}
}
@media (max-width: 999px){
  /* On small screens, detail overlay becomes full width. */
  .cw-detail-overlay{width:100%}
}

/* Completed Work Hub — polish: pinned mode + smoother motion */
.cw-detail-overlay{will-change: transform, opacity}
.cw-detail-overlay{transition:transform 260ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease}
.cw-detail-backdrop{backdrop-filter: blur(2px)}
.cw-detail-overlay.open{box-shadow:-24px 0 60px rgba(0,0,0,0.55)}
.cw-detail-overlay.pinned{transform:translateX(0); opacity:1; pointer-events:auto}
#completed-drawer .cw-body.detail-open .cw-left{transition:padding-right 200ms ease}

@media (prefers-reduced-motion: reduce){
  .drawer-backdrop, .drawer-panel, .cw-detail-backdrop, .cw-detail-overlay, #completed-drawer .cw-body.detail-open .cw-left{transition:none !important}
}



/* Drag reschedule polish */
.ap-mini[draggable="true"]{ cursor: grab; }
.ap-mini.dragging{ opacity: 0.65; cursor: grabbing; }
.ap-hour-lane.drag-over{ outline: 2px solid rgba(59,130,246,0.55); outline-offset: 2px; }


/* =============================
   Cashier Split (Queue + Detail)
   ============================= */

/* =============================
   Cashier Payment Method Icons
   ============================= */
.pay-methods{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pm-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.pm-btn .pm-ico{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity: .9;
}
.pm-btn .pm-ico svg{
  width: 22px;
  height: 22px;
}
.pm-btn[aria-pressed="true"] .pm-ico{ opacity: 1; }
.pm-btn .pm-label{ line-height: 1; }

.cashier-split-shell{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 12px;
  align-items:start;
}
@media (max-width: 960px){
  .cashier-split-shell{ grid-template-columns: 1fr; }
}
.cashier-queue{
  position: sticky;
  top: 84px; /* header + padding */
  height: calc(100vh - 110px);
  overflow:auto;
}
@media (max-width: 960px){
  .cashier-queue{ position: relative; top: auto; height: auto; }
}
.cashier-detail{ min-width: 0; }
.cashier-detail-grid{
  /* Keep Cashier POS to a clean 2-column layout overall:
     Left = Queue, Right = Payment (with receipt stacked). */
  display:flex;
  flex-direction: column;
  gap: 12px;
}
/* (Previously this used a third column for the receipt panel.) */
.tab-btn.small{ padding: 6px 10px; font-size: 12px; border-radius: 999px; }
.queue-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.queue-filters{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.queue-list{ display:flex; flex-direction:column; gap:10px; padding-bottom:12px; }
.queue-item{
  border: 1px solid #1f2a44;
  background: #0b1020;
  border-radius: 14px;
  padding: 10px;
  cursor:pointer;
}
.queue-item:hover{ border-color:#2b3a63; box-shadow: 0 10px 22px rgba(0,0,0,.20); transform: translateY(-1px); }
.queue-item[aria-selected="true"]{ border-color:#4b6bff; box-shadow: 0 0 0 2px rgba(75,107,255,.20) inset; }
.queue-item .row{ display:flex; justify-content:space-between; gap:10px; }
.queue-item .title{ font-weight:700; overflow-wrap:anywhere; }
.queue-item .sub{ opacity:.8; font-size: 12px; margin-top:4px; overflow-wrap:anywhere; }
.queue-item .tag{ font-size:12px; opacity:.9; padding:4px 8px; border-radius:999px; border:1px solid #1f2a44; background:#0d1423; white-space:nowrap; }

/* ------------------------------
   Appointments: inline validation
   ------------------------------ */
.ap-drawer .field-error{
  display:none;
  margin-top:6px;
  font-size:12px;
  line-height:1.2;
  color:#ffb4b4;
}
.ap-drawer .field-error.show{display:block;}
.ap-drawer .input.invalid,
.ap-drawer select.input.invalid,
.ap-drawer textarea.input.invalid{
  border-color: rgba(255, 106, 106, .65) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 106, .12);
}

/* ===============================
   Sidebar: pinned header + fixed footer
   Fixes header moving on Cashier/Appointments and prevents sidebar scroll hijack.
   =============================== */
.sidebar{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden !important; /* only nav area should scroll */
}

/* Header block (logo + search) pinned */
.sidebar .sidebar-top{
  position:sticky;
  top:0;
  z-index:20;
  background: var(--panel);
  padding-bottom: 10px;
  border-bottom: 1px solid transparent; /* premium separator handles the visible edge */
  backdrop-filter: blur(8px);
  overflow: visible;
}

/* Premium separator: hairline + soft depth + glass fade.
   It only appears after the nav scrolls (controlled by .nav-scrolled). */
.sidebar .sidebar-separator{
  height: 12px;
  margin-top: -1px;
  position: relative;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 19;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.22),
    rgba(0,0,0,.08) 40%,
    rgba(0,0,0,0)
  );
  backdrop-filter: blur(7px);
}
.sidebar .sidebar-separator::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.10);
}
.sidebar .sidebar-separator::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}
.sidebar.nav-scrolled .sidebar-separator{ opacity: 1; }

/* Nav becomes the scroll container */
.sidebar nav.nav{
  flex:1 1 auto;
  min-height:0;              /* required for flex+overflow */
  overflow-y:auto;
  padding-top: 10px;
  overscroll-behavior: contain;
}
.sidebar nav.nav::-webkit-scrollbar{ width:10px; }
.sidebar nav.nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }

/* Keep AI button + footer always visible */
.sidebar .sb-ai,
.sidebar .sb-footer{
  flex:0 0 auto;
}

/* When sidebar is collapsed, keep stickiness sane */
body.sidebar-collapsed .sidebar .sidebar-top{
  padding-left: 10px;
  padding-right: 10px;
}

/* Work Orders — column identification colors */
.kb-col{position:relative}
.kb-col::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:14px 14px 0 0; opacity:0.95}
.kb-col[data-status="New"]::before{background:rgba(59,130,246,0.9)}
.kb-col[data-status="In Progress"]::before{background:rgba(34,197,94,0.9)}
.kb-col[data-status="Awaiting Parts"]::before{background:rgba(245,158,11,0.95)}
.kb-col[data-status="Completed"]::before{background:rgba(148,163,184,0.9)}

.kb-card.locked{cursor:default; opacity:0.92}
.kb-card.locked:active{cursor:default}
.kb-card.locked .pill{opacity:0.9}


/* Modal backdrop (blurred) */
.mb-modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(6,10,18,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 20000;
  pointer-events: auto;
}


/* Invoice editor dialog sizing (keep clear of sidebar edges) */
#dlg-inv{max-width:1100px; width:min(1100px, calc(100vw - 80px));}
#dlg-inv::backdrop{background: rgba(6,10,18,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
#dlg-update{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 20001;
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
}

/* Update dialog sizing */
#dlg-update{max-width:560px; width:min(560px, calc(100vw - 48px));}
#dlg-update::backdrop{background: rgba(6,10,18,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}


/* Customers & vehicle dialogs: force true center like update dialog */
#dlg-cus, #dlg-veh, #dlg-pick-veh{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 20000;
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
}
#dlg-cus::backdrop, #dlg-veh::backdrop, #dlg-pick-veh::backdrop{
  background: rgba(6,10,18,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* === Estimate (split view) action buttons: keep compact like Invoice === */
#est-detail .actions-row{display:flex;gap:12px;flex-wrap:wrap}
#est-detail .actions-row .btn{
  width:auto !important;
  height:44px;
  padding:0 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* WhatsApp brand button (used in Estimate + Receivables) */
.btn.whatsapp{
  background:linear-gradient(180deg,#25D366,#1DA851);
  border-color:#1DA851;
  color:#fff;
}
.btn.whatsapp:hover{filter:brightness(1.05)}
.btn.whatsapp .ico,
.btn.whatsapp svg{width:18px;height:18px;display:inline-block;flex:0 0 18px}
.btn.whatsapp .ico path,
.btn.whatsapp svg path{fill:currentColor}


/* Messages inbox */
.nav-txt{display:inline-flex; align-items:center; gap:8px}
.nav-pill{display:inline-flex; align-items:center; justify-content:center; min-width:22px; padding:2px 7px; border-radius:999px; font-size:11px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06)}
.nav-pill.danger{background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.28)}
body.page-messages{--msg-vh:100dvh;}
body.page-messages .app-shell,
body.page-messages .main{height:var(--msg-vh);}
body.page-messages .content{display:flex; flex-direction:column; overflow:hidden; min-height:0; touch-action:pan-y; padding-bottom:14px;}
.msghub-split{display:grid; grid-template-columns:390px minmax(0,1fr); gap:12px; align-items:stretch; min-height:0; height:100%; overflow:hidden; min-width:0; flex:1 1 auto;}
.msghub-left,.msghub-right{min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; height:100%;}
.msghub-right{padding-right:2px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y;}
.msghub-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; flex:0 0 auto}
.msghub-filters{display:flex; gap:8px; flex-wrap:wrap}
.msghub-list{display:flex; flex-direction:column; gap:10px; margin-top:12px; overflow:auto; min-height:0; flex:1; padding-right:2px; overscroll-behavior:contain;}
.msghub-thread-card{width:100%; text-align:left; background:var(--card); color:var(--text); border:1px solid var(--outline); border-radius:16px; padding:14px; box-shadow:var(--shadow); cursor:pointer}
.msghub-thread-card.active{outline:2px solid rgba(59,130,246,.45); box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.msghub-thread-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.msghub-thread-name{font-weight:800; font-size:14px}
.msghub-thread-time{font-size:12px; color:var(--muted)}
.msghub-thread-meta{margin-top:6px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.msghub-thread-preview{margin-top:8px; font-size:13px; line-height:1.45; min-height:38px; color:#d9e4fb}
.msghub-thread-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.msghub-thread{padding:16px; display:flex; flex-direction:column; min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.msghub-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; flex:0 0 auto}
.msghub-title{font-size:20px; font-weight:900}
.msghub-sub{margin-top:4px; color:var(--muted); font-size:13px; line-height:1.45}
.msghub-kpis{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.msghub-actions,.msghub-quick{display:flex; gap:8px; flex-wrap:wrap}
.msg-thread-actions-compact{flex-wrap:nowrap;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.msg-thread-actions-compact::-webkit-scrollbar{display:none;}
.msg-thread-actions-compact .btn{white-space:nowrap;flex:0 0 auto;}
.msg-action-close{
  background:linear-gradient(180deg,#f59e0b,#ea8a00);
  border-color:#d97706;
  color:#fff7ed;
  box-shadow:0 10px 22px rgba(234,138,0,.18);
}
.msg-action-spam{
  background:linear-gradient(180deg,#8b5cf6,#6d28d9);
  border-color:#6d28d9;
  color:#f5f3ff;
  box-shadow:0 10px 22px rgba(109,40,217,.18);
}
.msg-action-reopen{
  background:linear-gradient(180deg,rgba(37,99,235,.22),rgba(29,78,216,.14));
  border-color:rgba(96,165,250,.45);
  color:#dbeafe;
  box-shadow:0 10px 22px rgba(37,99,235,.12);
}
.msg-action-delete{
  background:linear-gradient(180deg,rgba(30,41,59,.95),rgba(15,23,42,.98));
  border-color:rgba(248,113,113,.28);
  color:#fee2e2;
}
.msg-action-delete .action-icon,
.msg-action-delete .action-icon svg{color:#fca5a5;}
.msg-action-reopen .action-icon,
.msg-action-reopen .action-icon svg{color:#93c5fd;}
.msg-action-spam .action-icon,
.msg-action-spam .action-icon svg{color:#ede9fe;}
.msg-action-close .action-icon,
.msg-action-close .action-icon svg{color:#fff7ed;}


.msghub-quick{margin-top:10px; flex:0 0 auto}
.msghub-body{margin-top:14px; border:1px solid rgba(255,255,255,.06); border-radius:20px; background:linear-gradient(180deg,rgba(4,8,16,.92),rgba(2,6,12,.98)); padding:16px 14px; display:flex; flex-direction:column; gap:10px; overflow:auto; min-height:220px; max-height:min(42vh,460px); flex:0 0 auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scroll-padding-bottom:18px;}
.msghub-bubble{width:fit-content; max-width:min(var(--msg-bubble-max-width, 66%), 520px); min-width:180px; border-radius:20px; border:1px solid rgba(255,255,255,.08); padding:11px 14px 10px; box-shadow:0 10px 24px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.03); transition:transform .15s ease, box-shadow .15s ease; position:relative; backdrop-filter:blur(10px)}
.msghub-bubble::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 42%); opacity:.55}
.msghub-bubble.visitor{background:linear-gradient(180deg,rgba(20,30,48,.96),rgba(12,18,30,.99)); margin-right:auto; border-color:rgba(96,165,250,.16); border-bottom-left-radius:8px; color:#f8fafc}
.msghub-bubble.visitor::before{content:''; position:absolute; inset:1px auto 1px 1px; width:3px; border-radius:16px; background:linear-gradient(180deg,rgba(148,163,184,.55),rgba(96,165,250,.18)); opacity:.85}
.msghub-bubble.staff{background:linear-gradient(180deg,rgba(17,65,124,.97),rgba(10,42,90,.99)); margin-left:auto; border-color:rgba(34,211,238,.22); border-bottom-right-radius:8px; color:#f8fafc}
.msghub-bubble.staff::before{content:''; position:absolute; inset:1px 1px 1px auto; width:3px; border-radius:16px; background:linear-gradient(180deg,rgba(34,211,238,.95),rgba(59,130,246,.3)); opacity:.9}
.msghub-bubble-top{display:none}
.msghub-bubble-body{font-size:15px; line-height:1.42; word-break:break-word; white-space:pre-wrap}
.msghub-bubble-status{margin-top:6px; font-size:11px; color:rgba(226,232,240,.72); text-align:right; display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; align-items:center}
.msghub-bubble-status .status-dot{display:inline-block; width:7px; height:7px; border-radius:999px; margin-right:6px; vertical-align:middle; background:#64748b}
.msghub-bubble-status.sent .status-dot{background:#60a5fa}
.msghub-bubble-status.delivered .status-dot{background:#f59e0b}
.msghub-bubble-status.seen .status-dot{background:#10b981}

.msghub-bubble-status-text{display:inline-flex; align-items:center; gap:6px}
.msghub-bubble-status-time{opacity:.88}
.msghub-bubble-meta{display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:6px; font-size:11px; color:rgba(226,232,240,.72)}
.msghub-bubble-meta .msg-double-check{letter-spacing:-1px; font-weight:800; opacity:.85}

.msg-media-grid{display:grid; gap:8px; margin-top:8px; justify-items:start;}
.msg-media-card,.msg-media-file{display:inline-flex; align-items:center; justify-content:center; max-width:min(100%, 260px); border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(2,6,23,.55); overflow:hidden; text-decoration:none; color:#e6eefc;}
.msg-media-image{display:block; width:auto; max-width:100%; max-height:200px; object-fit:contain; border-radius:12px;}
.msg-media-video{display:block; width:min(100%, 260px); max-height:200px; border-radius:12px; background:#020617;}
.msg-media-audio{display:block; width:min(100%, 260px);}
.msg-media-file{padding:9px 11px; justify-content:flex-start;}
@media (max-width: 780px){
  .msghub-thread{padding:14px;}
  .msghub-body{padding:12px 10px; max-height:min(58vh,560px);}
  .msghub-bubble{max-width:min(84%, 100%); min-width:140px; padding:10px 12px 8px;}
  .msghub-bubble-top{flex-wrap:wrap; gap:8px;}
  .msg-media-card,.msg-media-file,.msg-media-video,.msg-media-audio{width:min(100%, 220px); max-width:min(100%, 220px);}
  .msg-media-image{max-height:170px;}
}

.msgcall-history-main{display:flex; flex-direction:column; gap:4px}
.msgcall-history-side{text-align:right; display:flex; flex-direction:column; gap:4px; align-items:flex-end}
.msgcall-history-seen{font-size:12px; color:rgba(226,232,240,.82)}
.msgcall-history-seen.pending{color:rgba(248,250,252,.58)}
.msghub-reply,.msghub-note{margin-top:16px; flex:0 0 auto}
.action-chip{display:inline-flex; align-items:center; gap:8px;}
.action-chip .action-icon{margin-right:0;}
.action-chip-whatsapp{background:#25D366; border-color:#25D366; color:#fff;}
.action-chip-whatsapp:hover{filter:brightness(1.03);}
.action-chip-call .action-icon,.action-chip-message .action-icon,.action-chip-email .action-icon{opacity:.92;}
@media (max-width: 1100px){ body.page-messages .content{overflow:auto; -webkit-overflow-scrolling:touch;} .msghub-split{grid-template-columns:1fr; height:auto; min-height:auto; overflow:visible; flex:0 0 auto;} .msghub-left,.msghub-right{overflow:visible; height:auto;} .msghub-thread{overflow:visible;} .msghub-list{max-height:none;} .msghub-body{max-height:min(52vh,560px);} .msghub-right{padding-right:0;} }
@media (max-width: 780px){
  body.page-messages .app-shell, body.page-messages .main{height:auto; min-height:100dvh;}
  body.page-messages .content{padding:14px 12px 18px;}
  .msghub-toolbar{padding:10px;}
  .msghub-head{gap:10px;}
  .msghub-actions,.msghub-quick{gap:6px;}
  .msg-thread-actions-compact{gap:8px;overflow-x:auto;padding-bottom:4px;}

  .msghub-call-summary{grid-template-columns:1fr;}
  .msghub-reply{position:sticky; bottom:0; z-index:4; background:linear-gradient(180deg, rgba(11,18,32,0), rgba(11,18,32,.96) 18%, rgba(11,18,32,.98)); padding-top:10px;}
  .msghub-note{margin-top:12px;}
  .msg-compose{position:relative; padding:9px 10px; gap:8px;}
  .msg-compose-btn,.msg-compose-send{width:38px; height:38px;}
}


.msg-compose{display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:linear-gradient(180deg,rgba(9,14,24,.98),rgba(7,11,20,.98));}
.msg-compose-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.msg-compose-btn,.msg-compose-send{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#f8fbff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease}
.msg-compose-btn:hover,.msg-compose-send:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); transform:translateY(-1px)}
.msg-compose-btn svg,.msg-compose-send svg{width:19px; height:19px}
.msg-compose-input{flex:1; min-width:0; border:0; outline:none; background:transparent; color:#e7eefc; font-size:15px}
.msg-compose-input::placeholder{color:rgba(231,238,252,.72)}
.msg-compose-send{background:linear-gradient(180deg,#2563eb,#1d4ed8); border-color:#1d4ed8}
.msg-compose-send:hover{background:linear-gradient(180deg,#3b82f6,#2563eb); border-color:#2563eb}
.msg-compose textarea.input{resize:none; min-height:24px; max-height:140px; line-height:1.45; padding:0; box-shadow:none}
.msg-compose textarea.input:focus{outline:none; border:0; box-shadow:none}

.msg-compose-status{display:none; align-items:center; gap:8px; margin-top:10px; padding:9px 12px; border:1px solid rgba(239,68,68,.28); border-radius:14px; background:rgba(127,29,29,.18); color:#fecaca; font-size:13px; font-weight:700}
.msg-compose-status.show{display:flex}
.msg-compose-status::before{content:''; width:10px; height:10px; border-radius:999px; background:#ef4444; box-shadow:0 0 0 0 rgba(239,68,68,.55); animation:msgPulse 1.4s infinite}
@keyframes msgPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.msg-compose-tray{display:none; margin-top:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:#0b1220}
.msg-compose-tray.show{display:block}
.msg-compose-list{display:flex; flex-wrap:wrap; gap:8px}
.msg-compose-chip{display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.04); color:#e7eefc; font-size:12px}
.msg-compose-chip span{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg-compose-chip button{border:0; background:transparent; color:#fca5a5; font-size:12px; font-weight:700; cursor:pointer}


.msgcall-overlay{position:fixed; inset:0; background:rgba(2,6,23,.55); z-index:1200; display:none; align-items:center; justify-content:center; padding:24px}
.msgcall-modal{width:min(760px,100%); max-height:min(88vh,820px); overflow:auto; padding:18px; border-radius:26px; border:1px solid rgba(148,163,184,.16); background:linear-gradient(180deg,rgba(3,10,24,.985),rgba(2,8,20,.99)); box-shadow:0 28px 80px rgba(15,23,42,.34)}
.msgcall-topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px}
.msgcall-eyebrow{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#2563eb}
.msgcall-name{font-size:26px; font-weight:900; line-height:1.05; margin-top:4px}
.msgcall-meta{font-size:13px; color:#64748b; margin-top:8px}
.msgcall-stage{padding:12px 16px; border-radius:18px; background:rgba(37,99,235,.09); color:#5ea0ff; font-weight:800; border:1px solid rgba(59,130,246,.14)}
.msgcall-timer{font-size:32px; font-weight:900; margin-top:14px}
.msgcall-recording,.msgcall-notice{margin-top:8px; color:#64748b; font-size:13px}
.msgcall-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.msgcall-history-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(148,163,184,.25)}
.msgcall-history{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.msgcall-history-item{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid rgba(148,163,184,.22); border-radius:16px; background:rgba(255,255,255,.06); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.msgcall-history-item strong{color:var(--text)}
.msgcall-history-item .muted{color:rgba(226,232,240,.8)}
.msgcall-actions-main{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.msgcall-btn{min-height:54px; justify-content:center; gap:10px; padding:0 14px; border-radius:16px; font-weight:800; font-size:14px; border:1px solid rgba(148,163,184,.18); background:linear-gradient(180deg,rgba(7,15,28,.98),rgba(4,10,20,.98)); color:#ecf4ff; box-shadow:0 10px 24px rgba(2,6,23,.14), inset 0 1px 0 rgba(255,255,255,.04)}
.msgcall-btn .msgcall-btn-icon{width:18px; height:18px; flex:0 0 18px; display:inline-flex; align-items:center; justify-content:center; opacity:.96}
.msgcall-btn .msgcall-btn-icon svg{width:18px; height:18px}
.msgcall-btn .msgcall-btn-text{display:inline-flex; align-items:center; line-height:1.1; white-space:nowrap}
.msgcall-btn.primary,.msgcall-btn.danger,.msgcall-btn.warn{justify-content:center}
.msgcall-btn.primary{background:linear-gradient(180deg,#2563eb,#1d4ed8); border-color:rgba(59,130,246,.72)}
.msgcall-btn.danger{background:linear-gradient(180deg,#ef4444,#dc2626); border-color:rgba(248,113,113,.72)}
.msgcall-btn.warn{background:linear-gradient(180deg,#f59e0b,#d97706); border-color:rgba(251,191,36,.72)}
.msgcall-btn:not(:disabled):hover{transform:translateY(-1px); filter:saturate(1.03)}
.msgcall-btn:disabled{opacity:.55; filter:saturate(.84)}
.msgcall-btn.is-active{background:linear-gradient(180deg,rgba(30,64,175,.92),rgba(29,78,216,.86)); border-color:rgba(96,165,250,.58); color:#dbeafe}
.msgcall-btn.is-active .msgcall-btn-icon{filter:drop-shadow(0 0 10px rgba(96,165,250,.32))}
#msg-call-record.is-live{background:rgba(249,115,22,.16); border-color:rgba(251,146,60,.56); color:#fed7aa}
#msg-call-record.is-live .msgcall-btn-icon{animation:msgCallBlink 1.15s ease-in-out infinite}
@keyframes msgCallBlink{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(.78); opacity:.45}}
@media (max-width: 860px){.msgcall-actions-main{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 780px){ .msgcall-overlay{padding:14px} .msgcall-name{font-size:22px} .msgcall-modal{border-radius:18px} .msgcall-history-item{flex-direction:column; align-items:flex-start} .msgcall-btn{min-height:50px; border-radius:14px; font-size:13px;} }

.msghub-presence-banner{margin-top:14px; display:flex; justify-content:space-between; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:18px; border:1px solid rgba(59,130,246,.22); background:linear-gradient(180deg,rgba(15,23,42,.66),rgba(15,23,42,.42)); box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.msghub-presence-main{display:flex; flex-direction:column; gap:6px; min-width:0}
.msghub-presence-title{font-size:14px; font-weight:900}
.msghub-presence-text{font-size:13px; color:rgba(226,232,240,.82); line-height:1.45}
.msghub-presence-chips,.msgcall-connect-chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.msghub-presence-chip,.msgcall-connect-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.22); background:rgba(255,255,255,.05); color:#e2e8f0; font-size:12px; font-weight:700; white-space:nowrap}
.msghub-presence-chip.ok,.msgcall-connect-chip.ok{border-color:rgba(16,185,129,.34); background:rgba(16,185,129,.12); color:#d1fae5}
.msghub-presence-chip.warn,.msgcall-connect-chip.warn{border-color:rgba(245,158,11,.34); background:rgba(245,158,11,.12); color:#fde68a}
.msghub-presence-chip.danger,.msgcall-connect-chip.danger{border-color:rgba(239,68,68,.34); background:rgba(239,68,68,.12); color:#fecaca}
.msghub-call-summary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px}
.msghub-call-card{padding:14px 16px; border-radius:18px; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.04); display:flex; flex-direction:column; gap:6px; min-width:0}
.msghub-call-card-label{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:rgba(226,232,240,.66); font-weight:800}
.msghub-call-card-value{font-size:20px; font-weight:900; line-height:1.1}
.msghub-call-card-meta{font-size:12px; color:rgba(226,232,240,.8); line-height:1.45}
.msghub-thread-card .badge.live{border-color:rgba(59,130,246,.45); background:rgba(59,130,246,.14); color:#dbeafe}
.msgcall-connect-strip{display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:16px; border:1px solid rgba(148,163,184,.2); background:rgba(255,255,255,.04)}
.msgcall-connect-main{display:flex; flex-direction:column; gap:5px; min-width:0}
@media (max-width: 920px){.msghub-call-summary{grid-template-columns:1fr}.msghub-presence-banner,.msgcall-connect-strip{flex-direction:column}.msghub-presence-chips,.msgcall-connect-chips{justify-content:flex-start}}


.msghub-call-summary-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.msghub-call-summary-actions{display:flex;align-items:center;gap:8px}
.msgcall-history-title-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.msgcall-history-item.missed{border-color:rgba(239,68,68,.22);background:rgba(239,68,68,.06)}
.msgcall-history-result{font-weight:800;color:#e2e8f0}
.action-chip{border-radius:14px;padding:10px 14px;font-weight:800;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.action-chip:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.16)}
.action-chip-call{background:linear-gradient(135deg, rgba(37,99,235,.22), rgba(59,130,246,.14));border-color:rgba(59,130,246,.42);color:#dbeafe}
.action-chip-email,.action-chip-message{background:rgba(255,255,255,.05);border-color:rgba(148,163,184,.22)}
#thread-connection-banner .msghub-presence-chips{justify-content:flex-start}
@media (max-width: 920px){.msghub-call-summary-head{flex-direction:column;align-items:flex-start}}

.msghub-bubble.grouped{margin-top:2px;}
.msghub-bubble.grouped .msghub-bubble-top{display:none;}
.msghub-bubble.has-attachments .msghub-bubble-body{margin-bottom:4px;}
.msghub-bubble:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 12px 28px rgba(2,6,23,.18); transform:translateY(-1px);}

.msghub-call-bubble{padding:14px 14px 10px; min-width:240px}
.msghub-call-bubble-card{display:flex; align-items:center; gap:12px}
.msghub-call-bubble-icon{width:44px; height:44px; border-radius:16px; display:grid; place-items:center; font-size:20px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.msghub-call-bubble-content{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.msghub-call-bubble-title-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.msghub-call-bubble-title{font-size:15px; font-weight:800; letter-spacing:-.01em}
.msghub-call-bubble-badge{display:inline-flex; align-items:center; justify-content:center; padding:4px 9px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border:1px solid rgba(255,255,255,.12); color:rgba(226,232,240,.88); background:rgba(255,255,255,.05)}
.msghub-call-bubble-text{font-size:12px; color:rgba(226,232,240,.76); line-height:1.35}
.msghub-call-bubble-actions{display:flex; justify-content:flex-end; margin-top:10px}
.msghub-call-bubble-action{appearance:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#f8fafc; height:34px; padding:0 12px; border-radius:12px; font-size:12px; font-weight:700; letter-spacing:.01em; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease}
.msghub-call-bubble-action:hover{transform:translateY(-1px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2)}
.msghub-call-bubble-action:active{transform:translateY(0)}
.msghub-call-bubble.is-missed.visitor{background:linear-gradient(180deg,rgba(20,30,48,.96),rgba(12,18,30,.99)); border-color:rgba(96,165,250,.16)}
.msghub-call-bubble.is-missed.staff{background:linear-gradient(180deg,rgba(82,28,28,.95),rgba(52,18,18,.99)); border-color:rgba(248,113,113,.22)}
.msghub-call-bubble.is-completed.staff{background:linear-gradient(180deg,rgba(14,69,82,.96),rgba(10,42,60,.99)); border-color:rgba(34,211,238,.18)}
.msghub-call-bubble.is-completed.visitor{background:linear-gradient(180deg,rgba(22,44,70,.95),rgba(14,24,40,.99)); border-color:rgba(96,165,250,.18)}
.msghub-call-bubble.is-missed .msghub-call-bubble-action{background:linear-gradient(180deg,rgba(59,130,246,.2),rgba(37,99,235,.12)); border-color:rgba(96,165,250,.32)}
.msghub-call-bubble.is-missed.staff .msghub-call-bubble-action{background:linear-gradient(180deg,rgba(239,68,68,.2),rgba(127,29,29,.14)); border-color:rgba(248,113,113,.3)}
.msghub-call-bubble .msghub-bubble-meta{margin-top:8px}
@media (max-width: 640px){
  .msghub-call-bubble{min-width:0; width:min(100%, 360px)}
  .msghub-call-bubble-title-row{align-items:flex-start; flex-direction:column}
  .msghub-call-bubble-actions{justify-content:stretch}
  .msghub-call-bubble-action{width:100%}
}

.msghub-reply-head{display:flex;align-items:flex-start;justify-content:flex-end;gap:12px;flex-wrap:wrap}
#msg-reply-label{display:none !important;}
.msghub-channel-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.msghub-channel-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(59,130,246,.22);background:rgba(37,99,235,.1);color:#dbeafe;font-size:11px;font-weight:800;letter-spacing:.02em}
.msghub-channel-hint{font-size:12px;color:rgba(191,219,254,.88)}
.msg-compose-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 8px}
.msg-template-select{max-width:320px;min-width:200px;height:40px}
.msg-quick-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.msg-quick-chip{appearance:none;border:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.04);color:#e2e8f0;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer;transition:all .16s ease}
.msg-quick-chip:hover{transform:translateY(-1px);border-color:rgba(96,165,250,.34);background:rgba(37,99,235,.12)}
.msghub-date-divider{display:flex;align-items:center;justify-content:center;margin:18px 0 10px;position:relative}
.msghub-date-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(148,163,184,.22),transparent)}
.msghub-date-divider span{position:relative;z-index:1;padding:0 12px;border-radius:999px;background:rgba(2,8,20,.92);color:rgba(226,232,240,.7);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.msghub-inline-channel{display:inline-flex;align-items:center;margin-bottom:6px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.16);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(226,232,240,.66)}
.msg-mobile-compact-header .header .muted{max-width:760px}
@media (max-width: 860px){
  .msghub-reply.mobile-sticky{position:sticky;bottom:0;z-index:12;background:linear-gradient(180deg,rgba(5,12,24,.82),rgba(5,12,24,.98));backdrop-filter:blur(12px);padding-top:12px;border-top:1px solid rgba(148,163,184,.16)}
  .msg-compose-tools{overflow:auto hidden;flex-wrap:nowrap;padding-bottom:4px}
  .msg-template-select{min-width:180px;max-width:none}
  .msg-quick-actions{flex-wrap:nowrap}
}
@media (max-width: 640px){
  .msghub-reply-head{align-items:stretch}
  .msghub-channel-strip{width:100%}
  .msg-compose{grid-template-columns:1fr auto}
  .msg-compose-actions{grid-column:1/-1;order:2}
  .msg-compose-input{grid-column:1/2}
  .msg-compose-send{grid-column:2/3}
}


.msghub-head-pro{align-items:stretch;gap:16px;padding-bottom:4px}
.msghub-head-main{display:flex;flex-direction:column;gap:12px;min-width:0;flex:1 1 520px}
.msghub-identity-row{display:flex;align-items:flex-start;gap:14px;min-width:0}
.msghub-avatar{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;letter-spacing:.06em;color:#dce7ff;background:linear-gradient(135deg, rgba(43,87,189,.24), rgba(12,19,33,.9));border:1px solid rgba(120,156,255,.16);box-shadow:0 14px 30px rgba(0,0,0,.16)}
.msghub-identity-copy{min-width:0;flex:1}
.msghub-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.msghub-presence-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--muted)}
.msghub-presence-pill.ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.22);color:#9ce7b1}
.msghub-presence-pill.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.22);color:#ffd48a}
.msghub-presence-pill.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.22);color:#ffb2b2}
.msghub-time-pill{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:#ffd48a;background:rgba(255,191,71,.12);border-color:rgba(255,191,71,.18)}
.msghub-time-pill:empty{display:none}
.msghub-sub:empty{display:none}
.msghub-profile-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(180px,220px);gap:12px}
.msghub-profile-card,.msghub-profile-call{min-height:72px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(16,23,38,.95), rgba(9,14,24,.96));padding:14px 16px;box-shadow:0 16px 34px rgba(0,0,0,.14)}
.msghub-profile-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.msghub-profile-value{font-size:14px;font-weight:700;line-height:1.4;color:#eef4ff;word-break:break-word}
.msghub-profile-card.compact-action .msghub-profile-value{color:#b9cdf7}
.msghub-profile-call{display:flex;align-items:center;gap:12px;color:#eef4ff;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.msghub-profile-call:hover{transform:translateY(-1px);border-color:rgba(95,137,255,.25);background:linear-gradient(180deg, rgba(18,30,52,.98), rgba(11,18,32,.98))}
.msghub-profile-call.is-disabled{pointer-events:none;opacity:.45}
.msghub-profile-call-icon{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(37,99,235,.08));border:1px solid rgba(96,165,250,.22);color:#dbeafe;flex:0 0 auto}
.msghub-profile-call span{display:flex;flex-direction:column;gap:2px}
.msghub-profile-call strong{font-size:14px;line-height:1.2}
.msghub-profile-call small{font-size:12px;color:#9fb0ca;line-height:1.3}
@media (max-width: 1120px){.msghub-profile-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 860px){.msghub-head-pro{gap:12px}.msghub-identity-row{align-items:center}.msghub-profile-strip{grid-template-columns:1fr}.msghub-actions{width:100%}}
@media (max-width: 640px){.msghub-avatar{width:46px;height:46px;border-radius:14px}.msghub-title{font-size:18px}.msghub-profile-card,.msghub-profile-call{min-height:64px;padding:13px 14px}}


/* ==========================
   Mboka Chat left panel only — invoice/vehicle matched
   Keep right side unchanged
   ========================== */
body.page-messages .msghub-split{
  grid-template-columns:360px minmax(0,1fr);
  gap:12px;
}
body.page-messages .msghub-left{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:12px;
  min-height:0;
}
body.page-messages .msghub-left .msghub-toolbar.card{
  background:linear-gradient(180deg, rgba(12,23,45,.96), rgba(8,17,34,.98));
  border:1px solid rgba(43,68,112,.42);
  box-shadow:0 16px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.025);
  padding:12px;
}
body.page-messages .msghub-left .msghub-list{
  margin-top:0;
  padding-right:0;
  gap:8px;
}
body.page-messages .msghub-left .msghub-thread-card{
  padding:10px 12px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.012));
  border:1px solid rgba(43,68,112,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
body.page-messages .msghub-left .msghub-thread-card.active{
  outline:none;
  border-color:rgba(59,130,246,.72);
  box-shadow:0 0 0 2px rgba(37,99,235,.36), inset 0 1px 0 rgba(255,255,255,.02);
}
body.page-messages .msghub-left .msghub-thread-name{font-size:12px;}
body.page-messages .msghub-left .msghub-thread-time{font-size:10.5px;}
body.page-messages .msghub-left .msghub-thread-meta{margin-top:3px; font-size:10.5px;}
body.page-messages .msghub-left .msghub-thread-preview{
  margin-top:5px;
  font-size:11px;
  line-height:1.3;
  min-height:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.page-messages .msghub-left .msghub-thread-badges{margin-top:6px; gap:4px;}
body.page-messages .msghub-left .msghub-thread-badges .badge{padding:4px 9px; font-size:9.5px;}
body.page-messages .msghub-left .msghub-list-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 4px 2px;
  border-top:1px solid rgba(43,68,112,.24);
}
body.page-messages .msghub-left .msghub-list-pager:empty{display:none;}
body.page-messages .msghub-left .msg-page-meta{
  color:rgba(225,234,255,.72);
  font-size:12px;
  white-space:nowrap;
}
body.page-messages .msghub-left .msg-page-btn[disabled]{opacity:.45; cursor:not-allowed;}
@media (max-width:1100px){
  body.page-messages .msghub-left{grid-template-rows:auto minmax(260px,1fr) auto;}
}


/* Inspection capture modal */
body.inspection-capture-open{overflow:hidden}
.inspection-capture-modal{width:min(760px, calc(100vw - 24px));max-width:min(760px, calc(100vw - 24px));padding:0;border:none;background:transparent;color:#e7eefc;overflow:visible;z-index:2147483647}.inspection-capture-modal::backdrop{background:rgba(2,6,18,.76);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.inspection-capture-card{position:relative;z-index:1;width:100%;border-radius:24px;border:1px solid rgba(72,112,196,.3);background:linear-gradient(180deg, rgba(12,23,45,.98), rgba(7,15,30,.99));box-shadow:0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);padding:18px}
.inspection-capture-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.inspection-capture-title{font-size:24px;font-weight:900;color:#f8fbff;letter-spacing:-.03em}
.inspection-capture-sub{margin-top:4px;color:#aebddb;font-size:14px;line-height:1.45}
.inspection-capture-close{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#e8efff;font-size:28px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.inspection-capture-body{border-radius:20px;border:1px solid rgba(72,112,196,.18);background:rgba(3,9,22,.46);padding:14px;min-height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.inspection-capture-body > .hidden{display:none !important}.inspection-capture-body > *:not(.hidden){display:block;max-width:100%}
.inspection-capture-video,.inspection-capture-photo{width:100%;max-height:58vh;border-radius:16px;background:#040810;object-fit:contain}
.inspection-capture-audio{width:100%}
.inspection-capture-audio-state{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;padding:26px 18px;border-radius:18px;background:linear-gradient(180deg, rgba(112,26,117,.18), rgba(26,11,43,.2));border:1px solid rgba(236,72,153,.22)}
.inspection-capture-mic{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#f0abfc;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset}
.inspection-capture-mic svg{width:28px;height:28px}
.inspection-capture-audio-title{font-size:18px;font-weight:800;color:#f7ebff}
.inspection-capture-audio-timer{margin-top:6px;font-size:28px;font-weight:900;color:#f0abfc;letter-spacing:.08em}
.inspection-capture-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px}
.inspection-capture-actions .btn.hidden{display:none}
@media (max-width:640px){.inspection-capture-card{padding:14px}.inspection-capture-title{font-size:20px}.inspection-capture-close{width:38px;height:38px;border-radius:12px}.inspection-capture-body{min-height:220px;padding:10px}.inspection-capture-actions{justify-content:stretch}.inspection-capture-actions .btn{flex:1 1 100%}}

.hidden{display:none !important}


/* === Mboka workspace icon system === */
.mb-icon{display:inline-flex; width:16px; height:16px; align-items:center; justify-content:center; flex:0 0 16px; color:rgba(231,238,252,.86);}
.mb-icon svg{width:16px; height:16px; display:block;}
.mb-title-wrap,.mb-inline-label,.mb-meta-line,.mb-field-label,.mb-action-inline{display:inline-flex; align-items:center; gap:8px; min-width:0;}
.mb-title-wrap{font-weight:inherit;}
.mb-inline-label{gap:7px;}
.mb-field-label{gap:7px;}
.mb-meta-line{gap:6px; color:inherit;}
.mb-action-inline{gap:8px;}
.badge.has-icon,.pill.has-icon{display:inline-flex; align-items:center; gap:7px;}
.badge.has-icon .mb-icon,.pill.has-icon .mb-icon{width:14px; height:14px; flex-basis:14px;}
.badge.has-icon .mb-icon svg,.pill.has-icon .mb-icon svg{width:14px; height:14px;}
.inv-kpis .badge.has-icon,.rc-kpis .badge.has-icon{padding-inline:12px;}
.inv-item-row .mb-meta-line,.inv-itemrow .mb-meta-line,.receivables-monster .inv-row .mb-meta-line{font-size:inherit;}
.est-block-title .mb-icon,.inv-block-title .mb-icon,.rc-block-title .mb-icon{opacity:.94;}
.est-stat-label .mb-icon,.inv-stat-label .mb-icon,.rc-stat-label .mb-icon,.field-label .mb-icon{opacity:.78;}
.est-actionbar .btn,.inv-actionbar .btn,.rc-actionbar .btn,.ar-more-menu .btn{display:inline-flex; align-items:center; justify-content:center; gap:0;}
.est-actionbar .btn .action-icon,.inv-actionbar .btn .action-icon,.rc-actionbar .btn .action-icon,.ar-more-menu .btn .action-icon{margin-right:8px;}

/* ==========================================================
   Mboka Navigation Stability Layer — smooth without shake
   ----------------------------------------------------------
   Sidebar highlight can move, but the page itself stays locked.
   No delayed page pull-back, no blur shield, no scroll-position
   based content motion. This fixes the shake seen after scrolling
   deep inside a module and then clicking another section.
   ========================================================== */
body{
  opacity:1 !important;
  transition:none !important;
}
body.fade-out{ opacity:1 !important; }

.mboka-sidebar-motion-enabled .sidebar{
  transform:none !important;
  opacity:1 !important;
  will-change:auto;
  backface-visibility:hidden;
}

.sidebar nav.nav.nav-motion-ready{
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  contain:paint;
}

.nav-motion-indicator{
  position:absolute;
  left:0;
  top:0;
  width:var(--nav-motion-w, 0px);
  height:var(--nav-motion-h, 0px);
  transform:translate3d(var(--nav-motion-x, 0px), var(--nav-motion-y, 0px), 0);
  border-radius:16px;
  background:linear-gradient(90deg, var(--nav-motion-bg, rgba(34,211,238,.10)), rgba(255,255,255,.025));
  border:1px solid var(--nav-motion-bd, rgba(34,211,238,.24));
  box-shadow:0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    width 180ms ease,
    height 180ms ease,
    background 160ms ease,
    border-color 160ms ease,
    opacity 120ms ease;
}
.nav-motion-indicator.is-visible{ opacity:1; }
.nav-motion-indicator.no-motion{ transition:none !important; }
.nav-motion-indicator::before{
  content:"";
  position:absolute;
  left:7px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background:var(--nav-motion-accent, rgba(34,211,238,.95));
  box-shadow:0 0 16px color-mix(in srgb, var(--nav-motion-accent, #22d3ee) 45%, transparent);
}

.sidebar nav.nav.nav-motion-ready .nav-item{
  position:relative;
  z-index:1;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  will-change:auto;
  transition:
    color 150ms ease,
    opacity 150ms ease,
    background 150ms ease,
    border-color 150ms ease;
}
.sidebar nav.nav.nav-motion-ready .nav-item::before{ display:none !important; }
.sidebar nav.nav.nav-motion-ready .nav-item:hover{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.055) !important;
  transform:none !important;
}
.sidebar nav.nav.nav-motion-ready .nav-item.active,
.sidebar nav.nav.nav-motion-ready .nav-item.is-pending{
  color:var(--text);
}
.sidebar nav.nav.nav-motion-ready .nav-item.active .nav-ic,
.sidebar nav.nav.nav-motion-ready .nav-item.is-pending .nav-ic{
  color:var(--sb-accent);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--sb-accent) 45%, transparent));
}
.sidebar nav.nav.nav-motion-ready .nav-item.is-pending .nav-txt::after{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-left:7px;
  border-radius:999px;
  background:var(--sb-accent);
  vertical-align:middle;
  opacity:.85;
}

/* Critical stability rule: module switching must never move the page canvas. */
html.mboka-motion-entering .main,
html.mboka-motion-entering .content,
html.mboka-motion-ready .content,
body.mboka-nav-leaving .main,
body.mboka-nav-leaving .content,
body.mboka-nav-leaving .header,
body.mboka-nav-leaving .sidebar{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}
body.mboka-nav-leaving::after{ display:none !important; }
body.mboka-nav-leaving .content,
body.mboka-nav-leaving .header{ pointer-events:auto !important; }

/* The sidebar should be a permanent command rail, not an auto-hiding object. */
@media (min-width: 961px){
  body.sidebar-hidden .app-shell{ grid-template-columns:var(--sb-width) 1fr !important; }
  body.sidebar-hidden .sidebar{ transform:none !important; opacity:1 !important; pointer-events:auto !important; }
}

@media (prefers-reduced-motion: reduce){
  .nav-motion-indicator,
  .sidebar nav.nav.nav-motion-ready .nav-item,
  html.mboka-motion-ready .content,
  body.mboka-nav-leaving .main,
  body.mboka-nav-leaving .sidebar{
    transition:none !important;
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }
  body.mboka-nav-leaving::after{ display:none !important; }
}

/* ==========================================================
   Sidebar natural no-shake stabilization — 2026-04-24
   Removes the measurement-based moving pill and every scroll-restoration
   behavior that made the page feel like it was pulling backward.
   ========================================================== */
html.page-loading .content,
html.page-ready .content,
html.mboka-motion-entering .content,
html.mboka-motion-ready .content,
body.mboka-nav-leaving .content,
body.mboka-nav-leaving .main,
body.mboka-nav-leaving .header{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}

body.mboka-sidebar-natural-nav,
body.mboka-sidebar-natural-nav.fade-out{
  opacity:1 !important;
  transition:none !important;
}

body.mboka-sidebar-natural-nav::after,
body.mboka-nav-leaving::after{
  display:none !important;
}

.nav-motion-indicator{ display:none !important; }

@media (min-width: 901px){
  .app-shell{ transition:none !important; }
  .sidebar,
  .mboka-sidebar-natural-nav .sidebar,
  body.sidebar-hidden .sidebar{
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    will-change:auto !important;
    transition:none !important;
  }
  body.sidebar-hidden .app-shell{
    grid-template-columns:var(--sb-width) 1fr !important;
  }
}

.sidebar nav.nav,
.sidebar nav.nav.nav-motion-ready{
  position:relative;
  isolation:auto;
  contain:none !important;
  overflow-x:hidden;
}

.sidebar nav.nav .nav-item,
.sidebar nav.nav.nav-motion-ready .nav-item{
  position:relative;
  z-index:1;
  transform:none !important;
  will-change:auto !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease !important;
}

.sidebar nav.nav .nav-item:hover,
.sidebar nav.nav.nav-motion-ready .nav-item:hover{
  transform:none !important;
}

.sidebar nav.nav .nav-item.active,
.sidebar nav.nav .nav-item.is-selecting,
.sidebar nav.nav.nav-motion-ready .nav-item.active,
.sidebar nav.nav.nav-motion-ready .nav-item.is-selecting{
  background:linear-gradient(90deg, rgba(34,211,238,.16), rgba(59,130,246,.07)) !important;
  border-color:rgba(34,211,238,.24) !important;
  box-shadow:inset 4px 0 0 rgba(34,211,238,.88), 0 12px 30px rgba(0,0,0,.16) !important;
  color:var(--text) !important;
}

.sidebar nav.nav .nav-item.active .nav-ic,
.sidebar nav.nav .nav-item.is-selecting .nav-ic{
  color:var(--sb-accent, #22d3ee) !important;
  filter:none !important;
}

@media (prefers-reduced-motion: reduce){
  .sidebar nav.nav .nav-item,
  .sidebar nav.nav.nav-motion-ready .nav-item{
    transition:none !important;
  }
}


/* ==========================================================
   Sidebar rapid-click no-flicker guard — 2026-04-24
   Keeps the page visible and stable while the navigation guard
   collapses rapid clicks into one final sidebar destination.
   ========================================================== */
body.mboka-nav-committing,
body.mboka-nav-committing .main,
body.mboka-nav-committing .content,
body.mboka-nav-committing .header,
body.mboka-nav-committing .sidebar{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}
body.mboka-nav-committing::after{ display:none !important; }
.sidebar nav.nav .nav-item.is-selecting{
  background:linear-gradient(90deg, rgba(34,211,238,.18), rgba(59,130,246,.08)) !important;
  border-color:rgba(34,211,238,.28) !important;
  box-shadow:inset 4px 0 0 rgba(34,211,238,.92), 0 12px 30px rgba(0,0,0,.14) !important;
}
.sidebar nav.nav .nav-item:active{ transform:none !important; }

/* ==========================================================
   Sidebar full-screen flicker fix — 2026-04-24
   The sidebar must not be animated, hidden, auto-centered, or transformed
   during module changes. Only the active row has a small local color transition.
   ========================================================== */
html.page-loading,
html.page-ready,
html.mboka-motion-entering,
html.mboka-motion-ready,
body.mboka-nav-leaving,
body.mboka-nav-committing,
body.mboka-sidebar-stable{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}

body.mboka-sidebar-stable .app-shell,
body.mboka-sidebar-stable .main,
body.mboka-sidebar-stable .content,
body.mboka-sidebar-stable .header,
body.mboka-sidebar-stable .sidebar{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

@media (min-width: 901px){
  .app-shell,
  body.mboka-sidebar-stable .app-shell,
  body.sidebar-hidden .app-shell{
    grid-template-columns:var(--sb-width, 260px) 1fr !important;
    transition:none !important;
  }
  .sidebar,
  body.mboka-sidebar-stable .sidebar,
  body.sidebar-hidden .sidebar{
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    will-change:auto !important;
    transition:none !important;
    animation:none !important;
  }
}

.sidebar,
.sidebar *,
.sidebar *::before,
.sidebar *::after{
  animation:none !important;
}

.sidebar nav.nav .nav-item,
.sidebar nav.nav.nav-stable-ready .nav-item,
.sidebar nav.nav.nav-motion-ready .nav-item{
  transform:none !important;
  will-change:auto !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease !important;
}
.sidebar nav.nav .nav-item:active,
.sidebar nav.nav .nav-item:hover{
  transform:none !important;
}

.nav-motion-indicator{ display:none !important; }
body.mboka-nav-leaving::after,
body.mboka-nav-committing::after,
body.mboka-sidebar-stable::after{
  display:none !important;
}


/* ==========================================================
   Smooth refresh / prepainted sidebar stability — 2026-04-24
   Keeps the command rail visible in HTML before JS hydration and prevents
   the module refresh from looking like a sidebar rebuild.
   ========================================================== */
.sidebar[data-prepainted="true"]{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
.sidebar[data-prepainted="true"] nav.nav{
  scrollbar-gutter:stable;
}
html.mboka-soft-refresh-committing,
body.mboka-soft-refresh-committing,
html.mboka-soft-refresh-arrived,
body.mboka-soft-refresh-arrived{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}
body.mboka-soft-refresh-committing .app-shell,
body.mboka-soft-refresh-committing .sidebar,
body.mboka-soft-refresh-committing .main,
body.mboka-soft-refresh-arrived .app-shell,
body.mboka-soft-refresh-arrived .sidebar,
body.mboka-soft-refresh-arrived .main{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
}
body.mboka-soft-refresh-committing .sidebar nav.nav .nav-item{
  pointer-events:none;
}
body.mboka-soft-refresh-committing .sidebar nav.nav .nav-item.is-selecting{
  background:linear-gradient(90deg, rgba(34,211,238,.18), rgba(59,130,246,.08)) !important;
  border-color:rgba(34,211,238,.28) !important;
  box-shadow:inset 4px 0 0 rgba(34,211,238,.92), 0 12px 30px rgba(0,0,0,.14) !important;
}

/* Sidebar module icon upgrade */
.nav-item .nav-ic{padding:0; border-radius:0; background:transparent; box-shadow:none;}
.nav-item:hover .nav-ic,
.nav-item.active .nav-ic{ transform:none; }
.sb-ai-btn .nav-ic, .sb-logout-btn .nav-ic{ display:inline-flex; align-items:center; justify-content:center; }

/* ===============================================
   Sidebar elegant active icon glow upgrade
   2026-04-26
   Goal: give the active sidebar icon a premium glow
   without causing sidebar movement, zooming, or flicker.
   =============================================== */
.sidebar nav.nav .nav-item .nav-ic,
.sidebar nav.nav.nav-motion-ready .nav-item .nav-ic{
  position: relative;
  overflow: visible;
  z-index: 0;
}

.sidebar nav.nav .nav-item.active,
.sidebar nav.nav .nav-item.is-selecting,
.sidebar nav.nav.nav-motion-ready .nav-item.active,
.sidebar nav.nav.nav-motion-ready .nav-item.is-selecting{
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--sb-accent, #22d3ee) 14%, rgba(255,255,255,.025)),
    rgba(255,255,255,.035)
  ) !important;
  border-color: color-mix(in srgb, var(--sb-accent, #22d3ee) 26%, rgba(255,255,255,.08)) !important;
  box-shadow:
    inset 3px 0 0 var(--sb-accent, #22d3ee),
    0 12px 30px rgba(0,0,0,.16),
    0 0 0 1px color-mix(in srgb, var(--sb-accent, #22d3ee) 10%, transparent) !important;
  color: var(--text) !important;
}

.sidebar nav.nav .nav-item.active .nav-ic,
.sidebar nav.nav .nav-item.is-selecting .nav-ic,
.sidebar nav.nav.nav-motion-ready .nav-item.active .nav-ic,
.sidebar nav.nav.nav-motion-ready .nav-item.is-selecting .nav-ic{
  color: var(--sb-accent, #22d3ee) !important;
  filter: none !important;
}

.sidebar nav.nav .nav-item.active .nav-ic::before,
.sidebar nav.nav .nav-item.is-selecting .nav-ic::before,
.sidebar nav.nav.nav-motion-ready .nav-item.active .nav-ic::before,
.sidebar nav.nav.nav-motion-ready .nav-item.is-selecting .nav-ic::before{
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 12px;
  background:
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--sb-accent, #22d3ee) 20%, rgba(255,255,255,.02)) 0%,
      color-mix(in srgb, var(--sb-accent, #22d3ee) 12%, transparent) 48%,
      transparent 76%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sb-accent, #22d3ee) 16%, transparent),
    0 0 18px color-mix(in srgb, var(--sb-accent, #22d3ee) 18%, transparent),
    0 4px 14px rgba(0,0,0,.14);
  opacity: .98;
  pointer-events: none;
  z-index: -1;
}

.sidebar nav.nav .nav-item.active .nav-ic svg,
.sidebar nav.nav .nav-item.is-selecting .nav-ic svg,
.sidebar nav.nav.nav-motion-ready .nav-item.active .nav-ic svg,
.sidebar nav.nav.nav-motion-ready .nav-item.is-selecting .nav-ic svg{
  filter:
    drop-shadow(0 0 7px color-mix(in srgb, var(--sb-accent, #22d3ee) 32%, transparent))
    drop-shadow(0 0 2px color-mix(in srgb, var(--sb-accent, #22d3ee) 22%, transparent));
}

.sidebar nav.nav .nav-item:hover .nav-ic::before,
.sidebar nav.nav.nav-motion-ready .nav-item:hover .nav-ic::before{
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 10px;
  background: radial-gradient(circle at center, rgba(255,255,255,.05) 0%, transparent 75%);
  opacity: .45;
  pointer-events: none;
  z-index: -1;
}

/* ===============================================
   Sidebar hierarchy + spacing refinement
   2026-04-26
   Goal: make the sidebar feel more elite by improving
   group headers, spacing, breathing room, and section rhythm
   without changing the existing Mboka identity.
   =============================================== */

.sidebar nav.nav,
.sidebar nav.nav.nav-motion-ready{
  gap: 16px;
  padding-top: 2px;
}

.sidebar .sb-group{
  position: relative;
  padding: 0;
}

.sidebar .sb-group + .sb-group{
  margin-top: 1px;
}

.sidebar .sb-group-title{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 8px 10px 8px;
  padding: 0 2px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 78%, rgba(148,163,184,.72));
  opacity: .9;
}

.sidebar .sb-group-title::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 6px;
  background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(34,211,238,.88));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 12px rgba(34,211,238,.16);
}

.sidebar .sb-group-title::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.14),
    rgba(255,255,255,.04) 45%,
    transparent 100%
  );
  opacity: .9;
}

.sidebar .sb-group-items{
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.055);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.028),
    rgba(255,255,255,.014)
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 22px rgba(0,0,0,.08);
}

.sidebar .sb-group:hover .sb-group-items{
  border-color: rgba(255,255,255,.07);
}

.sidebar nav.nav .nav-item,
.sidebar nav.nav.nav-motion-ready .nav-item{
  min-height: 42px;
}

.sidebar .sidebar-top{
  padding-bottom: 2px;
}

.sidebar .sb-search{
  margin-top: 13px;
}

.sidebar .sb-search-input{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border-color: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.sidebar .sb-search-input:focus{
  border-color: rgba(59,130,246,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 0 0 1px rgba(59,130,246,.10),
    0 0 0 5px rgba(59,130,246,.06);
}

.sidebar .sb-ai{
  margin-top: 14px;
}

.sidebar .sb-footer{
  padding-top: 14px;
}

.sidebar .sb-footer-row{
  background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

@media (max-width: 900px){
  .sidebar nav.nav,
  .sidebar nav.nav.nav-motion-ready{
    gap: 14px;
  }
  .sidebar .sb-group-items{
    padding: 7px;
    border-radius: 16px;
  }
}

/* ===============================================
   Sidebar brand area premium refinement
   2026-04-26
   Goal: make the top brand area feel more world-class
   without changing the Mboka identity or layout stability.
   =============================================== */

.sidebar .brand{
  position: relative;
  isolation: isolate;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 20px;
  border-color: rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
    linear-gradient(135deg, rgba(59,130,246,.08), rgba(34,211,238,.04) 42%, transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 16px 34px rgba(0,0,0,.12),
    0 0 0 1px rgba(255,255,255,.015);
  overflow: hidden;
}

.sidebar .brand::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 44%),
    radial-gradient(circle at bottom right, rgba(34,211,238,.10), transparent 38%);
  opacity: .95;
  pointer-events: none;
  z-index: -1;
}

.sidebar .brand::after{
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity: .9;
  pointer-events: none;
}

.sidebar .brand-left{
  gap: 14px;
}

.sidebar .brand img{
  width: 42px;
  height: 42px;
  padding: 8px;
  border-radius: 14px;
  object-fit: contain;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.18),
    0 0 20px rgba(59,130,246,.08);
}

.sidebar .brand-text{
  gap: 4px;
}

.sidebar .brand-name{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.98);
  text-shadow: 0 1px 0 rgba(0,0,0,.14);
}

.sidebar .brand-sub{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  margin-top: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: rgba(226,232,240,.88);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.sidebar .brand-sub::before{
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34,197,94,.98), rgba(34,211,238,.88));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 12px rgba(34,197,94,.22);
}

.sidebar .sidebar-top{
  padding-bottom: 4px;
}

@media (max-width: 900px){
  .sidebar .brand{
    padding: 13px 13px;
    border-radius: 18px;
  }
  .sidebar .brand img{
    width: 40px;
    height: 40px;
  }
}

/* ===============================================
   Sidebar hover behavior + micro-interactions
   2026-04-26
   Goal: refine the command-rail feel with elegant,
   stable hover/focus feedback and no layout shift.
   =============================================== */

.sidebar nav.nav .nav-item,
.sidebar nav.nav.nav-motion-ready .nav-item{
  overflow: hidden;
  transform: none !important;
  transition:
    background-color 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease,
    color 170ms ease,
    opacity 170ms ease !important;
}

.sidebar nav.nav .nav-item::after,
.sidebar nav.nav.nav-motion-ready .nav-item::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 22%,
      rgba(255,255,255,.05) 38%,
      transparent 62%,
      transparent 100%
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.sidebar nav.nav .nav-item:hover,
.sidebar nav.nav.nav-motion-ready .nav-item:hover{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sb-accent, #22d3ee) 10%, rgba(255,255,255,.03)),
      rgba(255,255,255,.04)
    ) !important;
  border-color:
    color-mix(in srgb, var(--sb-accent, #22d3ee) 16%, rgba(255,255,255,.08)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.16),
    0 0 0 1px color-mix(in srgb, var(--sb-accent, #22d3ee) 7%, transparent) !important;
  color: var(--text) !important;
}

.sidebar nav.nav .nav-item:hover::after,
.sidebar nav.nav.nav-motion-ready .nav-item:hover::after{
  opacity: .9;
}

.sidebar nav.nav .nav-item:hover .nav-txt,
.sidebar nav.nav.nav-motion-ready .nav-item:hover .nav-txt{
  color: rgba(255,255,255,.98);
}

.sidebar nav.nav .nav-item:hover .nav-ic,
.sidebar nav.nav.nav-motion-ready .nav-item:hover .nav-ic{
  color: var(--sb-accent, #22d3ee) !important;
  filter: none !important;
}

.sidebar nav.nav .nav-item:hover .nav-ic svg,
.sidebar nav.nav.nav-motion-ready .nav-item:hover .nav-ic svg{
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sb-accent, #22d3ee) 18%, transparent));
}

.sidebar nav.nav .nav-item:focus-visible,
.sidebar nav.nav.nav-motion-ready .nav-item:focus-visible,
.sidebar .sb-ai-btn:focus-visible,
.sidebar .sb-logout-btn:focus-visible,
.sidebar .sb-search-input:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sb-accent, #3b82f6) 22%, transparent),
    0 0 0 5px rgba(59,130,246,.08),
    0 10px 24px rgba(0,0,0,.14) !important;
}

.sidebar nav.nav .nav-item:active,
.sidebar nav.nav.nav-motion-ready .nav-item:active,
.sidebar .sb-ai-btn:active,
.sidebar .sb-logout-btn:active{
  transform: none !important;
  filter: brightness(.985);
}

.sidebar .sb-search-input{
  transition:
    border-color 170ms ease,
    background-color 170ms ease,
    box-shadow 170ms ease,
    color 170ms ease;
}

.sidebar .sb-search-input:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.12);
}

.sidebar .sb-ai-btn,
.sidebar .sb-logout-btn,
.sidebar .brand{
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    filter 180ms ease;
}

.sidebar .brand:hover{
  border-color: rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 36px rgba(0,0,0,.14),
    0 0 0 1px rgba(59,130,246,.03);
}

.sidebar .sb-ai-btn:hover{
  border-color: rgba(59,130,246,.30);
  background:
    linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.11));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.14),
    0 0 0 1px rgba(59,130,246,.08);
}

.sidebar .sb-ai-btn:hover .nav-ic svg{
  filter: drop-shadow(0 0 8px rgba(59,130,246,.22));
}

.sidebar .sb-logout-btn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color: rgba(59,130,246,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.12),
    0 0 0 1px rgba(59,130,246,.07);
}

.sidebar .sb-logout-btn:hover .nav-ic svg{
  filter: drop-shadow(0 0 7px rgba(59,130,246,.18));
}

@media (prefers-reduced-motion: reduce){
  .sidebar nav.nav .nav-item,
  .sidebar nav.nav.nav-motion-ready .nav-item,
  .sidebar .sb-ai-btn,
  .sidebar .sb-logout-btn,
  .sidebar .sb-search-input,
  .sidebar .brand,
  .sidebar nav.nav .nav-item::after,
  .sidebar nav.nav.nav-motion-ready .nav-item::after{
    transition: none !important;
  }
}

/* ===============================================
   Sidebar responsive / mobile drawer refinement
   2026-04-26
   Goal: make the sidebar feel world-class on tablet/mobile
   while preserving the stable desktop command rail.
   =============================================== */

@media (max-width: 1240px){
  :root{ --sb-width: 272px; }
  .sidebar{ padding: 13px; }
}

@media (max-width: 1040px){
  :root{ --sb-width: 264px; }
  .sidebar{ padding: 12px; }
  .sidebar .sb-group-items{ padding: 7px; }
}

.sb-mobile-btn{
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.12);
  transition: border-color 170ms ease, background-color 170ms ease, box-shadow 170ms ease, color 170ms ease;
}
.sb-mobile-btn .sb-mobile-btn-ic{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.sb-mobile-btn .sb-mobile-btn-txt{ font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.sb-mobile-btn:hover{
  border-color: rgba(59,130,246,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.16), 0 0 0 1px rgba(59,130,246,.06);
}
.sb-mobile-btn.is-open{
  border-color: rgba(59,130,246,.26);
  background: linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.09));
}

.sb-overlay{
  display: block;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(3,8,18,.52);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  transition: opacity 190ms ease;
}

@media (max-width: 900px){
  html, body{ overflow-x: hidden; }
  body.sb-open{ overflow: hidden; }
  .header .left{ display:flex; align-items:center; gap:10px; min-width:0; }
  .header .right{ gap:8px; }
  .header .search{ min-width:0; }
  .app-shell{ min-height:100dvh; height:auto; }
  .sidebar{
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(320px, 88vw);
    max-width: 88vw;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-right: 1px solid rgba(255,255,255,.08);
    border-radius: 0 22px 22px 0;
    box-shadow: 18px 0 44px rgba(0,0,0,.34);
    background: linear-gradient(180deg, rgba(17,24,38,.98), rgba(12,18,30,.98));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(calc(-100% - 12px));
    opacity: 1;
    will-change: transform;
    z-index: 110;
  }
  .sidebar .sidebar-top{
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: 2px;
    background: linear-gradient(180deg, rgba(17,24,38,.98), rgba(17,24,38,.94) 78%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .sidebar nav.nav,
  .sidebar nav.nav.nav-motion-ready{
    padding-bottom: 10px;
  }
  body.sb-open .sidebar{ transform: translateX(0) !important; }
  body.sb-open .sb-overlay{
    opacity: 1;
    pointer-events: auto;
    z-index: 105;
  }
  body.sidebar-hidden .sidebar{ transform: translateX(calc(-100% - 12px)) !important; }
  .main{ min-width:0; }
}

@media (max-width: 640px){
  .sb-mobile-btn{ padding: 9px 11px; }
  .sb-mobile-btn .sb-mobile-btn-txt{ display:none; }
  .sidebar{
    width: min(308px, 90vw);
    max-width: 90vw;
    border-radius: 0 20px 20px 0;
  }
  .sidebar .brand{ border-radius: 18px; }
  .sidebar .sb-group-items{ border-radius: 16px; }
  .header{ gap:10px; }
  .header .right{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .sb-mobile-btn,
  .sb-overlay,
  .sidebar{
    transition: none !important;
  }
}


/* ===============================================
   Sidebar active label consistency fix
   2026-04-26
   Goal: make every active module label clearly change
   in the exact same way, including Dashboard.
   =============================================== */
.sidebar .nav-item .nav-txt{
  font-weight: 700;
  color: rgba(231,238,252,.92);
  transition: color 170ms ease, font-weight 170ms ease, letter-spacing 170ms ease, opacity 170ms ease;
}

.sidebar .nav-item.active .nav-txt,
.sidebar .nav-item.is-selecting .nav-txt,
.sidebar .nav-item[aria-current="page"] .nav-txt,
.sidebar nav.nav.nav-motion-ready .nav-item.active .nav-txt,
.sidebar nav.nav.nav-motion-ready .nav-item.is-selecting .nav-txt,
.sidebar nav.nav.nav-motion-ready .nav-item[aria-current="page"] .nav-txt{
  color: rgba(255,255,255,.995) !important;
  font-weight: 850 !important;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(0,0,0,.16);
}

.sidebar .nav-item:hover .nav-txt,
.sidebar nav.nav.nav-motion-ready .nav-item:hover .nav-txt{
  font-weight: 760;
}


/* ===============================================
   Sidebar shrink-screen disappearance fix
   2026-04-26
   Goal: when the viewport becomes mobile/tablet width,
   the sidebar must disappear off-canvas until Menu is used.
   This overrides older desktop stability rules only on small screens.
   =============================================== */
@media (max-width: 900px){
  body:not(.sb-open) .sidebar,
  body:not(.sb-open).mboka-sidebar-stable .sidebar,
  body:not(.sb-open).sidebar-hidden .sidebar,
  body:not(.sb-open).mboka-soft-refresh-arrived .sidebar,
  body:not(.sb-open).mboka-soft-refresh-committing .sidebar{
    transform: translateX(calc(-100% - 16px)) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  body.sb-open .sidebar,
  body.sb-open.mboka-sidebar-stable .sidebar,
  body.sb-open.sidebar-hidden .sidebar{
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body:not(.sb-open) .sb-overlay{
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.sb-open .sb-overlay{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ===============================================
   Responsive command trigger + section summary polish
   2026-04-29
   Goal: keep the mobile navigation trigger out of every
   page title/summary block so each section header stays
   professional, centered, and stable on smaller screens.
   =============================================== */
.sb-mobile-btn{
  flex:0 0 auto;
}

.header .left strong,
.header .ins-title,
.header .page-title{
  min-width:0;
}

.header .left .muted,
.header .page-subtitle,
.header .ins-sub{
  max-width:min(820px, 72vw);
  line-height:1.45;
}

@media (min-width: 901px){
  .sb-mobile-btn{
    display:none !important;
  }
}

@media (max-width: 900px){
  .sb-mobile-btn{
    position:fixed !important;
    top:calc(16px + env(safe-area-inset-top, 0px));
    left:calc(16px + env(safe-area-inset-left, 0px));
    z-index:124;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    min-height:46px;
    padding:0 !important;
    margin:0 !important;
    border-radius:18px;
  }

  .sb-mobile-btn .sb-mobile-btn-txt{
    display:none !important;
  }

  .sb-mobile-btn .sb-mobile-btn-ic svg{
    width:22px;
    height:22px;
  }

  .header .left > .sb-mobile-btn,
  .header > .sb-mobile-btn{
    position:fixed !important;
  }

  .header{
    min-height:112px;
    justify-content:center;
    gap:12px;
  }

  .header .left,
  .header .ins-head,
  body.ui-consistent .header .left,
  body.ui-consistent .header > div:first-child{
    width:100%;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:8px !important;
    padding-inline:54px;
  }

  .header .left strong,
  body.ui-consistent .header strong,
  .header .ins-title,
  .header .page-title{
    justify-content:center;
    text-align:center;
    font-size:clamp(22px, 5vw, 32px) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em;
  }

  .header .left .muted,
  body.ui-consistent .header .muted,
  .header .page-subtitle,
  .header .ins-sub{
    max-width:min(780px, 100%);
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    text-align:center !important;
    line-height:1.42 !important;
    font-size:clamp(13px, 2.7vw, 17px) !important;
  }

  .header .right,
  .header-actions{
    position:relative;
    z-index:1;
  }
}

@media (max-width: 520px){
  .sb-mobile-btn{
    top:calc(12px + env(safe-area-inset-top, 0px));
    left:calc(12px + env(safe-area-inset-left, 0px));
    width:42px;
    height:42px;
    min-height:42px;
    border-radius:16px;
  }

  .header .left,
  .header .ins-head,
  body.ui-consistent .header .left,
  body.ui-consistent .header > div:first-child{
    padding-inline:46px;
  }
}

/* Work Order send-update modal: force the communication panel to open above any native dialog. */
#dlg-update.mb-update-top-layer{
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%,-50%) !important;
  z-index: 2147483000 !important;
}
#dlg-update.mb-update-top-layer::backdrop{
  background: rgba(2,6,14,.56) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}


/* Sidebar session footer: keep the one-click Logout control visible below the Repair Assistant. */
.sidebar .sb-footer{
  display:block !important;
  flex:0 0 auto;
  margin-top:0;
  padding-top:10px;
}

/* Enterprise print color/watermark policy */
@import url("print-enterprise.css");


/* Pass 21 — Mboka Chat composer cleanup: compact actions, plus media menu, calm status, emoji tray */
body.page-messages #btn-refresh{display:none !important;}
body.page-messages .msg-compose-tools{
  display:grid;
  grid-template-columns:minmax(220px, 1.35fr) auto minmax(320px, 1fr) auto;
  align-items:center;
  gap:10px;
  margin:12px 0 8px;
}
body.page-messages .msg-template-select{max-width:none;width:100%;height:44px;}
body.page-messages .msg-quick-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;}
body.page-messages .msg-quick-chip{height:40px;white-space:nowrap;padding-inline:12px;}
body.page-messages .msg-emoji-wrap{position:relative;display:inline-flex;align-items:center;justify-content:flex-end;}
body.page-messages .msg-emoji-trigger{height:44px;min-width:94px;}
body.page-messages .msg-emoji-menu{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  display:none;
  grid-template-columns:repeat(6, 38px);
  gap:7px;
  width:max-content;
  max-width:min(310px, 78vw);
  padding:12px;
  border:1px solid rgba(96,165,250,.24);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(5,12,24,.98),rgba(3,8,18,.99));
  box-shadow:0 24px 70px rgba(2,6,23,.48), inset 0 1px 0 rgba(255,255,255,.05);
  z-index:50;
}
body.page-messages .msg-emoji-wrap.is-open .msg-emoji-menu{display:grid;}
body.page-messages .msg-emoji-option{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.04);color:#f8fafc;font-size:20px;cursor:pointer;
  display:grid;place-items:center;transition:transform .14s ease,background .14s ease,border-color .14s ease;
}
body.page-messages .msg-emoji-option:hover{transform:translateY(-1px);background:rgba(37,99,235,.16);border-color:rgba(96,165,250,.34);}
body.page-messages .msg-compose{margin-top:12px;padding:10px 12px;gap:12px;}
body.page-messages .msg-compose-actions{position:relative;display:flex;align-items:center;flex:0 0 auto;}
body.page-messages .msg-compose-plus{background:rgba(37,99,235,.16);border-color:rgba(96,165,250,.28);}
body.page-messages .msg-compose-media-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 12px);
  display:none;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid rgba(96,165,250,.24);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(5,12,24,.98),rgba(3,8,18,.99));
  box-shadow:0 20px 60px rgba(2,6,23,.46), inset 0 1px 0 rgba(255,255,255,.05);
  z-index:48;
}
body.page-messages .msg-compose-actions.is-open .msg-compose-media-menu{display:flex;}
body.page-messages .msg-compose-actions.is-open .msg-compose-plus svg{transform:rotate(45deg);}
body.page-messages .msg-compose-plus svg{transition:transform .16s ease;}
body.page-messages .msg-compose-input{font-size:15px;}
body.page-messages .msg-compose-input::placeholder{color:rgba(226,232,240,.6);}
body.page-messages .msg-compose-status{
  margin-top:10px;
  padding:9px 12px;
  border-color:rgba(34,197,94,.24);
  background:rgba(16,185,129,.10);
  color:#bbf7d0;
  border-radius:14px;
}
body.page-messages .msg-compose-status::before{
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.36);
  animation:msgSuccessPulse 1.4s infinite;
}
@keyframes msgSuccessPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.36)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (max-width: 1180px){
  body.page-messages .msg-compose-tools{grid-template-columns:1fr auto;}
  body.page-messages .msg-quick-actions{grid-column:1/-1;flex-wrap:wrap;}
  body.page-messages .msg-emoji-wrap{justify-content:flex-start;}
}
@media (max-width: 720px){
  body.page-messages .msg-compose-tools{display:flex;overflow:auto hidden;flex-wrap:nowrap;padding-bottom:6px;}
  body.page-messages .msg-template-select{min-width:220px;}
  body.page-messages .msg-quick-actions{flex:0 0 auto;flex-wrap:nowrap;}
  body.page-messages .msg-emoji-menu{right:auto;left:0;grid-template-columns:repeat(5, 38px);}
  body.page-messages .msg-compose-media-menu{left:0;border-radius:20px;}
}

/* Pass 22 — Mboka Chat header balance + reliable searchable emoji picker */
body.page-messages .messages-page-header{
  display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr) minmax(130px,auto);
  align-items:center;
  gap:18px;
  padding:18px 28px;
  min-height:132px;
}
body.page-messages .messages-page-header > .left{
  min-width:0;
  max-width:300px;
  padding:14px 16px;
  border:1px solid rgba(96,165,250,.18);
  background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(7,13,26,.92));
  border-radius:16px;
  box-shadow:0 16px 30px rgba(0,0,0,.14);
}
body.page-messages .messages-page-header > .left strong{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  line-height:1.2;
  letter-spacing:-.01em;
}
body.page-messages .messages-page-header .page-subtitle{
  max-width:100%;
  margin-top:4px;
  font-size:12px;
  line-height:1.32;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.page-messages .messages-page-header > .right{
  min-width:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
body.page-messages .msg-header-actions .user-slot{
  flex:0 0 auto;
}
body.page-messages .msg-header-tools{
  width:min(940px,100%);
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  justify-items:center;
  align-items:center;
}
body.page-messages .msg-header-search{
  width:min(760px,100%);
  height:54px;
  margin:0 auto;
}
body.page-messages .msg-header-filter-row{
  width:100%;
  display:flex;
  justify-content:center;
}
body.page-messages .msg-folder-switch{
  width:min(880px,100%);
  display:grid;
  grid-template-columns:repeat(4,minmax(132px,1fr));
  gap:14px;
  align-items:center;
  justify-content:center;
}
body.page-messages .msg-folder-switch .is-folder{
  width:100%;
  min-width:0;
  height:58px;
  justify-content:center;
  padding:0 16px;
  border-radius:18px;
  box-shadow:0 14px 28px rgba(0,0,0,.13);
}
body.page-messages .msg-folder-icon{
  width:34px;
  height:34px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
body.page-messages .msg-folder-icon svg{
  width:18px;
  height:18px;
}
body.page-messages .msg-folder-copy{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
body.page-messages .msg-folder-label{
  overflow:hidden;
  text-overflow:ellipsis;
}
body.page-messages .msg-folder-count{
  color:rgba(226,232,240,.76);
}
body.page-messages .msg-folder-switch .is-folder.primary .msg-folder-count,
body.page-messages .msg-folder-switch .is-folder:hover .msg-folder-count{
  color:inherit;
}
body.page-messages .msg-emoji-wrap{
  position:relative;
  z-index:8;
}
body.page-messages .msg-emoji-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  z-index:80;
  width:min(420px,calc(100vw - 32px));
  max-height:360px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(96,165,250,.22);
  background:linear-gradient(180deg,rgba(9,16,31,.98),rgba(4,9,19,.99));
  box-shadow:0 28px 70px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.03) inset;
  display:none;
  grid-template-rows:auto minmax(0,1fr);
  gap:10px;
  overflow:hidden;
}
body.page-messages .msg-emoji-wrap.is-open .msg-emoji-menu{
  display:grid;
}
body.page-messages .msg-emoji-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
body.page-messages .msg-emoji-search{
  min-width:0;
  height:40px;
  border-radius:14px;
  font-size:13px;
}
body.page-messages .msg-emoji-count{
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
  color:rgba(191,219,254,.78);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.16);
  background:rgba(37,99,235,.08);
}
body.page-messages .msg-emoji-grid{
  min-height:0;
  max-height:286px;
  overflow:auto;
  overscroll-behavior:contain;
  padding:2px 4px 4px 2px;
  display:grid;
  grid-template-columns:repeat(8,40px);
  gap:8px;
  justify-content:start;
  scrollbar-width:thin;
}
body.page-messages .msg-emoji-option{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.04);
  color:#f8fafc;
  font-size:20px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
body.page-messages .msg-emoji-option:hover,
body.page-messages .msg-emoji-option:focus-visible{
  transform:translateY(-1px);
  background:rgba(37,99,235,.18);
  border-color:rgba(96,165,250,.36);
  outline:none;
}
body.page-messages .msg-emoji-empty{
  grid-column:1/-1;
  padding:16px;
  border-radius:14px;
  border:1px dashed rgba(148,163,184,.2);
  color:rgba(226,232,240,.68);
  font-size:13px;
  text-align:center;
}
@media (max-width: 1180px){
  body.page-messages .messages-page-header{
    grid-template-columns:1fr;
    justify-items:center;
    min-height:auto;
  }
  body.page-messages .messages-page-header > .left{
    width:min(760px,100%);
    max-width:760px;
    text-align:left;
  }
  body.page-messages .messages-page-header > .right{
    width:100%;
  }
  body.page-messages .msg-folder-switch{
    grid-template-columns:repeat(2,minmax(160px,1fr));
  }
}
@media (max-width: 700px){
  body.page-messages .messages-page-header{
    padding:16px 12px;
  }
  body.page-messages .msg-folder-switch{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  body.page-messages .msg-folder-switch .is-folder{
    height:52px;
    padding:0 10px;
  }
  body.page-messages .msg-folder-icon{
    width:30px;
    height:30px;
    border-radius:12px;
  }
  body.page-messages .msg-emoji-menu{
    right:auto;
    left:0;
    width:min(360px,calc(100vw - 24px));
  }
  body.page-messages .msg-emoji-grid{
    grid-template-columns:repeat(6,40px);
  }
}

/* Pass 23 — Mboka Chat final header row + emoji in composer line */
body.page-messages .msg-compose-tools{
  grid-template-columns:minmax(240px,1.1fr) auto minmax(420px,1fr) !important;
  align-items:center !important;
  gap:10px !important;
  margin:12px 0 8px !important;
}
body.page-messages .msg-compose-tools .msg-emoji-wrap{display:none !important;}
body.page-messages .msg-compose{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto auto !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  overflow:visible !important;
}
body.page-messages .msg-compose .msg-emoji-wrap,
body.page-messages .msg-compose-emoji{
  display:inline-flex !important;
  position:relative !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:30 !important;
}
body.page-messages .msg-compose .msg-emoji-trigger{
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  padding:0 !important;
  font-size:20px !important;
  border:1px solid rgba(96,165,250,.22) !important;
  background:rgba(15,23,42,.92) !important;
}
body.page-messages .msg-compose .msg-emoji-trigger:hover,
body.page-messages .msg-compose .msg-emoji-wrap.is-open .msg-emoji-trigger{
  background:rgba(37,99,235,.18) !important;
  border-color:rgba(96,165,250,.48) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10) !important;
}
body.page-messages .msg-compose .msg-emoji-menu{
  top:auto !important;
  bottom:calc(100% + 12px) !important;
  right:0 !important;
  left:auto !important;
  width:min(430px,calc(100vw - 36px)) !important;
  max-height:380px !important;
  z-index:120 !important;
}
body.page-messages .msg-compose .msg-emoji-grid{
  max-height:300px !important;
}
body.page-messages .msg-compose-input{
  min-width:0 !important;
  width:100% !important;
}
body.page-messages .msg-compose-send{
  flex:0 0 auto !important;
}
@media (max-width: 1180px){
  body.page-messages .msg-compose-tools{grid-template-columns:1fr auto !important;}
  body.page-messages .msg-quick-actions{grid-column:1/-1 !important;flex-wrap:wrap !important;}
}
@media (max-width: 720px){
  body.page-messages .msg-compose-tools{display:flex !important;overflow:auto hidden !important;flex-wrap:nowrap !important;padding-bottom:6px !important;}
  body.page-messages .msg-compose{grid-template-columns:auto minmax(0,1fr) auto auto !important;gap:8px !important;padding:9px !important;}
  body.page-messages .msg-compose .msg-emoji-trigger{width:44px !important;min-width:44px !important;height:44px !important;border-radius:14px !important;}
  body.page-messages .msg-compose .msg-emoji-menu{right:-58px !important;width:min(360px,calc(100vw - 24px)) !important;}
  body.page-messages .msg-compose .msg-emoji-grid{grid-template-columns:repeat(6,40px) !important;}
}

/* Pass 24 — Mboka Chat header horizontal + composer emoji placement fix */
body.page-messages .header.messages-page-header{
  display:grid !important;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr) !important;
  align-items:center !important;
  gap:18px !important;
  padding:18px 28px !important;
  min-height:126px !important;
}
body.page-messages .header.messages-page-header > .left{
  width:100% !important;
  max-width:280px !important;
  min-width:0 !important;
  align-self:center !important;
}
body.page-messages .header.messages-page-header > .right.msg-header-actions{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
}
body.page-messages .msg-header-tools{
  width:100% !important;
  max-width:1040px !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-areas:"search" "folders" !important;
  align-items:center !important;
  justify-items:center !important;
  gap:12px !important;
  margin:0 auto !important;
}
body.page-messages .msg-header-search{
  grid-area:search !important;
  width:min(640px,100%) !important;
  height:52px !important;
  min-height:52px !important;
  margin:0 auto !important;
}
body.page-messages .msg-header-filter-row{
  grid-area:folders !important;
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
body.page-messages .msg-folder-switch{
  width:100% !important;
  max-width:960px !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  flex-wrap:nowrap !important;
}
body.page-messages .msg-folder-switch .is-folder{
  flex:1 1 0 !important;
  min-width:132px !important;
  max-width:230px !important;
  height:56px !important;
  min-height:56px !important;
  padding:0 14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
body.page-messages .msg-header-filter-row > #userSlot,
body.page-messages .msg-header-extras,
body.page-messages .msg-header-filter-row .auth-user-group{
  flex:0 0 auto !important;
}
body.page-messages .msg-compose{
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) 48px 58px !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  overflow:visible !important;
  border-radius:999px !important;
}
body.page-messages .msg-compose-actions{grid-column:1 !important;position:relative !important;z-index:38 !important;}
body.page-messages .msg-compose-input{
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
  min-height:46px !important;
  height:46px !important;
  padding:12px 14px !important;
  border-radius:18px !important;
  background:rgba(15,23,42,.72) !important;
}
body.page-messages .msg-compose .msg-emoji-wrap,
body.page-messages .msg-compose-emoji{
  grid-column:3 !important;
  display:inline-flex !important;
  position:relative !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  min-width:48px !important;
  z-index:42 !important;
}
body.page-messages .msg-compose .msg-emoji-trigger{
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  padding:0 !important;
  font-size:21px !important;
  line-height:1 !important;
  border:1px solid rgba(96,165,250,.24) !important;
  background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(8,15,29,.98)) !important;
}
body.page-messages .msg-compose .msg-emoji-trigger:hover,
body.page-messages .msg-compose .msg-emoji-wrap.is-open .msg-emoji-trigger{
  background:rgba(37,99,235,.20) !important;
  border-color:rgba(96,165,250,.52) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12) !important;
}
body.page-messages .msg-compose-send{grid-column:4 !important;width:58px !important;height:48px !important;border-radius:18px !important;}
body.page-messages .msg-compose .msg-emoji-menu{
  position:absolute !important;
  top:auto !important;
  bottom:calc(100% + 14px) !important;
  right:0 !important;
  left:auto !important;
  width:min(440px,calc(100vw - 40px)) !important;
  max-height:388px !important;
  min-height:0 !important;
  padding:12px !important;
  border-radius:22px !important;
  border:1px solid rgba(96,165,250,.24) !important;
  background:linear-gradient(180deg,rgba(8,15,30,.98),rgba(3,8,18,.99)) !important;
  box-shadow:0 28px 75px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.04) inset !important;
  z-index:999 !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:10px !important;
  overflow:hidden !important;
}
body.page-messages .msg-compose .msg-emoji-wrap.is-open .msg-emoji-menu{display:grid !important;}
body.page-messages .msg-compose .msg-emoji-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
}
body.page-messages .msg-compose .msg-emoji-search{
  width:100% !important;
  min-width:0 !important;
  height:40px !important;
  border-radius:14px !important;
  padding:0 12px !important;
}
body.page-messages .msg-compose .msg-emoji-grid{
  min-height:0 !important;
  max-height:300px !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  padding:2px 4px 4px 2px !important;
  display:grid !important;
  grid-template-columns:repeat(8,40px) !important;
  gap:8px !important;
  justify-content:start !important;
  scrollbar-width:thin !important;
}
body.page-messages .msg-compose-tools{
  display:grid !important;
  grid-template-columns:minmax(220px,1.15fr) auto minmax(0,1.35fr) !important;
  align-items:center !important;
  gap:10px !important;
}
body.page-messages .msg-compose-tools .msg-emoji-wrap{display:none !important;}
body.page-messages .msg-quick-actions{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:nowrap !important;min-width:0 !important;overflow:auto hidden !important;scrollbar-width:thin !important;padding-bottom:2px !important;}
body.page-messages .msg-quick-chip{flex:0 0 auto !important;}
@media (max-width: 1180px){
  body.page-messages .header.messages-page-header{grid-template-columns:1fr !important;justify-items:center !important;min-height:auto !important;}
  body.page-messages .header.messages-page-header > .left{max-width:760px !important;width:min(760px,100%) !important;}
  body.page-messages .header.messages-page-header > .right.msg-header-actions{width:100% !important;}
  body.page-messages .msg-folder-switch{flex-wrap:wrap !important;max-width:760px !important;}
  body.page-messages .msg-folder-switch .is-folder{flex:1 1 calc(50% - 10px) !important;max-width:none !important;}
  body.page-messages .msg-compose-tools{grid-template-columns:1fr auto !important;}
  body.page-messages .msg-quick-actions{grid-column:1/-1 !important;}
}
@media (max-width: 720px){
  body.page-messages .header.messages-page-header{padding:16px 12px !important;}
  body.page-messages .msg-folder-switch{gap:10px !important;}
  body.page-messages .msg-folder-switch .is-folder{flex-basis:calc(50% - 8px) !important;min-width:0 !important;height:52px !important;}
  body.page-messages .msg-compose{grid-template-columns:44px minmax(0,1fr) 44px 52px !important;gap:8px !important;padding:9px !important;}
  body.page-messages .msg-compose .msg-emoji-wrap{width:44px !important;min-width:44px !important;}
  body.page-messages .msg-compose .msg-emoji-trigger{width:44px !important;min-width:44px !important;height:44px !important;border-radius:14px !important;}
  body.page-messages .msg-compose-send{width:52px !important;height:44px !important;border-radius:16px !important;}
  body.page-messages .msg-compose-input{height:44px !important;min-height:44px !important;padding:10px 12px !important;}
  body.page-messages .msg-compose .msg-emoji-menu{right:-60px !important;width:min(360px,calc(100vw - 24px)) !important;max-height:360px !important;}
  body.page-messages .msg-compose .msg-emoji-grid{grid-template-columns:repeat(6,40px) !important;max-height:272px !important;}
  body.page-messages .msg-compose-tools{display:flex !important;overflow:auto hidden !important;flex-wrap:nowrap !important;padding-bottom:6px !important;}
  body.page-messages .msg-template-select{min-width:220px !important;}
}


/* Pass 25 — Mboka Chat pristine compact header + clean emoji popover */
body.page-messages .header.messages-page-header{
  height:auto !important;
  min-height:148px !important;
  max-height:none !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr) !important;
  align-items:center !important;
  gap:22px !important;
  padding:16px 30px 18px !important;
  overflow:visible !important;
}
body.page-messages .header.messages-page-header > .left{
  max-width:280px !important;
  align-self:center !important;
}
body.page-messages .header.messages-page-header > .right.msg-header-actions{
  align-self:center !important;
  justify-self:stretch !important;
  min-width:0 !important;
  overflow:visible !important;
}
body.page-messages .msg-header-tools{
  width:100% !important;
  max-width:980px !important;
  min-width:0 !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-areas:"search" "folders" !important;
  align-items:center !important;
  justify-items:center !important;
  gap:10px !important;
  overflow:visible !important;
}
body.page-messages .msg-header-search{
  grid-area:search !important;
  width:min(560px,100%) !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  margin:0 auto !important;
  border-radius:18px !important;
}
body.page-messages .msg-header-filter-row{
  grid-area:folders !important;
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  overflow:visible !important;
}
body.page-messages .msg-folder-switch{
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;
  margin:0 auto !important;
}
body.page-messages .msg-folder-switch .is-folder{
  flex:0 0 168px !important;
  width:168px !important;
  min-width:168px !important;
  max-width:168px !important;
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  padding:0 14px !important;
  border-radius:18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  transform:none !important;
}
body.page-messages .msg-folder-switch .is-folder .msg-folder-icon{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:12px !important;
  overflow:hidden !important;
}
body.page-messages .msg-folder-switch .is-folder .msg-folder-icon svg{
  width:16px !important;
  height:16px !important;
  display:block !important;
}
body.page-messages .msg-folder-switch .is-folder .msg-folder-copy{
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  font-size:14px !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.page-messages .msg-folder-switch .is-folder .msg-folder-label,
body.page-messages .msg-folder-switch .is-folder .msg-folder-count{
  line-height:1 !important;
}
body.page-messages .msg-folder-switch .is-folder.primary{
  box-shadow:0 0 0 1px rgba(59,130,246,.34), 0 14px 34px rgba(37,99,235,.18) !important;
}
body.page-messages .content{
  clear:both !important;
  margin-top:0 !important;
}
body.page-messages .msghub-split{
  margin-top:0 !important;
}

/* Composer status: calm toast above the composer, never across the typing box */
body.page-messages #staff-compose-status.msg-compose-status{
  position:static !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:0 !important;
  margin:8px 0 10px auto !important;
  padding:7px 11px !important;
  border-radius:999px !important;
  border:1px solid rgba(34,197,94,.22) !important;
  background:rgba(16,185,129,.10) !important;
  color:#bbf7d0 !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:800 !important;
}
body.page-messages #staff-compose-status.msg-compose-status:not(.show){
  display:none !important;
}
body.page-messages #staff-compose-status.msg-compose-status.show{
  display:inline-flex !important;
}
body.page-messages #staff-compose-status.msg-compose-status::before{
  width:8px !important;
  height:8px !important;
  background:#22c55e !important;
  box-shadow:none !important;
  animation:none !important;
}

/* Emoji picker: slim, floating, searchable, independently scrollable */
body.page-messages .msg-compose .msg-emoji-wrap,
body.page-messages .msg-compose-emoji{
  position:relative !important;
  overflow:visible !important;
  z-index:80 !important;
}
body.page-messages .msg-compose .msg-emoji-trigger{
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  display:inline-grid !important;
  place-items:center !important;
}
body.page-messages .msg-compose .msg-emoji-menu{
  position:absolute !important;
  top:auto !important;
  bottom:calc(100% + 12px) !important;
  right:-64px !important;
  left:auto !important;
  width:min(390px,calc(100vw - 32px)) !important;
  max-height:330px !important;
  min-height:0 !important;
  padding:10px !important;
  border-radius:20px !important;
  display:none !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:8px !important;
  border:1px solid rgba(96,165,250,.22) !important;
  background:rgba(7,13,27,.98) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.045) !important;
  overflow:hidden !important;
  z-index:9999 !important;
}
body.page-messages .msg-compose .msg-emoji-wrap.is-open .msg-emoji-menu{
  display:grid !important;
}
body.page-messages .msg-compose .msg-emoji-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:8px !important;
  align-items:center !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.page-messages .msg-compose .msg-emoji-search{
  height:38px !important;
  min-height:38px !important;
  border-radius:14px !important;
  padding:0 12px !important;
  background:rgba(15,23,42,.72) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:none !important;
  font-size:13px !important;
}
body.page-messages .msg-compose .msg-emoji-count{
  font-size:11px !important;
  font-weight:800 !important;
  color:rgba(203,213,225,.58) !important;
  white-space:nowrap !important;
  padding-right:2px !important;
}
body.page-messages .msg-compose .msg-emoji-grid{
  min-height:0 !important;
  max-height:258px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  display:grid !important;
  grid-template-columns:repeat(8,38px) !important;
  grid-auto-rows:38px !important;
  gap:6px !important;
  justify-content:start !important;
  align-content:start !important;
  padding:1px 2px 1px 0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(96,165,250,.22) transparent !important;
}
body.page-messages .msg-compose .msg-emoji-grid::-webkit-scrollbar{
  width:6px !important;
}
body.page-messages .msg-compose .msg-emoji-grid::-webkit-scrollbar-track{
  background:transparent !important;
}
body.page-messages .msg-compose .msg-emoji-grid::-webkit-scrollbar-thumb{
  background:rgba(96,165,250,.24) !important;
  border-radius:999px !important;
}
body.page-messages .msg-compose .msg-emoji-option{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  border-radius:12px !important;
  display:inline-grid !important;
  place-items:center !important;
  font-size:21px !important;
  line-height:1 !important;
  background:rgba(15,23,42,.54) !important;
  border:1px solid rgba(148,163,184,.12) !important;
  box-shadow:none !important;
}
body.page-messages .msg-compose .msg-emoji-option:hover,
body.page-messages .msg-compose .msg-emoji-option:focus-visible{
  transform:translateY(-1px) !important;
  background:rgba(37,99,235,.18) !important;
  border-color:rgba(96,165,250,.40) !important;
}

@media (max-width: 1280px){
  body.page-messages .header.messages-page-header{
    grid-template-columns:1fr !important;
    justify-items:center !important;
    min-height:auto !important;
    padding:16px 18px 18px !important;
  }
  body.page-messages .header.messages-page-header > .left{
    width:min(620px,100%) !important;
    max-width:620px !important;
  }
  body.page-messages .msg-folder-switch{
    flex-wrap:wrap !important;
    max-width:750px !important;
  }
  body.page-messages .msg-folder-switch .is-folder{
    flex:0 1 168px !important;
    width:168px !important;
    min-width:150px !important;
  }
}
@media (max-width: 760px){
  body.page-messages .msg-header-search{width:100% !important;}
  body.page-messages .msg-folder-switch{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  body.page-messages .msg-folder-switch .is-folder{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:none !important;
    height:44px !important;
    min-height:44px !important;
  }
  body.page-messages .msg-compose .msg-emoji-menu{
    right:-56px !important;
    width:min(340px,calc(100vw - 22px)) !important;
    max-height:320px !important;
  }
  body.page-messages .msg-compose .msg-emoji-grid{
    grid-template-columns:repeat(6,38px) !important;
    max-height:246px !important;
  }
}

/* Pass 26 — Mboka Chat emoji popover containment only. Header intentionally untouched. */
body.page-messages #msg-reply-shell,
body.page-messages .msghub-reply,
body.page-messages .msg-compose{
  overflow:visible !important;
}
body.page-messages .msg-compose{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) 48px auto !important;
  align-items:center !important;
  gap:10px !important;
}
body.page-messages .msg-compose .msg-compose-input{
  min-width:0 !important;
  width:100% !important;
}
body.page-messages #staff-emoji-wrap.msg-compose-emoji,
body.page-messages .msg-compose .msg-emoji-wrap{
  position:relative !important;
  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;
  height:48px !important;
  overflow:visible !important;
  z-index:120 !important;
}
body.page-messages #staff-emoji.msg-emoji-trigger,
body.page-messages .msg-compose .msg-emoji-trigger{
  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
  font-size:0 !important;
  line-height:1 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
body.page-messages #staff-emoji .icon-inline,
body.page-messages #staff-emoji .mb-inline-icon,
body.page-messages #staff-emoji svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
  margin:0 !important;
}
body.page-messages #staff-emoji .icon-inline{
  display:grid !important;
  place-items:center !important;
}
body.page-messages #staff-emoji .icon-inline span,
body.page-messages #staff-emoji > span:not(.icon-inline){
  display:none !important;
}
body.page-messages .msg-compose .msg-emoji-menu,
body.page-messages #staff-emoji-menu.msg-emoji-menu{
  position:absolute !important;
  top:auto !important;
  bottom:calc(100% + 10px) !important;
  right:0 !important;
  left:auto !important;
  width:320px !important;
  max-width:min(320px, calc(100vw - 28px)) !important;
  height:306px !important;
  max-height:min(306px, calc(100vh - 128px)) !important;
  min-height:0 !important;
  padding:10px !important;
  box-sizing:border-box !important;
  border-radius:18px !important;
  border:1px solid rgba(96,165,250,.24) !important;
  background:rgba(8,14,28,.98) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045) !important;
  display:none !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:8px !important;
  overflow:hidden !important;
  z-index:10000 !important;
  transform:none !important;
}
body.page-messages .msg-compose .msg-emoji-wrap.is-open .msg-emoji-menu,
body.page-messages #staff-emoji-wrap.is-open #staff-emoji-menu{
  display:grid !important;
}
body.page-messages .msg-compose .msg-emoji-head,
body.page-messages #staff-emoji-menu .msg-emoji-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important;
  align-items:center !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-search,
body.page-messages .msg-compose .msg-emoji-search{
  width:100% !important;
  height:36px !important;
  min-height:36px !important;
  border-radius:13px !important;
  padding:0 11px !important;
  font-size:12px !important;
  font-weight:700 !important;
  background:rgba(15,23,42,.62) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:none !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-count,
body.page-messages .msg-compose .msg-emoji-count{
  display:none !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-grid,
body.page-messages .msg-compose .msg-emoji-grid{
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:none !important;
  height:100% !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:repeat(7, minmax(32px, 1fr)) !important;
  grid-auto-rows:34px !important;
  gap:6px !important;
  justify-content:stretch !important;
  align-content:start !important;
  padding:2px 4px 2px 1px !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(96,165,250,.20) transparent !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-grid::-webkit-scrollbar,
body.page-messages .msg-compose .msg-emoji-grid::-webkit-scrollbar{
  width:4px !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-grid::-webkit-scrollbar-track,
body.page-messages .msg-compose .msg-emoji-grid::-webkit-scrollbar-track{
  background:transparent !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-grid::-webkit-scrollbar-thumb,
body.page-messages .msg-compose .msg-emoji-grid::-webkit-scrollbar-thumb{
  background:rgba(96,165,250,.22) !important;
  border-radius:999px !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-option,
body.page-messages .msg-compose .msg-emoji-option{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  justify-self:center !important;
  align-self:center !important;
  border-radius:11px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
  font-size:19px !important;
  line-height:1 !important;
  background:rgba(15,23,42,.50) !important;
  border:1px solid rgba(148,163,184,.12) !important;
  box-shadow:none !important;
  transform:none !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-option:hover,
body.page-messages #staff-emoji-menu .msg-emoji-option:focus-visible,
body.page-messages .msg-compose .msg-emoji-option:hover,
body.page-messages .msg-compose .msg-emoji-option:focus-visible{
  background:rgba(37,99,235,.20) !important;
  border-color:rgba(96,165,250,.42) !important;
  transform:translateY(-1px) !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-empty,
body.page-messages .msg-compose .msg-emoji-empty{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:110px !important;
  color:rgba(226,232,240,.72) !important;
  font-size:13px !important;
}
@media (max-width: 900px){
  body.page-messages .msg-compose{
    grid-template-columns:46px minmax(0,1fr) 46px 56px !important;
    gap:8px !important;
  }
  body.page-messages #staff-emoji-wrap.msg-compose-emoji,
  body.page-messages #staff-emoji.msg-emoji-trigger{
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
  }
  body.page-messages #staff-emoji-menu.msg-emoji-menu{
    right:-56px !important;
    width:min(300px, calc(100vw - 20px)) !important;
    grid-template-columns:none !important;
  }
  body.page-messages #staff-emoji-menu .msg-emoji-grid{
    grid-template-columns:repeat(6, minmax(32px, 1fr)) !important;
  }
}

/* Pass 27 — Mboka Chat emoji picker horizontal search + row grid only. Header intentionally untouched. */
body.page-messages #staff-emoji-wrap.msg-compose-emoji{
  position:relative !important;
  isolation:isolate !important;
}
body.page-messages #staff-emoji-menu.msg-emoji-menu{
  position:absolute !important;
  top:auto !important;
  bottom:calc(100% + 12px) !important;
  right:0 !important;
  left:auto !important;
  width:420px !important;
  max-width:min(420px, calc(100vw - 32px)) !important;
  height:330px !important;
  max-height:min(330px, calc(100vh - 140px)) !important;
  min-width:280px !important;
  min-height:0 !important;
  padding:12px !important;
  box-sizing:border-box !important;
  border-radius:20px !important;
  border:1px solid rgba(96,165,250,.26) !important;
  background:rgba(8,13,27,.98) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05) !important;
  display:none !important;
  grid-template-columns:1fr !important;
  grid-template-rows:42px minmax(0,1fr) !important;
  gap:10px !important;
  overflow:hidden !important;
  z-index:12000 !important;
  transform:none !important;
  opacity:1 !important;
}
body.page-messages #staff-emoji-wrap.is-open #staff-emoji-menu.msg-emoji-menu{
  display:grid !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-head{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-search{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:42px !important;
  min-height:42px !important;
  line-height:42px !important;
  box-sizing:border-box !important;
  padding:0 14px !important;
  margin:0 !important;
  border-radius:15px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  background:rgba(15,23,42,.74) !important;
  color:rgba(226,232,240,.96) !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-align:left !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  transform:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-search::placeholder{
  color:rgba(148,163,184,.72) !important;
  opacity:1 !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-count{
  display:none !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-grid{
  width:100% !important;
  min-width:0 !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
  grid-auto-rows:40px !important;
  gap:8px !important;
  justify-items:center !important;
  align-items:center !important;
  justify-content:stretch !important;
  align-content:start !important;
  padding:2px 6px 2px 2px !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(96,165,250,.22) transparent !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-grid::-webkit-scrollbar{width:5px !important;}
body.page-messages #staff-emoji-menu .msg-emoji-grid::-webkit-scrollbar-track{background:transparent !important;}
body.page-messages #staff-emoji-menu .msg-emoji-grid::-webkit-scrollbar-thumb{background:rgba(96,165,250,.24) !important;border-radius:999px !important;}
body.page-messages #staff-emoji-menu .msg-emoji-option{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:13px !important;
  border:1px solid rgba(148,163,184,.13) !important;
  background:rgba(15,23,42,.54) !important;
  color:inherit !important;
  font-size:22px !important;
  line-height:1 !important;
  text-align:center !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:pointer !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-option:hover,
body.page-messages #staff-emoji-menu .msg-emoji-option:focus-visible{
  background:rgba(37,99,235,.22) !important;
  border-color:rgba(96,165,250,.46) !important;
  transform:translateY(-1px) !important;
  outline:none !important;
}
body.page-messages #staff-emoji-menu .msg-emoji-empty{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:120px !important;
  color:rgba(226,232,240,.74) !important;
  font-size:13px !important;
}
@media (max-width: 900px){
  body.page-messages #staff-emoji-menu.msg-emoji-menu{
    right:-58px !important;
    width:min(340px, calc(100vw - 20px)) !important;
    grid-template-columns:1fr !important;
  }
  body.page-messages #staff-emoji-menu .msg-emoji-grid{
    grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
  }
  body.page-messages #staff-emoji-menu .msg-emoji-option{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    font-size:21px !important;
  }
}
@media (max-width: 520px){
  body.page-messages #staff-emoji-menu.msg-emoji-menu{
    right:-70px !important;
    width:min(310px, calc(100vw - 16px)) !important;
    height:310px !important;
  }
  body.page-messages #staff-emoji-menu .msg-emoji-grid{
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  }
}

/* Pass 29 — Sidebar live notification badges for Mboka Chat + Applicants */
.nav-pill.notify{
  gap:4px;
  min-width:auto;
  padding:2px 8px;
  border-color:rgba(34,197,94,.34);
  background:rgba(34,197,94,.14);
  color:#bbf7d0;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.01em;
  box-shadow:0 0 0 1px rgba(34,197,94,.10), 0 0 16px rgba(34,197,94,.10);
}
.nav-pill.notify.is-live{
  animation:mbokaNavNoticePulse 1.9s ease-in-out infinite;
}
@keyframes mbokaNavNoticePulse{
  0%,100%{transform:translateY(0); box-shadow:0 0 0 1px rgba(34,197,94,.10),0 0 12px rgba(34,197,94,.08)}
  50%{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(34,197,94,.20),0 0 22px rgba(34,197,94,.18)}
}

/* Pass 29 — Mboka Chat reliable quick action click feedback */
.msg-quick-chip.is-confirming{
  border-color:rgba(34,197,94,.55)!important;
  box-shadow:0 0 0 2px rgba(34,197,94,.12), 0 12px 26px rgba(34,197,94,.12)!important;
  transform:translateY(-1px);
}

/* ---- source: assets/css/sidebar-footer-compact-v235.css ---- */
/*
  Mboka sidebar footer compact controls — v235
  Keeps Repair Assistant and Logout easy to reach without consuming
  unnecessary vertical space at the bottom of the navigation rail.
*/

.sidebar .sb-ai{
  margin-top: 6px !important;
}

.sidebar .sb-ai-btn{
  min-height: 38px !important;
  height: 38px;
  padding: 6px 9px !important;
  gap: 8px !important;
  border-radius: 12px !important;
  line-height: 1;
}

.sidebar .sb-ai-btn .nav-ic{
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.sidebar .sb-ai-btn .nav-ic svg{
  width: 16px;
  height: 16px;
}

.sidebar .sb-ai-txt{
  font-size: 13px;
  line-height: 1;
}

.sidebar .sb-ai-pill{
  padding: 2px 6px !important;
  font-size: 9px !important;
  line-height: 1.2;
  letter-spacing: .06em;
}

.sidebar .sb-footer{
  display: block !important;
  flex: 0 0 auto;
  margin-top: 0 !important;
  padding-top: 5px !important;
}

.sidebar .sb-footer-row--logout-only{
  padding: 0 !important;
  border-radius: 11px !important;
  border-color: rgba(248,113,113,.14) !important;
  background: rgba(127,29,29,.045) !important;
  box-shadow: none !important;
}

.sidebar .sb-logout-btn{
  min-height: 36px !important;
  height: 36px;
  padding: 6px 9px !important;
  gap: 8px !important;
  border-radius: 10px !important;
  font-size: 13px;
  line-height: 1;
}

.sidebar .sb-logout-icon{
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.sidebar .sb-logout-icon svg{
  width: 16px;
  height: 16px;
}

.sidebar .sb-logout-btn:hover{
  color: #fff !important;
  border-color: transparent !important;
  background: rgba(127,29,29,.24) !important;
  box-shadow: inset 3px 0 0 rgba(248,113,113,.90) !important;
}

.sidebar .sb-logout-btn:focus-visible{
  background: rgba(127,29,29,.22) !important;
  box-shadow:
    0 0 0 1px rgba(248,113,113,.38),
    0 0 0 4px rgba(248,113,113,.08) !important;
}

@media (max-width: 900px){
  .sidebar .sb-ai{ margin-top: 5px !important; }
  .sidebar .sb-footer{ padding-top: 4px !important; }
  .sidebar .sb-ai-btn{ min-height: 38px !important; height: 38px; }
  .sidebar .sb-logout-btn{ min-height: 38px !important; height: 38px; }
}

/* ---- source: assets/css/ui-consistency.css ---- */
:root{
  --ui-page-pad:24px;
  --ui-gap:16px;
  --ui-gap-lg:20px;
  --ui-card-radius:18px;
  --ui-card-pad:18px;
  --ui-soft-bg:linear-gradient(180deg, rgba(13,20,35,.96), rgba(9,14,26,.96));
  --ui-soft-border:rgba(255,255,255,.08);
  --ui-soft-shadow:0 18px 42px rgba(0,0,0,.32);
  --ui-title:20px;
  --ui-subtitle:13px;
  --ui-control-h:44px;
}

body.ui-consistent .header,
body.customers-monster .header,
body.invoices-monster .header,
body.estimates-monster .header,
body.receivables-monster .header,
body.page-users .header,
body.page-settings .header,
body.page-inventory .header{
  padding:18px 24px;
  background:rgba(15,23,41,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

body.ui-consistent .header > div:first-child,
body.customers-monster .header > div:first-child,
body.invoices-monster .header > div:first-child,
body.estimates-monster .header > div:first-child,
body.receivables-monster .header > div:first-child,
body.page-inventory .header > div:first-child{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

body.ui-consistent .header strong,
body.customers-monster .header strong,
body.invoices-monster .header strong,
body.estimates-monster .header strong,
body.receivables-monster .header strong,
body.page-users .header strong,
body.page-settings .header strong,
body.page-inventory .header strong{
  font-size:var(--ui-title);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.02em;
}

body.ui-consistent .header .muted,
body.customers-monster .header .muted,
body.invoices-monster .header .muted,
body.estimates-monster .header .muted,
body.receivables-monster .header .muted,
body.page-users .header .muted,
body.page-settings .header .muted,
body.page-inventory .header .muted{
  font-size:var(--ui-subtitle) !important;
  color:#93a6c7;
  line-height:1.35;
}

body.ui-consistent .content,
body.customers-monster .content,
body.invoices-monster .content,
body.estimates-monster .content,
body.receivables-monster .content,
body.page-users .content,
body.page-settings .content,
body.page-inventory .content{
  padding:var(--ui-page-pad);
}

body.ui-consistent .search,
body.customers-monster .search,
body.invoices-monster .search,
body.estimates-monster .search,
body.receivables-monster .search,
body.page-users .search,
body.page-settings .search,
body.page-inventory .search{
  min-height:var(--ui-control-h);
  padding:0 14px;
  border-radius:14px;
  width:min(420px, 100%);
  background:#0d1423;
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

body.ui-consistent .search input,
body.customers-monster .search input,
body.invoices-monster .search input,
body.estimates-monster .search input,
body.receivables-monster .search input,
body.page-users .search input,
body.page-settings .search input,
body.page-inventory .search input,
body.ui-consistent .input,
body.customers-monster .input,
body.invoices-monster .input,
body.estimates-monster .input,
body.receivables-monster .input,
body.page-users .input,
body.page-settings .input,
body.page-inventory .input,
body.page-users select,
body.page-settings .in{
  min-height:var(--ui-control-h);
  border-radius:14px;
  border-color:rgba(255,255,255,.08);
  background:#0d1423;
}

body.ui-consistent .btn,
body.customers-monster .btn,
body.invoices-monster .btn,
body.estimates-monster .btn,
body.receivables-monster .btn,
body.page-users .btn,
body.page-settings .btn,
body.page-inventory .btn{
  min-height:var(--ui-control-h);
  padding:10px 16px;
  border-radius:14px;
  font-weight:800;
  box-shadow:none;
}

body.ui-consistent .card,
body.customers-monster .card,
body.invoices-monster .card,
body.estimates-monster .card,
body.receivables-monster .card,
body.page-users .card,
body.page-settings .card,
body.page-inventory .card,
body.page-users .user-panel,
body.page-users .user-stat,
body.page-users .user-topbar,
body.page-users .user-side-card,
body.page-settings .settings-nav,
body.page-settings .settings-main .card,
body.page-inventory .inventory-kpi-shell,
body.page-inventory #panel-items,
body.page-inventory #panel-moves,
body.page-inventory #panel-reports{
  border-radius:var(--ui-card-radius);
  border:1px solid var(--ui-soft-border);
  background:var(--ui-soft-bg);
  box-shadow:var(--ui-soft-shadow);
}

body.customers-monster .cus-split,
body.invoices-monster .inv-split,
body.estimates-monster .inv-split,
body.receivables-monster .inv-split{
  gap:18px;
  align-items:stretch;
}

body.customers-monster .cus-left,
body.invoices-monster .inv-left,
body.estimates-monster .inv-left,
body.receivables-monster .inv-left{
  min-width:320px;
}

body.customers-monster .cus-right,
body.invoices-monster .inv-right,
body.estimates-monster .inv-right,
body.receivables-monster .inv-right{
  min-width:0;
}

body.customers-monster .cus-summary-card,
body.invoices-monster .inv-left-top .card,
body.estimates-monster .inv-left-top .card,
body.receivables-monster .inv-left-top .card,
body.page-inventory .inventory-kpi-shell,
body.page-users #users-summary .user-stat,
body.page-settings .settings-nav{
  padding:16px 18px !important;
}

body.customers-monster #cus-empty,
body.invoices-monster #inv-empty,
body.estimates-monster #est-empty,
body.receivables-monster #rc-empty{
  border-style:dashed;
  background:linear-gradient(180deg, rgba(13,20,35,.84), rgba(9,14,26,.72));
}

body.customers-monster .cus-detail-card,
body.invoices-monster .inv-detail-card,
body.estimates-monster .est-detail-card,
body.receivables-monster .rc-detail-card{
  overflow:hidden;
}

body.customers-monster .cus-workspace-head,
body.invoices-monster .inv-workspace-head,
body.estimates-monster .est-workspace-head{
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}

body.customers-monster .cus-workspace-body,
body.invoices-monster .inv-workspace-body,
body.estimates-monster .est-workspace-body{
  padding:18px;
}

body.customers-monster .cus-unified-block,
body.invoices-monster .inv-unified-block,
body.estimates-monster .est-unified-block,
body.page-users .user-side-card,
body.page-settings .section .card,
body.page-inventory .inventory-report-card{
  border-radius:16px;
}

body.invoices-monster .inv-list,
body.estimates-monster .inv-list,
body.receivables-monster .inv-list,
body.customers-monster .cus-list{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}

body.page-users .content.user-content{gap:16px}
body.page-users .users-shell{gap:16px}
body.page-users .user-summary{gap:12px}
body.page-users .user-workspace{gap:16px;height:min(calc(100vh - 236px), 900px)}
body.page-users .user-panel-head,
body.page-users .user-panel-body{padding-left:18px;padding-right:18px}
body.page-users .user-panel-head{padding-top:18px;padding-bottom:14px}
body.page-users .user-toolbar{gap:12px;margin-bottom:14px}

body.page-settings .settings-shell{gap:18px;max-width:1460px}
body.page-settings .settings-main{gap:18px}
body.page-settings .navitem,
body.page-settings .chip{
  border-radius:14px;
}
body.page-settings .settings-nav .hd,
body.page-settings .settings-main .hd{padding:18px 18px 14px}
body.page-settings .settings-nav .bd,
body.page-settings .settings-main .bd{padding:18px}

body.page-inventory .inventory-kpi-shell{margin-bottom:16px}
body.page-inventory .inventory-kpi-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:start;
}
body.page-inventory .inventory-kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
body.page-inventory .inventory-kpi{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}
body.page-inventory .inventory-kpi .muted{font-size:12px !important}
body.page-inventory .inventory-kpi-value{font-size:24px;font-weight:800;line-height:1.1;margin-top:6px}
body.page-inventory .inventory-kpi-value.compact{font-size:17px;font-weight:700}
body.page-inventory .inventory-tabbar{display:flex !important; gap:10px; flex-wrap:wrap; align-items:center}
body.page-inventory #panel-items,
body.page-inventory #panel-moves,
body.page-inventory #panel-reports{padding:18px}
body.page-inventory .inventory-panel-head,
body.page-inventory .inventory-report-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
body.page-inventory .inventory-spacer{height:12px !important}
body.page-inventory .inventory-report-grid{gap:16px}

/* Standard scrollbars */
body.customers-monster .content::-webkit-scrollbar,
body.invoices-monster .content::-webkit-scrollbar,
body.estimates-monster .content::-webkit-scrollbar,
body.receivables-monster .content::-webkit-scrollbar,
body.page-users .content::-webkit-scrollbar,
body.page-settings .content::-webkit-scrollbar,
body.page-inventory .content::-webkit-scrollbar{width:10px;height:10px}
body.customers-monster .content::-webkit-scrollbar-thumb,
body.invoices-monster .content::-webkit-scrollbar-thumb,
body.estimates-monster .content::-webkit-scrollbar-thumb,
body.receivables-monster .content::-webkit-scrollbar-thumb,
body.page-users .content::-webkit-scrollbar-thumb,
body.page-settings .content::-webkit-scrollbar-thumb,
body.page-inventory .content::-webkit-scrollbar-thumb{background:rgba(148,163,184,.22);border-radius:999px;border:2px solid transparent;background-clip:padding-box}

@media (max-width: 1200px){
  body.page-inventory .inventory-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 980px){
  body.customers-monster .cus-split,
  body.invoices-monster .inv-split,
  body.estimates-monster .inv-split,
  body.receivables-monster .inv-split,
  body.page-users .user-workspace,
  body.page-inventory .inventory-kpi-row,
  body.page-settings .settings-shell{
    grid-template-columns:1fr !important;
  }
  body.page-inventory .inventory-kpi-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  body.page-inventory .inventory-kpi-grid{grid-template-columns:1fr}
}


/* Second-pass consistency layer */
body.ui-consistent .header .right,
body.ui-consistent .header-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

body.ui-consistent .page-subtitle{
  font-size:12px !important;
  margin-top:2px;
}

body.ui-consistent .panel-intro-card,
body.ui-consistent .list-shell-card,
body.ui-consistent .workspace-shell,
body.ui-consistent .side-shell{
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(14,21,37,.96), rgba(10,16,28,.96));
  box-shadow:0 16px 36px rgba(0,0,0,.28);
}

body.ui-consistent .workspace-empty-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
}
body.ui-consistent .workspace-empty-body{
  margin-top:6px;
  line-height:1.45;
}

body.ui-consistent .list-meta-row,
body.ui-consistent .panel-head-row,
body.ui-consistent .inline-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
body.ui-consistent .list-filter-inline{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
body.ui-consistent .list-filter-select,
body.ui-consistent .compact-select{
  height:40px !important;
  min-width:170px;
  padding:0 12px !important;
  font-size:13px !important;
  border-radius:14px !important;
}

body.ui-consistent .panel-title,
body.ui-consistent .mini-section-title,
body.ui-consistent .inventory-section-title{
  font-weight:800;
  letter-spacing:-.01em;
}
body.ui-consistent .panel-subtitle,
body.ui-consistent .section-note,
body.ui-consistent .mini-section-subtitle{
  font-size:12px !important;
  color:#93a6c7 !important;
  line-height:1.45;
}

body.ui-consistent .table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
body.ui-consistent .table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(9,14,26,.96);
  color:#aebfdc;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.ui-consistent .table tbody td{
  padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:middle;
}
body.ui-consistent .table tbody tr:hover td{
  background:rgba(255,255,255,.025);
}
body.ui-consistent .table tbody tr:last-child td{
  border-bottom:none;
}

body.ui-consistent dialog{
  border:none;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(10,17,30,.98), rgba(8,13,24,.98));
  color:#e7eefc;
  box-shadow:0 28px 80px rgba(0,0,0,.45);
}
body.ui-consistent dialog::backdrop{
  background:rgba(2,6,14,.66);
  backdrop-filter:blur(6px);
}
body.ui-consistent dialog .form,
body.ui-consistent dialog form{
  padding:18px !important;
}
body.ui-consistent dialog h3{
  margin:0;
  font-size:20px;
  letter-spacing:-.02em;
}
body.ui-consistent dialog label{
  display:block;
  margin-bottom:6px;
  font-weight:700;
  color:#dbe7fb;
}

body.ui-consistent .form-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
  flex-wrap:wrap;
}

body.customers-monster .cus-summary-card .search,
body.invoices-monster .inv-left-top .search,
body.receivables-monster .inv-left-top .search,
body.page-inventory .header .search{
  width:100%;
}
body.customers-monster .cus-pager-footer,
body.invoices-monster .inv-list-pager,
body.receivables-monster .inv-list-pager{
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}
body.customers-monster .cus-pane-head,
body.invoices-monster .inv-block-head,
body.receivables-monster .inv-block-head,
body.page-users .user-panel-head{
  gap:12px;
}
body.page-users #users-list,
body.customers-monster #cus-list,
body.invoices-monster #inv-list,
body.receivables-monster #rc-list{
  scrollbar-width:thin;
}
body.page-settings .settings-main .card,
body.page-settings .settings-nav{
  overflow:hidden;
}

@media (max-width: 820px){
  body.ui-consistent .header,
  body.ui-consistent .content{padding:18px}
  body.ui-consistent .header-actions,
  body.ui-consistent .header .right{width:100%;justify-content:stretch}
  body.ui-consistent .header .search{width:100%}
}


/* ===== Third-pass consistency expansion ===== */
body.page-jobs .header,
body.page-messages .header,
body.page-vehicles .header,
body.page-appointments .header,
body.inspections-monster .header,
body.page-cashier .header{
  padding:18px 24px;
  background:rgba(15,23,41,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

body.page-jobs .header strong,
body.page-messages .header strong,
body.page-vehicles .header strong,
body.page-appointments .header strong,
body.inspections-monster .header strong,
body.page-cashier .header strong{
  font-size:var(--ui-title);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.02em;
}

body.page-jobs .header .muted,
body.page-messages .header .muted,
body.page-vehicles .header .muted,
body.page-appointments .header .muted,
body.inspections-monster .header .muted,
body.page-cashier .header .muted{
  font-size:var(--ui-subtitle) !important;
  color:#93a6c7;
  line-height:1.35;
}

body.page-jobs .content,
body.page-messages .content,
body.page-vehicles .content,
body.page-appointments .content,
body.inspections-monster .content,
body.page-cashier .content{
  padding:var(--ui-page-pad);
}

body.page-jobs .header-actions,
body.page-messages .header .right,
body.page-vehicles .header .right,
body.page-appointments .header .right,
body.inspections-monster .header .right,
body.page-cashier .header .right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

body.page-jobs .search,
body.page-messages .search,
body.page-vehicles .search,
body.page-appointments .search,
body.inspections-monster .search,
body.page-cashier .search{
  min-height:var(--ui-control-h);
  padding:0 14px;
  border-radius:14px;
  width:min(420px,100%);
  background:#0d1423;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

body.page-jobs .input,
body.page-messages .input,
body.page-vehicles .input,
body.page-appointments .input,
body.inspections-monster .input,
body.page-cashier .input,
body.page-jobs select,
body.page-appointments select,
body.page-cashier select,
body.inspections-monster select{
  min-height:var(--ui-control-h);
  border-radius:14px;
  border-color:rgba(255,255,255,.08);
  background:#0d1423;
}

body.page-jobs .compact-select,
body.page-appointments .compact-select{
  min-width:170px;
}

body.page-jobs .btn,
body.page-messages .btn,
body.page-vehicles .btn,
body.page-appointments .btn,
body.inspections-monster .btn,
body.page-cashier .btn{
  min-height:var(--ui-control-h);
  padding:10px 16px;
  border-radius:14px;
  font-weight:800;
}

body.page-jobs .card,
body.page-messages .card,
body.page-vehicles .card,
body.page-appointments .card,
body.inspections-monster .card,
body.page-cashier .card,
body.page-jobs .kb-col,
body.page-messages .msghub-list,
body.page-vehicles .veh-panel,
body.page-vehicles .veh-detail,
body.page-appointments .ap-panel,
body.page-appointments .ap-history-shell,
body.inspections-monster .dvi-left-summary,
body.inspections-monster .dvi-detail-card,
body.page-cashier .cashier-queue,
body.page-cashier .cashier-checkout,
body.page-cashier .cashier-pay{
  border-radius:var(--ui-card-radius);
  border:1px solid var(--ui-soft-border);
  background:var(--ui-soft-bg);
  box-shadow:var(--ui-soft-shadow);
}

body.page-jobs .kb-meta,
body.page-appointments .ap-toolbar-card,
body.page-messages .msghub-toolbar,
body.inspections-monster .dvi-left-summary{
  margin-bottom:14px;
}

body.page-jobs .kb-meta,
body.page-messages #msg-count,
body.page-appointments .ap-history-mode-sub,
body.inspections-monster #dvi-meta,
body.page-cashier .mini.muted,
body.page-vehicles .veh-sub{
  color:#93a6c7;
}

body.page-jobs .kb-board,
body.page-appointments .kb-board,
body.page-messages .msghub-split,
body.inspections-monster .dvi-split,
body.page-vehicles .veh-layout,
body.page-cashier .cashier-pos-grid{
  gap:18px !important;
}

body.page-jobs .kb-col-head,
body.page-appointments .ap-panel-head,
body.inspections-monster .dvi-workspace-head,
body.page-vehicles .veh-topbar,
body.page-cashier .checkout-head,
body.page-cashier .pay-head,
body.page-messages .msghub-head{
  border-bottom:1px solid rgba(255,255,255,.06);
}

body.page-jobs .kb-col-head,
body.page-appointments .ap-panel-head,
body.page-cashier .checkout-head,
body.page-cashier .pay-head,
body.page-messages .msghub-head{
  padding-bottom:14px;
  margin-bottom:14px;
}

body.page-jobs .kb-cards,
body.page-messages .msghub-list,
body.page-appointments .ap-list,
body.inspections-monster .dvi-list,
body.page-vehicles .veh-list,
body.page-cashier #cashier-queue{
  scrollbar-width:thin;
}

body.page-jobs .kb-col-note,
body.page-appointments #ap-empty,
body.page-messages #msg-empty,
body.page-vehicles #veh-empty,
body.inspections-monster #dvi-empty{
  border:1px dashed rgba(255,255,255,.12);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(13,20,35,.84), rgba(9,14,26,.72));
}

body.page-vehicles .veh-panel-head,
body.page-vehicles .veh-list-footer,
body.page-messages .msghub-list-pager,
body.inspections-monster .dvi-list-pager,
body.page-appointments .ap-loadmore,
body.page-jobs .kb-col-actions{
  margin-top:12px;
}

body.page-jobs .pill,
body.page-appointments .pill,
body.page-cashier .pill,
body.page-messages .badge,
body.inspections-monster .badge,
body.page-vehicles .badge{
  border-radius:999px;
}

body.page-cashier .cashier-pos-grid{height:min(calc(100vh - 220px), 760px)}
body.page-cashier .receipt,
body.page-cashier .iframe-wrap,
body.page-cashier .qcard,
body.page-cashier .pm-btn{
  border-radius:16px;
}
body.page-cashier .kpi .card{padding:16px}

body.page-messages .msghub-toolbar,
body.page-messages .msghub-thread,
body.page-messages .msghub-list{
  overflow:hidden;
}

body.page-vehicles .veh-empty-card,
body.inspections-monster #dvi-empty,
body.page-messages #msg-empty{
  padding:18px !important;
}

@media (max-width: 980px){
  body.page-jobs .header-actions,
  body.page-appointments .header-actions,
  body.page-messages .header .right,
  body.page-vehicles .header .right,
  body.inspections-monster .header .right,
  body.page-cashier .header .right{
    width:100%;
    justify-content:flex-start;
  }

  body.page-jobs .search,
  body.page-messages .search,
  body.page-vehicles .search,
  body.page-appointments .search,
  body.inspections-monster .search,
  body.page-cashier .search{
    width:100%;
  }
}


/* pass 4: remaining sections */
body.ui-consistent .header,
body.applicants-pro.ui-consistent .header,
body.inspection-history-monster.ui-consistent .header,
body.page-dtc .header{
  padding:18px 24px;
  background:rgba(15,23,41,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

body.ui-consistent .header > div:first-child,
body.applicants-pro.ui-consistent .header > div:first-child,
body.inspection-history-monster.ui-consistent .header > div:first-child,
body.page-dtc .header > div:first-child{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

body.ui-consistent .card,
body.applicants-pro.ui-consistent .card,
body.inspection-history-monster.ui-consistent .card,
body.page-dtc .card,
body.ui-auth .login-card,
body.ui-public .card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}

body.ui-consistent .content .card,
body.applicants-pro.ui-consistent .content .card,
body.inspection-history-monster.ui-consistent .content .card,
body.page-dtc .content .card{
  background:linear-gradient(180deg, rgba(13,20,35,.96), rgba(9,14,26,.96));
}

body.ui-consistent .btn,
body.applicants-pro.ui-consistent .btn,
body.inspection-history-monster.ui-consistent .btn,
body.page-dtc .btn,
body.ui-auth .btn,
body.ui-public .btn{
  min-height:44px;
  border-radius:14px;
  font-weight:800;
}

body.ui-consistent .input,
body.ui-consistent select,
body.applicants-pro.ui-consistent .input,
body.inspection-history-monster.ui-consistent .input,
body.page-dtc .input,
body.ui-auth input,
body.ui-public .input,
body.ui-public select,
body.ui-public textarea{
  min-height:44px;
  border-radius:14px;
}

body.ui-consistent .main > .content,
body.applicants-pro.ui-consistent .content,
body.inspection-history-monster.ui-consistent .content,
body.page-dtc .content{
  padding:24px;
}

body.ui-consistent .grid,
body.applicants-pro.ui-consistent .grid,
body.inspection-history-monster.ui-consistent .grid{
  gap:16px;
}

body.ui-auth{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:radial-gradient(circle at top, rgba(59,130,246,.18), transparent 38%), linear-gradient(180deg, #0b1220, #060b16);
}
body.ui-auth .login-card{
  width:min(420px, calc(100vw - 32px));
  background:linear-gradient(180deg, rgba(13,20,35,.98), rgba(9,14,26,.98));
  border-color:rgba(255,255,255,.08);
  padding:24px;
}
body.ui-auth h1, body.ui-auth h2, body.ui-auth label{color:#e8eefc}
body.ui-auth .muted{color:#9db0d3 !important}
body.ui-auth input{background:#0d1423;color:#e8eefc;border:1px solid rgba(255,255,255,.08);padding:0 14px}

body.ui-public{background:linear-gradient(180deg, #09111f, #060b16); color:#e8eefc}
body.ui-public .topbar{
  padding:18px 24px;
  backdrop-filter:blur(14px);
  background:rgba(8,13,24,.78);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.ui-public .container{padding:28px 16px 40px}
body.ui-public .card{background:linear-gradient(180deg, rgba(13,20,35,.96), rgba(9,14,26,.96));}
body.ui-public .muted{color:#9db0d3 !important}
body.ui-public h2, body.ui-public h3, body.ui-public label, body.ui-public .brand{color:#e8eefc}
body.ui-public .input, body.ui-public select, body.ui-public textarea{background:#0d1423;border:1px solid rgba(255,255,255,.08);color:#e8eefc;padding:0 14px}
body.ui-public textarea{padding-top:12px;padding-bottom:12px;min-height:120px}
body.ui-public .btn{padding:10px 16px}


.auth-user-link{ text-decoration:none; display:inline-flex; align-items:center; }
.auth-user-link:hover{ filter:brightness(1.06); }

/* ---- source: assets/css/ui-premium-polish.css ---- */

:root{
  --pp-radius-sm:12px;
  --pp-radius:16px;
  --pp-radius-lg:20px;
  --pp-line:rgba(255,255,255,.08);
  --pp-line-strong:rgba(255,255,255,.12);
  --pp-fill:rgba(255,255,255,.025);
  --pp-fill-2:rgba(255,255,255,.04);
  --pp-fill-3:rgba(255,255,255,.06);
  --pp-text-soft:#c9d7ef;
  --pp-text-muted:#95a8c9;
  --pp-shadow:0 18px 42px rgba(0,0,0,.28);
  --pp-shadow-soft:0 10px 26px rgba(0,0,0,.18);
  --pp-backdrop:rgba(3,10,20,.72);
}
body.ui-consistent .header,
body.ui-auth .header,
body.ui-public .topbar{box-shadow:0 10px 28px rgba(0,0,0,.16)}
body.ui-consistent .header .right,
body.ui-consistent .header-actions{gap:12px !important}
body.ui-consistent .header .btn,
body.ui-consistent .header-actions .btn{white-space:nowrap}
body.ui-consistent .badge,
body.ui-auth .badge,
body.ui-public .badge{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 12px;border-radius:999px;border:1px solid var(--pp-line);background:rgba(255,255,255,.04);color:#dce7fb;font-size:12px;font-weight:800;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
body.ui-consistent .badge strong,body.ui-consistent .badge b{font-weight:900}
body.ui-consistent .badge.ok,body.ui-consistent .badge.success{border-color:rgba(16,185,129,.38);color:#92f2c4;background:rgba(16,185,129,.12)}
body.ui-consistent .badge.warn{border-color:rgba(245,158,11,.38);color:#ffd66e;background:rgba(245,158,11,.12)}
body.ui-consistent .badge.danger,body.ui-consistent .badge.bad{border-color:rgba(239,68,68,.38);color:#ffb1b1;background:rgba(239,68,68,.12)}
body.ui-consistent .workspace-empty-title{font-size:18px;font-weight:900;letter-spacing:-.02em}
body.ui-consistent .workspace-empty-body{margin-top:6px;color:var(--pp-text-muted)!important;line-height:1.5;max-width:54ch}
body.ui-consistent #msg-empty,body.ui-consistent #veh-empty,body.ui-consistent #ih-empty,body.ui-consistent #agh-empty,body.ui-consistent #ap-empty{border:1px dashed var(--pp-line);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015))}
body.ui-consistent .list-meta-row,body.ui-consistent .inv-list-meta,body.ui-consistent .inventory-panel-head,body.ui-consistent .inventory-report-head,body.ui-consistent .dtc-table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
body.ui-consistent .actions-row,body.ui-consistent .inv-actions-row,body.ui-consistent .est-actions-row,body.ui-consistent .dvi-actions-row,body.ui-consistent .ap-card-actions,body.ui-consistent .inv-detail-actions,body.ui-consistent .ap-detail-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.ui-consistent .inv-actionbar,body.ui-consistent .est-actionbar,body.ui-consistent .dvi-actionbar{border-top:1px solid var(--pp-line);background:linear-gradient(180deg, rgba(8,15,30,.96), rgba(6,12,24,.98))}
body.ui-consistent .cus-list > *,body.ui-consistent .inv-list > *,body.ui-consistent .dvi-list > *,body.ui-consistent .msg-list > *,body.ui-consistent .veh-list > *{border-radius:16px}
body.ui-consistent .cus-list button,body.ui-consistent .inv-list button,body.ui-consistent .dvi-list button,body.ui-consistent .msg-list button,body.ui-consistent .veh-list button,body.ui-consistent .cus-list a,body.ui-consistent .inv-list a,body.ui-consistent .dvi-list a,body.ui-consistent .msg-list a,body.ui-consistent .veh-list a{transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
body.ui-consistent .cus-list button:hover,body.ui-consistent .inv-list button:hover,body.ui-consistent .dvi-list button:hover,body.ui-consistent .msg-list button:hover,body.ui-consistent .veh-list button:hover,body.ui-consistent .cus-list a:hover,body.ui-consistent .inv-list a:hover,body.ui-consistent .dvi-list a:hover,body.ui-consistent .msg-list a:hover,body.ui-consistent .veh-list a:hover{border-color:var(--pp-line-strong);background:rgba(255,255,255,.045);transform:translateY(-1px)}
body.ui-consistent .cus-list [aria-selected="true"],body.ui-consistent .inv-list [aria-selected="true"],body.ui-consistent .dvi-list [aria-selected="true"],body.ui-consistent .msg-list [aria-selected="true"],body.ui-consistent .veh-list [aria-selected="true"],body.ui-consistent .is-selected{box-shadow:0 0 0 1px rgba(59,130,246,.45), 0 0 0 4px rgba(59,130,246,.14)}
body.ui-consistent .table-wrap{overflow:auto;border:1px solid var(--pp-line);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
body.ui-consistent .table{width:100%;border-collapse:separate;border-spacing:0}
body.ui-consistent .table thead th{position:sticky;top:0;z-index:1;background:rgba(9,16,30,.96);color:#bed0ee;font-size:12px;letter-spacing:.02em;text-transform:uppercase;border-bottom:1px solid var(--pp-line)}
body.ui-consistent .table th,body.ui-consistent .table td{padding:13px 14px;vertical-align:middle}
body.ui-consistent .table tbody tr{transition:background .14s ease}
body.ui-consistent .table tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
body.ui-consistent .table tbody tr:hover{background:rgba(255,255,255,.04)}
body.ui-consistent .table tbody td{border-bottom:1px solid rgba(255,255,255,.05)}
body.ui-consistent .table tbody tr:last-child td{border-bottom:none}
body.ui-consistent dialog,body.ui-auth dialog{border:none;padding:0;background:transparent;color:inherit}
body.ui-consistent dialog::backdrop,body.ui-auth dialog::backdrop{background:var(--pp-backdrop);backdrop-filter:blur(6px)}
body.ui-consistent .mb-dialog,body.ui-consistent dialog[open],body.ui-auth dialog[open]{width:min(880px, calc(100vw - 32px));max-width:min(880px, calc(100vw - 32px));border-radius:20px;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.42)}
body.ui-consistent #dlg-cus,body.ui-consistent #dlg-veh,body.ui-consistent #dlg-portal,body.ui-consistent #dlg-pick-veh,body.ui-consistent #dlg-user,body.ui-consistent #dlg-item,body.ui-consistent #dlg-restock,body.ui-consistent #dlg-est,body.ui-consistent #dlg-inv,body.ui-consistent #dlg-share,body.ui-consistent #dvi-dialog{background:linear-gradient(180deg, rgba(12,20,36,.98), rgba(8,14,26,.99)) !important;border:1px solid var(--pp-line-strong) !important;border-radius:20px !important;color:#e7eefc !important}
body.ui-consistent .modal,body.ui-consistent .dtc-modal,body.ui-consistent .sf-modal,body.ui-consistent .wl-modal{backdrop-filter:blur(3px)}
body.ui-consistent .modal[aria-hidden="false"],body.ui-consistent .dtc-modal[aria-hidden="false"],body.ui-consistent .sf-modal[aria-hidden="false"],body.ui-consistent .wl-modal[aria-hidden="false"]{display:block}
body.ui-consistent .modal__panel,body.ui-consistent .dtc-modal__panel,body.ui-consistent .sf-modal__panel,body.ui-consistent .wl-modal__panel,body.ui-consistent .msgcall-modal,body.ui-consistent .drawer-panel{border:1px solid var(--pp-line-strong);border-radius:20px;background:linear-gradient(180deg, rgba(12,20,36,.98), rgba(8,14,26,.99));box-shadow:0 28px 80px rgba(0,0,0,.42)}
body.ui-consistent .modal__head,body.ui-consistent .dtc-modal__head,body.ui-consistent .sf-modal__head,body.ui-consistent .wl-modal__head{border-bottom:1px solid var(--pp-line);padding:18px 20px 14px}
body.ui-consistent .modal__body,body.ui-consistent .dtc-modal__body,body.ui-consistent .sf-modal__body,body.ui-consistent .wl-modal__body{padding:18px 20px 20px}
body.ui-consistent .dialog-grid,body.ui-consistent .grid{gap:14px}
body.ui-consistent .modal__title,body.ui-consistent .dtc-modal__title,body.ui-consistent .sf-modal__title,body.ui-consistent .wl-modal__title{font-size:18px;font-weight:900;letter-spacing:-.02em}
body.ui-auth{background:radial-gradient(circle at top, rgba(59,130,246,.18), transparent 32%),linear-gradient(180deg, #08111f, #050b16 78%)}
body.ui-auth .login-card{width:min(420px, calc(100vw - 32px));padding:24px;border-radius:22px !important;background:linear-gradient(180deg, rgba(13,20,35,.98), rgba(9,14,26,.98));border:1px solid var(--pp-line-strong) !important;box-shadow:0 28px 80px rgba(0,0,0,.42)}
body.ui-auth .brand{background:none;border:none;box-shadow:none;padding:0}
body.ui-auth .form{display:grid;gap:12px}
body.ui-auth .input,body.ui-auth .btn{min-height:46px;border-radius:14px}
body.ui-auth #msg{min-height:20px}
body.ui-public{background:radial-gradient(circle at top, rgba(59,130,246,.12), transparent 28%),linear-gradient(180deg, #0b1220, #070d18 82%);color:#e8eefc}
body.ui-public .topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 24px;background:rgba(15,23,41,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--pp-line)}
body.ui-public .topbar .brand{background:none;border:none;box-shadow:none;padding:0;font-weight:900}
body.ui-public .card{border-radius:20px;border:1px solid var(--pp-line);background:linear-gradient(180deg, rgba(13,20,35,.96), rgba(9,14,26,.96));box-shadow:var(--pp-shadow)}
body.ui-public .table,body.ui-public .grid{color:inherit}
body.ui-public .file-chip{border:1px solid var(--pp-line);background:rgba(255,255,255,.03)}
body.ui-print .sheet{border-radius:18px;overflow:hidden}
body.ui-print .btnbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width: 980px){body.ui-consistent .header,body.ui-public .topbar{padding:16px 16px}body.ui-consistent .content{padding:16px !important}body.ui-consistent .header .right,body.ui-consistent .header-actions{width:100%}body.ui-consistent .search{width:100% !important}body.ui-consistent .table th,body.ui-consistent .table td{padding:11px 12px}body.ui-consistent .modal__head,body.ui-consistent .modal__body,body.ui-consistent .dtc-modal__head,body.ui-consistent .dtc-modal__body,body.ui-consistent .sf-modal__head,body.ui-consistent .sf-modal__body,body.ui-consistent .wl-modal__head,body.ui-consistent .wl-modal__body{padding-left:16px;padding-right:16px}}


/* Pass 7 fixes: header consistency + Mboka Chat original right-panel scrolling */
body.ui-consistent .header,
body.ui-auth .header,
body.ui-public .topbar{
  min-height:84px;
}

body.ui-consistent .header .left,
body.ui-consistent .header > div:first-child,
body.ui-auth .header .left,
body.ui-public .topbar .left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:0;
}

body.ui-consistent .header strong,
body.ui-auth .header strong,
body.ui-public .topbar strong{
  font-size:20px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}

body.ui-consistent .header .muted,
body.ui-consistent .header .page-subtitle,
body.ui-auth .header .muted,
body.ui-public .topbar .muted{
  font-size:13px !important;
  line-height:1.35 !important;
  color:#93a6c7 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;
}

@media (max-width: 980px){
  body.ui-consistent .header,
  body.ui-auth .header,
  body.ui-public .topbar{
    min-height:auto;
  }
}

/* Keep Mboka Chat right side scrolling exactly like the original workspace */
body.page-messages .msghub-right{
  overflow:hidden !important;
  min-height:0;
}
body.page-messages .msghub-thread{
  overflow:auto !important;
  min-height:0 !important;
  flex:1 1 auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
body.page-messages .msghub-body{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}


/* Pass 8: subtitle cleanup + header rhythm + update dialog polish */
body.ui-consistent .header,
body.ui-public .topbar{
  padding-top:18px;
  padding-bottom:18px;
}

body.ui-consistent .header .left,
body.ui-consistent .header .ins-head,
body.ui-public .topbar .left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:0;
}

body.ui-consistent .header strong,
body.ui-consistent .header .ins-title,
body.ui-public .topbar strong{
  display:block;
  margin:0;
  font-size:20px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}

body.ui-consistent .header .page-subtitle,
body.ui-consistent .header .muted.page-subtitle,
body.ui-consistent .header .ins-sub,
body.ui-public .topbar .page-subtitle,
body.ui-public .topbar .muted{
  margin-top:2px;
  font-size:13px !important;
  line-height:1.4 !important;
  color:#93a6c7 !important;
  max-width:72ch;
}

body.ui-consistent .header .right,
body.ui-consistent .header-actions,
body.ui-consistent .ins-head-actions{
  align-items:center;
}

/* Update dialog */
#dlg-update[open]{
  display:block;
}
#dlg-update .btn{
  border-radius:16px;
}
#upd-main-grid{
  align-items:stretch !important;
}
#upd-main-grid > div{
  min-height:0;
}
#upd-right-col{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
#upd-channel-card,
#upd-preview-shell{
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(10,20,40,.92), rgba(7,15,31,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#upd-preview-card{
  scrollbar-gutter:stable;
}
@media (max-width: 980px){
  #dlg-update{
    width:min(100vw - 20px, 960px) !important;
    max-height:calc(100dvh - 20px) !important;
  }
  #upd-main-grid{
    grid-template-columns:1fr !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* robust centering for the status update dialog, including Safari */
#dlg-update[open]{
  position:fixed !important;
  inset:auto !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
}

/* ---- source: assets/css/print-enterprise.css ---- */
/* Mboka Auto Repair — enterprise print color + watermark layer
   Keeps paper documents clean while preserving brand colors, badges, watermarks, photos, and report accents. */

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  html,
  body {
    background: #ffffff !important;
  }

  img,
  svg,
  canvas,
  video {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1;
  }

  .no-print,
  .btnbar,
  .print-actions,
  [data-no-print="true"],
  [data-print-hidden="true"] {
    display: none !important;
  }

  body.ui-print .sheet,
  body.ui-print .print-sheet,
  body.ui-print .receipt-sheet,
  body.ui-print .report-sheet,
  body.ui-print .statement-sheet,
  body.ui-print .dvi-sheet {
    background: #ffffff !important;
    color: #0f172a !important;
    position: relative;
    overflow: visible !important;
  }

  /* Watermark safety: every formal print page receives the logo layer unless a page explicitly opts out. */
  body.ui-print .sheet:not(.no-watermark)::before,
  body.ui-print .print-sheet:not(.no-watermark)::before,
  body.ui-print .receipt-sheet:not(.no-watermark)::before,
  body.ui-print .report-sheet:not(.no-watermark)::before,
  body.ui-print .statement-sheet:not(.no-watermark)::before,
  body.ui-print .dvi-sheet:not(.no-watermark)::before {
    content: "";
    position: fixed;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background-image: url("../img/mboka_logo.png") !important;
    background-repeat: repeat !important;
    background-size: 120px 120px !important;
    background-position: 0 0 !important;
    transform: rotate(-18deg);
    transform-origin: center;
    opacity: 0.06 !important;
    z-index: 0;
    pointer-events: none;
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  body.ui-print .sheet > *,
  body.ui-print .print-sheet > *,
  body.ui-print .receipt-sheet > *,
  body.ui-print .report-sheet > *,
  body.ui-print .statement-sheet > *,
  body.ui-print .dvi-sheet > * {
    position: relative;
    z-index: 1;
  }

  .watermark,
  .print-watermark,
  .mboka-watermark,
  .status-paid,
  .status-approved,
  .status-due,
  .status-overdue,
  .badge,
  .pill,
  .chip,
  .tag,
  .card,
  th,
  thead,
  .total,
  .summary,
  .brand-card,
  .meta-card,
  .kpi {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .status-paid,
  .status-approved,
  .badge.paid,
  .badge.approved {
    background-color: rgba(22, 163, 74, 0.12) !important;
    border-color: rgba(22, 163, 74, 0.65) !important;
    color: #065f46 !important;
  }

  .status-due,
  .badge.due,
  .badge.pending {
    background-color: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.65) !important;
    color: #92400e !important;
  }

  .status-overdue,
  .badge.overdue,
  .badge.urgent {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.65) !important;
    color: #991b1b !important;
  }
}

/* Screen preview keeps print pages honest without affecting the main dark app UI. */
body.ui-print {
  background: #eef3fb;
}

/* v78 — restore true printer color behavior.
   The app no longer forces black-ink/monochrome output.
   Color printers receive the actual brand colors, status colors, photos,
   logo watermarks, and duplicate-page shading. Black-and-white printers
   or printer-driver grayscale settings can still convert the same design naturally. */
@media print {
  :root {
    color-scheme: light;
    --mboka-print-color-mode: auto;
  }

  html,
  body,
  body.ui-print {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    background: #ffffff !important;
  }

  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  img,
  svg,
  canvas,
  video,
  picture,
  .print-photo,
  .photos img,
  .veh-print-figure img,
  .veh-print-figure video,
  .brand img,
  .logo {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1;
  }

  .print-force-bw,
  .print-black-ink,
  .black-ink-print,
  .print-mono,
  .print-monochrome,
  .print-grayscale,
  .bw-print,
  .monochrome-print,
  [data-print-mode="black"],
  [data-print-mode="black-ink"],
  [data-print-mode="mono"],
  [data-print-mode="monochrome"],
  [data-print-mode="grayscale"] {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

@media print and (color) {
  body.ui-print .sheet,
  body.ui-print .print-sheet,
  body.ui-print .receipt-sheet,
  body.ui-print .report-sheet,
  body.ui-print .statement-sheet,
  body.ui-print .dvi-sheet,
  .card,
  .badge,
  .pill,
  .chip,
  th,
  thead,
  .summary-card,
  .note-box {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

@media print and (monochrome) {
  /* Do not rewrite colors to black in the app. Let the printer or browser
     grayscale engine convert the same approved layout cleanly. */
  html, body, body.ui-print {
    background: #ffffff !important;
  }
}


/* v79 — visible brand-color print restoration.
   Previous print pages were technically color-enabled, but the document palette was still mostly black/gray.
   These overrides add professional Mboka blue/gold/green/red print accents while still allowing printer-driver
   grayscale/black-and-white mode to convert the same design naturally. */
:root {
  --mboka-print-blue: #0b4fb3;
  --mboka-print-blue-dark: #0b2f66;
  --mboka-print-blue-soft: #eaf2ff;
  --mboka-print-blue-line: #b9d3ff;
  --mboka-print-gold: #f59e0b;
  --mboka-print-gold-soft: #fff7ed;
  --mboka-print-green: #16a34a;
  --mboka-print-green-soft: #ecfdf5;
  --mboka-print-red: #dc2626;
  --mboka-print-red-soft: #fff1f2;
}

body.ui-print .sheet,
body.ui-print .print-sheet,
body.ui-print .receipt-sheet,
body.ui-print .report-sheet,
body.ui-print .statement-sheet,
body.ui-print .dvi-sheet {
  background:
    linear-gradient(180deg, rgba(234, 242, 255, 0.58) 0, rgba(255,255,255,0.98) 34mm, rgba(255,255,255,0.98) 100%) !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

body.ui-print .sheet::before,
body.ui-print .print-sheet::before,
body.ui-print .receipt-sheet::before,
body.ui-print .report-sheet::before,
body.ui-print .statement-sheet::before,
body.ui-print .dvi-sheet::before {
  opacity: 0.075 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

body.ui-print h1,
body.ui-print #inv-no,
body.ui-print #est-no,
body.ui-print #grand,
body.ui-print #bal {
  color: var(--mboka-print-blue-dark) !important;
}

body.ui-print .brand img {
  border: 1px solid rgba(11, 79, 179, 0.28) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 3px rgba(11, 79, 179, 0.07) !important;
  background: #ffffff !important;
}

body.ui-print .kicker,
body.ui-print .section-title,
body.ui-print .lbl {
  color: var(--mboka-print-blue) !important;
  font-weight: 800 !important;
}

body.ui-print .card,
body.ui-print .totals .box,
body.ui-print .meta-card,
body.ui-print .brand-card,
body.ui-print .kpi,
body.ui-print .item,
body.ui-print .note-box {
  border-color: var(--mboka-print-blue-line) !important;
  background-color: rgba(255,255,255,0.96) !important;
  box-shadow: 0 1px 0 rgba(11,79,179,0.05) !important;
}

body.ui-print .meta-grid .card:first-child,
body.ui-print .brand.card,
body.ui-print .brand-card {
  background: linear-gradient(180deg, rgba(234,242,255,0.96), rgba(255,255,255,0.98)) !important;
}

body.ui-print .meta-grid .card:nth-child(2),
body.ui-print .doc-meta,
body.ui-print header .card[style*="text-align:right"] {
  background: linear-gradient(180deg, rgba(255,247,237,0.96), rgba(255,255,255,0.98)) !important;
  border-color: rgba(245,158,11,0.42) !important;
}

body.ui-print th,
body.ui-print thead th {
  background: linear-gradient(90deg, #dbeafe, #eef6ff) !important;
  border-color: var(--mboka-print-blue-line) !important;
  color: var(--mboka-print-blue-dark) !important;
}

body.ui-print td,
body.ui-print th {
  border-bottom-color: rgba(11,79,179,0.16) !important;
}

body.ui-print .totals .box:first-child,
body.ui-print .summary,
body.ui-print .summary-card {
  background: linear-gradient(180deg, rgba(234,242,255,0.98), rgba(255,255,255,0.98)) !important;
  border-color: rgba(11,79,179,0.38) !important;
}

body.ui-print .totals .box:nth-child(2),
body.ui-print #notes-card,
body.ui-print #approval-notes-card {
  background: linear-gradient(180deg, rgba(255,247,237,0.98), rgba(255,255,255,0.98)) !important;
  border-color: rgba(245,158,11,0.40) !important;
}

body.ui-print .totals .grand,
body.ui-print .sign-line,
body.ui-print .signature-line {
  border-top-color: var(--mboka-print-blue) !important;
}

body.ui-print .footer {
  border-top-color: rgba(11,79,179,0.30) !important;
}

body.ui-print .doc-meta .badge,
body.ui-print #est-status,
body.ui-print #inv-paid {
  background: var(--mboka-print-gold-soft) !important;
  border-color: var(--mboka-print-gold) !important;
  color: #92400e !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.10) !important;
}

body.ui-print #inv-paid.mboka-paid,
body.ui-print #est-status.mboka-approved,
body.ui-print .badge.good,
body.ui-print .status-paid,
body.ui-print .status-approved {
  background: var(--mboka-print-green-soft) !important;
  border-color: var(--mboka-print-green) !important;
  color: #065f46 !important;
}

body.ui-print #inv-paid.mboka-unpaid,
body.ui-print #est-status.mboka-pending,
body.ui-print .badge.bad,
body.ui-print .status-overdue {
  background: var(--mboka-print-red-soft) !important;
  border-color: var(--mboka-print-red) !important;
  color: #991b1b !important;
}

body.ui-print .badge.warn,
body.ui-print .status-due,
body.ui-print .badge.pending {
  background: var(--mboka-print-gold-soft) !important;
  border-color: var(--mboka-print-gold) !important;
  color: #92400e !important;
}

body.ui-print .g,
body.ui-print .dot.g { background: var(--mboka-print-green) !important; }
body.ui-print .y,
body.ui-print .dot.y { background: var(--mboka-print-gold) !important; }
body.ui-print .r,
body.ui-print .dot.r { background: var(--mboka-print-red) !important; }

body.ui-print #balance-due {
  color: #b45309 !important;
}

body.ui-print .microtext,
body.ui-print .mono {
  color: #334155 !important;
}

@media print {
  body.ui-print .sheet,
  body.ui-print .print-sheet,
  body.ui-print .receipt-sheet,
  body.ui-print .report-sheet,
  body.ui-print .statement-sheet,
  body.ui-print .dvi-sheet,
  body.ui-print .card,
  body.ui-print th,
  body.ui-print .totals .box,
  body.ui-print .badge,
  body.ui-print .pill,
  body.ui-print .chip {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}


/* v80 — FORCE VISIBLE COLOR PRINT RESTORE
   This layer is intentionally stronger than the older black-ink-safe print styling.
   Default print mode is COLOR. If the printer/browser is set to grayscale, the driver can still convert it.
   The page itself no longer flattens invoice/estimate/report documents to black and white. */
:root{
  --mboka-v80-blue:#0b4fb3;
  --mboka-v80-blue-dark:#082b63;
  --mboka-v80-blue-soft:#eaf2ff;
  --mboka-v80-blue-line:#6aa6ff;
  --mboka-v80-gold:#f59e0b;
  --mboka-v80-gold-soft:#fff4d6;
  --mboka-v80-green:#16a34a;
  --mboka-v80-green-soft:#e9fff2;
  --mboka-v80-red:#dc2626;
  --mboka-v80-red-soft:#fff1f2;
}

body.ui-print .sheet,
body.ui-print .print-sheet,
body.ui-print .receipt-sheet,
body.ui-print .report-sheet,
body.ui-print .statement-sheet,
body.ui-print .dvi-sheet{
  background:
    linear-gradient(180deg, rgba(234,242,255,.98) 0mm, rgba(255,255,255,.98) 42mm, rgba(255,255,255,.98) 100%) !important;
  color:#0b1220 !important;
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
  color-adjust:exact !important;
  forced-color-adjust:none !important;
}

body.ui-print .sheet::before,
body.ui-print .print-sheet::before,
body.ui-print .receipt-sheet::before,
body.ui-print .report-sheet::before,
body.ui-print .statement-sheet::before,
body.ui-print .dvi-sheet::before{
  opacity:.085 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}

body.ui-print h1,
body.ui-print h2,
body.ui-print .brand h1,
body.ui-print #inv-no,
body.ui-print #est-no,
body.ui-print #statement-no,
body.ui-print #grand,
body.ui-print #bal,
body.ui-print #balance-due{
  color:var(--mboka-v80-blue-dark) !important;
}

body.ui-print .brand,
body.ui-print .print-header,
body.ui-print .doc-meta{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
  color-adjust:exact !important;
  forced-color-adjust:none !important;
}

body.ui-print .brand img,
body.ui-print .logo,
body.ui-print img[src*="mboka_logo"]{
  background:#ffffff !important;
  border:2px solid var(--mboka-v80-blue-line) !important;
  border-radius:12px !important;
  box-shadow:0 0 0 4px rgba(11,79,179,.12) !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

body.ui-print .brand .muted,
body.ui-print #biz-name,
body.ui-print [data-biz="name"]{
  color:var(--mboka-v80-blue-dark) !important;
}
body.ui-print #biz-address,
body.ui-print #biz-phone,
body.ui-print [data-biz="address"],
body.ui-print [data-biz="phone"]{
  color:#334155 !important;
}

body.ui-print .kicker,
body.ui-print .section-title,
body.ui-print .lbl,
body.ui-print .meta-label,
body.ui-print .card > .kicker{
  color:var(--mboka-v80-blue) !important;
  font-weight:900 !important;
}

body.ui-print .card,
body.ui-print .meta-card,
body.ui-print .brand-card,
body.ui-print .note-box,
body.ui-print .totals .box,
body.ui-print .summary,
body.ui-print .summary-card,
body.ui-print .kpi,
body.ui-print .sig,
body.ui-print .date{
  background-color:rgba(255,255,255,.97) !important;
  border-color:var(--mboka-v80-blue-line) !important;
  box-shadow:0 4px 14px rgba(11,79,179,.08) !important;
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
  color-adjust:exact !important;
  forced-color-adjust:none !important;
}

body.ui-print .meta-grid .card:first-child,
body.ui-print .bill-to,
body.ui-print .customer-card{
  background:linear-gradient(180deg, #eaf2ff 0%, #ffffff 100%) !important;
  border-color:var(--mboka-v80-blue-line) !important;
}
body.ui-print .meta-grid .card:nth-child(2),
body.ui-print .details-card,
body.ui-print .doc-meta{
  background:linear-gradient(180deg, #fff4d6 0%, #ffffff 100%) !important;
  border-color:rgba(245,158,11,.75) !important;
}

body.ui-print table thead,
body.ui-print table th,
body.ui-print th{
  background:#0b4fb3 !important;
  background-image:linear-gradient(90deg, #0b4fb3 0%, #1769d6 100%) !important;
  color:#ffffff !important;
  border-color:#0b4fb3 !important;
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
  color-adjust:exact !important;
  forced-color-adjust:none !important;
}
body.ui-print td{
  border-bottom-color:rgba(11,79,179,.26) !important;
}

body.ui-print .totals .box:first-child,
body.ui-print .summary-card,
body.ui-print .summary{
  background:linear-gradient(180deg, #eaf2ff 0%, #ffffff 100%) !important;
  border-color:var(--mboka-v80-blue-line) !important;
}
body.ui-print .totals .box:nth-child(2),
body.ui-print .grand-total,
body.ui-print #notes-card,
body.ui-print #approval-notes-card{
  background:linear-gradient(180deg, #fff4d6 0%, #ffffff 100%) !important;
  border-color:rgba(245,158,11,.80) !important;
}
body.ui-print .totals .grand,
body.ui-print .sign-line,
body.ui-print .signature-line,
body.ui-print .footer{
  border-color:var(--mboka-v80-blue) !important;
}
body.ui-print .totals .line{
  border-bottom-color:rgba(11,79,179,.24) !important;
}

body.ui-print .doc-meta .badge,
body.ui-print .badge,
body.ui-print .pill,
body.ui-print .chip,
body.ui-print #inv-paid,
body.ui-print #est-status{
  background:#fff4d6 !important;
  border:2px solid var(--mboka-v80-gold) !important;
  color:#92400e !important;
  box-shadow:0 0 0 4px rgba(245,158,11,.14) !important;
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
  color-adjust:exact !important;
  forced-color-adjust:none !important;
}
body.ui-print #inv-paid.mboka-unpaid,
body.ui-print #est-status.mboka-pending,
body.ui-print .badge.bad,
body.ui-print .badge.unpaid,
body.ui-print .status-overdue,
body.ui-print .status-unpaid{
  background:#fff1f2 !important;
  border-color:#dc2626 !important;
  color:#991b1b !important;
  box-shadow:0 0 0 4px rgba(220,38,38,.14) !important;
}
body.ui-print #inv-paid.mboka-paid,
body.ui-print #est-status.mboka-approved,
body.ui-print .badge.good,
body.ui-print .badge.paid,
body.ui-print .badge.approved,
body.ui-print .status-paid,
body.ui-print .status-approved{
  background:#e9fff2 !important;
  border-color:#16a34a !important;
  color:#065f46 !important;
  box-shadow:0 0 0 4px rgba(22,163,74,.14) !important;
}
body.ui-print .badge.warn,
body.ui-print .badge.pending,
body.ui-print .status-due{
  background:#fff4d6 !important;
  border-color:#f59e0b !important;
  color:#92400e !important;
}

body.ui-print #payments-sum,
body.ui-print #subt,
body.ui-print #tax{
  color:#334155 !important;
}
body.ui-print #balance-due{
  color:#b91c1c !important;
}
body.ui-print .mono,
body.ui-print .microtext,
body.ui-print .footer{
  color:#0f3a78 !important;
}

body.ui-print .r,
body.ui-print .dot.r{ background:#dc2626 !important; }
body.ui-print .y,
body.ui-print .dot.y{ background:#f59e0b !important; }
body.ui-print .g,
body.ui-print .dot.g{ background:#16a34a !important; }

@media print{
  html, body, body.ui-print,
  body.ui-print * ,
  body.ui-print *::before,
  body.ui-print *::after{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    color-adjust:exact !important;
    forced-color-adjust:none !important;
  }

  body.ui-print .sheet,
  body.ui-print .print-sheet,
  body.ui-print .receipt-sheet,
  body.ui-print .report-sheet,
  body.ui-print .statement-sheet,
  body.ui-print .dvi-sheet{
    background:
      linear-gradient(180deg, rgba(234,242,255,.98) 0mm, rgba(255,255,255,.98) 42mm, rgba(255,255,255,.98) 100%) !important;
  }
}


/* v82 — FULL PRINT SYSTEM UNIFICATION
   Shared color-print layer for every Mboka print-capable section. */
:root{
  --mboka-v82-blue:#0b4fb3;
  --mboka-v82-blue-dark:#082b63;
  --mboka-v82-blue-soft:#eef5ff;
  --mboka-v82-blue-soft-2:#f7fbff;
  --mboka-v82-blue-line:#b9d3ff;
  --mboka-v82-green:#16a34a;
  --mboka-v82-green-soft:#ecfdf5;
  --mboka-v82-orange:#d97706;
  --mboka-v82-orange-soft:#fff7ed;
  --mboka-v82-red:#dc2626;
  --mboka-v82-red-soft:#fff1f2;
  --mboka-v82-shadow:0 14px 32px rgba(11,47,102,.08);
}
body.ui-print{background:#edf4ff!important;color:#0f172a!important}
body.ui-print .sheet,
body.ui-print .print-sheet,
body.ui-print .receipt-sheet,
body.ui-print .report-sheet,
body.ui-print .statement-sheet,
body.ui-print .dvi-sheet{
  background:linear-gradient(180deg, rgba(234,242,255,.82) 0mm, rgba(255,255,255,.985) 38mm, rgba(255,255,255,.985) 100%)!important;
}
body.ui-print .card,
body.ui-print .panel,
body.ui-print .item,
body.ui-print .box,
body.ui-print .stat,
body.ui-print .kpi,
body.ui-print .brand-card,
body.ui-print .meta-card,
body.ui-print .summary-card,
body.ui-print .dtc-detail,
body.ui-print .guidance-grid>div,
body.ui-print .mini-card,
body.ui-print .veh-inspection-panel,
body.ui-print .veh-inspection-item,
body.ui-print .veh-doc-meta,
body.ui-print .veh-doc-print,
body.ui-print .veh-print-sheet,
body.ui-print .doc,
body.ui-print .doc-meta{
  border-color:var(--mboka-v82-blue-line)!important;
  background:linear-gradient(180deg, rgba(245,249,255,.97), rgba(255,255,255,.99))!important;
  box-shadow:var(--mboka-v82-shadow)!important;
}
body.ui-print .doc,
body.ui-print .doc-meta,
body.ui-print .meta-card,
body.ui-print .hero > :last-child{
  background:linear-gradient(180deg, rgba(234,242,255,.96), rgba(255,255,255,.99))!important;
  border:1px solid var(--mboka-v82-blue-line)!important;
  border-radius:18px!important;
  padding:14px 16px!important;
}
body.ui-print .brand img,
body.ui-print .logo{
  border:1px solid var(--mboka-v82-blue-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 10px 20px rgba(11,79,179,.10)!important;
}
body.ui-print .kicker,
body.ui-print .section-title,
body.ui-print .lbl,
body.ui-print h3,
body.ui-print .t,
body.ui-print .title{color:var(--mboka-v82-blue-dark)!important}
body.ui-print h1,
body.ui-print h2,
body.ui-print .no,
body.ui-print #inv-no,
body.ui-print #est-no,
body.ui-print #bal,
body.ui-print #grand{color:var(--mboka-v82-blue-dark)!important}
body.ui-print table{background:rgba(255,255,255,.985)!important;border-color:var(--mboka-v82-blue-line)!important}
body.ui-print thead th,
body.ui-print th{
  background:linear-gradient(180deg, var(--mboka-v82-blue) 0%, var(--mboka-v82-blue-dark) 100%)!important;
  color:#fff!important;
  border-color:var(--mboka-v82-blue)!important;
}
body.ui-print td{border-bottom-color:rgba(11,79,179,.18)!important}
body.ui-print .footer,
body.ui-print .foot{border-top-color:rgba(11,79,179,.30)!important;color:#244a84!important}
body.ui-print .btn{border-color:var(--mboka-v82-blue-line)!important;background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(234,242,255,.94))!important;color:var(--mboka-v82-blue-dark)!important}
body.ui-print .badge,
body.ui-print .pill,
body.ui-print .chip,
body.ui-print .tag{
  background:var(--mboka-v82-orange-soft)!important;
  border:1.5px solid var(--mboka-v82-orange)!important;
  color:#9a3412!important;
}
body.ui-print .badge.good, body.ui-print .badge.paid, body.ui-print .badge.approved, body.ui-print .tag.ok, body.ui-print .status-paid{background:var(--mboka-v82-green-soft)!important;border-color:var(--mboka-v82-green)!important;color:#065f46!important}
body.ui-print .badge.warn, body.ui-print .badge.pending, body.ui-print .tag.warn, body.ui-print .status-due{background:var(--mboka-v82-orange-soft)!important;border-color:var(--mboka-v82-orange)!important;color:#9a3412!important}
body.ui-print .badge.bad, body.ui-print .badge.unpaid, body.ui-print .tag.bad, body.ui-print .status-overdue, body.ui-print .status-unpaid{background:var(--mboka-v82-red-soft)!important;border-color:var(--mboka-v82-red)!important;color:#991b1b!important}
body.ui-print .g, body.ui-print .dot.g{background:var(--mboka-v82-green)!important}
body.ui-print .y, body.ui-print .dot.y{background:var(--mboka-v82-orange)!important}
body.ui-print .r, body.ui-print .dot.r{background:var(--mboka-v82-red)!important}
body.ui-print .signature-canvas,
body.ui-print .photos img,
body.ui-print .veh-print-figure img,
body.ui-print .veh-print-figure video{border-color:var(--mboka-v82-blue-line)!important;border-radius:12px!important}
@media print{
  body.ui-print, body.ui-print * , body.ui-print *::before, body.ui-print *::after{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
    color-adjust:exact!important;
    forced-color-adjust:none!important;
  }
}


/* v83 — UNIFIED PREMIUM PRINT HEADER / FOOTER STRUCTURE
   Gives every formal print page one consistent Mboka document family layout. */
:root{
  --mboka-v83-blue:#0b4fb3;
  --mboka-v83-blue-dark:#082b63;
  --mboka-v83-blue-soft:#eef5ff;
  --mboka-v83-blue-line:#b9d3ff;
  --mboka-v83-gold:#f59e0b;
  --mboka-v83-gold-soft:#fff7ed;
  --mboka-v83-green:#16a34a;
  --mboka-v83-green-soft:#ecfdf5;
  --mboka-v83-red:#dc2626;
  --mboka-v83-red-soft:#fff1f2;
  --mboka-v83-shadow:0 14px 32px rgba(11,47,102,.08);
}

/* Shared page shell */
body.ui-print .sheet,
body.ui-print .print-sheet,
body.ui-print .receipt-sheet,
body.ui-print .report-sheet,
body.ui-print .statement-sheet,
body.ui-print .dvi-sheet{
  padding-top:14mm !important;
  padding-bottom:20mm !important;
  background:
    linear-gradient(180deg, rgba(234,242,255,.92) 0mm, rgba(255,255,255,.99) 40mm, rgba(255,255,255,.99) 100%) !important;
  color:#0f172a !important;
}

/* Shared header behavior across the different template names already used in the app */
body.ui-print .print-header,
body.ui-print header.between,
body.ui-print .topbar,
body.ui-print .report-sheet > header,
body.ui-print .statement-sheet > header,
body.ui-print .dvi-sheet > header,
body.ui-print .sheet > header{
  display:flex !important;
  align-items:stretch !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:0 0 14px 0 !important;
  margin:0 0 14px 0 !important;
  border-bottom:2px solid var(--mboka-v83-blue-line) !important;
}

/* Left brand block */
body.ui-print .brand,
body.ui-print .brand-card{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:1 1 55% !important;
  min-width:0 !important;
  border:1px solid var(--mboka-v83-blue-line) !important;
  border-radius:18px !important;
  padding:14px 16px !important;
  background:linear-gradient(180deg, rgba(234,242,255,.98), rgba(255,255,255,.99)) !important;
  box-shadow:var(--mboka-v83-shadow) !important;
}
body.ui-print .brand img,
body.ui-print .brand-card img,
body.ui-print .logo{
  width:46px !important;
  height:46px !important;
  object-fit:contain !important;
  border:1px solid var(--mboka-v83-blue-line) !important;
  border-radius:12px !important;
  background:#fff !important;
  padding:5px !important;
  box-shadow:0 10px 20px rgba(11,79,179,.10) !important;
}

/* Right document identity block */
body.ui-print .doc,
body.ui-print .doc-meta,
body.ui-print .meta-card,
body.ui-print header > .card[style*="text-align:right"],
body.ui-print header > div[style*="text-align:right"]{
  flex:0 0 285px !important;
  min-width:260px !important;
  text-align:right !important;
  border:1px solid var(--mboka-v83-blue-line) !important;
  border-radius:18px !important;
  padding:14px 16px !important;
  background:linear-gradient(180deg, rgba(255,247,237,.98), rgba(255,255,255,.99)) !important;
  box-shadow:var(--mboka-v83-shadow) !important;
}

/* Typography normalization */
body.ui-print .kicker,
body.ui-print .doc .title,
body.ui-print .doc-meta .title,
body.ui-print .brand-card .kicker,
body.ui-print .meta-card .kicker,
body.ui-print .section-title,
body.ui-print h3{
  color:var(--mboka-v83-blue-dark) !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
body.ui-print h1,
body.ui-print .brand h1,
body.ui-print .brand-card .title,
body.ui-print .doc .no,
body.ui-print #inv-no,
body.ui-print #est-no{
  color:var(--mboka-v83-blue-dark) !important;
  font-weight:900 !important;
}

/* Shared document cards and tables */
body.ui-print .card,
body.ui-print .panel,
body.ui-print .item,
body.ui-print .stat,
body.ui-print .kpi,
body.ui-print .summary-card,
body.ui-print .dtc-detail,
body.ui-print .guidance-grid > div,
body.ui-print .items,
body.ui-print .totals .box,
body.ui-print .hist.card{
  border-color:var(--mboka-v83-blue-line) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(247,251,255,.98), rgba(255,255,255,.99)) !important;
  box-shadow:var(--mboka-v83-shadow) !important;
}
body.ui-print table{
  border-color:var(--mboka-v83-blue-line) !important;
  background:rgba(255,255,255,.99) !important;
}
body.ui-print th,
body.ui-print thead th{
  background:linear-gradient(180deg, var(--mboka-v83-blue), var(--mboka-v83-blue-dark)) !important;
  color:#fff !important;
  border-color:var(--mboka-v83-blue) !important;
}
body.ui-print td{
  border-bottom-color:rgba(11,79,179,.20) !important;
}

/* Shared status colors */
body.ui-print .badge.paid,
body.ui-print .badge.good,
body.ui-print .badge.approved,
body.ui-print .status-paid,
body.ui-print .status-approved,
body.ui-print #inv-paid.mboka-paid,
body.ui-print #est-status.mboka-approved{
  background:var(--mboka-v83-green-soft) !important;
  border-color:var(--mboka-v83-green) !important;
  color:#065f46 !important;
}
body.ui-print .badge.partial,
body.ui-print .badge.warn,
body.ui-print .badge.pending,
body.ui-print .tag.warn,
body.ui-print .status-due,
body.ui-print #est-status.mboka-sent{
  background:var(--mboka-v83-gold-soft) !important;
  border-color:var(--mboka-v83-gold) !important;
  color:#92400e !important;
}
body.ui-print .badge.unpaid,
body.ui-print .badge.bad,
body.ui-print .status-unpaid,
body.ui-print .status-overdue,
body.ui-print #inv-paid.mboka-unpaid,
body.ui-print #est-status.mboka-pending{
  background:var(--mboka-v83-red-soft) !important;
  border-color:var(--mboka-v83-red) !important;
  color:#991b1b !important;
}

/* Shared footer / security strip */
body.ui-print .footer,
body.ui-print .foot{
  margin-top:14px !important;
  padding-top:10px !important;
  border-top:2px solid var(--mboka-v83-blue-line) !important;
  color:#244a84 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-end !important;
  gap:14px !important;
  font-size:10.5px !important;
}
body.ui-print .secure-line,
body.ui-print .microtext{
  border:1px dashed var(--mboka-v83-blue-line) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg, rgba(234,242,255,.78), rgba(255,255,255,.96)) !important;
  color:var(--mboka-v83-blue-dark) !important;
  padding:6px 8px !important;
}

/* Shared generated footer for print windows that do not already define one */
body.ui-print .sheet:not(:has(.footer)):not(:has(.foot))::after,
body.ui-print .print-sheet:not(:has(.footer)):not(:has(.foot))::after,
body.ui-print .report-sheet:not(:has(.footer)):not(:has(.foot))::after,
body.ui-print .statement-sheet:not(:has(.footer)):not(:has(.foot))::after,
body.ui-print .dvi-sheet:not(:has(.footer)):not(:has(.foot))::after{
  content:"Mboka Auto Repair • Official Print";
  display:block;
  margin-top:14px;
  padding-top:10px;
  border-top:2px solid var(--mboka-v83-blue-line);
  color:#244a84;
  font-size:10.5px;
  text-align:left;
}

/* Keep photos/videos true color */
body.ui-print img,
body.ui-print video,
body.ui-print canvas,
body.ui-print svg{
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}

@media print{
  body.ui-print .btnbar,
  body.ui-print .toolbar,
  body.ui-print .print-actions,
  body.ui-print .no-print{
    display:none !important;
  }
  body.ui-print,
  body.ui-print *,
  body.ui-print *::before,
  body.ui-print *::after{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    color-adjust:exact !important;
    forced-color-adjust:none !important;
  }
}


/* v95 — native browser print/save cleanup */
@media print{
  html, body{
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    overflow:visible !important;
  }
  .mb-doc-preview-backdrop,
  .mb-doc-preview-shell,
  .mb-doc-preview-head,
  .mb-doc-preview-foot,
  .mb-doc-send-panel,
  .mb-doc-preview-actions,
  .mb-doc-preview-btn,
  .no-print,
  .toolbar,
  .btnbar,
  .print-actions{
    display:none !important;
  }
  body.ui-print .sheet,
  body.ui-print .print-sheet,
  body.ui-print .receipt-sheet,
  body.ui-print .report-sheet,
  body.ui-print .statement-sheet,
  body.ui-print .dvi-sheet{
    box-shadow:none !important;
    overflow:visible !important;
    page-break-inside:avoid !important;
  }
  body.ui-print *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    color-adjust:exact !important;
  }
}

/* v96 — clean standalone print route */
@media print{
  .mb-doc-preview-backdrop,
  .mb-doc-preview-shell,
  .mb-doc-preview-head,
  .mb-doc-preview-body,
  .mb-doc-preview-foot,
  .mb-doc-send-panel,
  .mb-doc-preview-panel,
  .mb-doc-preview-actions,
  .mb-doc-preview-btn,
  .no-print,
  .toolbar,
  .btnbar,
  .print-actions{
    display:none !important;
  }
  body:not(.ui-print) .mb-doc-preview-backdrop{display:none!important}
  body.ui-print{
    background:#fff !important;
  }
  body.ui-print .sheet,
  body.ui-print .print-sheet,
  body.ui-print .receipt-sheet,
  body.ui-print .report-sheet,
  body.ui-print .statement-sheet,
  body.ui-print .dvi-sheet{
    margin:0 auto !important;
    box-shadow:none !important;
    transform:none !important;
    filter:none !important;
  }
}

/* ---- source: assets/css/announcements.css ---- */
/* ==========================================================
   Mboka Announcements — public customer banner + employee notice
   ========================================================== */
:root{
  --ann-red:#dc141c;
  --ann-red-dark:#89070e;
  --ann-red-deep:#4a0307;
  --ann-blue:#2563eb;
  --ann-blue-dark:#0f2763;
  --ann-amber:#f59e0b;
  --ann-amber-dark:#713f12;
  --ann-green:#10b981;
  --ann-green-dark:#064e3b;
}

/* Login page shell upgrade */
body.ui-auth.mboka-auth-upgrade{
  display:block !important;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(980px 520px at 74% 18%, rgba(37,99,235,.26), transparent 60%),
    radial-gradient(980px 520px at 8% 90%, rgba(14,165,233,.12), transparent 62%),
    linear-gradient(135deg, #050914 0%, #081226 46%, #020712 100%);
}
body.ui-auth.mboka-auth-upgrade::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,6,23,.82), rgba(2,6,23,.22), rgba(2,6,23,.88)),
    radial-gradient(700px 340px at 82% 58%, rgba(30,64,175,.18), transparent 68%);
  z-index:0;
}
.mboka-auth-screen{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.mboka-auth-hero{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(280px, 420px) minmax(320px, 520px) minmax(260px, 1fr);
  align-items:center;
  gap:44px;
  width:min(1420px, calc(100% - 56px));
  margin:0 auto;
  padding:58px 0 70px;
}
.mboka-auth-left{
  border-right:1px solid rgba(148,163,184,.24);
  padding:24px 44px 24px 0;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:34px;
}
.mboka-auth-logo-wrap{
  display:grid;
  justify-items:start;
  gap:16px;
}
.mboka-auth-logo{
  width:190px;
  height:180px;
  object-fit:contain;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.36));
}
.mboka-auth-brand-title{
  margin:0;
  color:#f8fbff;
  font-size:38px;
  line-height:.94;
  letter-spacing:.04em;
  font-weight:900;
  text-transform:uppercase;
}
.mboka-auth-brand-title span{
  display:block;
  color:#f22538;
  font-size:.63em;
  letter-spacing:.24em;
  margin-top:8px;
}
.mboka-auth-tagline{
  margin:0;
  color:#d9e6ff;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
}
.mboka-trust-list{
  display:grid;
  gap:22px;
}
.mboka-trust-item{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:14px;
  align-items:center;
}
.mboka-trust-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.34);
  background:rgba(2,6,23,.42);
  color:#3b82f6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.2);
}
.mboka-trust-item strong{
  display:block;
  color:#f8fbff;
  font-size:16px;
}
.mboka-trust-item span{
  display:block;
  color:#9fb3d9;
  margin-top:3px;
  font-size:13px;
}
.mboka-auth-card-panel{
  width:min(520px, 100%);
}
body.ui-auth .login-card.ui-premium-login.mboka-auth-card{
  width:100%;
  padding:34px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(180deg, rgba(15,23,42,.86), rgba(8,13,26,.92));
  box-shadow:0 32px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.mboka-login-shield{
  width:58px;
  height:58px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  color:#3b82f6;
  border-radius:20px;
  background:rgba(37,99,235,.12);
  border:1px solid rgba(59,130,246,.28);
}
body.ui-auth .mboka-auth-card h3{
  text-align:center;
  color:#f8fbff;
  font-size:28px;
  margin:0 0 8px !important;
}
body.ui-auth .mboka-auth-card .muted{
  color:#a7b7d6;
}
body.ui-auth .mboka-auth-card > .muted{
  text-align:center;
  font-size:15px;
  margin-bottom:28px !important;
}
body.ui-auth .mboka-auth-card .brand{ display:none !important; }
body.ui-auth .mboka-auth-card .form{
  gap:18px;
}
.mboka-field-shell label,
body.ui-auth .mboka-auth-card label{
  color:#f3f6ff;
  font-size:14px;
  font-weight:800;
}
.mboka-field-shell{
  display:grid;
  gap:8px;
}
.mboka-input-wrap{
  position:relative;
}
.mboka-input-wrap svg{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:#8ca3c9;
  pointer-events:none;
}
body.ui-auth .mboka-auth-card .input{
  min-height:58px;
  padding:15px 16px 15px 48px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(2,6,23,.26);
  color:#f8fbff;
  font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
body.ui-auth .mboka-auth-card .input:focus{
  border-color:rgba(59,130,246,.75);
  outline:3px solid rgba(59,130,246,.18);
}
.mboka-password-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#8ca3c9;
  width:38px;
  height:38px;
  border-radius:12px;
  cursor:pointer;
}
.mboka-password-toggle:hover{ background:rgba(255,255,255,.06); color:#e7eefc; }
.mboka-login-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:2px;
}
.mboka-login-row label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#d9e6ff !important;
  font-size:13px !important;
}
.mboka-login-row a{ color:#60a5fa; font-weight:800; font-size:13px; }
body.ui-auth .mboka-auth-card .btn.success{
  min-height:64px;
  margin-top:8px;
  border-radius:14px;
  font-size:18px;
  font-weight:900;
  background:linear-gradient(180deg, #2f7df3, #1d4ed8);
  border-color:#2563eb;
  box-shadow:0 18px 36px rgba(37,99,235,.32);
}
.mboka-auth-car-ghost{
  align-self:stretch;
  min-height:520px;
  border-radius:34px;
  border:1px solid rgba(148,163,184,.08);
  background:
    radial-gradient(420px 260px at 54% 55%, rgba(96,165,250,.22), transparent 68%),
    linear-gradient(135deg, rgba(15,23,42,.24), rgba(2,6,23,.64));
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.mboka-auth-car-ghost::before{
  content:"";
  position:absolute;
  inset:52px -130px 0 64px;
  border-radius:42% 10% 12% 42%;
  background:
    radial-gradient(160px 80px at 80% 46%, rgba(59,130,246,.35), transparent 42%),
    linear-gradient(180deg, rgba(15,23,42,.78), rgba(3,7,18,.94));
  border:1px solid rgba(148,163,184,.08);
  filter:drop-shadow(0 38px 48px rgba(0,0,0,.52));
  transform:skewX(-8deg);
}
.mboka-auth-car-ghost::after{
  content:"";
  position:absolute;
  right:40px;
  bottom:70px;
  width:330px;
  height:116px;
  border-radius:999px;
  border:22px solid rgba(15,23,42,.94);
  box-shadow:0 0 0 2px rgba(96,165,250,.16), inset 0 0 0 2px rgba(96,165,250,.12);
}
.mboka-auth-footer{
  border-top:1px solid rgba(148,163,184,.18);
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:0 max(28px, calc((100vw - 1420px)/2));
  color:#b7c7e6;
  background:rgba(2,6,23,.22);
}
.mboka-auth-footer a{ color:#dbeafe; font-weight:800; }
.mboka-auth-footer .footer-contact{ display:flex; gap:10px; align-items:center; }

/* Public customer announcement */
.mboka-customer-announcement-root{
  position:relative;
  z-index:3;
  width:100%;
}
.mboka-customer-announcement-root.is-hidden{ display:none; }
.mboka-customer-bulletin{
  --notice-accent:#dc141c;
  --notice-accent-2:#7f0710;
  width:100%;
  color:#fff;
  background:linear-gradient(180deg, var(--notice-accent), var(--notice-accent-2));
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:0 22px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.20);
}
.mboka-customer-bulletin[data-priority="info"]{ --notice-accent:#2563eb; --notice-accent-2:#123776; }
.mboka-customer-bulletin[data-priority="holiday"]{ --notice-accent:#1f8f64; --notice-accent-2:#065f46; }
.mboka-customer-bulletin[data-priority="maintenance"]{ --notice-accent:#db8510; --notice-accent-2:#7a3e08; }
.mboka-customer-bulletin[data-priority="urgent"]{ --notice-accent:#ef101c; --notice-accent-2:#70050a; }
.mboka-customer-bulletin-main{
  display:grid;
  grid-template-columns:310px 1fr 252px;
  align-items:center;
  min-height:118px;
  width:min(1680px, 100%);
  margin:0 auto;
}
.mboka-customer-bulletin-label{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 28px;
  border-right:1px solid rgba(255,255,255,.22);
  min-height:118px;
}
.mboka-customer-bulletin-icon{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 22px rgba(0,0,0,.2);
}
.mboka-customer-bulletin-icon svg{ width:42px; height:42px; }
.mboka-customer-bulletin-label strong{
  display:block;
  font-size:31px;
  line-height:1.02;
  letter-spacing:.02em;
  font-weight:950;
  text-transform:uppercase;
}
.mboka-customer-bulletin-copy{
  padding:16px 38px;
  min-width:0;
}
.mboka-customer-bulletin-title{
  font-size:36px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.035em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mboka-customer-bulletin-message{
  margin-top:10px;
  font-size:22px;
  line-height:1.28;
  font-weight:750;
  opacity:.96;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mboka-customer-bulletin-meta{
  display:grid;
  gap:12px;
  justify-items:start;
  padding:18px 24px;
  border-left:1px solid rgba(255,255,255,.22);
}
.mboka-customer-bulletin-priority{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.16);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.mboka-customer-bulletin-date{
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  font-size:15px;
  font-weight:850;
}
.mboka-customer-bulletin-ticker{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  height:52px;
  padding:0 28px;
  background:rgba(0,0,0,.88);
  border-top:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.mboka-customer-ticker-viewport{
  overflow:hidden;
  min-width:0;
}
.mboka-customer-ticker-track{
  display:inline-flex;
  align-items:center;
  gap:48px;
  white-space:nowrap;
  min-width:100%;
  animation:mbokaTicker 34s linear infinite;
}
.mboka-customer-ticker-track span{
  font-size:17px;
  color:#f8fbff;
}
.mboka-customer-ticker-track b{ color:#fff; }
.mboka-announcement-count{
  color:#f8fbff;
  font-size:13px;
  font-weight:850;
  white-space:nowrap;
}
.mboka-customer-announcement-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.mboka-announcement-nav-btn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.mboka-announcement-nav-btn:hover{ background:rgba(255,255,255,.16); }
@keyframes mbokaTicker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .mboka-customer-ticker-track{ animation:none; }
}

/* Formal employee notice */
.mboka-employee-announcement-root{
  padding:0 20px;
  background:rgba(15,23,42,.78);
  border-bottom:1px solid rgba(148,163,184,.16);
}
.mboka-employee-announcement-root.is-hidden{ display:none; }
.mboka-employee-notice{
  max-width:1380px;
  margin:12px auto;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:14px;
  padding:13px 15px;
  border:1px solid rgba(96,165,250,.24);
  border-radius:16px;
  color:#e7eefc;
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(8,13,26,.94));
  box-shadow:0 14px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.mboka-employee-notice[data-priority="urgent"],
.mboka-employee-notice[data-priority="important"]{ border-color:rgba(248,113,113,.38); }
.mboka-employee-notice[data-priority="maintenance"]{ border-color:rgba(245,158,11,.42); }
.mboka-employee-notice[data-priority="holiday"]{ border-color:rgba(16,185,129,.34); }
.mboka-employee-notice-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(59,130,246,.14);
  color:#93c5fd;
}
.mboka-employee-notice-main{ min-width:0; }
.mboka-employee-notice-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:#f8fbff;
  font-weight:900;
}
.mboka-employee-notice-copy{
  color:#b7c7e6;
  margin-top:3px;
  font-size:13px;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mboka-employee-notice-label{
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#dbeafe;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:950;
}
.mboka-employee-notice-meta{
  color:#9fb3d9;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

/* Announcement admin workspace */
.ann-shell{
  display:grid;
  grid-template-columns:minmax(340px, 430px) minmax(0, 1fr);
  gap:18px;
  max-width:1480px;
  margin:0 auto;
}
.ann-card{
  background:var(--card);
  border:1px solid var(--outline);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ann-card .ann-card-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  border-bottom:1px solid var(--outline);
}
.ann-card .ann-card-hd h3{ margin:0; }
.ann-card .ann-card-bd{ padding:20px; }
.ann-form-grid{ display:grid; gap:14px; }
.ann-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ann-check-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ann-check-row label{ display:flex; align-items:center; gap:8px; color:#dbeafe; font-weight:800; }
.ann-audience-grid,
.ann-priority-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:9px;
}
.ann-choice{
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.03);
  color:#e7eefc;
  border-radius:14px;
  padding:12px;
  cursor:pointer;
  text-align:left;
  display:grid;
  gap:5px;
}
.ann-choice strong{ display:block; font-size:13px; }
.ann-choice span{ display:block; color:#9fb3d9; font-size:11px; line-height:1.3; }
.ann-choice.is-active{
  border-color:rgba(59,130,246,.70);
  background:rgba(59,130,246,.13);
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.ann-char-row{ display:flex; justify-content:space-between; color:#9fb3d9; font-size:12px; }
.ann-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ann-list{ display:grid; gap:12px; }
.ann-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  padding:14px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.ann-item-title{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:#f8fbff; font-weight:900; }
.ann-item-copy{ margin-top:5px; color:#b7c7e6; font-size:13px; line-height:1.45; }
.ann-item-meta{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; color:#9fb3d9; font-size:12px; }
.ann-item-actions{ display:flex; align-items:start; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.ann-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  color:#dbeafe;
  background:rgba(255,255,255,.04);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.ann-pill.active{ color:#bbf7d0; border-color:rgba(34,197,94,.34); background:rgba(34,197,94,.10); }
.ann-pill.draft{ color:#fde68a; border-color:rgba(245,158,11,.34); background:rgba(245,158,11,.10); }
.ann-pill.expired{ color:#fecaca; border-color:rgba(239,68,68,.34); background:rgba(239,68,68,.10); }
.ann-preview-stack{ display:grid; gap:14px; }
.ann-preview-frame{
  border:1px solid rgba(148,163,184,.16);
  border-radius:18px;
  overflow:hidden;
  background:rgba(2,6,23,.36);
}
.ann-preview-caption{ padding:10px 14px; color:#9fb3d9; font-weight:900; border-bottom:1px solid rgba(148,163,184,.12); }
.ann-preview-frame .mboka-customer-bulletin-main{ grid-template-columns:220px 1fr 170px; min-height:86px; }
.ann-preview-frame .mboka-customer-bulletin-label{ min-height:86px; padding:12px; gap:10px; }
.ann-preview-frame .mboka-customer-bulletin-icon{ width:52px; height:52px; }
.ann-preview-frame .mboka-customer-bulletin-label strong{ font-size:20px; }
.ann-preview-frame .mboka-customer-bulletin-title{ font-size:24px; }
.ann-preview-frame .mboka-customer-bulletin-message{ font-size:15px; }
.ann-preview-frame .mboka-customer-bulletin-meta{ padding:12px; gap:8px; }
.ann-preview-frame .mboka-customer-bulletin-ticker{ height:40px; padding:0 14px; }
.ann-empty{
  padding:24px;
  text-align:center;
  color:#9fb3d9;
  border:1px dashed rgba(148,163,184,.22);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}
.ann-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:16px; }
.ann-kpi{
  border:1px solid rgba(148,163,184,.16);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.03);
}
.ann-kpi strong{ display:block; font-size:24px; color:#f8fbff; }
.ann-kpi span{ color:#9fb3d9; font-size:12px; }

@media(max-width:1200px){
  .mboka-auth-hero{ grid-template-columns:360px 1fr; }
  .mboka-auth-car-ghost{ display:none; }
  .mboka-customer-bulletin-main{ grid-template-columns:250px 1fr 210px; }
  .mboka-customer-bulletin-title{ font-size:28px; }
  .mboka-customer-bulletin-message{ font-size:18px; }
  .mboka-customer-bulletin-label strong{ font-size:25px; }
}
@media(max-width:980px){
  .mboka-auth-hero{ grid-template-columns:1fr; gap:24px; padding:28px 0 40px; }
  .mboka-auth-left{ min-height:auto; border-right:0; border-bottom:1px solid rgba(148,163,184,.18); padding:0 0 24px; align-items:center; text-align:center; }
  .mboka-auth-logo-wrap{ justify-items:center; }
  .mboka-trust-list{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; width:100%; }
  .mboka-trust-item{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .mboka-customer-bulletin-main{ grid-template-columns:1fr; }
  .mboka-customer-bulletin-label,
  .mboka-customer-bulletin-meta{ min-height:auto; border:0; border-bottom:1px solid rgba(255,255,255,.18); }
  .ann-shell{ grid-template-columns:1fr; }
  .ann-audience-grid,.ann-priority-grid{ grid-template-columns:1fr; }
}
@media(max-width:680px){
  .mboka-auth-hero{ width:min(100% - 28px, 520px); }
  .mboka-trust-list{ grid-template-columns:1fr; }
  .mboka-auth-brand-title{ font-size:30px; }
  body.ui-auth .login-card.ui-premium-login.mboka-auth-card{ padding:24px; }
  .mboka-auth-footer{ flex-direction:column; text-align:center; padding:18px; }
  .mboka-customer-bulletin-title{ font-size:22px; white-space:normal; }
  .mboka-customer-bulletin-message{ font-size:15px; white-space:normal; }
  .mboka-customer-bulletin-ticker{ grid-template-columns:1fr; height:auto; padding:12px; gap:8px; }
  .mboka-customer-announcement-controls{ display:none; }
  .mboka-employee-notice{ grid-template-columns:1fr; }
  .mboka-employee-notice-copy{ white-space:normal; }
  .ann-two,.ann-kpis{ grid-template-columns:1fr; }
  .ann-item{ grid-template-columns:1fr; }
}

/* Settings-controlled visibility + dismiss controls */
.mboka-announcement-close-btn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:24px;
  line-height:1;
  font-weight:900;
}
.mboka-announcement-close-btn:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-1px);
}
.mboka-announcement-close-btn.small{
  width:34px;
  height:34px;
  font-size:21px;
  color:#dbeafe;
  border-color:rgba(148,163,184,.22);
  background:rgba(255,255,255,.06);
}
.mboka-customer-bulletin[data-style="compact"] .mboka-customer-bulletin-main,
.mboka-customer-announcement-root.is-compact .mboka-customer-bulletin-main{
  min-height:74px;
  grid-template-columns:230px 1fr 210px;
}
.mboka-customer-bulletin[data-style="compact"] .mboka-customer-bulletin-label,
.mboka-customer-announcement-root.is-compact .mboka-customer-bulletin-label{
  min-height:74px;
  padding:12px 22px;
}
.mboka-customer-bulletin[data-style="compact"] .mboka-customer-bulletin-icon,
.mboka-customer-announcement-root.is-compact .mboka-customer-bulletin-icon{
  width:52px;
  height:52px;
}
.mboka-customer-bulletin[data-style="compact"] .mboka-customer-bulletin-label strong,
.mboka-customer-announcement-root.is-compact .mboka-customer-bulletin-label strong{
  font-size:22px;
}
.mboka-customer-bulletin[data-style="compact"] .mboka-customer-bulletin-title,
.mboka-customer-announcement-root.is-compact .mboka-customer-bulletin-title{
  font-size:24px;
}
.mboka-customer-bulletin[data-style="compact"] .mboka-customer-bulletin-message,
.mboka-customer-announcement-root.is-compact .mboka-customer-bulletin-message{
  font-size:16px;
  margin-top:5px;
}
.mboka-customer-bulletin[data-style="compact"] .mboka-customer-bulletin-ticker,
.mboka-customer-announcement-root.is-compact .mboka-customer-bulletin-ticker{
  height:42px;
}
.mboka-employee-notice[data-style="compact"],
.mboka-employee-announcement-root.is-compact .mboka-employee-notice{
  margin:8px auto;
  padding:9px 12px;
  border-radius:12px;
}
.mboka-employee-notice[data-style="compact"] .mboka-employee-notice-copy,
.mboka-employee-announcement-root.is-compact .mboka-employee-notice-copy{
  display:none;
}
@media(max-width:980px){
  .mboka-customer-bulletin[data-style="compact"] .mboka-customer-bulletin-main,
  .mboka-customer-announcement-root.is-compact .mboka-customer-bulletin-main{ grid-template-columns:1fr; }
}

/* Login page careers / application link upgrade */
.mboka-apply-card{
  margin-top:18px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid rgba(96,165,250,.26);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(37,99,235,.12), rgba(15,23,42,.46));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.22);
}
.mboka-apply-card-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#93c5fd;
  background:rgba(59,130,246,.16);
  border:1px solid rgba(96,165,250,.28);
  font-weight:950;
}
.mboka-apply-card strong{
  display:block;
  color:#f8fbff;
  font-size:14px;
  font-weight:950;
}
.mboka-apply-card span{
  display:block;
  color:#9fb3d9;
  font-size:12px;
  line-height:1.35;
  margin-top:2px;
}
.mboka-apply-card-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:12px;
  color:#ffffff !important;
  text-decoration:none;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
  background:linear-gradient(180deg, #2563eb, #1d4ed8);
  border:1px solid rgba(96,165,250,.48);
  box-shadow:0 12px 24px rgba(37,99,235,.28);
}
.mboka-apply-card-link:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(37,99,235,.35);
}
.mboka-auth-footer{
  flex-wrap:wrap;
  padding-left:max(28px, calc((100vw - 1420px)/2));
  padding-right:max(118px, calc((100vw - 1420px)/2));
}
.mboka-auth-footer-careers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.26);
  background:rgba(37,99,235,.10);
  color:#dbeafe !important;
  text-decoration:none;
  font-weight:950 !important;
  white-space:nowrap;
}
.mboka-auth-footer-careers:hover{
  background:rgba(37,99,235,.18);
  border-color:rgba(96,165,250,.44);
}
@media(max-width:680px){
  .mboka-apply-card{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .mboka-auth-footer{ padding-right:18px; }
}


/* ==========================================================
   Compact premium login + right-side vehicle image upgrade
   - Keeps top space available for customer announcements
   - Removes footer career crowding
   - Replaces empty right panel with actual vehicle photo
   ========================================================== */
body.ui-auth.mboka-auth-upgrade{
  background:
    radial-gradient(880px 480px at 76% 12%, rgba(37,99,235,.24), transparent 60%),
    radial-gradient(760px 430px at 8% 88%, rgba(14,165,233,.11), transparent 62%),
    linear-gradient(135deg, #040814 0%, #081225 48%, #020711 100%);
}
.mboka-auth-screen{
  min-height:100vh;
}
.mboka-auth-hero{
  grid-template-columns:minmax(260px, 390px) minmax(330px, 470px) minmax(320px, 430px);
  gap:40px;
  width:min(1390px, calc(100% - 56px));
  padding:72px 0 52px;
  align-items:center;
}
.mboka-customer-announcement-root:not(.is-hidden) + .mboka-auth-hero{
  padding-top:30px;
}
.mboka-auth-left{
  min-height:455px;
  padding:18px 38px 18px 0;
  gap:26px;
}
.mboka-auth-logo{
  width:160px;
  height:150px;
}
.mboka-auth-brand-title{
  font-size:33px;
}
.mboka-auth-tagline{
  font-size:11px;
}
.mboka-trust-list{
  gap:18px;
}
.mboka-trust-item{
  grid-template-columns:48px 1fr;
  gap:13px;
}
.mboka-trust-icon{
  width:48px;
  height:48px;
}
.mboka-trust-item strong{
  font-size:15px;
}
.mboka-trust-item span{
  font-size:12px;
}
.mboka-auth-card-panel{
  width:100%;
  max-width:470px;
}
body.ui-auth .login-card.ui-premium-login.mboka-auth-card{
  padding:28px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(8,13,26,.94));
}
.mboka-login-shield{
  width:48px;
  height:48px;
  margin-bottom:10px;
  border-radius:17px;
}
body.ui-auth .mboka-auth-card h3{
  font-size:25px;
  margin-bottom:6px !important;
}
body.ui-auth .mboka-auth-card > .muted{
  font-size:14px;
  margin-bottom:20px !important;
}
body.ui-auth .mboka-auth-card .form{
  gap:14px;
}
.mboka-field-shell{
  gap:7px;
}
.mboka-field-shell label,
body.ui-auth .mboka-auth-card label{
  font-size:13px;
}
body.ui-auth .mboka-auth-card .input{
  min-height:50px;
  padding-top:12px;
  padding-bottom:12px;
  border-radius:13px;
  font-size:14px;
}
.mboka-login-row{
  margin-top:0;
}
.mboka-login-row label,
.mboka-login-row a{
  font-size:12px !important;
}
body.ui-auth .mboka-auth-card .btn.success{
  min-height:54px;
  margin-top:4px;
  border-radius:14px;
  font-size:16px;
}
.mboka-apply-card{
  margin-top:12px;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
}
.mboka-apply-card-icon{
  width:32px;
  height:32px;
  border-radius:11px;
}
.mboka-apply-card strong{
  font-size:13px;
}
.mboka-apply-card span{
  font-size:11px;
}
.mboka-apply-card-link{
  min-height:34px;
  padding:0 12px;
  border-radius:10px;
  font-size:11px;
}
.mboka-auth-car-ghost{
  display:block;
  align-self:center;
  min-height:590px;
  height:min(68vh, 640px);
  border-radius:34px;
  border:1px solid rgba(96,165,250,.14);
  background:
    linear-gradient(90deg, rgba(2,6,23,.10), rgba(2,6,23,.50)),
    radial-gradient(420px 300px at 70% 48%, rgba(37,99,235,.18), transparent 70%),
    url("../img/login_car_panel.png") center center / cover no-repeat;
  box-shadow:
    0 30px 75px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
  position:relative;
}
.mboka-auth-car-ghost::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(2,6,23,.10), rgba(2,6,23,.24) 42%, rgba(2,6,23,.68)),
    radial-gradient(260px 120px at 78% 46%, rgba(96,165,250,.20), transparent 64%);
  border:0;
  filter:none;
  transform:none;
  pointer-events:none;
}
.mboka-auth-car-ghost::after{
  content:"";
  position:absolute;
  inset:18px;
  width:auto;
  height:auto;
  right:18px;
  bottom:18px;
  border-radius:28px;
  border:1px solid rgba(148,163,184,.12);
  box-shadow:inset 0 0 80px rgba(2,6,23,.38);
  pointer-events:none;
}
.mboka-auth-footer{
  min-height:72px;
  padding-left:max(28px, calc((100vw - 1390px)/2));
  padding-right:max(106px, calc((100vw - 1390px)/2));
  gap:18px;
}
.mboka-auth-footer-careers{
  display:none !important;
}
@media(max-width:1240px){
  .mboka-auth-hero{
    grid-template-columns:minmax(250px, 340px) minmax(330px, 460px) minmax(280px, 370px);
    gap:28px;
  }
  .mboka-auth-car-ghost{
    min-height:520px;
    height:min(64vh, 580px);
  }
}
@media(max-width:1080px){
  .mboka-auth-hero{
    grid-template-columns:320px minmax(330px, 470px);
    justify-content:center;
  }
  .mboka-auth-car-ghost{
    display:none;
  }
}
@media(max-width:980px){
  .mboka-auth-hero{
    width:min(100% - 32px, 560px);
    grid-template-columns:1fr;
    padding:28px 0 36px;
  }
  .mboka-customer-announcement-root:not(.is-hidden) + .mboka-auth-hero{
    padding-top:22px;
  }
  .mboka-auth-left{
    min-height:auto;
    padding:0 0 20px;
    gap:20px;
  }
  .mboka-auth-logo{
    width:132px;
    height:124px;
  }
  .mboka-auth-card-panel{
    max-width:none;
  }
}
@media(max-width:680px){
  body.ui-auth .login-card.ui-premium-login.mboka-auth-card{
    padding:22px;
  }
  .mboka-apply-card{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .mboka-auth-footer{
    min-height:auto;
    padding:16px 18px 20px;
  }
}

/* ==========================================================
   Seamless blended vehicle background upgrade
   - Removes the separate-card feeling from the right car area
   - Keeps the right grid space, but paints the vehicle into the
     full page background with soft fade edges
   - Leaves clean top breathing room for customer announcements
   ========================================================== */
body.ui-auth.mboka-auth-upgrade{
  background:
    radial-gradient(900px 500px at 78% 16%, rgba(37,99,235,.22), transparent 62%),
    radial-gradient(760px 430px at 8% 86%, rgba(14,165,233,.11), transparent 62%),
    linear-gradient(135deg, #040814 0%, #081225 48%, #020711 100%);
}
body.ui-auth.mboka-auth-upgrade .mboka-auth-screen{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
body.ui-auth.mboka-auth-upgrade .mboka-auth-screen::before{
  content:"";
  position:absolute;
  top:0;
  right:-3vw;
  bottom:0;
  width:min(58vw, 860px);
  z-index:-2;
  background:
    linear-gradient(90deg, #040814 0%, rgba(4,8,20,.88) 9%, rgba(4,8,20,.42) 30%, rgba(4,8,20,.10) 68%, rgba(4,8,20,.64) 100%),
    linear-gradient(180deg, rgba(4,8,20,.92) 0%, rgba(4,8,20,.16) 19%, rgba(4,8,20,.08) 58%, rgba(4,8,20,.84) 100%),
    radial-gradient(430px 270px at 66% 52%, rgba(59,130,246,.20), transparent 70%),
    url("../img/login_car_panel.png") center right / cover no-repeat;
  opacity:.98;
  filter:saturate(1.08) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 7%, #000 24%, #000 86%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 7%, #000 24%, #000 86%, transparent 100%);
}
body.ui-auth.mboka-auth-upgrade .mboka-auth-screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(720px 360px at 73% 49%, rgba(37,99,235,.13), transparent 70%),
    linear-gradient(90deg, rgba(4,8,20,0) 0%, rgba(4,8,20,.13) 52%, rgba(4,8,20,.42) 100%);
}
body.ui-auth.mboka-auth-upgrade .mboka-auth-car-ghost{
  display:block;
  align-self:stretch;
  min-height:560px;
  height:auto;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
  pointer-events:none;
}
body.ui-auth.mboka-auth-upgrade .mboka-auth-car-ghost::before,
body.ui-auth.mboka-auth-upgrade .mboka-auth-car-ghost::after{
  display:none !important;
  content:none !important;
}
body.ui-auth.mboka-auth-upgrade .mboka-auth-left,
body.ui-auth.mboka-auth-upgrade .mboka-auth-card-panel,
body.ui-auth.mboka-auth-upgrade .mboka-auth-footer,
body.ui-auth.mboka-auth-upgrade .mboka-customer-announcement-root{
  position:relative;
  z-index:1;
}
body.ui-auth.mboka-auth-upgrade .mboka-auth-hero{
  position:relative;
  z-index:1;
}
@media(max-width:1240px){
  body.ui-auth.mboka-auth-upgrade .mboka-auth-screen::before{
    right:-6vw;
    width:min(55vw, 720px);
    opacity:.86;
  }
  body.ui-auth.mboka-auth-upgrade .mboka-auth-car-ghost{
    min-height:500px;
  }
}
@media(max-width:1080px){
  body.ui-auth.mboka-auth-upgrade .mboka-auth-screen::before{
    opacity:.18;
    width:100vw;
    right:-30vw;
    filter:saturate(.9) contrast(.95) blur(.2px);
  }
  body.ui-auth.mboka-auth-upgrade .mboka-auth-car-ghost{
    display:none !important;
  }
}
@media(max-width:680px){
  body.ui-auth.mboka-auth-upgrade .mboka-auth-screen::before{
    opacity:.10;
    right:-48vw;
    width:130vw;
  }
}

/* ==========================================================
   Announcement page fit repair — prevents clipping/overflow
   ========================================================== */
body.page-announcements,
body.page-announcements .main,
body.page-announcements .content{
  min-width:0 !important;
}
body.page-announcements .content{
  overflow-x:hidden !important;
  padding:clamp(12px, 1.6vw, 24px) !important;
}
body.page-announcements .header{
  gap:12px;
  flex-wrap:wrap;
}
body.page-announcements .header .left,
body.page-announcements .header .right{
  min-width:0;
}
body.page-announcements .header .left{
  flex:1 1 340px;
}
body.page-announcements .header .right{
  flex:0 1 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}
body.page-announcements .header .left .muted{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
body.page-announcements .ann-shell{
  width:100%;
  max-width:1460px;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:18px;
  align-items:start;
}
@media (min-width:1320px){
  body.page-announcements .ann-shell{
    grid-template-columns:minmax(420px, 520px) minmax(0, 1fr);
  }
}
body.page-announcements .ann-card,
body.page-announcements .ann-card-bd,
body.page-announcements .ann-form-grid,
body.page-announcements .fld,
body.page-announcements .ann-preview-stack,
body.page-announcements .ann-preview-frame,
body.page-announcements .ann-list{
  min-width:0 !important;
  max-width:100%;
  box-sizing:border-box;
}
body.page-announcements .ann-card{
  overflow:hidden;
}
body.page-announcements .ann-card .ann-card-hd{
  flex-wrap:wrap;
  align-items:flex-start;
  padding:clamp(14px, 1.6vw, 20px);
}
body.page-announcements .ann-card .ann-card-hd h3{
  font-size:clamp(22px, 2.2vw, 34px);
  line-height:1.08;
  word-break:normal;
}
body.page-announcements .ann-card .ann-card-bd{
  padding:clamp(14px, 1.6vw, 20px);
}
body.page-announcements .input,
body.page-announcements select,
body.page-announcements textarea{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
body.page-announcements textarea.input{
  resize:vertical;
  min-height:112px;
  line-height:1.4;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
body.page-announcements .hint,
body.page-announcements .ann-char-row,
body.page-announcements .ann-choice span,
body.page-announcements .ann-choice strong,
body.page-announcements .ann-item-copy,
body.page-announcements .ann-item-title{
  overflow-wrap:anywhere;
}
body.page-announcements .ann-audience-grid,
body.page-announcements .ann-priority-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important;
  gap:10px;
}
body.page-announcements .ann-priority-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
}
body.page-announcements .ann-choice{
  min-width:0;
  min-height:92px;
  padding:12px 14px;
}
body.page-announcements .ann-choice strong{
  font-size:clamp(14px, 1vw, 17px);
}
body.page-announcements .ann-choice span{
  font-size:clamp(12px, .9vw, 14px);
}
body.page-announcements .ann-two{
  grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
}
body.page-announcements .ann-check-row{
  gap:12px 18px;
}
body.page-announcements .ann-check-row label{
  min-width:0;
  max-width:100%;
  flex:1 1 220px;
  line-height:1.35;
}
body.page-announcements .ann-check-row input{
  flex:0 0 auto;
}
body.page-announcements .ann-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap:12px;
  justify-content:stretch;
}
body.page-announcements .ann-actions .btn{
  width:100%;
  min-width:0;
  white-space:normal;
  min-height:52px;
  font-weight:900;
}
body.page-announcements .ann-preview-frame .mboka-customer-bulletin-main{
  grid-template-columns:minmax(150px, 220px) minmax(0, 1fr) minmax(120px, 170px);
}
body.page-announcements .ann-preview-frame .mboka-customer-bulletin-title,
body.page-announcements .ann-preview-frame .mboka-customer-bulletin-message{
  white-space:normal;
  overflow-wrap:anywhere;
}
body.page-announcements .ann-item{
  grid-template-columns:minmax(0, 1fr);
}
body.page-announcements .ann-item-actions{
  justify-content:flex-start;
}
body.page-announcements .ann-kpis{
  grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  margin-bottom:0;
}
@media (max-width:760px){
  body.page-announcements .content{
    padding:10px !important;
  }
  body.page-announcements .ann-card{
    border-radius:16px;
  }
  body.page-announcements .ann-card .ann-card-hd,
  body.page-announcements .ann-card .ann-card-bd{
    padding:14px;
  }
  body.page-announcements .ann-audience-grid,
  body.page-announcements .ann-priority-grid{
    grid-template-columns:1fr !important;
  }
  body.page-announcements .ann-choice{
    min-height:auto;
  }
  body.page-announcements .ann-check-row{
    flex-direction:column;
    align-items:stretch;
  }
  body.page-announcements .ann-check-row label{
    flex:0 0 auto;
  }
  body.page-announcements .ann-preview-frame .mboka-customer-bulletin-main{
    grid-template-columns:1fr !important;
  }
}

/* ==========================================================
   Professional announcement emoji/event picker
   ========================================================== */
.mboka-announcement-emoji{
  display:inline-grid;
  place-items:center;
  width:1.25em;
  height:1.25em;
  font-size:1.18em;
  line-height:1;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
}
.mboka-customer-bulletin-icon .mboka-announcement-emoji{
  width:100%;
  height:100%;
  font-size:42px;
}
.mboka-ticker-main-icon .mboka-announcement-emoji{
  width:24px;
  height:24px;
  font-size:20px;
}
.mboka-ticker-emoji{
  display:inline-block;
  margin-right:4px;
}
.mboka-employee-notice-icon .mboka-announcement-emoji{
  width:100%;
  height:100%;
  font-size:20px;
}
body.page-announcements .ann-emoji-field{
  border:1px solid rgba(96,165,250,.18);
  border-radius:18px;
  padding:14px;
  background:linear-gradient(180deg, rgba(37,99,235,.08), rgba(15,23,42,.18));
}
body.page-announcements .ann-emoji-toolbar{
  display:grid;
  grid-template-columns:auto minmax(180px, 1fr) auto auto auto;
  gap:10px;
  align-items:center;
}
body.page-announcements .ann-emoji-current{
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(96,165,250,.30);
  background:rgba(37,99,235,.14);
  color:#f8fbff;
  cursor:pointer;
  font-weight:900;
  white-space:nowrap;
}
body.page-announcements .ann-emoji-current span{
  font-size:24px;
  line-height:1;
}
body.page-announcements .ann-emoji-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
body.page-announcements .ann-emoji-tab{
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.035);
  color:#b7c7e6;
  padding:8px 11px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
}
body.page-announcements .ann-emoji-tab:hover,
body.page-announcements .ann-emoji-tab.is-active{
  color:#f8fbff;
  border-color:rgba(59,130,246,.62);
  background:rgba(59,130,246,.16);
}
body.page-announcements .ann-emoji-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(42px, 1fr));
  gap:8px;
  max-height:210px;
  overflow:auto;
  padding:12px;
  margin-top:12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(2,6,23,.25);
}
body.page-announcements .ann-emoji-btn{
  min-width:0;
  height:42px;
  border-radius:13px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
body.page-announcements .ann-emoji-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(96,165,250,.58);
  background:rgba(59,130,246,.14);
}
body.page-announcements .ann-emoji-btn.is-active{
  border-color:rgba(59,130,246,.82);
  background:rgba(59,130,246,.20);
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
body.page-announcements .ann-item-emoji{
  display:inline-grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:10px;
  background:rgba(59,130,246,.12);
  border:1px solid rgba(96,165,250,.22);
  font-size:16px;
}
body.page-announcements .ann-empty.small{
  grid-column:1/-1;
  padding:14px;
}
@media(max-width:1180px){
  body.page-announcements .ann-emoji-toolbar{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:680px){
  body.page-announcements .ann-emoji-toolbar{
    grid-template-columns:1fr;
  }
  body.page-announcements .ann-emoji-current,
  body.page-announcements .ann-emoji-toolbar .btn{
    width:100%;
    justify-content:center;
  }
  body.page-announcements .ann-emoji-grid{
    max-height:240px;
    grid-template-columns:repeat(auto-fill, minmax(40px, 1fr));
  }
}

/* ==========================================================
   Announcement emoji picker + independent workspace scroll fix
   ========================================================== */
body.page-announcements .content{
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
  min-height:0 !important;
}
body.page-announcements .ann-shell{
  flex:1 1 auto;
  min-height:0 !important;
  height:100%;
  align-items:stretch;
}
body.page-announcements .ann-shell > .ann-card:first-child{
  min-height:0;
  max-height:100%;
  display:flex;
  flex-direction:column;
}
body.page-announcements .ann-shell > .ann-card:first-child > .ann-card-hd{
  flex:0 0 auto;
}
body.page-announcements .ann-shell > .ann-card:first-child > .ann-card-bd{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
body.page-announcements .ann-side-stack{
  min-height:0;
  max-height:100%;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  align-content:start;
  padding-right:4px;
}
body.page-announcements .ann-emoji-toolbar{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:10px;
  align-items:stretch;
}
body.page-announcements .ann-emoji-current{
  grid-column:1/-1;
  width:100%;
  justify-content:center;
  min-width:0;
}
body.page-announcements .ann-emoji-toolbar .btn{
  width:100%;
  min-width:0;
  min-height:44px;
  white-space:normal;
  line-height:1.15;
  text-align:center;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body.page-announcements #btnAnnEmojiClear{
  border-color:rgba(239,68,68,.38);
  background:linear-gradient(180deg, rgba(239,68,68,.20), rgba(127,29,29,.28));
}
body.page-announcements .ann-emoji-grid{
  max-height:174px;
}
body.page-announcements .ann-emoji-field .hint{
  font-size:12px;
  line-height:1.35;
}
@media (max-width:980px){
  body.page-announcements .content{
    overflow:auto !important;
    display:block;
  }
  body.page-announcements .ann-shell{
    height:auto;
    min-height:auto !important;
  }
  body.page-announcements .ann-shell > .ann-card:first-child,
  body.page-announcements .ann-side-stack{
    max-height:none;
    overflow:visible;
  }
  body.page-announcements .ann-shell > .ann-card:first-child > .ann-card-bd{
    overflow:visible;
  }
}
@media (max-width:560px){
  body.page-announcements .ann-emoji-toolbar{
    grid-template-columns:1fr !important;
  }
  body.page-announcements .ann-emoji-current,
  body.page-announcements .ann-emoji-toolbar .btn{
    grid-column:auto;
  }
}


/* ==========================================================
   Live Preview ticker visibility fix
   - Customer preview shows the full banner and ticker clearly
   - Removes the extra legal-safe badge from the preview header
   ========================================================== */
body.page-announcements .ann-card .ann-card-hd .ann-pill:empty{
  display:none !important;
}
body.page-announcements #annCustomerPreview{
  width:100%;
  min-width:0;
  overflow:visible;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin{
  border-radius:0 0 16px 16px;
  overflow:hidden;
  box-shadow:none;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-main{
  grid-template-columns:minmax(150px, 22%) minmax(0, 1fr) minmax(145px, 21%) !important;
  min-height:108px !important;
  align-items:stretch;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-label{
  min-height:108px !important;
  padding:14px 16px !important;
  gap:12px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-icon{
  width:58px !important;
  height:58px !important;
  flex:0 0 auto;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-icon .mboka-announcement-emoji{
  font-size:38px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-label strong{
  font-size:clamp(18px, 1.55vw, 28px) !important;
  line-height:1.05 !important;
  white-space:normal !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:14px 20px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-title{
  font-size:clamp(22px, 2.1vw, 34px) !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-message{
  font-size:clamp(14px, 1.1vw, 18px) !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-meta{
  min-width:0;
  justify-content:center;
  padding:14px 14px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-priority{
  font-size:clamp(12px, 1.05vw, 18px) !important;
  white-space:nowrap;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-date{
  font-size:clamp(12px, .95vw, 16px) !important;
  line-height:1.2;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-ticker{
  height:auto !important;
  min-height:58px !important;
  grid-template-columns:40px minmax(0,1fr) minmax(70px, auto) !important;
  padding:8px 18px !important;
  gap:14px !important;
  overflow:hidden !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-ticker-viewport{
  min-height:40px;
  display:flex;
  align-items:center;
}
body.page-announcements #annCustomerPreview .mboka-customer-ticker-track{
  display:inline-flex !important;
  align-items:center !important;
  gap:42px !important;
  line-height:1.25 !important;
  padding:2px 0;
}
body.page-announcements #annCustomerPreview .mboka-customer-ticker-track span{
  font-size:clamp(14px, 1.15vw, 18px) !important;
  line-height:1.35 !important;
  white-space:nowrap !important;
}
body.page-announcements #annCustomerPreview .mboka-ticker-main-icon{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
}
body.page-announcements #annCustomerPreview .mboka-ticker-main-icon .mboka-announcement-emoji{
  font-size:28px !important;
  width:36px;
  height:36px;
}
body.page-announcements #annCustomerPreview .mboka-customer-announcement-controls{
  min-width:0;
  justify-content:flex-end;
}
body.page-announcements #annCustomerPreview .mboka-announcement-count{
  font-size:clamp(12px, 1vw, 16px) !important;
}
@media (max-width:760px){
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-main{
    grid-template-columns:1fr !important;
  }
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-label,
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-meta{
    min-height:auto !important;
  }
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-title,
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-message{
    white-space:normal !important;
  }
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-ticker{
    grid-template-columns:36px 1fr !important;
  }
  body.page-announcements #annCustomerPreview .mboka-customer-announcement-controls{
    display:none !important;
  }
}

/* ==========================================================
   Right preview workspace polish
   - Removes any preview header badge/note
   - Gives the right side its own parent scroll
   - Keeps customer/employee preview cards from clipping
   ========================================================== */
body.page-announcements .ann-side-stack{
  position:relative;
  min-height:0 !important;
  height:100% !important;
  max-height:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:6px;
  scroll-behavior:smooth;
}
body.page-announcements .ann-side-stack .ann-card{
  min-width:0;
  overflow:hidden;
}
body.page-announcements .ann-side-stack .ann-card .ann-card-hd{
  align-items:center;
}
body.page-announcements .ann-side-stack .ann-card .ann-card-hd > .ann-pill,
body.page-announcements .ann-side-stack .ann-card .ann-card-hd > .badge,
body.page-announcements .ann-side-stack .ann-card .ann-card-hd > span:not(.muted){
  display:none !important;
}
body.page-announcements .ann-preview-frame{
  overflow:hidden !important;
}
body.page-announcements .ann-preview-frame .mboka-customer-announcement-root,
body.page-announcements .ann-preview-frame .mboka-customer-bulletin{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
body.page-announcements .ann-preview-frame .mboka-customer-bulletin-copy,
body.page-announcements .ann-preview-frame .mboka-customer-bulletin-label,
body.page-announcements .ann-preview-frame .mboka-customer-bulletin-meta{
  min-width:0 !important;
}
body.page-announcements .ann-preview-frame .mboka-customer-bulletin-title,
body.page-announcements .ann-preview-frame .mboka-customer-bulletin-message{
  word-break:normal !important;
  overflow-wrap:normal !important;
}
body.page-announcements .mboka-employee-announcement-root{
  max-width:100%;
  overflow:hidden;
}
@media (max-width:980px){
  body.page-announcements .ann-side-stack{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding-right:0;
  }
}

/* ==========================================================
   Live Preview overflow repair — July 2026
   - Makes the right preview column scroll independently
   - Prevents customer banner text from overlapping
   - Scales the admin preview so it fits the parent panel cleanly
   ========================================================== */
@media (min-width:981px){
  body.page-announcements .main{
    height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  body.page-announcements .content{
    flex:1 1 0 !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
  }
  body.page-announcements .ann-shell{
    height:calc(100dvh - 104px) !important;
    max-height:calc(100dvh - 104px) !important;
    min-height:0 !important;
    overflow:hidden !important;
    align-items:stretch !important;
  }
  body.page-announcements .ann-shell > .ann-card:first-child,
  body.page-announcements .ann-side-stack{
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
  }
  body.page-announcements .ann-side-stack{
    display:grid !important;
    grid-auto-rows:max-content !important;
    align-content:start !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:8px !important;
    overscroll-behavior:contain !important;
    scrollbar-gutter:stable both-edges;
  }
  body.page-announcements .ann-side-stack > .ann-card:first-of-type{
    display:flex !important;
    flex-direction:column !important;
    max-height:min(720px, calc(100dvh - 140px)) !important;
    min-height:0 !important;
  }
  body.page-announcements .ann-side-stack > .ann-card:first-of-type > .ann-card-hd{
    flex:0 0 auto !important;
  }
  body.page-announcements .ann-side-stack > .ann-card:first-of-type > .ann-card-bd{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    scrollbar-gutter:stable;
  }
}

body.page-announcements #annCustomerPreview,
body.page-announcements #annCustomerPreview *{
  box-sizing:border-box !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  border-radius:0 0 16px 16px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-main{
  display:grid !important;
  grid-template-columns:minmax(132px, 22%) minmax(0, 1fr) minmax(116px, 172px) !important;
  min-height:94px !important;
  align-items:stretch !important;
  overflow:hidden !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-label{
  min-width:0 !important;
  min-height:94px !important;
  padding:12px 14px !important;
  gap:10px !important;
  overflow:hidden !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-icon{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  flex:0 0 48px !important;
  border-radius:13px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-icon .mboka-announcement-emoji{
  font-size:30px !important;
  width:38px !important;
  height:38px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-label strong{
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  font-size:clamp(13px, 1.15vw, 20px) !important;
  line-height:1.04 !important;
  letter-spacing:.01em !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-copy{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  padding:12px 16px !important;
  justify-content:center !important;
  border-left:1px solid rgba(255,255,255,.18) !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-title{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  font-size:clamp(15px, 1.55vw, 23px) !important;
  line-height:1.08 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-message{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-top:6px !important;
  font-size:clamp(11px, .95vw, 15px) !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-meta{
  min-width:0 !important;
  max-width:100% !important;
  padding:12px 10px !important;
  gap:8px !important;
  overflow:hidden !important;
  align-content:center !important;
  justify-items:stretch !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-priority{
  width:100% !important;
  max-width:100% !important;
  justify-content:center !important;
  padding:8px 9px !important;
  border-radius:10px !important;
  font-size:clamp(10px, .9vw, 14px) !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-priority svg{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-date{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:22px minmax(0,1fr) !important;
  align-items:center !important;
  gap:7px !important;
  font-size:clamp(10px, .78vw, 12px) !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  overflow:hidden !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-date svg{
  width:22px !important;
  height:22px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-ticker{
  min-height:44px !important;
  height:44px !important;
  grid-template-columns:30px minmax(0,1fr) minmax(62px, auto) !important;
  padding:6px 12px !important;
  gap:10px !important;
  overflow:hidden !important;
}
body.page-announcements #annCustomerPreview .mboka-ticker-main-icon,
body.page-announcements #annCustomerPreview .mboka-ticker-main-icon .mboka-announcement-emoji{
  width:28px !important;
  height:28px !important;
  font-size:22px !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-ticker-viewport{
  min-height:28px !important;
  min-width:0 !important;
  overflow:hidden !important;
}
body.page-announcements #annCustomerPreview .mboka-customer-ticker-track span{
  font-size:12px !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
}
body.page-announcements #annCustomerPreview .mboka-announcement-count{
  font-size:11px !important;
}

@media (max-width:760px){
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-main{
    grid-template-columns:1fr !important;
  }
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-copy{
    border-left:0 !important;
    border-top:1px solid rgba(255,255,255,.16) !important;
  }
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-title,
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-message{
    white-space:normal !important;
  }
}

/* ==========================================================
   Customer login banner publish fix
   - Ensures active customer announcements render at the very top
   - Keeps the hero below the announcement instead of covering it
   ========================================================== */
body.ui-auth.mboka-auth-upgrade .mboka-customer-announcement-root{
  flex:0 0 auto;
  width:100%;
  max-width:100%;
  position:relative;
  z-index:30;
  pointer-events:auto;
}
body.ui-auth.mboka-auth-upgrade .mboka-customer-announcement-root.is-hidden{
  display:none !important;
}
body.ui-auth.mboka-auth-upgrade .mboka-customer-announcement-root:not(.is-hidden){
  display:block !important;
}
body.ui-auth.mboka-auth-upgrade .mboka-customer-announcement-root:not(.is-hidden) + .mboka-auth-hero{
  flex:1 1 auto;
  padding-top:26px !important;
}
body.ui-auth.mboka-auth-upgrade .mboka-customer-announcement-root .mboka-customer-bulletin{
  position:relative;
  z-index:31;
}
@media(max-width:980px){
  body.ui-auth.mboka-auth-upgrade .mboka-customer-announcement-root:not(.is-hidden) + .mboka-auth-hero{
    padding-top:18px !important;
  }
}


/* ==========================================================
   Customer announcement header hard display fix
   - makes active customer notices visible on login immediately
   - keeps banner above the blended car background
   ========================================================== */
body.ui-auth.mboka-auth-upgrade .mboka-auth-screen{
  align-items:stretch !important;
  justify-content:flex-start !important;
  overflow-y:auto !important;
}
body.ui-auth.mboka-auth-upgrade #mbokaCustomerAnnouncementRoot.mboka-customer-announcement-root{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:14px clamp(18px, 2.8vw, 44px) 0;
  position:relative;
  z-index:999 !important;
}
body.ui-auth.mboka-auth-upgrade #mbokaCustomerAnnouncementRoot.mboka-customer-announcement-root.is-hidden{
  display:none !important;
  padding:0 !important;
}
body.ui-auth.mboka-auth-upgrade #mbokaCustomerAnnouncementRoot .mboka-customer-bulletin{
  width:min(1560px, 100%);
  margin:0 auto;
  position:relative;
  z-index:1000 !important;
  box-shadow:0 22px 60px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.16) inset;
}
body.ui-auth.mboka-auth-upgrade #mbokaCustomerAnnouncementRoot:not(.is-hidden) + .mboka-auth-hero{
  padding-top:30px !important;
}
@media(max-width:760px){
  body.ui-auth.mboka-auth-upgrade #mbokaCustomerAnnouncementRoot.mboka-customer-announcement-root{ padding:10px 12px 0; }
  body.ui-auth.mboka-auth-upgrade #mbokaCustomerAnnouncementRoot:not(.is-hidden) + .mboka-auth-hero{ padding-top:18px !important; }
}

/* ==========================================================
   Branded announcement action buttons + delete confirmation
   - Removes browser confirm popup
   - Keeps Delete/Pause/Edit/Duplicate visually consistent
   - Ensures delete also clears public login banner cache via JS
   ========================================================== */
body.page-announcements .ann-icon-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:104px;
  min-height:42px;
  white-space:nowrap;
}
body.page-announcements .ann-action-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  stroke-width:2.15;
}
body.page-announcements .ann-item-actions .btn.warn .ann-action-icon,
body.page-announcements .ann-item-actions .btn.danger .ann-action-icon,
body.page-announcements .ann-item-actions .btn.success .ann-action-icon{
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.20));
}
.ann-confirm-lock{
  overflow:hidden !important;
}
.ann-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(1,6,18,.72);
  backdrop-filter:blur(12px);
}
.ann-confirm-overlay.is-open{
  display:grid;
}
.ann-confirm-card{
  width:min(560px, 100%);
  display:grid;
  grid-template-columns:72px 1fr;
  gap:18px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.22);
  background:
    radial-gradient(420px 200px at 84% 0%, rgba(239,68,68,.18), transparent 64%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(7,12,24,.98));
  box-shadow:0 34px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06);
  color:#eaf2ff;
}
.ann-confirm-icon{
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  color:#fecaca;
  background:linear-gradient(180deg, rgba(239,68,68,.22), rgba(127,29,29,.34));
  border:1px solid rgba(248,113,113,.28);
  box-shadow:0 16px 36px rgba(127,29,29,.26), inset 0 1px 0 rgba(255,255,255,.08);
}
.ann-confirm-icon .ann-action-icon{
  width:30px;
  height:30px;
}
.ann-confirm-body h4{
  margin:0;
  color:#f8fbff;
  font-size:26px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.02em;
}
.ann-confirm-body p{
  margin:10px 0 0;
  color:#b7c7e6;
  font-size:14px;
  line-height:1.45;
}
.ann-confirm-meta{
  margin-top:14px;
  padding:11px 12px;
  border-radius:14px;
  color:#dbeafe;
  background:rgba(2,6,23,.42);
  border:1px solid rgba(148,163,184,.16);
  font-weight:850;
  overflow-wrap:anywhere;
}
.ann-confirm-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding-top:8px;
}
.ann-confirm-actions .btn{
  min-width:150px;
  min-height:48px;
  font-weight:950;
  border-radius:14px;
}
.ann-confirm-actions .btn.danger{
  background:linear-gradient(180deg, #ef4444, #b91c1c) !important;
  border-color:rgba(248,113,113,.48) !important;
  color:#fff !important;
  box-shadow:0 16px 30px rgba(185,28,28,.28);
}
@media(max-width:640px){
  .ann-confirm-card{
    grid-template-columns:1fr;
    justify-items:start;
    padding:18px;
  }
  .ann-confirm-actions{
    width:100%;
    flex-direction:column-reverse;
  }
  .ann-confirm-actions .btn{
    width:100%;
  }
  body.page-announcements .ann-icon-btn{
    min-width:0;
    flex:1 1 140px;
  }
}

/* Business Footer Settings Upgrade */
body.ui-auth.mboka-auth-upgrade .mboka-auth-footer.mboka-business-footer{
  min-height:86px;
  display:grid !important;
  grid-template-columns:minmax(260px, 1fr) minmax(260px, .9fr) minmax(360px, 1.25fr);
  align-items:center;
  gap:22px;
  padding-left:max(30px, calc((100vw - 1440px)/2));
  padding-right:max(116px, calc((100vw - 1440px)/2));
  border-top:1px solid rgba(148,163,184,.16);
  background:
    linear-gradient(180deg, rgba(3,7,18,.20), rgba(2,6,23,.50)),
    radial-gradient(circle at 82% 0%, rgba(37,99,235,.10), transparent 34%);
  color:#dbeafe;
  font-size:15px;
  font-weight:780;
  letter-spacing:.01em;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
body.ui-auth.mboka-auth-upgrade .mboka-footer-copy{
  color:#c9d8f5;
  font-weight:800;
  white-space:normal;
}
body.ui-auth.mboka-auth-upgrade .mboka-footer-slogan{
  color:#dbeafe;
  text-align:center;
  font-weight:900;
  letter-spacing:.015em;
  text-shadow:0 12px 28px rgba(96,165,250,.10);
}
body.ui-auth.mboka-auth-upgrade .mboka-footer-contact{
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:7px;
  color:#d7e6ff;
  font-weight:850;
  min-width:0;
}
body.ui-auth.mboka-auth-upgrade .mboka-footer-address,
body.ui-auth.mboka-auth-upgrade .mboka-footer-phones{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  max-width:100%;
  line-height:1.25;
}
body.ui-auth.mboka-auth-upgrade .mboka-footer-address span:last-child,
body.ui-auth.mboka-auth-upgrade .mboka-footer-phones span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.ui-auth.mboka-auth-upgrade .mboka-footer-icon{
  display:inline-flex;
  width:22px;
  min-width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#93c5fd;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(96,165,250,.16);
  font-size:13px;
}
body.ui-auth.mboka-auth-upgrade .mboka-footer-sep{ color:rgba(191,219,254,.48); padding:0 6px; }
body.ui-auth.mboka-auth-upgrade .mboka-business-footer[data-footer-style="compact"]{
  min-height:64px;
  font-size:13px;
  gap:12px;
}
body.ui-auth.mboka-auth-upgrade .mboka-business-footer[data-footer-style="standard"]{
  min-height:76px;
  font-weight:700;
}
@media(max-width:1120px){
  body.ui-auth.mboka-auth-upgrade .mboka-auth-footer.mboka-business-footer{
    grid-template-columns:1fr;
    text-align:center;
    padding:18px 96px 18px 24px;
    gap:9px;
  }
  body.ui-auth.mboka-auth-upgrade .mboka-footer-contact{ align-items:center; }
  body.ui-auth.mboka-auth-upgrade .mboka-footer-address,
  body.ui-auth.mboka-auth-upgrade .mboka-footer-phones{ justify-content:center; }
}
@media(max-width:680px){
  body.ui-auth.mboka-auth-upgrade .mboka-auth-footer.mboka-business-footer{
    padding:16px 18px 88px 18px;
    font-size:13px;
  }
  body.ui-auth.mboka-auth-upgrade .mboka-footer-contact{ gap:9px; }
  body.ui-auth.mboka-auth-upgrade .mboka-footer-address,
  body.ui-auth.mboka-auth-upgrade .mboka-footer-phones{ flex-wrap:wrap; }
}

/* ==========================================================
   Login Service Strip Upgrade
   - Adds Diagnostics • Repairs • Maintenance on the left brand area
   - Keeps the login card and blended car background exactly in place
   - Values are controlled from Settings -> Business Footer
   ========================================================== */
body.ui-auth.mboka-auth-upgrade .mboka-login-service-strip{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:10px 16px;
  margin-top:-8px;
  border-radius:11px;
  border:1px solid rgba(96,165,250,.38);
  background:
    linear-gradient(180deg, rgba(30,64,175,.96), rgba(18,52,128,.92)),
    radial-gradient(circle at 15% 0%, rgba(147,197,253,.22), transparent 42%);
  color:#eff6ff;
  box-shadow:
    0 16px 34px rgba(2,6,23,.30),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.18);
  font-weight:900;
  font-size:14px;
  letter-spacing:.02em;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  line-height:1;
}
body.ui-auth.mboka-auth-upgrade .mboka-login-service-strip[hidden],
body.ui-auth.mboka-auth-upgrade .mboka-login-service-strip.is-hidden{
  display:none !important;
}
body.ui-auth.mboka-auth-upgrade .mboka-login-service-strip span{
  white-space:nowrap;
}
body.ui-auth.mboka-auth-upgrade .mboka-login-service-strip i{
  color:#bfdbfe;
  font-style:normal;
  opacity:.92;
  font-weight:900;
}
body.ui-auth.mboka-auth-upgrade .mboka-login-service-strip[data-service-style="standard"]{
  background:rgba(15,23,42,.78);
  border-color:rgba(96,165,250,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
body.ui-auth.mboka-auth-upgrade .mboka-login-service-strip[data-service-style="compact"]{
  padding:8px 12px;
  gap:9px;
  font-size:12px;
  border-radius:999px;
}
@media(max-width:980px){
  body.ui-auth.mboka-auth-upgrade .mboka-login-service-strip{
    margin:0 auto;
    justify-content:center;
    flex-wrap:wrap;
  }
}
@media(max-width:520px){
  body.ui-auth.mboka-auth-upgrade .mboka-login-service-strip{
    width:100%;
    gap:8px;
    padding:10px 12px;
    font-size:12px;
  }
}


/* v69 — Create Announcement moved into New Announcement modal */
body.page-announcements.ann-modal-open{
  overflow:hidden !important;
}
body.page-announcements .ann-shell{
  grid-template-columns:1fr !important;
  max-width:1480px !important;
}
body.page-announcements .ann-shell > .ann-card:first-child{
  min-height:unset !important;
  max-height:none !important;
}
body.page-announcements .ann-side-stack{
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
}
@media (min-width:981px){
  body.page-announcements .ann-shell{
    height:calc(100dvh - 104px) !important;
    max-height:calc(100dvh - 104px) !important;
  }
  body.page-announcements .ann-side-stack{
    height:100% !important;
    max-height:100% !important;
    overflow-y:auto !important;
  }
}
body.page-announcements .ann-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:2147482000 !important;
  display:grid !important;
  place-items:center !important;
  padding:24px !important;
}
body.page-announcements .ann-modal[hidden]{
  display:none !important;
}
body.page-announcements .ann-modal-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(2,6,23,.68) !important;
  backdrop-filter:blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(120%) !important;
}
body.page-announcements .ann-modal-panel{
  position:relative !important;
  z-index:1 !important;
  width:min(760px, calc(100vw - 36px)) !important;
  max-height:min(900px, calc(100dvh - 36px)) !important;
  display:flex !important;
  min-height:0 !important;
  animation:annModalRise .16s ease-out both;
}
@keyframes annModalRise{
  from{opacity:0; transform:translateY(12px) scale(.985);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
body.page-announcements .ann-modal-panel .ann-form-card{
  width:100% !important;
  max-height:inherit !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  border-color:rgba(96,165,250,.24) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.page-announcements .ann-modal-panel .ann-form-card > .ann-card-hd{
  flex:0 0 auto !important;
  padding:16px 18px !important;
}
body.page-announcements .ann-modal-panel .ann-form-card > .ann-card-bd{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable !important;
  padding:18px !important;
}
body.page-announcements .ann-modal-head-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}
body.page-announcements .ann-modal-close,
body.page-announcements .ann-modal-cancel{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(148,163,184,.22) !important;
}
body.page-announcements .ann-form-card .ann-actions{
  position:sticky !important;
  bottom:-18px !important;
  margin:10px -18px -18px !important;
  padding:14px 18px !important;
  background:linear-gradient(180deg, rgba(7,13,26,.82), rgba(7,13,26,.98)) !important;
  border-top:1px solid rgba(148,163,184,.12) !important;
  z-index:3 !important;
}
body.page-announcements .ann-form-card .ann-emoji-grid{
  max-height:148px !important;
}
body.page-announcements #btnAnnNew{
  background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color:#f8fbff !important;
  border-color:rgba(96,165,250,.34) !important;
  box-shadow:0 18px 38px rgba(37,99,235,.24), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
@media (max-width:760px){
  body.page-announcements .ann-modal{
    padding:12px !important;
    place-items:stretch !important;
  }
  body.page-announcements .ann-modal-panel{
    width:100% !important;
    max-height:calc(100dvh - 24px) !important;
  }
  body.page-announcements .ann-modal-head-actions{
    flex-direction:column !important;
    align-items:flex-end !important;
  }
  body.page-announcements .ann-form-card .ann-actions .btn{
    flex:1 1 100% !important;
  }
}


/* v70 — Announcement Priority Design Studio */
body.page-announcements .ann-design-studio{
  padding:14px !important;
  border:1px solid rgba(96,165,250,.20) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(10,20,40,.72), rgba(7,15,31,.78)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body.page-announcements .ann-design-title{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:12px !important;
}
body.page-announcements .ann-design-title strong{
  color:#f3f7ff !important;
  font-size:15px !important;
  font-weight:950 !important;
}
body.page-announcements .ann-design-title span{
  color:#9fb3d9 !important;
  font-size:12px !important;
  line-height:1.3 !important;
  font-weight:750 !important;
  text-align:right !important;
  max-width:260px !important;
}
body.page-announcements .ann-design-studio > .lbl{
  margin-top:12px !important;
}
body.page-announcements .ann-design-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:9px !important;
}
body.page-announcements .ann-design-choice{
  min-height:82px !important;
  padding:11px !important;
  border-radius:15px !important;
}
body.page-announcements .ann-design-choice strong{
  font-size:12.5px !important;
}
body.page-announcements .ann-design-choice span:not(.ann-color-dot){
  font-size:10.5px !important;
}
body.page-announcements .ann-color-style-grid{
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
}
body.page-announcements .ann-color-dot{
  display:inline-block !important;
  width:20px !important;
  height:20px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.05) !important;
}
body.page-announcements .ann-color-dot.red{background:linear-gradient(135deg,#ef4444,#991b1b);}
body.page-announcements .ann-color-dot.blue{background:linear-gradient(135deg,#38bdf8,#1d4ed8);}
body.page-announcements .ann-color-dot.green{background:linear-gradient(135deg,#22c55e,#047857);}
body.page-announcements .ann-color-dot.orange{background:linear-gradient(135deg,#f97316,#b45309);}
body.page-announcements .ann-color-dot.purple{background:linear-gradient(135deg,#a855f7,#6d28d9);}
body.page-announcements .ann-color-dot.gold{background:linear-gradient(135deg,#facc15,#b45309);}
body.page-announcements .ann-color-dot.dark{background:linear-gradient(135deg,#334155,#020617);}

@media (max-width:760px){
  body.page-announcements .ann-design-grid,
  body.page-announcements .ann-color-style-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  body.page-announcements .ann-design-title{
    flex-direction:column !important;
  }
  body.page-announcements .ann-design-title span{
    text-align:left !important;
    max-width:none !important;
  }
}

/* Shared color tokens for customer and employee announcement previews/live banners */
.mboka-customer-bulletin[data-color="red"],
.mboka-employee-notice[data-color="red"]{
  --ann-main:#dc2626; --ann-deep:#450a0a; --ann-mid:#991b1b; --ann-soft:rgba(239,68,68,.18); --ann-border:rgba(248,113,113,.42); --ann-text:#fff7f7;
}
.mboka-customer-bulletin[data-color="blue"],
.mboka-employee-notice[data-color="blue"]{
  --ann-main:#2563eb; --ann-deep:#081a4a; --ann-mid:#1e40af; --ann-soft:rgba(59,130,246,.18); --ann-border:rgba(96,165,250,.42); --ann-text:#f5f9ff;
}
.mboka-customer-bulletin[data-color="green"],
.mboka-employee-notice[data-color="green"]{
  --ann-main:#059669; --ann-deep:#042f2e; --ann-mid:#047857; --ann-soft:rgba(16,185,129,.18); --ann-border:rgba(52,211,153,.42); --ann-text:#f0fdf4;
}
.mboka-customer-bulletin[data-color="orange"],
.mboka-employee-notice[data-color="orange"]{
  --ann-main:#f97316; --ann-deep:#431407; --ann-mid:#b45309; --ann-soft:rgba(251,146,60,.18); --ann-border:rgba(251,146,60,.42); --ann-text:#fff7ed;
}
.mboka-customer-bulletin[data-color="purple"],
.mboka-employee-notice[data-color="purple"]{
  --ann-main:#8b5cf6; --ann-deep:#2e1065; --ann-mid:#6d28d9; --ann-soft:rgba(168,85,247,.18); --ann-border:rgba(196,181,253,.42); --ann-text:#faf5ff;
}
.mboka-customer-bulletin[data-color="gold"],
.mboka-employee-notice[data-color="gold"]{
  --ann-main:#eab308; --ann-deep:#422006; --ann-mid:#b45309; --ann-soft:rgba(250,204,21,.20); --ann-border:rgba(253,224,71,.44); --ann-text:#fffbeb;
}
.mboka-customer-bulletin[data-color="dark"],
.mboka-employee-notice[data-color="dark"]{
  --ann-main:#334155; --ann-deep:#020617; --ann-mid:#0f172a; --ann-soft:rgba(148,163,184,.12); --ann-border:rgba(148,163,184,.34); --ann-text:#f8fafc;
}

.mboka-customer-bulletin[data-banner="solid"] .mboka-customer-bulletin-main,
.mboka-customer-bulletin[data-banner="solid"] .mboka-customer-bulletin-ticker{
  background:var(--ann-main) !important;
  color:var(--ann-text) !important;
}
.mboka-customer-bulletin[data-banner="gradient"] .mboka-customer-bulletin-main,
.mboka-customer-bulletin[data-banner="gradient"] .mboka-customer-bulletin-ticker{
  background:linear-gradient(135deg, var(--ann-main), var(--ann-mid) 52%, var(--ann-deep)) !important;
  color:var(--ann-text) !important;
}
.mboka-customer-bulletin[data-banner="soft"]{
  border-color:var(--ann-border) !important;
  box-shadow:0 20px 50px var(--ann-soft), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.mboka-customer-bulletin[data-banner="soft"] .mboka-customer-bulletin-main,
.mboka-customer-bulletin[data-banner="soft"] .mboka-customer-bulletin-ticker{
  background:linear-gradient(135deg, rgba(15,23,42,.96), var(--ann-soft)) !important;
}
.mboka-customer-bulletin[data-banner="border"]{
  border:2px solid var(--ann-border) !important;
}
.mboka-customer-bulletin[data-banner="border"] .mboka-customer-bulletin-main,
.mboka-customer-bulletin[data-banner="border"] .mboka-customer-bulletin-ticker{
  background:linear-gradient(180deg, rgba(7,13,26,.98), rgba(5,10,20,.98)) !important;
}
.mboka-customer-bulletin[data-banner="urgent"]{
  border-color:rgba(248,113,113,.70) !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.18), 0 24px 60px rgba(127,29,29,.35) !important;
}
.mboka-customer-bulletin[data-banner="urgent"] .mboka-customer-bulletin-main,
.mboka-customer-bulletin[data-banner="urgent"] .mboka-customer-bulletin-ticker{
  background:linear-gradient(135deg, #991b1b, #dc2626 45%, #7f1d1d) !important;
}

.mboka-employee-notice[data-banner="solid"]{
  background:var(--ann-main) !important;
  border-color:var(--ann-border) !important;
  color:var(--ann-text) !important;
}
.mboka-employee-notice[data-banner="gradient"]{
  background:linear-gradient(135deg, var(--ann-main), var(--ann-mid), var(--ann-deep)) !important;
  border-color:var(--ann-border) !important;
  color:var(--ann-text) !important;
}
.mboka-employee-notice[data-banner="soft"]{
  background:linear-gradient(135deg, rgba(15,23,42,.96), var(--ann-soft)) !important;
  border-color:var(--ann-border) !important;
}
.mboka-employee-notice[data-banner="border"]{
  background:rgba(7,13,26,.96) !important;
  border:2px solid var(--ann-border) !important;
}
.mboka-employee-notice[data-banner="urgent"]{
  background:linear-gradient(135deg, #450a0a, #991b1b, #7f1d1d) !important;
  border-color:rgba(248,113,113,.70) !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.18), 0 18px 44px rgba(127,29,29,.25) !important;
}

.mboka-customer-bulletin[data-text="bold"] .mboka-customer-bulletin-title,
.mboka-customer-bulletin[data-text="bold"] .mboka-customer-bulletin-message,
.mboka-employee-notice[data-text="bold"] .mboka-employee-notice-line,
.mboka-employee-notice[data-text="bold"] .mboka-employee-notice-copy{font-weight:950 !important;}
.mboka-customer-bulletin[data-text="uppercase"] .mboka-customer-bulletin-title,
.mboka-customer-bulletin[data-text="uppercase"] .mboka-customer-bulletin-message,
.mboka-employee-notice[data-text="uppercase"] .mboka-employee-notice-line,
.mboka-employee-notice[data-text="uppercase"] .mboka-employee-notice-copy{
  text-transform:uppercase !important;
  letter-spacing:.035em !important;
}
.mboka-customer-bulletin[data-text="large"] .mboka-customer-bulletin-title{font-size:clamp(26px, 2.6vw, 42px) !important;}
.mboka-customer-bulletin[data-text="large"] .mboka-customer-bulletin-message{font-size:clamp(16px, 1.35vw, 22px) !important;}
.mboka-employee-notice[data-text="large"] .mboka-employee-notice-line{font-size:18px !important;}
.mboka-employee-notice[data-text="large"] .mboka-employee-notice-copy{font-size:15px !important;}
.mboka-customer-bulletin[data-text="formal"] .mboka-customer-bulletin-title,
.mboka-employee-notice[data-text="formal"] .mboka-employee-notice-line{
  letter-spacing:.01em !important;
  font-weight:850 !important;
}
.mboka-customer-bulletin[data-text="soft"] .mboka-customer-bulletin-title,
.mboka-customer-bulletin[data-text="soft"] .mboka-customer-bulletin-message,
.mboka-employee-notice[data-text="soft"] .mboka-employee-notice-line,
.mboka-employee-notice[data-text="soft"] .mboka-employee-notice-copy{
  font-weight:750 !important;
  opacity:.92 !important;
}


/* v71 — Live announcement page inside New Announcement modal */
body.page-announcements .ann-modal-panel-v71{
  width:min(1380px, calc(100vw - 32px)) !important;
  max-height:min(930px, calc(100dvh - 32px)) !important;
}
body.page-announcements .ann-modal-workspace-v71{
  position:relative !important;
  z-index:1 !important;
  display:grid !important;
  grid-template-columns:minmax(500px, 0.92fr) minmax(420px, 1.08fr) !important;
  gap:16px !important;
  width:100% !important;
  max-height:inherit !important;
  min-height:0 !important;
}
body.page-announcements .ann-modal-workspace-v71 > .ann-card{
  min-height:0 !important;
  max-height:inherit !important;
}
body.page-announcements .ann-modal-workspace-v71 .ann-form-card{
  display:flex !important;
  flex-direction:column !important;
}
body.page-announcements .ann-modal-preview-card-v71{
  display:flex !important;
  flex-direction:column !important;
  border-color:rgba(96,165,250,.24) !important;
  background:linear-gradient(180deg, rgba(10,20,40,.96), rgba(7,13,26,.98)) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.page-announcements .ann-modal-preview-card-v71 > .ann-card-hd{
  flex:0 0 auto !important;
  padding:16px 18px !important;
}
body.page-announcements .ann-modal-preview-card-v71 > .ann-card-hd h3{
  font-size:24px !important;
  line-height:1.1 !important;
}
body.page-announcements .ann-modal-preview-body-v71{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:18px !important;
  display:grid !important;
  gap:14px !important;
  align-content:start !important;
  scrollbar-gutter:stable !important;
}
body.page-announcements .ann-modal-preview-frame-v71{
  border-color:rgba(96,165,250,.22) !important;
  background:rgba(2,6,23,.28) !important;
}
body.page-announcements #annModalCustomerPreview,
body.page-announcements #annModalEmployeePreview{
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin{
  width:100% !important;
  max-width:100% !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-main{
  grid-template-columns:minmax(118px, 20%) minmax(0,1fr) minmax(118px, 20%) !important;
  min-height:96px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-label{
  min-height:96px !important;
  padding:12px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-icon{
  width:48px !important;
  height:48px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-title{
  font-size:clamp(20px, 1.9vw, 30px) !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-message{
  font-size:clamp(13px, 1.05vw, 17px) !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-meta{
  padding:12px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-priority,
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-date{
  font-size:12px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-ticker{
  min-height:46px !important;
  padding:7px 14px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-ticker-track span{
  font-size:13px !important;
}
body.page-announcements .ann-next-page-v71{
  border:1px solid rgba(34,197,94,.24) !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(5,34,30,.76), rgba(8,19,38,.88)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 34px rgba(0,0,0,.20) !important;
  overflow:hidden !important;
}
body.page-announcements .ann-next-page-head-v71{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:15px 16px !important;
  border-bottom:1px solid rgba(34,197,94,.18) !important;
}
body.page-announcements .ann-next-page-head-v71 strong{
  color:#ecfdf5 !important;
  font-size:18px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
}
body.page-announcements .ann-next-page-head-v71 span{
  color:#a7f3d0 !important;
  font-size:12px !important;
  font-weight:850 !important;
  text-align:right !important;
}
body.page-announcements .ann-review-grid-v71{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px !important;
  padding:14px 16px !important;
}
body.page-announcements .ann-review-grid-v71 div{
  padding:11px 12px !important;
  border:1px solid rgba(148,163,184,.16) !important;
  border-radius:14px !important;
  background:rgba(2,6,23,.28) !important;
}
body.page-announcements .ann-review-grid-v71 span{
  display:block !important;
  color:#9fb3d9 !important;
  font-size:11px !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}
body.page-announcements .ann-review-grid-v71 strong{
  display:block !important;
  margin-top:4px !important;
  color:#f8fbff !important;
  font-size:13px !important;
  font-weight:950 !important;
  text-transform:capitalize !important;
}
body.page-announcements .ann-next-actions-v71{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  padding:0 16px 16px !important;
}
body.page-announcements .ann-next-actions-v71 .btn{
  min-height:42px !important;
}
@media (max-width:1100px){
  body.page-announcements .ann-modal-workspace-v71{
    grid-template-columns:1fr !important;
  }
  body.page-announcements .ann-modal-preview-card-v71{
    min-height:520px !important;
  }
}
@media (max-width:700px){
  body.page-announcements .ann-review-grid-v71{
    grid-template-columns:1fr !important;
  }
  body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-main{
    grid-template-columns:1fr !important;
  }
  body.page-announcements .ann-next-page-head-v71,
  body.page-announcements .ann-next-actions-v71{
    flex-direction:column !important;
    align-items:stretch !important;
  }
}

/* v72 — fix modal public banner overlap and add custom color controls */
body.page-announcements .ann-custom-color-picker{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-height:64px !important;
  padding:11px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.03) !important;
  color:#dbeafe !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
body.page-announcements .ann-custom-color-picker input{
  width:42px !important;
  height:34px !important;
  border:0 !important;
  padding:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  cursor:pointer !important;
}
body.page-announcements .ann-color-dot.custom{
  background:conic-gradient(from 90deg, #ef4444, #f97316, #eab308, #22c55e, #2563eb, #8b5cf6, #ef4444) !important;
}
@media (min-width:761px){
  body.page-announcements .ann-color-style-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  body.page-announcements .ann-custom-color-picker{ grid-column:span 2 !important; }
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-main,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-main{
  grid-template-columns:minmax(118px, 150px) minmax(0, 1fr) minmax(118px, 150px) !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-label,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-label{
  min-width:0 !important;
  width:100% !important;
  overflow:hidden !important;
  padding:10px 12px !important;
  gap:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-label strong,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-label strong{
  min-width:0 !important;
  max-width:72px !important;
  font-size:13px !important;
  line-height:.98 !important;
  letter-spacing:.02em !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-icon,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-icon{
  flex:0 0 42px !important;
  width:42px !important;
  height:42px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-icon .mboka-announcement-emoji,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-icon .mboka-announcement-emoji{
  font-size:28px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-copy,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-copy{
  min-width:0 !important;
  overflow:hidden !important;
  padding:12px 16px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-title,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-title{
  min-width:0 !important;
  max-width:100% !important;
  font-size:clamp(18px, 1.6vw, 26px) !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-message,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-message{
  min-width:0 !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-meta,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-meta{
  min-width:0 !important;
  overflow:hidden !important;
  padding:10px 12px !important;
}
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-priority,
body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-date,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-priority,
body.page-announcements #annCustomerPreview .mboka-customer-bulletin-date{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media (max-width:760px){
  body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-main,
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-main{ grid-template-columns:1fr !important; }
  body.page-announcements #annModalCustomerPreview .mboka-customer-bulletin-label strong,
  body.page-announcements #annCustomerPreview .mboka-customer-bulletin-label strong{ max-width:none !important; }
}

/* ---- source: assets/css/legal-documents.css ---- */
/* Mboka Legal Documents: Terms of Use + Privacy Policy */
.mboka-footer-legal{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:10px;
  white-space:nowrap;
  font-size:.92em;
  font-weight:850;
}
.mboka-footer-legal a{
  color:#bfdbfe !important;
  text-decoration:none;
  border-bottom:1px solid rgba(147,197,253,.35);
  transition:color .16s ease, border-color .16s ease;
}
.mboka-footer-legal a:hover{
  color:#fff !important;
  border-color:rgba(255,255,255,.78);
}
.mboka-footer-copy{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
}
.mboka-legal-open{ overflow:hidden; }
.mboka-legal-backdrop{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.mboka-legal-modal{
  width:min(920px, 96vw);
  max-height:min(820px, 92vh);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(37,99,235,.20), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(3,7,18,.98));
  border:1px solid rgba(96,165,250,.24);
  box-shadow:0 34px 90px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.05);
  color:#eaf2ff;
  position:relative;
}
.mboka-legal-close{
  position:absolute;
  margin:0;
  right:18px;
  top:18px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.86);
  color:#eaf2ff;
  font-size:28px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  z-index:100001;
}
.mboka-legal-close:hover{ background:rgba(37,99,235,.20); border-color:rgba(147,197,253,.46); }
.mboka-legal-head{
  display:flex;
  gap:16px;
  align-items:center;
  padding:26px 30px 22px;
  border-bottom:1px solid rgba(148,163,184,.15);
}
.mboka-legal-mark{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(37,99,235,.24), rgba(30,64,175,.16));
  border:1px solid rgba(96,165,250,.24);
  box-shadow:0 14px 34px rgba(37,99,235,.18);
  font-size:26px;
}
.mboka-legal-kicker{
  margin:0 0 6px;
  color:#93c5fd;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.16em;
  font-weight:950;
}
.mboka-legal-head h2{
  margin:0;
  font-size:clamp(30px, 4vw, 46px);
  letter-spacing:-.04em;
  line-height:.95;
  color:#f8fbff;
}
.mboka-legal-date{
  margin:10px 0 0;
  color:#b9c9e8;
  font-size:14px;
  font-weight:800;
}
.mboka-legal-body{
  padding:26px 30px;
  overflow:auto;
  color:#dbe7ff;
  font-size:15px;
  line-height:1.72;
  white-space:normal;
}
.mboka-legal-body strong{ color:#fff; }
.mboka-legal-foot{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:space-between;
  padding:16px 30px 20px;
  border-top:1px solid rgba(148,163,184,.15);
  color:#bfd3f7;
  font-weight:800;
  font-size:13px;
}
.mboka-legal-editor{
  min-height:360px;
  line-height:1.6;
  font-family:Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  resize:vertical;
}
.mboka-legal-editor-field .hint{
  max-width:820px;
}
@media(max-width:680px){
  .mboka-footer-legal{width:100%; justify-content:center; margin-left:0; margin-top:4px;}
  .mboka-legal-backdrop{padding:12px; align-items:stretch;}
  .mboka-legal-modal{width:100%; max-height:100%; border-radius:22px;}
  .mboka-legal-close{right:18px; top:18px; margin:0;}
  .mboka-legal-head{padding:20px 64px 18px 18px; align-items:flex-start;}
  .mboka-legal-mark{width:46px; height:46px; min-width:46px; border-radius:15px;}
  .mboka-legal-body{padding:20px 18px; font-size:14px;}
  .mboka-legal-foot{padding:14px 18px 18px;}
}