/* ============================================================
   CentralEye portal — HTML layer.
   centraleye-login.css / centraleye-dash.css are the product design system and are shared with the current
   portal unchanged. This file adds what the current portal got from Wisej: the shell geometry, form controls
   in the cjweb theme palette, dialogs, confirmations, toasts, menus and the busy bar.
   ============================================================ */

html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg, #EEF2F7); color: var(--text); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ── shell geometry (matches the current portal: sidebar 256 / 76 collapsed, top bar 58) ── */
.app { display: grid; grid-template-columns: 256px 1fr; height: 100vh; }
.app.nav-collapsed { grid-template-columns: 76px 1fr; }
.app .sidebar { min-height: 0; overflow: hidden; }
.sidebar .cj-brandbar { height: 84px; flex-shrink: 0; display: flex; align-items: center; }
.sidebar .cj-brand { width: 100%; }
.sidebar .nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 12px; }
.sidebar .nav-group-label { display: block; height: 24px; line-height: 24px; margin: 12px 8px 2px; padding: 0 0 0 8px !important;
  color: #96B8E0; text-transform: uppercase; }
.sidebar .nav-item { display: flex; align-items: center; gap: 12px; height: 40px; margin: 1px 8px; padding: 0 0 0 8px !important;
  color: rgba(255,255,255,0.816); text-decoration: none; border-radius: 9px; white-space: nowrap; }
.sidebar .nav-item.active { color: #fff; }
.sidebar .nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar .nav-item:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; }
.sidebar .nav-foot { height: 50px; flex-shrink: 0; display: flex; }
.sidebar .collapse-btn { flex: 1; justify-content: center; border: none; background: transparent; color: rgba(255,255,255,0.82); border-radius: 0; }
.app.nav-collapsed .nav-group-label, .app.nav-collapsed .nav-label, .app.nav-collapsed .cj-brand-name,
.app.nav-collapsed .collapse-btn .cb-text { display: none; }
.app.nav-collapsed .sidebar .nav-item { justify-content: center; padding: 0 !important; margin: 1px 15px; }
.app.nav-collapsed .sidebar .nav-item .ico { width: 22px; height: 22px; }
.app.nav-collapsed .sidebar .cj-brand { flex-direction: row !important; justify-content: center; padding: 13px 0 !important; }
.app.nav-collapsed .sidebar .cj-brand-logo { width: 36px; height: 36px !important; }
.app.nav-collapsed .collapse-btn .cb-ico { transform: rotate(180deg); }

.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; background: var(--bg); }
.topbar-bar { height: 58px; flex-shrink: 0; display: flex; align-items: center; padding: 0 8px 0 22px; position: relative; z-index: 30; }
.topbar-bar .crumbs { flex: 1; min-width: 0; }
.tb-right { display: flex; align-items: center; gap: 6px; height: 100%; }
.tb-right .iconbtn { position: relative; width: 40px; height: 34px; border: none; background: transparent; }
.tb-right .user-chip { height: 44px; width: auto; min-width: 208px; max-width: 300px; border: none; background: transparent; text-align: left; color: inherit; }
.tb-lang { width: 116px; }
.content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0; position: relative; }
.ce-banner { flex-shrink: 0; }

/* drop-down menus hang under the top bar, right-aligned like the current portal */
.ce-menu { display: none; position: absolute; top: 56px; z-index: 60; }
.ce-menu.on { display: block; }
#ce-user-menu { right: 16px; width: 286px; padding-bottom: 6px; }
#ce-notif-menu { right: 64px; width: 372px; max-height: 320px; overflow-y: auto; }
.ce-menu .um-item { display: block; width: calc(100% - 16px); margin: 0 8px; border: none; background: transparent; text-align: left; color: inherit;
  height: 56px; padding: 0; font: inherit; }
.ce-menu .nt-item { height: auto; min-height: 58px; }

/* busy bar (replaces the Wisej loader) */
#ce-busy { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--brand-gold, #F0C018); z-index: 200; opacity: 0;
  transition: width 1.2s ease, opacity .3s; }
#ce-busy.on { width: 70%; opacity: 1; }

/* ── form controls in the cjweb palette ─────────────────────────────── */
.ce-input, .ce-select, .ce-textarea {
  height: 34px; width: 100%; padding: 0 10px; font-family: var(--font); font-size: 13px; color: var(--text);
  background: var(--surface-1, #fff); border: 1px solid var(--line-2, #D1D5DB); border-radius: 6px; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.ce-textarea { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
.ce-select { padding-right: 28px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; }
.ce-input:focus, .ce-select:focus, .ce-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow, rgba(41,124,200,0.18)); }
.ce-input:disabled, .ce-select:disabled, .ce-textarea:disabled { opacity: .6; cursor: not-allowed; }
.ce-input::placeholder, .ce-textarea::placeholder { color: #9CA3AF; }
.ce-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin: 0 0 5px; }
.ce-fld { display: flex; flex-direction: column; min-width: 0; }
.ce-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ce-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; }
.ce-check input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }

.ce-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--line-2, #D1D5DB); background: var(--surface-1, #fff); color: var(--text); font-family: var(--font); font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, box-shadow .12s; }
.ce-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.ce-btn.primary { background: #297CC8; border-color: #297CC8; color: #fff; }
.ce-btn.primary:hover { background: #1F6BB2; border-color: #1F6BB2; }
.ce-btn.danger { background: #DC2626; border-color: #DC2626; color: #fff; }
.ce-btn.danger:hover { background: #B91C1C; }
.ce-btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.ce-btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.ce-btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.ce-btn:disabled { opacity: .55; cursor: not-allowed; }
html[data-theme="dark"] .ce-btn.primary { background: #3E8FD8; border-color: #3E8FD8; }

/* ── dialogs (replace Wisej modal forms) ─────────────────────────────── */
.ce-dlg-scrim { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center;
  background: rgba(17,24,39,0.45); padding: 24px; }
.ce-dlg-scrim.on { display: flex; }
.ce-dlg-box { max-width: 100%; max-height: 100%; display: flex; }
.ce-dlg { width: 480px; max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--surface-1, #fff);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 64px rgba(16,30,60,0.28); overflow: hidden; color: var(--text); }
.ce-dlg.wide { width: 760px; } .ce-dlg.xwide { width: 1040px; }
.ce-dlg-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ce-dlg-head h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; flex: 1; }
.ce-dlg-x { border: none; background: transparent; color: var(--text-3); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.ce-dlg-x:hover { background: var(--surface-2); color: var(--text); }
.ce-dlg-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.ce-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface-0, #fff); }
.ce-dlg-err { font-size: 12.5px; color: #C0353B; background: #FCEBEC; border: 1px solid #F6D2D4; border-radius: 8px; padding: 9px 11px; }
html[data-theme="dark"] .ce-dlg-err { background: rgba(224,59,67,0.12); border-color: rgba(224,59,67,0.3); color: #FF8A8F; }

#ce-confirm .ce-dlg { width: 420px; }
#ce-confirm { z-index: 400; }
/* right-hand drawer (Wisej MakeRightDrawer): full height, pinned right */
.ce-dlg-scrim.right { justify-content: flex-end; align-items: stretch; padding: 0; }
.ce-dlg-scrim.right > .ce-dlg-box { height: 100%; }
.ce-dlg.ce-drawer { height: 100vh; max-height: 100vh; border-radius: 0; }
.ce-dlg.ce-drawer > .ce-dlg-body, .ce-dlg.ce-cg-center > .ce-dlg-body { flex: 1; min-height: 0; }
.ce-dlg.ce-cg-center { height: min(calc(100vh - 72px), 900px); }
.ce-cf-text { font-size: 14px; line-height: 1.5; white-space: pre-line; }

/* ── toasts ───────────────────────────────────────────────────────────── */
#ce-toasts { position: fixed; right: 18px; top: 14px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.ce-toast { padding: 11px 14px 11px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; color: #fff; background: #1F2937;
  box-shadow: 0 10px 30px rgba(16,30,60,0.25); border-left: 4px solid #16A34A; animation: ce-toast-in .18s ease; transition: opacity .35s, transform .35s; }
.ce-toast.warn { border-left-color: #D97706; } .ce-toast.err { border-left-color: #DC2626; } .ce-toast.info { border-left-color: #297CC8; }
.ce-toast.out { opacity: 0; transform: translateY(-8px); }
@media (max-width: 480px) { #ce-toasts { left: 12px; right: 12px; max-width: none; } }
@keyframes ce-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── sign-in page (same split layout as the current portal: brand 54% / form 46%) ── */
.login-root { grid-template-columns: 54fr 46fr; }
.login-form-wrap { position: relative; }
.login-topbar { position: absolute; top: 8px; right: 64px; }
.login-topbar .ce-select { width: 160px; height: 30px; }
#ce-theme-toggle { cursor: pointer; }
.login-card .login-submit { margin-top: 4px; }
.login-card form { margin: 0; }
.login-copy { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; justify-content: center;
  color: #9AA7BD; font-size: 12px; }

/* ── placeholder for pages still being brought across ─────────────────── */
.ce-pending { margin: 26px; padding: 36px; border: 1px dashed var(--line-strong); border-radius: 14px; text-align: center; color: var(--text-3); background: var(--surface-1); }
.ce-pending h2 { margin: 0 0 6px; color: var(--text); font-size: 18px; }

/* right-to-left (Arabic) */
html[dir="rtl"] .tb-right .user-chip { text-align: right; }
html[dir="rtl"] .ce-select { background-position: left 9px center; padding-right: 10px; padding-left: 28px; }
html[dir="rtl"] #ce-user-menu { right: auto; left: 16px; }
html[dir="rtl"] #ce-notif-menu { right: auto; left: 64px; }

/* theme button: moon in light mode, sun in dark mode */
.ce-theme-sun { display: none; }
html[data-theme="dark"] .ce-theme-sun { display: inline-flex; }
html[data-theme="dark"] .ce-theme-moon { display: none; }
.ce-theme-sun, .ce-theme-moon { align-items: center; justify-content: center; }

/* ── the cjweb theme's own fonts (DM Sans, embedded in cjweb.theme in the current portal). Text without an explicit
   font family inherits DM Sans 13px there, exactly as below; styled elements keep Hanken Grotesk via var(--font). ── */
@font-face { font-family: 'DMSans-Regular'; src: url('assets/theme/DMSans-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DMSans-Medium'; src: url('assets/theme/DMSans-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DMSans-Bold'; src: url('assets/theme/DMSans-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DMSans-ExtraBold'; src: url('assets/theme/DMSans-ExtraBold.ttf') format('truetype'); font-display: swap; }
:root { --wisej-font: 'DMSans-Regular', Inter, 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
body, .content, .ce-dlg, .login-card, .ce-menu { font-family: var(--wisej-font); font-size: 13px; }
button, input, select, textarea { font-family: inherit; }
.ce-input, .ce-select, .ce-textarea, .ce-btn { font-family: var(--wisej-font); }

/* sign-in card: the current portal's field + button look (.ce-fld / .ce-submit) */
.login-card { border-radius: 6px; min-height: 408px; }
.login-card .login-field { margin-bottom: 14px; }
.login-card .login-label { font-family: var(--font); font-size: 12.5px; font-weight: 600; color: #44506A; }
.login-card .login-input { height: 46px; margin-top: 4px; border-radius: 11px; background: #F7FAFD; border: 1px solid #DCE4F0; padding: 0 4px; }
.login-card .login-input input { font-family: var(--font); font-size: 14.5px; color: #111726; height: 42px; }
.login-card .login-submit { background: #1A4E8A; border-radius: 10px; font-family: var(--font); font-size: 15px; font-weight: 700; height: 48px; box-shadow: none; }
.login-card .login-submit:hover:not(:disabled) { background: #1F5C9F; box-shadow: none; }
.login-card-head h2 { font-family: var(--wisej-font); }
.login-card-head p { font-family: var(--wisej-font); }

/* message-box buttons in the theme palette: Yes / OK green, No / Cancel grey */
#ce-confirm .ce-cf-yes { background: #22c55e; border-color: #22c55e; color: #fff; }
#ce-confirm .ce-cf-yes:hover { background: #16a34a; border-color: #16a34a; }
#ce-confirm .ce-cf-no { background: #6b7280; border-color: #6b7280; color: #fff; }
#ce-confirm .ce-cf-no:hover { background: #4b5563; border-color: #4b5563; }
/* the brand panel inherited the theme font in the current portal */
.login-root .login-brand { font-family: var(--wisej-font); }
/* full name and role on the account chip, as in the current portal */
.tb-right .user-chip .uc-meta { flex-shrink: 0; max-width: 220px; }

/* narrow windows: the breadcrumb gives way (ellipsis) and never runs under the top-bar controls */
.topbar-bar .topbar { overflow: hidden; }
.topbar-bar .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.topbar-bar .crumbs > * { display: inline; }
.topbar-bar .crumbs .sep { margin: 0 8px; }
.tb-right { flex-shrink: 0; }
@media (max-width: 1100px) {
  .tb-right .user-chip { min-width: 0; }
  .tb-right .user-chip .uc-meta { display: none; }
  .tb-lang { width: 96px; }
}

/* ════════════════ component kit (Web/modUi.vb) ════════════════ */

/* page wrapper: the current screens' cj-dash panel (padding 14/20) with the title row and top-right actions */
.ce-page { padding: 14px 20px 12px; min-height: 100%; }
.ce-page.ce-fill { height: 100%; display: flex; flex-direction: column; }
/* a page-filling screen never squashes below a usable height: in a short window the page scrolls instead of the
   inner panes shrinking to a strip (the desktop pane is often short when the browser sits inside another window) */
.ce-page.ce-fill { min-height: 640px; }
.ce-journal { min-height: 560px; }
.ce-page.ce-fill .ce-gridwrap.ce-grow, .ce-page.ce-fill .cj-tablewrap > .ce-gridwrap { min-height: 320px; }
/* toolbars, tile rows and panel heads are never squeezed: a flex item with overflow hidden may shrink to nothing when
   its column is shorter than its content (the Camera Health toolbar rendered 20 px tall); the pane scrolls instead */
.cj-searchcard, .cj-cards, .ce-tiles, .ce-panelhead, .ce-page-head, .cj-dash-head { flex-shrink: 0; }
.ce-tabpane > *, .ce-page-body > .ce-toolbar, .ce-page > .ce-toolbar, .ce-tabpane .ce-toolbar { flex-shrink: 0; }
.ce-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 56px; margin-bottom: 4px; }
.ce-page-actions { display: flex; align-items: center; gap: 8px; padding-top: 13px; flex-wrap: wrap; justify-content: flex-end; }
.ce-fill > .ce-page-body { flex: 1; min-height: 0; }

/* grid = DataGridView with modGrid.StyleGrid (cj-grid): 36px rows, #EFF3F9 bold header, row hover / select colours */
.ce-gridwrap { overflow: auto; background: var(--surface-1, #fff); position: relative; }
.ce-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; color: #111827; }
.ce-grid thead th { position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 10px; text-align: left; background: #EFF3F9; color: #5A6B85;
  font-family: var(--wisej-font); font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid #E5E7EB; cursor: pointer; user-select: none; }
.ce-grid thead th.sort-asc::after { content: ' ▲'; font-size: 9px; } .ce-grid thead th.sort-desc::after { content: ' ▼'; font-size: 9px; }
.ce-grid td { height: 36px; padding: 0 10px; border-bottom: 1px solid #F3F4F6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ce-grid tbody tr:hover td { background: #EEF3FA; }
.ce-grid tbody tr.sel td { background: #E1ECFA; color: #0B3D6E; }
.ce-grid tbody tr[data-get], .ce-grid tbody tr[data-post], .ce-grid tbody tr[data-pick] { cursor: pointer; }
.ce-grid .ce-grid-empty td { text-align: center; color: var(--text-3); height: 64px; cursor: default; background: transparent !important; }
.ce-grid td.wrap { white-space: normal; }
/* column resizing: a drag handle on the right edge of every header (ce-kit.js resizableTables); the table grows and
   scrolls inside its card, double-click resets the column, widths persist per screen and grid */
.ce-grid thead th { overflow: visible; }
.ce-grid thead th > .ce-th-txt { display: inline-block; max-width: calc(100% - 4px); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-col-rs { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 3; user-select: none; touch-action: none; }
.ce-col-rs::after { content: ''; position: absolute; top: 8px; bottom: 8px; left: 3px; width: 2px; border-radius: 2px; background: transparent; }
.ce-col-rs:hover::after, .ce-col-rs.on::after { background: var(--accent, #1B6FB8); }
table.ce-resized { table-layout: fixed; width: auto; min-width: 100%; }
body.ce-col-resizing, body.ce-col-resizing * { cursor: col-resize !important; user-select: none !important; }
.ce-grid .ce-btn.sm { height: 26px; }
.ce-grid .rowbtn { background: #1B6FB8; color: #fff; border: none; border-radius: 7px; height: 26px; padding: 0 12px; font-weight: 600; cursor: pointer; }
.ce-grid .rowbtn:hover { background: #0B4D94; }
html[data-theme="dark"] .ce-grid { color: var(--text); }
html[data-theme="dark"] .ce-grid thead th { background: rgba(255,255,255,0.04); color: var(--text-2); border-color: var(--line); }
html[data-theme="dark"] .ce-grid td { border-color: var(--line); }
html[data-theme="dark"] .ce-grid tbody tr:hover td { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .ce-grid tbody tr.sel td { background: rgba(90,160,255,0.18); color: var(--text); }

/* cards */
.ce-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ce-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 8px 14px 6px; }
.ce-card-title { font-family: var(--wisej-font); font-weight: 700; font-size: 14.5px; color: #1B2A4A; }
html[data-theme="dark"] .ce-card-title { color: var(--text); }
.ce-card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ce-card-body { padding: 12px 14px; min-height: 0; }
.ce-card-body.nopad { padding: 0; flex: 1; display: flex; flex-direction: column; }
.ce-card-body.nopad > .ce-gridwrap { flex: 1; }

/* windows (Wisej Form): white caption bar with the theme's ExtraBold 16px title */
.ce-dlg-head h3 { font-family: var(--wisej-font); font-weight: 700; font-size: 16px; color: #111827; }
html[data-theme="dark"] .ce-dlg-head h3 { color: var(--text); }
.ce-dlg .ce-dlg-body.flush { padding: 0; gap: 0; flex: 1; min-height: 0; }
.ce-dlg-subhead { background: #F7FAFD; border-bottom: 1px solid var(--line, #E4E9F2); padding: 12px 20px 8px; }
html[data-theme="dark"] .ce-dlg-subhead { background: rgba(255,255,255,0.03); }
.ce-dlg-foot.split { justify-content: space-between; }
.ce-dlg-foot { background: #F8FAFC; }
html[data-theme="dark"] .ce-dlg-foot { background: var(--surface-0); }
.ce-dlg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ce-dlg-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 14px; }

/* tabs (TabControl, cj-tabs look) */
.ce-tabs { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ce-tabs > .tabs { margin: 0; padding: 0 12px; flex-shrink: 0; }
.ce-tabs > .tabs .tab { background: none; border: none; border-bottom: 2px solid transparent; font-family: var(--font); font-weight: 600; font-size: 13.5px;
  color: #6B7280; padding: 10px 14px; cursor: pointer; }
.ce-tabs > .tabs .tab.on { color: #0D2948; border-bottom-color: var(--accent, #1B6FB8); }
html[data-theme="dark"] .ce-tabs > .tabs .tab.on { color: var(--text); }
.ce-tabpane { flex: 1; min-height: 0; overflow: auto; }
.ce-tabpane[hidden] { display: none !important; }

/* media lists (thumbnails left, viewer right) */
.ce-media { display: flex; height: 100%; min-height: 320px; }
.ce-media-list { width: 210px; flex-shrink: 0; overflow-y: auto; background: #F7FAFD; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.ce-media-view { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #11161E; }
.ce-media-view > .ce-media-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ce-media-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ce-media-stage video, .ce-media-stage img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ce-media-bar { height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; background: #F7FAFD; color: #5A6882; }
.ce-media-bar .cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-thumb { display: block; background: #fff; cursor: pointer; text-align: left; width: 100%; padding: 0; font: inherit; color: inherit; }
html[data-theme="dark"] .ce-media-list, html[data-theme="dark"] .ce-media-bar { background: rgba(255,255,255,0.03); }

/* monospace text readouts (raw journal, exception detail) */
.ce-pre { font-family: Consolas, 'Courier New', monospace; font-size: 12.7px; line-height: 1.45; background: #FAFBFD; color: #1F2937; border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px; margin: 0; white-space: pre; overflow: auto; }
html[data-theme="dark"] .ce-pre { background: rgba(255,255,255,0.03); color: var(--text); }
.ce-kvpanel { display: flex; gap: 18px; padding: 8px 12px; }
.ce-kvpanel > div { flex: 1; padding: 6px 14px; }

.muted { color: var(--text-3); }
.ce-sp { flex: 1; }
.ce-btn.success { background: #1F9D62; border-color: #1F9D62; color: #fff; }
.ce-btn.success:hover { background: #178451; border-color: #178451; }
.ce-grow { flex: 1; min-width: 0; min-height: 0; }
.cj-formcard { background: var(--surface-1, #fff); }

/* ── Electronic Journal ── */
.cj-searchcard { background: var(--surface-1, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px 14px; margin-bottom: 12px; }
.ce-tb { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ce-tb + .ce-tb { margin-top: 10px; }
.ce-tb .ce-label { font-size: 12px; color: #6B7689; font-weight: 600; margin-bottom: 4px; }
.ce-tb .ce-fld { flex: 0 0 auto; }
.ce-tb .ce-status { color: #6B7689; font-size: 12.5px; align-self: center; padding-bottom: 2px; }
.ce-pickbtn { width: 34px; padding: 0; background: #2D3E50; border-color: #2D3E50; color: #fff; }
.ce-pickbtn:hover { background: #22303F; }
.ce-btn.dark { background: #2D3E50; border-color: #2D3E50; color: #fff; }
.ce-btn.dark:hover { background: #22303F; }
.ce-popwrap { position: relative; display: inline-block; }
.ce-popwrap > .ce-menu { top: calc(100% + 4px); left: 0; min-width: 190px; padding: 6px; }
.ce-mi { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.ce-mi:hover { background: #EAF1FB; }
html[data-theme="dark"] .ce-mi:hover { background: rgba(255,255,255,0.07); }
.ce-mi-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.ce-mi-head { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: #9AA7BD; padding: 6px 10px 2px; text-transform: uppercase; }
.ej-form .ej-to, .ej-form .ej-l-range { display: none; }
.ej-form.exportonly .ej-to { display: flex; } .ej-form.exportonly .ej-l-range { display: inline; } .ej-form.exportonly .ej-l-single { display: none; }
.ej-form.exportonly .ej-hide-export { display: none; }
.ce-ejbox { background: #FAFBFD; border: 1px solid var(--line); border-radius: 14px; overflow: auto; padding: 10px 12px; flex: 1; min-height: 240px; }
pre.ej { font: 9.5pt/1.35 Consolas, 'Courier New', monospace; white-space: pre-wrap; word-wrap: break-word; margin: 0; color: #222; }
pre.ej .ej-start { color: #1565C0; font-weight: 700 } pre.ej .ej-wd { color: #2E7D32; font-weight: 700 } pre.ej .ej-dep { color: #EF6C00; font-weight: 700 }
pre.ej .ej-bal { color: #6A1B9A; font-weight: 700 } pre.ej .ej-end { color: #616161; font-weight: 700 }
pre.ej mark { background: #FFF176; color: #000; padding: 0 1px } pre.ej mark.cur { background: #FFB300; outline: 1px solid #E65100 }
.ce-journal { display: flex; flex-direction: column; height: 100%; }
.ce-journal > .ce-tabs { flex: 1; min-height: 0; }
.ce-journal .ce-tabpane { padding-top: 12px; display: flex; flex-direction: column; }
.cj-searchbar { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin: -2px 0 8px; }
.cj-searchcard.collapsed .ce-searchbody { display: none; }
.cj-searchcard.collapsed .cj-searchbar { margin-bottom: -2px; }
.cj-seg { border: none; background: transparent; color: #5A6B85; height: 28px; padding: 0 12px; border-radius: 7px; font: inherit; font-weight: 600; cursor: pointer; }
.cj-seg.active { background: #EAF1FB; color: #0B4D94; }
.ce-periodbar { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 10px; background: #EFF3F9; }
html[data-theme="dark"] .ce-periodbar { background: rgba(255,255,255,0.05); }
.ej-form.anydate .ej-dates input { opacity: .45; pointer-events: none; }
.ej-form.anydate .cj-seg.active { background: transparent; color: #5A6B85; }
.cj-pagerbar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; background: var(--surface-1, #fff); border: 1px solid var(--line); border-top: none; border-radius: 0 0 14px 14px; }
.cj-pagerbar .cj-pager { flex: 1; color: #6B7689; font-size: 12.5px; }
.ce-results { display: flex; flex-direction: column; flex: 1; min-height: 260px; }
.ce-results > .ce-gridwrap { flex: 1; border: 1px solid var(--line); border-radius: 14px 14px 0 0; }

/* ── Camera ── */
.cj-seg.on { background: #EAF1FB; color: #0B4D94; }
.cj-segwrap { display: inline-flex; gap: 2px; background: #EFF3F9; border-radius: 10px; padding: 3px; }
.ce-vidlayout { display: flex; gap: 12px; flex: 1; min-height: 420px; }
.ce-vidlist { width: 322px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-1, #fff); }
.ce-vidlist-body { flex: 1; overflow-y: auto; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.ce-panelhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 16px; background: #EEF3F9; border-bottom: 1px solid #E1E8F2;
  font-family: var(--wisej-font); font-weight: 700; font-size: 14px; color: #1B2A4A; flex-shrink: 0; }
.ce-panelhead .muted { font-weight: 400; font-size: 12.5px; }
.ce-panelhead.ce-panelfoot { min-height: 54px; border-bottom: none; border-top: 1px solid #E1E8F2; }
html[data-theme="dark"] .ce-panelhead { background: rgba(255,255,255,0.04); border-color: var(--line); color: var(--text); }
.cj-sesscard { display: block; width: 100%; text-align: left; background: var(--surface-1, #fff); padding: 9px 12px; cursor: pointer; font: inherit; color: inherit; }
.ce-viddetail { flex: 1; min-width: 0; display: flex; gap: 12px; }
.ce-vidcenter { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ce-vidhead { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 2px; font-size: 12px; color: #6B7689; }
.ce-vidhead b { color: #1B2A4A; font-size: 14px; }
html[data-theme="dark"] .ce-vidhead b { color: var(--text); }
.ce-vidbox { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.ce-clip { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0F1115; }
.ce-cliphead { height: 28px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; background: #1C1E24; color: #BEC6D2; font-weight: 700; font-size: 12.5px; }
.ce-cliphead .meta { color: #78808C; font-weight: 400; font-size: 12px; }
.ce-clipdl { width: 30px; height: 24px; display: grid; place-items: center; background: #2D3E50; color: #fff; border-radius: 4px; text-decoration: none; }
.ce-clip video { flex: 1; min-height: 0; width: 100%; background: #000; object-fit: contain; }
.ce-clipmissing { flex: 1; display: grid; place-items: center; color: #969EAA; }
.ce-vidright { width: 372px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.ce-vidright.cj-tablewrap { gap: 0; background: var(--surface-1, #fff); }
.ce-vidtxn { height: 286px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--surface-1, #fff); overflow: hidden; }
.ce-vidtxn-body { flex: 1; overflow: auto; padding: 10px 16px 8px; }
.ce-videj { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface-1, #fff); overflow: hidden; }
.ce-videjtext { flex: 1; min-height: 0; margin: 0; overflow: auto; padding: 8px 12px; background: #FAFBFD; font: 8.5pt/1.35 Consolas, monospace; white-space: pre-wrap; color: #222; }
.ce-datebadge { color: #1B2A4A; background: #EEF3F9; border-radius: 12px; padding: 3px 12px; font-size: 12px; }
.ce-stillview { flex: 1; min-height: 0; position: relative; }
.ce-stillpane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ce-stillpane img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ce-stillpane .ov { position: absolute; font: 9pt Consolas, monospace; }
.ce-stillpane .ov.tl { left: 14px; top: 12px; color: #96C8FF; } .ce-stillpane .ov.tr { right: 14px; top: 12px; color: #78DC96; }
.ce-stillpane .ov.bl { left: 14px; bottom: 10px; color: #BEC6D2; } .ce-stillpane .ov.br { right: 14px; bottom: 10px; color: #fff; font: 700 9.5pt 'Segoe UI', sans-serif; }
.ce-thumbstrip { height: 116px; flex-shrink: 0; display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 6px; }
.cj-thumbcard { width: 132px; height: 96px; flex-shrink: 0; display: flex; flex-direction: column; background: #0F1115; padding: 0; cursor: pointer; }
.cj-thumbcard img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.cj-thumbcard .cap { height: 18px; background: #1A1C21; color: #BEC6D2; font-size: 10.5px; display: grid; place-items: center; }
.fs-filesonly { display: none !important; }
#fs-root.filesmode .fs-filesonly { display: inline-flex !important; }

/* ── fleet & shared form bits ── */
.ce-dlg-grid2 > .span2, .ce-dlg-grid3 > .span2 { grid-column: 1 / -1; }
.ce-listitem { display: flex; padding: 5px 2px; }
.ce-checklist .ce-listitem + .ce-listitem { border-top: 1px solid #F3F4F6; }
.ce-fleetgrid .ce-grid td { height: 40px; }
.ce-fleetgrid .ce-grid thead th { height: 40px; }
.cj-searchcard .ce-input, .cj-searchcard .ce-select { height: 32px; }
.ce-cashgrid .ce-grid td { height: 60px; }
.ce-cashgrid .ce-grid td:first-child, .ce-cashgrid .ce-grid th:first-child { padding-left: 22px; }
.ce-fcgrid .ce-grid td { height: 50px; }
.ce-cashgrid .ce-grid thead th, .ce-fcgrid .ce-grid thead th { height: 40px; }
.ce-maplist .ce-grid td { height: 44px; }
/* ── incidents ── */
.ce-incboard { display: flex; gap: 12px; overflow-x: auto; flex: 1; min-height: 360px; padding-bottom: 6px; }
.ce-inclane { width: 264px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; }
.ce-inclane-cards { flex: 1; min-height: 0; overflow-y: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 9px; }
.ce-inccard { cursor: pointer; }
.ce-inccard > .card:hover { border-color: var(--accent, #1B6FB8) !important; }
.ce-bulkbar { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 14px; background: #EDF4FC; flex-shrink: 0; }
.ce-bulkbar[hidden] { display: none; }
.ce-bulkcount { color: #1B2A4A; font-size: 13px; }
.ce-incqueue .ce-grid td { height: 56px; }
.ce-incqueue .ce-grid thead th, .ce-incperf .ce-grid thead th { height: 40px; }
.ce-incperf .ce-grid td { height: 50px; }
.ce-oncall .card { margin-bottom: 0; }
.ce-oncall { overflow: hidden; }
/* ── disputes ── */
.ce-pickrow.sel { background: #E1ECFA; }
.ce-pickrow:hover { background: #EEF3FA; }
.ce-dlg.ce-evid { height: calc(100vh - 48px); }
.ce-dlg.ce-evid > .ce-dlg-body { flex: 1; min-height: 0; }
/* ── remote control ── */
.rc-railbtn { box-sizing: border-box; }
.ce-rcqueue .ce-grid td { height: 58px; }
.ce-fxgrid .ce-grid td { height: 40px; }
.ce-dlg.ce-dark-dlg { background: #0C1118; }
.ce-dlg.ce-dark-dlg .ce-dlg-head { background: #0C1118; border-color: #1b2735; }
.ce-dlg.ce-dark-dlg .ce-dlg-head h3 { color: #dde6f2; }
.ce-dlg.ce-dark-dlg .ce-dlg-foot { background: #0C1118; border-color: #1b2735; }

/* ── Settings rail ─────────────────────────────────────────────── */
.ce-setrail .cj-setitem .ce-set-t { color: #3A4862; }
.ce-setrail .cj-setitem.active .ce-set-t { color: #0B4D94; }
.ce-setrail .cj-setitem.active .ce-set-s { color: #5A6B85 !important; }
html[data-theme="dark"] .ce-setrail .cj-setitem .ce-set-t { color: var(--text-2, #C9D3E3); }
html[data-theme="dark"] .ce-setrail .cj-setitem.active .ce-set-t { color: var(--accent, #6FA8E8); }

/* ==== Cogentix pages: terminal console, incident desk, operations home (from brands/cogent/cogent-shell.css) ==== */
.cg-card { background: var(--surface-1); border-radius: 4px; box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,0.04); padding: 20px; min-width: 0; }
.cg-card-head { margin-bottom: 16px; }
.cg-card-head h5 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--text); }
.cg-card-head small { font-size: 12.5px; color: var(--text-3); }
.cg-welcome { padding: 0; overflow: hidden; }
.cg-welcome-top { display: flex; justify-content: space-between; align-items: flex-end; background: rgba(14,159,142,0.14); padding: 18px 20px 0; }
.cg-welcome-top h5 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #0B7A6D; }
.cg-welcome-top p { margin: 0 0 40px; font-size: 13px; color: #0B7A6D; }
.cg-welcome-art { width: 128px; height: 74px; display: block; }
.cg-welcome-body { padding: 0 20px 20px; display: flex; gap: 18px; align-items: flex-start; }
.cg-avatar { width: 64px; height: 64px; border-radius: 50%; margin-top: -30px; flex: none; background: #22262C; color: #fff;
  border: 4px solid var(--surface-1); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.cg-welcome-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; }
.cg-welcome-grid div:first-child { grid-column: 1 / -1; }
.cg-welcome-grid div { min-width: 0; }
.cg-welcome-grid b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-welcome-grid span { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.cg-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cg-stat { display: flex; justify-content: space-between; align-items: center; }
.cg-stat p { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.cg-stat h4 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--text); }
.cg-stat small { font-size: 12px; color: var(--text-3); }
.cg-stat-ico { width: 48px; height: 48px; border-radius: 50%; background: #0E9F8E; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.cg-chart { display: block; }
.cg-legend { display: flex; gap: 18px; justify-content: center; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.cg-legend i, .cg-mix i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.cg-donut { display: flex; flex-direction: column; align-items: center; }
.cg-mix { list-style: none; margin: 14px 0 0; padding: 0; width: 100%; }
.cg-mix li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.cg-mix li b { color: var(--text); font-weight: 600; }
.cg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cg-table th { text-align: left; font-weight: 600; color: var(--text); background: var(--surface-2); padding: 10px 12px; }
.cg-table td { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--text-2); vertical-align: middle; }
.cg-table td b { display: block; color: var(--text); font-weight: 600; }
.cg-table td small { display: block; color: var(--text-3); font-size: 11.5px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-bar { display: inline-block; width: 90px; height: 6px; border-radius: 3px; background: var(--surface-2); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.cg-bar i { display: block; height: 100%; background: #0E9F8E; border-radius: 3px; }
.cg-feed { list-style: none; margin: 0; padding: 0 0 0 6px; }
.cg-feed li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 0 0 16px 16px; border-left: 2px solid var(--line); }
.cg-feed li:last-child { padding-bottom: 0; }
.cg-feed-dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-1); border: 3px solid #0E9F8E; }
.cg-feed li div { flex: 1; min-width: 0; }
.cg-feed b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.cg-feed small { font-size: 12px; color: var(--text-3); }
.cg-feed em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.cg-gauge { display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.cg-gauge-foot { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 360px; margin-top: 18px; text-align: center; }
.cg-gauge-foot b { display: block; font-size: 17px; font-weight: 700; color: var(--text); }
.cg-gauge-foot span { font-size: 12px; color: var(--text-3); }
.cg-empty { color: var(--text-3); font-size: 13px; padding: 18px 0; text-align: center; }
[data-theme=dark] .cg-welcome-top { background: rgba(43,192,172,0.12); }
[data-theme=dark] .cg-welcome-top h5, [data-theme=dark] .cg-welcome-top p { color: #5AD3C2; }
[data-theme=dark] .cg-avatar { background: #0E9F8E; }
[data-theme=dark] .cg-chart line, [data-theme=dark] .cg-donut circle:first-child, [data-theme=dark] .cg-gauge path:first-child { stroke: var(--line); }
[data-theme=dark] .cg-donut text, [data-theme=dark] .cg-gauge text { fill: var(--text); }
.cj-card.cg-stat2 { display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-1) !important; border: 0 !important; border-radius: 4px !important;
  box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,0.04) !important; padding: 16px 18px !important; transform: none !important; }
.cj-card.cg-stat2:hover { box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,0.08) !important; }
.cg-stat2 .cg-st-body { min-width: 0; }
.cg-stat2 .lbl { font-size: 12.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-2) !important; }
.cg-stat2 .num { font-size: 21px !important; font-weight: 700 !important; margin: 6px 0 2px !important; color: var(--text) !important; }
.cg-stat2 .sub { font-size: 11.5px !important; color: var(--text-3) !important; }
.cg-kico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #0E9F8E; color: #fff; }
.cj-card.cg-stat2.warn .cg-kico { background: #E8A33D; }
.cj-card.cg-stat2.crit .cg-kico { background: #D64545; }
.cj-card.cg-stat2.ok .cg-kico { background: #2E9E5B; }
.cj-card.cg-stat2.info .cg-kico, .cj-card.cg-stat2.neutral .cg-kico { background: #3A3F47; }
.cg-console .cg-card2, .cg-card2 { border-radius: 4px !important; box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,0.04) !important; }
.cg-crumbrow { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); padding-top: 4px; }
.cg-crumbrow i { font-style: normal; color: var(--text-faint); }
.cg-crumbrow b { font-size: 15px; font-weight: 700; color: var(--text); font-family: var(--mono, monospace); letter-spacing: 0.01em; }
.cg-flatbtn { border: 0 !important; box-shadow: none !important; }
.cg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; padding: 10px 0 2px; }
.cg-fact > span { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.cg-fact > div { font-size: 15px; color: var(--text); }
.cg-fact b { font-weight: 700; }
.cg-fact small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-badge { display: inline-block; padding: 2px 10px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 600; }
.cg-badge2 { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; }
.cg-tl { font-size: 12px; }
.cg-tl-row { display: flex; align-items: center; margin-bottom: 6px; }
.cg-tl-name { flex: none; width: 150px; padding-right: 10px; color: var(--text-2); font-size: 12.5px; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-tl-track { position: relative; flex: 1; height: 26px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.cg-tl-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.65); }
.cg-tl-axis { position: relative; flex: 1; height: 18px; }
.cg-tl-axis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.cg-casehead { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid #0E9F8E; padding: 4px 2px 8px; }
.cg-casehead b { font-size: 14px; color: var(--text); }
.cg-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 12px 2px 4px; }
.cg-kv > div > span { display: block; font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.cg-kv > div > div { font-size: 13px; color: var(--text); }
.cg-kv small { display: block; font-size: 11px; color: var(--text-3); }
.cg-kv2 { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-top: 6px; }
.cg-comments { padding: 6px 2px; }
.cg-cm { border-bottom: 1px solid var(--line); padding: 8px 0; }
.cg-cm-h { display: flex; gap: 8px; align-items: baseline; }
.cg-cm-h b { font-size: 13px; color: var(--text); }
.cg-cm-h span { font-size: 11px; color: var(--text-3); }
.cg-cm-b { font-size: 12.5px; color: var(--text-2); margin-top: 2px; white-space: pre-wrap; }
.cg-pop { border: 1px solid var(--line-strong) !important; border-radius: 4px !important; box-shadow: 0 1rem 3rem rgba(18,38,63,0.18) !important; }
/* Cogentix home: page frame, title bar and card rows */
.cg-page { padding: 22px 24px 28px !important; background: var(--bg); }
.cg-page, .cg-page * { font-family: var(--font); box-sizing: border-box; }
.cg-titlebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cg-titlebar h4 { margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); }
.cg-crumb { list-style: none; display: flex; margin: 0; padding: 0; font-size: 13px; color: var(--text-2); }
.cg-crumb li + li::before { content: "/"; padding: 0 8px; color: var(--text-3); }
.cg-crumb li.on { color: var(--text-3); }
.cg-row { display: grid; gap: 20px; margin-bottom: 20px; }
.cg-row-1 { grid-template-columns: minmax(300px, 1fr) 1.6fr; }
.cg-row-2 { grid-template-columns: 2fr minmax(300px, 1fr); }
.cg-row-3 { grid-template-columns: 1.25fr 1fr minmax(240px, 0.8fr); }
@media (max-width: 1280px) { .cg-row-3 { grid-template-columns: 1fr 1fr; } .cg-row-3 > .cg-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 960px) { .cg-row-1, .cg-row-2, .cg-row-3 { grid-template-columns: 1fr; } .cg-row-3 > .cg-card:last-child { grid-column: auto; } }

/* ── pointer on everything the kit makes clickable (elements carrying an action attribute, rows that open a
   detail, menu entries, tabs, segments), regardless of the tag used; form controls, auto-loading and polling
   containers and disabled buttons keep their own cursor ── */
[data-get], [data-post], [data-download], [data-menu], [data-action], [data-pick], [data-tab], [data-close], [data-toggle],
[data-sortable] thead th, .rowbtn, .cj-seg, .cj-segbtn, .um-item, .nav-item, .chip[data-get], summary, label.ce-check, a[href] { cursor: pointer; }
input[data-get], input[data-post], select[data-get], select[data-post], textarea[data-get], textarea[data-post], form[data-get], form[data-post],
div[data-trigger*="load"], div[data-trigger*="every"], span[data-trigger*="every"], [data-trigger*="change"], [data-trigger*="input"], [data-trigger*="keydown"], [data-trigger*="enter"] { cursor: auto; }
.ce-grid[data-sortable] thead th, .ce-grid thead th.ce-th-sort { cursor: pointer; }
input[data-get][type="checkbox"], input[data-post][type="checkbox"], input[data-get][type="radio"] { cursor: pointer; }
button:disabled, .ce-btn:disabled, .ce-btn[aria-disabled="true"] { cursor: not-allowed; }

/* ==========================================================================
   Responsive layout (desktop -> tablet -> phone) and installed-app (PWA) mode.
   Screens are built from a few layout blocks that re-flow by width (classes used directly in Pages/*.vb):
     .ce-cols   panels side by side: .ce-main fills, .ce-side is a fixed column (--side). Tablet: the side column
                narrows to at most 44%; phone: the panels stack, main first.
     .ce-tiles  KPI tiles, --n per row. Tablet: as many 150px tiles as fit; phone: two per row.
     .ce-split  weighted columns (--cols, e.g. '1.25fr 1fr'). Phone: one column.
   Filter rows (.ce-tb / .ce-row) wrap; on a phone every control takes a full row. Tables keep their columns and
   scroll sideways inside their card. Page-filling screens (.ce-fill) become normal scrolling pages on a phone,
   and windows open full screen. Up to 1024px the side menu is a drawer opened from the menu button.
   ========================================================================== */
.ce-cols { display: flex; gap: 14px; min-height: 0; }
.ce-cols > * { min-width: 0; }
.ce-cols > .ce-main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.ce-cols > .ce-side { flex: 0 0 var(--side, 380px); width: var(--side, 380px); min-height: 0; display: flex; flex-direction: column; }
.ce-cols.ce-fillrow { flex: 1; }
.ce-cols.ce-top { align-items: flex-start; }
.ce-tiles { display: grid; gap: 14px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.ce-split { display: grid; grid-template-columns: var(--cols, 1fr 1fr); }
.ce-split:not(.grid) { gap: 14px; }
.ce-split > * { min-width: 0; }
.cj-cards .cj-card .num { overflow-wrap: anywhere; }

.ce-hamburger { display: none; width: 40px; height: 40px; margin-right: 6px; border: none; background: transparent; color: inherit;
  border-radius: 9px; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.ce-hamburger:hover { background: rgba(15,35,70,0.06); }
.ce-nav-backdrop { display: none; }
.ce-install-btn { display: none; }
.ce-install-btn.on { display: inline-flex; }

/* ---- tablet (and small laptops): drawer menu, narrower side columns, tiles that fit ---- */
@media (max-width: 1024px) {
  .app, .app.nav-collapsed { grid-template-columns: 1fr; }
  .app .sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 272px; z-index: 90;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 10px 40px rgba(10,25,50,0.35); }
  [dir="rtl"] .app .sidebar { transform: translateX(100%); }
  .app.nav-open .sidebar, [dir="rtl"] .app.nav-open .sidebar { transform: none; }
  .app.nav-open .ce-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(10,20,40,0.45); }
  /* the drawer always shows the full menu (the collapsed rail is a desktop choice) */
  .app.nav-collapsed .nav-group-label { display: block; }
  .app.nav-collapsed .nav-label, .app.nav-collapsed .cj-brand-name { display: inline; }
  .app.nav-collapsed .sidebar .nav-item { justify-content: flex-start; padding: 0 0 0 8px !important; margin: 1px 8px; }
  .app.nav-collapsed .sidebar .nav-item .ico { width: 18px; height: 18px; }
  .sidebar .nav-foot { display: none; }
  .ce-hamburger { display: inline-flex; }
  .topbar-bar { padding: 0 6px 0 8px; }
  .content { -webkit-overflow-scrolling: touch; }

  .ce-cols > .ce-side { flex-basis: min(var(--side, 380px), 44%); width: auto; }
  .ce-tiles, .cj-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .content .ce-page, .content .cj-dash { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- phone ---- */
@media (max-width: 768px) {
  .topbar-bar { height: 54px; }
  .topbar-bar .crumbs > span:first-child, .topbar-bar .crumbs .sep { display: none; }
  .tb-lang { width: 72px; }
  .tb-right { gap: 2px; }
  .tb-right .iconbtn { width: 36px; }
  .tb-right .user-chip { padding: 0 4px; }
  #ce-user-menu, #ce-notif-menu { right: 8px; left: 8px; width: auto; }

  /* the page scrolls as a whole; no panel keeps its own fixed height */
  .content .ce-page, .content .cj-dash { padding: 10px 12px 24px !important; height: auto; }
  .ce-page.ce-fill { height: auto; min-height: 100%; display: block; }
  .ce-fill > .ce-page-body { flex: none; height: auto; }
  .ce-page-head { flex-direction: column; align-items: stretch; min-height: 0; gap: 6px; }
  .ce-page-actions { padding-top: 0; justify-content: flex-start; }
  .cj-dash-head { height: auto !important; flex-wrap: wrap; gap: 8px; }
  .cj-dash-head h1 { font-size: 20px; }
  .content .ce-grow, .content .ce-results, .content .ce-tabs, .content .ce-tabpane, .content .ce-card { flex: none; min-height: 0; height: auto; }
  .content .ce-tabpane { overflow: visible; }
  .content .ce-gridwrap, .content .cj-tablewrap, .content .ce-pg { max-height: 70vh; overflow: auto; -webkit-overflow-scrolling: touch; }
  .ce-tabs > .tabs { overflow-x: auto; flex-wrap: nowrap; padding: 0 6px; }

  /* layout blocks stack */
  .ce-cols, .ce-cols.ce-fillrow { flex-direction: column; flex: none; }
  .ce-cols > .ce-main, .ce-cols > .ce-side { flex: 0 0 auto; width: auto; max-height: none; overflow: visible; }
  .ce-split { grid-template-columns: 1fr; }
  .ce-tiles, .cj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cj-cards .cj-card { padding: 12px 12px; }
  .cj-cards .cj-card .num { font-size: 22px; }
  .ce-kvpanel { flex-direction: column; gap: 4px; }
  /* card heads: the title keeps its line; the tools drop underneath when they do not fit */
  .ce-card-head { flex-wrap: wrap; row-gap: 6px; }
  .ce-card-head .ce-card-title { flex: 1 1 auto; white-space: nowrap; }
  .ce-card-head .ce-card-tools { flex: 1 1 auto; justify-content: flex-start; }
  .ce-panelhead { flex-wrap: wrap; height: auto !important; padding-top: 6px; padding-bottom: 6px; row-gap: 6px; }

  /* toolbars, segmented buttons and the period bar wrap instead of running off the edge */
  .ce-toolbar { flex-wrap: wrap; height: auto !important; min-height: 0; padding-top: 8px !important; padding-bottom: 8px !important; row-gap: 8px; }
  .cj-segwrap { flex-wrap: wrap; max-width: 100%; }
  .content .cj-searchcard[style*="display:flex"], .content .ce-page-body > [style*="display:flex"][style*="align-items:center"] { flex-wrap: wrap; height: auto !important; row-gap: 8px; }
  .ej-dates { display: flex !important; flex-wrap: wrap; width: 100%; margin-left: 0 !important; }
  .content .cj-searchcard [style*=display:flex], .ce-dlg-body [style*=display:flex], .content .ce-searchbody [style*=display:flex] { flex-wrap: wrap; }
  .content .cj-searchcard [style*=display:flex] > .ce-input, .ce-dlg-body [style*=display:flex] > .ce-input { flex: 1 1 160px; }
  /* filter rows: one control per line */
  .ce-tb, .ce-row, .cj-searchcard .ce-tb { flex-wrap: wrap; row-gap: 8px; }
  .ce-tb > .ce-fld, .ce-row > .ce-fld { flex: 1 1 100%; }
  .content .ce-fld > .ce-input, .content .ce-fld > .ce-select, .content .ce-fld > .ce-textarea, .content .ce-fld > div { width: 100% !important; max-width: 100%; }
  .content input.ce-input[style*="width"], .content select.ce-select[style*="width"] { width: 100% !important; max-width: 100%; }
  .content [style*="width:"] { max-width: 100%; }
  .content .cj-searchcard { height: auto !important; }
  .content .ce-btn { min-height: 36px; }
  .content .ce-periodbar { flex-wrap: wrap; }

  /* tables keep readable columns and scroll sideways inside their card */
  table.ce-grid, table.cj-table, table.cg-table, table.tbl { min-width: 640px; }
  .cj-pagerbar { flex-wrap: wrap; height: auto; padding: 8px; row-gap: 6px; }

  /* windows and drawers open full screen */
  .ce-dlg-scrim, .ce-dlg-scrim.right { padding: 0; align-items: stretch; justify-content: stretch; }
  .ce-dlg-box { width: 100%; height: 100%; }
  .ce-dlg, .ce-dlg.ce-drawer, .ce-dlg.ce-cg-center, #ce-confirm .ce-dlg { width: 100% !important; max-width: 100% !important;
    height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; }
  #ce-confirm .ce-dlg { height: auto !important; margin: auto 12px; border-radius: 12px !important; }
  .ce-dlg-foot { flex-wrap: wrap; }
  .ce-dlg-grid2, .ce-dlg-grid3 { grid-template-columns: 1fr; }

  /* settings: the section list becomes a strip above the section */
  .ce-setrail { width: 100% !important; flex-direction: row !important; overflow-x: auto !important; max-height: none; padding-right: 0 !important; gap: 6px !important; }
  .ce-setrail > * { flex: 0 0 auto; }
  #set-content { padding-left: 0 !important; }
  /* media viewer (stills): the file list becomes a strip above the picture */
  .ce-media { flex-direction: column; height: auto; min-height: 0; }
  .ce-media-list { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: 132px; }
  .ce-media-list > * { flex: 0 0 auto; }
  .ce-media-view { min-height: 300px; }
  /* video: session list, player and the transaction / journal panels stack */
  .ce-vidlayout { flex-direction: column; min-height: 0; }
  .ce-vidlist { width: auto; max-height: 40vh; }
  .ce-viddetail { flex-direction: column; }
  .ce-vidright { width: auto; }
  .ce-vidtxn { height: auto; max-height: 50vh; }
  .ce-vidcenter .ce-vidbox, .ce-media-stage { min-height: 220px; }
  .ce-journal { height: auto; }
  .ce-ejbox { max-height: 60vh; }
  .ce-incboard { min-height: 0; }
  .ce-inclane { width: 80vw; max-width: 300px; }
  /* terminal console: the incident panel goes under the terminal detail */
  #tc-case { width: 100% !important; }
  .cj-tconsole { min-height: 0; }
}

/* small phones: the top bar keeps only what fits */
@media (max-width: 480px) {
  .tb-lang { width: 58px !important; min-width: 0 !important; padding-inline: 6px 16px !important; }
  .tb-right .user-chip .uc-caret { display: none; }
  .ce-hamburger { margin-right: 2px; }
  .ce-tiles, .cj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* installed app (standalone window): no browser chrome, so leave room for the phone's status bar */
@media (display-mode: standalone) {
  .topbar-bar { padding-top: env(safe-area-inset-top); height: calc(58px + env(safe-area-inset-top)); }
}