/* IT4Y_PHASE311_THEME_SWITCHER_V1 ─────────────────────────────────────
* :root holds the LIGHT palette (new default). Dark mode is an
* override under html[data-theme="dark"]. Both palettes share the
* same variable names so every component re-skins automatically
* from CSS variables — no JS DOM rewrites needed when toggling. */
:root {
/* Surfaces */
--bg:#f3f5f9; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f7f9fc;
/* Borders */
--border:#d8dde7; --border-soft:#e6e9ef;
/* Text */
--text:#0d1117; --text-dim:#2d3748; --muted:#5a6578;
/* Accent */
--accent:#2563eb; --accent-soft:#dbeafe;
/* Semantic */
--ok:#15803d; --warn:#b45309; --danger:#b91c1c; --info:#2563eb;
/* Table */
--table-row-border:#e6e9ef; --row-hover:#eef2f8;
/* Shadow */
--shadow-sm: 0 1px 2px rgba(15,23,42,.06);
--shadow-md: 0 4px 12px rgba(15,23,42,.08);
/* Layout */
--sidebar-w:220px; --header-h:54px;
}
html[data-theme="dark"] {
--bg:#0a1219; --bg-2:#0c1722; --panel:#0f1e2e; --panel-2:#152a40;
--border:#1f3a5a; --border-soft:#15273e;
--text:#e8edf6; --text-dim:#b4c0d0; --muted:#7d8ba0;
--accent:#3b9eff; --accent-soft:#1d3a5e;
--ok:#34d399; --warn:#fbbf24; --danger:#f87171; --info:#60a5fa;
--table-row-border:#131e2d; --row-hover:#11203a;
--shadow-sm: 0 1px 2px rgba(0,0,0,.35);
--shadow-md: 0 4px 12px rgba(0,0,0,.45);
}
/* ===== IT4Y-DARKFIX — customer-panel dark-mode contrast remediation (audit 2026-05) =====
Dashboard cards (.welcome/.stat/.sec/.vc-h/.lstat/.tab) hardcoded light bg + slate text
that bypassed the token system. Remap to theme tokens under dark only (light untouched). */
html[data-theme="dark"] .welcome{background:var(--panel);border-color:var(--border);border-left-color:#2563eb;}
html[data-theme="dark"] .stat,html[data-theme="dark"] .sec{background:var(--panel);border-color:var(--border);}
html[data-theme="dark"] .vc-h,html[data-theme="dark"] .lstat{background:var(--panel-2);border-color:var(--border);}
html[data-theme="dark"] .tab{background:var(--panel-2);border-color:var(--border);color:var(--text-dim)!important;}
html[data-theme="dark"] .tab.on{background:var(--bg-2);border-color:var(--border-soft);color:var(--text)!important;}
html[data-theme="dark"] table th{background:var(--panel-2);}
html[data-theme="dark"] .welcome h1,html[data-theme="dark"] .welcome h2,html[data-theme="dark"] .welcome h3,html[data-theme="dark"] .vtit,html[data-theme="dark"] .lstat-v{color:var(--text)!important;}
html[data-theme="dark"] .vsub,html[data-theme="dark"] .l,html[data-theme="dark"] .lstat-l,html[data-theme="dark"] .welcome p,html[data-theme="dark"] .welcome strong,html[data-theme="dark"] summary{color:var(--text-dim)!important;}
html[data-theme="dark"] .sec,html[data-theme="dark"] .vc{color:var(--text);}
html[data-theme="dark"] .vc-h span,html[data-theme="dark"] .vc span:not([class]){color:var(--text-dim)!important;}
/* Smooth ~180ms transition only on background / text — short enough
that the toggle feels instant, long enough to confirm the switch. */
body, .app-shell, .app-header, .app-sidebar, .card, .stat, .sec, .ann-banner,
.nav-item, .btn, table, input, select, textarea {
transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
/* Theme toggle button — borrowed from admin SPA Phase 177 styling */
.theme-toggle {
background:transparent; border:1px solid var(--border-soft);
color:var(--text-dim); font-size:14px; line-height:1;
border-radius:6px; padding:5px 9px; cursor:pointer; margin-right:8px;
transition:background .12s, border-color .12s;
}
.theme-toggle:hover { background:var(--panel-2); border-color:var(--border); }
/* Light-theme overrides for components that hardcode dark-friendly colours.
These compensate for inline-styled cards that used dark-mode contrast
assumptions and would be illegible on the light surface otherwise. */
html:not([data-theme="dark"]) .ann-banner.info { background:#eff6ff; color:#1e3a8a; border-left-color:#60a5fa; }
html:not([data-theme="dark"]) .ann-banner.warning { background:#fef3c7; color:#78350f; border-left-color:#fbbf24; }
html:not([data-theme="dark"]) .ann-banner.critical{ background:#fef2f2; color:#7f1d1d; border-left-color:#f87171; }
html:not([data-theme="dark"]) .msg.error { background:#fef2f2; color:#7f1d1d; border:1px solid #fecaca; padding:8px 12px; border-radius:6px; }
html:not([data-theme="dark"]) .msg.ok { background:#f0fdf4; color:#14532d; border:1px solid #bbf7d0; padding:8px 12px; border-radius:6px; }
html:not([data-theme="dark"]) .msg.info { background:#eff6ff; color:#1e3a8a; border:1px solid #bfdbfe; padding:8px 12px; border-radius:6px; }
html:not([data-theme="dark"]) .pill { background:#dbeafe; color:#1e3a8a; }
html:not([data-theme="dark"]) .pill.green { background:#dcfce7; color:#14532d; }
html:not([data-theme="dark"]) .pill.red { background:#fee2e2; color:#7f1d1d; }
html:not([data-theme="dark"]) .pill.amber { background:#fef3c7; color:#78350f; }
html:not([data-theme="dark"]) .pill.blue { background:#dbeafe; color:#1e3a8a; }
html:not([data-theme="dark"]) code { background:#f1f5f9; color:#0f172a; padding:2px 5px; border-radius:3px; }
html:not([data-theme="dark"]) .nav-item.active { background:#dbeafe; color:#1e3a8a; }
html:not([data-theme="dark"]) .nav-item:hover { background:#eef2f8; }
html:not([data-theme="dark"]) .nav-label { color:#64748b; }
html:not([data-theme="dark"]) .brand-text-name { color:#2563eb; }
html:not([data-theme="dark"]) .session-info .email{ color:#0f172a; }
html:not([data-theme="dark"]) .session-info .tenant { color:#2563eb; }
html:not([data-theme="dark"]) .it4dash .welcome { background:#fff; }
html:not([data-theme="dark"]) .it4dash .stat { background:#fff; border-color:#e2e8f0; }
html:not([data-theme="dark"]) .it4dash .sec-b { background:#fff; }
html:not([data-theme="dark"]) .card { background:#fff; border:1px solid #e2e8f0; }
html:not([data-theme="dark"]) table th { background:#f8fafc; color:#475569; }
html:not([data-theme="dark"]) table td { color:#0f172a; }
html:not([data-theme="dark"]) table tr:hover { background:#f8fafc; }
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea { background:#fff; color:#0f172a; border:1px solid #cbd5e1; }
html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) select:focus,
html:not([data-theme="dark"]) textarea:focus { border-color:#2563eb; outline:2px solid #93c5fd; outline-offset:-1px; }
*{box-sizing:border-box} html,body{height:100%;margin:0}
/* IT4Y_PHASE262_SIDEBAR_SHIFT_FIX_V1 — stabilize scrollbar gutter so
content never shifts horizontally when the vertical scrollbar
appears/disappears (caused by content height changes during
background WS-driven data refresh, sidebar overlay open/close,
or window minimize/restore). */
html { scrollbar-gutter: stable; overflow-y: scroll; }
/* IT4Y_PHASE262_SIDEBAR_SHIFT_FIX_V2 — body scroll lock is now
done in JavaScript via position:fixed+top:-Ypx. The original CSS
`overflow:hidden` approach clamped scrollY to 0, causing the very
"text shift" it was meant to prevent. The .sidebar-open class is
still toggled (kept for any other CSS hooks), but the lock proper
happens through inline body styles set by the hamburger handler. */
/* (no overflow lock here — JS handles it) */
/* Content-width safety — keep main column's intrinsic min-width at 0
so it never overflows the grid track due to long unbroken tokens
(long URLs, tokens, IDs). Combined with break-word on cells, this
guarantees text layout stability across viewport changes. */
.app-main { min-width: 0; }
.card table td, .card table th { word-break: break-word; overflow-wrap: anywhere; }
/* IT4Y_PHASE272_VPS_BILLING_VISIBILITY_V1 — per-VPS billing chips */
.billing-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:11px;font-size:11px;font-weight:600;margin-left:8px;cursor:pointer;text-decoration:none;vertical-align:middle;transition:filter .15s;border:1px solid transparent}
.billing-chip:hover{filter:brightness(1.15)}
.billing-chip.paid{background:rgba(34,197,94,.14);color:#22c55e;border-color:rgba(34,197,94,.3)}
.billing-chip.open{background:rgba(251,191,36,.16);color:#fbbf24;border-color:rgba(251,191,36,.35)}
.billing-chip.overdue{background:rgba(239,68,68,.16);color:#ef4444;border-color:rgba(239,68,68,.4)}
.billing-chip.void{background:rgba(148,163,184,.14);color:#94a3b8;border-color:rgba(148,163,184,.3)}
/* end IT4Y_PHASE272_VPS_BILLING_VISIBILITY_V1 */
/* === IT4Y_PHASE269_LAYOUT_CONTAINMENT_V1 — isolate extension-injected
DOM from propagating shifts. Browser extensions (password managers,
wallet extensions, accessibility tools) frequently inject icon
overlays into INPUT/BUTTON elements after the SPA renders. Without
containment, those injections can shift adjacent content vertically
by 18-24px per overlay. With `contain: layout style`, each
container becomes a layout boundary — extension overlays inside
one .card can't push other .card siblings around.
============================================================== */
.app-main { contain: layout style; }
.card { contain: layout style; }
.ann-banner { contain: layout style; }
/* end IT4Y_PHASE269_LAYOUT_CONTAINMENT_V1 */
body{font:14px -apple-system,"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text)}
/* ===== IT4Y-POLISH-V1 — enterprise UI/UX foundation (audit 2026-05). Additive only. ===== */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
--r-sm:4px;--r-md:6px;--r-lg:10px;--r-xl:14px;--r-pill:999px;
--fs-xs:11px;--fs-sm:12px;--fs-base:14px;--fs-md:15px;--fs-lg:17px;--fs-xl:20px;--fs-2xl:26px;
--fw-normal:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--lh-tight:1.25;--lh-normal:1.5;
--ease:cubic-bezier(.4,0,.2,1);--dur-fast:.12s;--dur:.18s;
--z-header:100;--z-sidebar:90;--z-drawer:1000;--z-modal:1100;--z-toast:1200;--z-cmd:1300;
--ok-soft:#dcfce7;--warn-soft:#fef3c7;--danger-soft:#fee2e2;--info-soft:#dbeafe;
--panel-1:var(--panel);
color-scheme:light;scrollbar-color:var(--border) transparent;scrollbar-width:thin;
}
html[data-theme="dark"]{
--ok-soft:#0e2a1a;--warn-soft:#2a210e;--danger-soft:#2a1414;--info-soft:#0e1f33;
--panel-1:var(--panel);
color-scheme:dark;scrollbar-color:var(--border) transparent;
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
::selection{background:var(--accent-soft);color:var(--text);}
html[data-theme="dark"] ::selection{background:rgba(59,158,255,.30);color:var(--text);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.btn:focus-visible,.tab:focus-visible,.nav-item:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);}
a,button,.btn,[role="button"]{-webkit-tap-highlight-color:transparent;}
.skeleton{position:relative;overflow:hidden;background:var(--panel-2);border-radius:var(--r-md);}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(127,139,160,.14),transparent);animation:it4y-shimmer 1.3s infinite;}
.skeleton-line{height:12px;margin:8px 0;}
@keyframes it4y-shimmer{100%{transform:translateX(100%);}}
.empty-state{text-align:center;padding:var(--sp-12) var(--sp-6);color:var(--muted);}
.empty-state .es-icon{font-size:34px;opacity:.55;margin-bottom:var(--sp-3);}
.empty-state .es-title{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--text-dim);margin-bottom:var(--sp-1);}
.empty-state .es-sub{font-size:var(--fs-sm);max-width:340px;margin:0 auto;line-height:var(--lh-normal);}
@media (prefers-reduced-motion: reduce){.skeleton::after{animation:none;}}
/* ===== /IT4Y-POLISH-V1 ===== */
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
code{font:12px ui-monospace,"SF Mono",Menlo,monospace;color:var(--info)}
pre{font:12px ui-monospace,"SF Mono",Menlo,monospace}
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--header-h) 1fr;min-height:100vh}
.app-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-bottom:1px solid var(--border);padding:0 22px;z-index:10}
.app-header .brand{font-weight:700;color:var(--accent);display:flex;align-items:center;gap:10px}
.app-header .right{display:flex;gap:14px;align-items:center;font-size:13px}
.session-info{color:var(--text-dim)} .session-info .email{color:var(--text);font-weight:600}
.session-info .tenant{color:var(--accent);margin-left:6px}
.app-sidebar{background:var(--bg-2);border-right:1px solid var(--border-soft);overflow-y:auto;padding:14px 8px}
.nav-group{margin-bottom:12px}
.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);padding:6px 12px;margin-top:6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:1px 4px;border-radius:6px;cursor:pointer;color:var(--text-dim);font-size:13px;user-select:none}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--text);font-weight:600}
/* IT4Y_PHASE192_REALTIME_WS_V1 — brief flash when a WS event lands */
.nav-item.rt-flash{animation:rtflash 1.4s ease-out 1}
@keyframes rtflash{0%{box-shadow:inset 3px 0 0 var(--accent)}60%{box-shadow:inset 3px 0 0 var(--accent)}100%{box-shadow:inset 3px 0 0 transparent}}
.nav-item .icon{width:16px;text-align:center;font-size:14px}
.app-main{padding:22px 26px;overflow-y:auto}
.breadcrumbs{color:var(--muted);font-size:12px;margin-bottom:12px}
.breadcrumbs a{color:var(--muted)} .breadcrumbs .sep{margin:0 8px;opacity:.5}
.page-title{font-size:22px;font-weight:700;margin:0 0 16px}
.card{background:var(--panel);border:1px solid var(--border-soft);border-radius:10px;padding:18px;margin-bottom:16px}
.card h3{margin:0 0 12px 0;font-size:15px}
.card-toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--panel-2);padding:14px 16px;border-radius:8px;border:1px solid var(--border-soft)}
.kpi .v{font-size:26px;font-weight:700;color:var(--accent)}
.kpi .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-top:4px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--border-soft);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
td{padding:9px 12px;border-bottom:1px solid #131e2d}
tr.clickable{cursor:pointer} tr.clickable:hover td{background:#11203a}
.pill{display:inline-block;padding:2px 8px;border-radius:11px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;background:#1f3a5e;color:#b9d3f0}
.pill.green{background:#14331a;color:#b3f5c4}
.pill.red{background:#3a1818;color:#fda4a4}
.pill.amber{background:#3a2f18;color:#fde2a4}
.field{margin:12px 0}
.field label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border-radius:6px;border:1px solid var(--border);background:#0a1726;color:var(--text);font:13px ui-monospace,monospace}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.btn{padding:8px 14px;border-radius:6px;border:0;cursor:pointer;background:var(--accent);color:#fff;font:600 13px system-ui;transition:filter .15s}
.btn:hover{filter:brightness(1.1)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.small{padding:4px 10px;font-size:11px}
.btn.ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border)}
.btn.warn{background:var(--warn);color:#0a1929} .btn.danger{background:var(--danger)}
.msg{padding:11px 14px;border-radius:6px;font-size:13px;margin:10px 0}
.msg.error{background:#3a1818;color:#fda4a4;border:1px solid #7f3333}
.msg.ok{background:#14331a;color:#b3f5c4;border:1px solid #2f6e44}
.msg.info{background:#14253d;color:#b6d4f8;border:1px solid #2a4a76}
.muted{color:var(--muted)} .small{font-size:11px} .right{text-align:right}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
/* IT4Y_NOTOPBAR_2026_06_08 — global route/fetch progress bar permanently retired (redundant; SPA transitions are near-instant). Hard-hidden so it can never paint, even if a stray .active is added by legacy code. */
.loading-overlay,.loading-overlay.active{display:none!important;animation:none!important}
/* IT4Y_NOTOPBAR_2026_06_08 — the router programmatically moves focus to a non-interactive wrapper/heading on route & tab changes; suppress the browser default focus ring there so no blue line/box is drawn across the layout. Genuinely interactive controls keep their :focus-visible a11y ring (rule at panel.css ~line 164). */
#view-root:focus,#view-root:focus-visible,#main-content:focus,#main-content:focus-visible,main.app-main:focus,main.app-main:focus-visible,.app-shell:focus,.app-shell:focus-visible,.page-title:focus,.page-title:focus-visible{outline:none!important;box-shadow:none!important}
@keyframes progress{0%{transform:scaleX(0)}50%{transform:scaleX(.7)}100%{transform:scaleX(1)}}
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.auth-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:28px}
.auth-card h1{margin:0 0 6px;font-size:22px}
.auth-card .muted{font-size:13px;line-height:1.5;margin-bottom:18px}
details{background:var(--panel-2);border:1px solid var(--border-soft);border-radius:6px;padding:8px 12px;margin-top:14px}
details summary{cursor:pointer;color:var(--text-dim);font-size:12px}
details[open] summary{margin-bottom:8px}
.msg-bubble{background:var(--panel-2);border:1px solid var(--border-soft);border-left:3px solid var(--accent);padding:12px 14px;margin-bottom:8px;border-radius:0 8px 8px 0}
.msg-bubble.self{border-left-color:var(--ok)}
.msg-bubble .meta{font-size:11px;color:var(--muted);margin-bottom:6px}
.msg-bubble pre{margin:0;white-space:pre-wrap;font:inherit}
/* IT4Y_PHASE99_CUSTOMER_ANN_UI_V1 */
.ann-banner{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;margin-bottom:8px;border-radius:6px;font-size:13px;border-left:4px solid var(--accent)}
.ann-banner.info{background:#14253d;color:#b6d4f8;border-left-color:var(--info)}
/* IT4Y_PHASE196_EMPTY_STATE_V1 — friendly empty-state component */
.empty-state{text-align:center;padding:42px 20px;color:var(--text-dim)}
.empty-state .ico{font-size:48px;margin-bottom:12px;opacity:.55}
.empty-state h4{margin:0 0 6px;font-size:16px;color:var(--text)}
.empty-state p{margin:0 0 16px;font-size:13px;line-height:1.55;max-width:420px;margin-left:auto;margin-right:auto}
/* IT4Y_PHASE196_RESPONSIVE_V1 — mobile-first responsive layout.
At ≤900px the sidebar slides off-canvas behind a hamburger button.
Tables become horizontally scrollable. KPI grid collapses to 2 cols. */
.hamburger{display:none;background:transparent;border:0;color:var(--text);font-size:22px;cursor:pointer;padding:4px 8px;margin-right:8px}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9;animation:fadein .15s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (max-width: 900px) {
:root{--sidebar-w:0px}
.hamburger{display:inline-flex;align-items:center;justify-content:center}
.app-sidebar{
position:fixed;left:0;top:var(--header-h);bottom:0;width:240px;z-index:11;
transform:translateX(-105%);transition:transform .2s ease-out;
box-shadow:4px 0 18px rgba(0,0,0,.45);
}
.app-sidebar.open{transform:translateX(0)}
.sidebar-backdrop.open{display:block}
.app-main{padding:16px 14px}
.page-title{font-size:18px}
.card{padding:14px;margin-bottom:12px}
.session-info .tenant{display:none}
.session-info .email{max-width:140px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
.kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:8px}
.kpi .v{font-size:20px}
table{font-size:12px}
th,td{padding:6px 8px}
/* table-overflow guard */
.card > table, .card > .table-wrap{display:block;max-width:100%;overflow-x:auto}
.btn{padding:9px 14px;font-size:13px} /* slightly larger touch target */
.btn.small{padding:5px 10px;font-size:11px}
}
@media (max-width: 480px) {
.kpi-grid{grid-template-columns:1fr}
#rt-status-pill{font-size:10px;padding:2px 6px}
}
/* IT4Y_PHASE196_MODAL_KBD_V1 — focus management baseline */
.it4y-modal-backdrop:focus{outline:none}
.it4y-modal:focus-within{outline:none}
.ann-banner.warning{background:#3a2f18;color:#fde2a4;border-left-color:var(--warn)}
.ann-banner.critical{background:#3a1818;color:#fda4a4;border-left-color:var(--danger)}
.ann-banner .body{flex:1;line-height:1.4}
.ann-banner .body strong{display:block;margin-bottom:2px}
.ann-banner .dismiss{background:transparent;border:0;color:inherit;cursor:pointer;font-size:18px;line-height:1;opacity:.6;padding:2px 6px}
.ann-banner .dismiss:hover{opacity:1}
/* IT4Y_PHASE201_SKIP_LINK_V1 — keyboard skip-link. Visually hidden until
focused. First focusable element in the shell so Tab from a fresh
page-load lands here, letting screen-reader / keyboard users jump
past the sidebar navigation straight to the main content. */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9500}
.skip-link:focus{position:fixed;left:16px;top:12px;width:auto;height:auto;padding:8px 14px;background:var(--accent);color:#fff;border-radius:6px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.4);outline:2px solid #fff;outline-offset:2px}
/* IT4Y_PHASE201_ARIA_BUSY_V1 — subtle visual signal for async view loads. */
[aria-busy="true"]{opacity:.72;pointer-events:none;transition:opacity .12s ease}
[aria-busy="true"]::after{content:"";display:block;position:absolute;inset:0;background:transparent;cursor:progress}
/* IT4Y_PHASE201_PAGE_TITLE_FOCUS_V1 — when route() programmatically focuses
the page-title, suppress the default outline ring (focus is moved
transparently so screen readers announce the new view; we don't want
a visible blue ring around the heading on every navigation). */
.page-title:focus{outline:none}
.page-title:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
/* IT4Y_PHASE201_REDUCED_MOTION_V1 — respect user OS-level preference.
Honors `prefers-reduced-motion: reduce` (set in macOS / Windows /
iOS / Android accessibility settings) by neutralising every animation
+ transition the SPA defines. Required for WCAG 2.1 SC 2.3.3 and
to avoid triggering vestibular disorders. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
/* IT4Y_PHASE203_CMD_PALETTE_V1 — global command palette. Cmd/Ctrl+K (or
`/`, or the header search button) opens this overlay. Fully keyboard-
accessible (arrow keys, Enter, Esc). The palette is a transient
element added to body and removed on close — no persistent DOM
footprint when not in use. Matches the dark theme; high-contrast
focus ring is provided by the OS via `:focus-visible`. */
#it4y-cmd-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;z-index:9300;padding:60px 16px 16px;animation:cmdFadeIn .12s ease-out}
@keyframes cmdFadeIn{from{opacity:0}to{opacity:1}}
#it4y-cmd{background:var(--panel);border:1px solid var(--border);border-radius:10px;width:100%;max-width:600px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 64px rgba(0,0,0,.55)}
#it4y-cmd .cmd-input{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-soft)}
#it4y-cmd .cmd-input .icon{font-size:18px;opacity:.55}
#it4y-cmd input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:15px;font-family:inherit}
#it4y-cmd input::placeholder{color:var(--muted)}
#it4y-cmd .cmd-hint{font-size:11px;color:var(--muted);background:var(--panel-2);padding:2px 6px;border-radius:4px;border:1px solid var(--border-soft);font-family:ui-monospace,monospace}
#it4y-cmd .cmd-list{overflow-y:auto;padding:6px 0;flex:1}
#it4y-cmd .cmd-group{padding:4px 0}
#it4y-cmd .cmd-group-label{padding:6px 18px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
#it4y-cmd .cmd-item{display:flex;align-items:center;gap:10px;padding:8px 18px;cursor:pointer;font-size:14px;color:var(--text-dim)}
#it4y-cmd .cmd-item .ico{width:18px;text-align:center;font-size:14px;opacity:.85}
#it4y-cmd .cmd-item .lbl{flex:1}
#it4y-cmd .cmd-item .kbd{font-size:10px;color:var(--muted);background:var(--panel-2);padding:1px 5px;border-radius:3px;border:1px solid var(--border-soft);font-family:ui-monospace,monospace}
#it4y-cmd .cmd-item.active,#it4y-cmd .cmd-item:hover{background:var(--accent-soft);color:var(--text)}
#it4y-cmd .cmd-item.active .ico,#it4y-cmd .cmd-item:hover .ico{opacity:1}
#it4y-cmd .cmd-empty{padding:20px;text-align:center;color:var(--muted);font-size:13px}
#it4y-cmd .cmd-footer{padding:8px 18px;font-size:11px;color:var(--muted);border-top:1px solid var(--border-soft);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
#it4y-cmd .cmd-footer kbd{font-family:ui-monospace,monospace;background:var(--panel-2);padding:1px 5px;border-radius:3px;border:1px solid var(--border-soft);font-size:10px}
/* Keyboard shortcuts overlay — triggered by `?` */
#it4y-kbd-overlay .card{max-width:480px;margin:60px auto;font-size:13px}
#it4y-kbd-overlay h3{margin-top:0}
#it4y-kbd-overlay .kbd-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--border-soft)}
#it4y-kbd-overlay .kbd-row:last-child{border-bottom:0}
#it4y-kbd-overlay kbd{font-family:ui-monospace,monospace;background:var(--panel-2);padding:1px 6px;border-radius:3px;border:1px solid var(--border-soft);font-size:11px;color:var(--text)}
/* Header search button — opens the command palette. Visible on desktop
and mobile, complements the keyboard shortcut for users who don't
know it exists. */
.cmd-trigger{display:flex;align-items:center;gap:6px;background:var(--panel-2);color:var(--text-dim);border:1px solid var(--border-soft);border-radius:6px;padding:4px 10px;cursor:pointer;font-size:12px;font-family:inherit;transition:background .12s}
.cmd-trigger:hover{background:var(--border-soft);color:var(--text)}
.cmd-trigger kbd{font-family:ui-monospace,monospace;background:var(--bg);padding:1px 5px;border-radius:3px;font-size:10px;color:var(--muted)}
@media (max-width: 600px) {
.cmd-trigger .lbl, .cmd-trigger kbd { display:none; }
.cmd-trigger { padding:6px 8px; }
}
/* IT4Y_PHASE202_PRINT_STYLESHEET_V1 — when the customer prints an
invoice / ticket / activity log, hide all the SPA chrome (sidebar,
header, hamburger, status pill, action buttons, toolbars), reset
the dark theme to print-on-white, and let tables flow at full
width so receipts come out cleanly. Single SPA, but printable. */
@media print {
html,body { background:#fff !important; color:#000 !important; }
.skip-link,
.app-header,
.app-sidebar,
.sidebar-backdrop,
.hamburger,
#rt-status-pill,
#it4y-toast-root,
.ann-banner .dismiss,
.card-toolbar .btn,
.card-toolbar > button,
.nav-item,
.empty-state .btn,
button.btn { display:none !important; }
.app-shell {
display:block !important;
grid-template:none !important;
min-height:auto !important;
}
.app-main {
padding:0 !important;
grid-column:1/-1 !important;
}
.card {
background:#fff !important;
color:#000 !important;
border:1px solid #888 !important;
box-shadow:none !important;
page-break-inside:avoid;
margin:0 0 12px 0;
}
.muted, .muted.small { color:#444 !important; }
table { width:100% !important; border-collapse:collapse; }
table th, table td {
border:1px solid #aaa !important;
padding:6px 8px;
background:#fff !important;
color:#000 !important;
}
.pill { border:1px solid #888 !important; background:#fff !important; color:#000 !important; }
a { color:#000 !important; text-decoration:underline; }
a[href]::after { content:" (" attr(href) ")"; font-size:10px; color:#555; }
/* don't print href for in-page anchors and javascript: */
a[href^="#"]::after, a[href^="javascript:"]::after { content:""; }
.page-title { color:#000 !important; border-bottom:1px solid #888; padding-bottom:4px; }
h1,h2,h3,h4 { color:#000 !important; page-break-after:avoid; }
tr, td, th { page-break-inside:avoid; }
}
/* IT4Y_CUSTOMER_NOTIF_BELL_V1 — Customer notification bell + feedback styling */
.notif-bell-wrap { position: relative; display: inline-flex; align-items: center; margin: 0 6px; }
.notif-bell {
background: transparent; border: 1px solid var(--border, #e5e7eb); color: var(--text-dim, #4b5563);
width: 36px; height: 36px; border-radius: 8px; cursor: pointer; padding: 0;
display: inline-flex; align-items: center; justify-content: center; position: relative;
transition: background .15s, transform .15s;
}
.notif-bell:hover { background: var(--panel-2, #f1f5f9); color: var(--text, #111827); }
.notif-bell-ico { font-size: 17px; line-height: 1; }
.notif-bell-badge {
position: absolute; top: -4px; right: -4px;
background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px #fff;
}
body.dark .notif-bell-badge { box-shadow: 0 0 0 2px #0b1220; }
.notif-shake { animation: notif-shake .55s ease-in-out; }
@keyframes notif-shake {
0%,100% { transform: rotate(0); }
20% { transform: rotate(-14deg); }
40% { transform: rotate(12deg); }
60% { transform: rotate(-8deg); }
80% { transform: rotate(6deg); }
}
.notif-bell-panel {
position: absolute; top: 44px; right: 0;
width: 380px; max-width: 92vw; max-height: 540px;
background: var(--panel, #fff); border: 1px solid var(--border, #e5e7eb);
border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.14);
overflow: hidden; z-index: 10000;
display: flex; flex-direction: column;
animation: notif-panel-in .15s ease-out;
}
@keyframes notif-panel-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.notif-header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 14px; border-bottom: 1px solid var(--border, #eef2f6);
background: var(--panel-2, #f8fafc);
}
.notif-list { overflow-y: auto; flex: 1; }
.notif-empty { text-align: center; padding: 36px 16px; color: #9ca3af; }
.notif-row {
display: grid; grid-template-columns: 38px 1fr; gap: 10px;
padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border, #eef2f6);
transition: background .12s;
}
.notif-row:hover { background: var(--panel-2, #f8fafc); }
.notif-row:last-child { border-bottom: none; }
.notif-unread { background: linear-gradient(90deg, rgba(34,160,255,.08), transparent); }
.notif-unread:hover { background: linear-gradient(90deg, rgba(34,160,255,.14), var(--panel-2,#f8fafc)); }
.notif-avatar {
width: 36px; height: 36px; border-radius: 50%; background: #e0eaf5; color: #2563a8;
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.notif-body { min-width: 0; }
.notif-row1 { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text, #111827); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #22a0ff; display: inline-block; flex-shrink: 0; }
.notif-row1 strong { color: var(--text, #111827); }
.notif-ago { margin-left: auto; font-size: 11px; color: #9ca3af; }
.notif-subject { font-size: 13px; font-weight: 600; color: var(--text, #111827); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-preview { margin-top: 2px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-tid { margin-top: 4px; font-size: 11px; }
.notif-tid code { background: var(--panel-2, #f1f5f9); padding: 1px 6px; border-radius: 4px; color: #6b7280; }
.notif-footer {
display: flex; gap: 6px; align-items: center;
padding: 10px 12px; border-top: 1px solid var(--border, #eef2f6);
background: var(--panel-2, #f8fafc);
}
.notif-action {
background: transparent; border: 1px solid var(--border, #d1d5db); color: var(--text-dim, #4b5563);
padding: 5px 10px; font-size: 12px; border-radius: 6px; cursor: pointer; text-decoration: none;
transition: all .15s;
}
.notif-action:hover { background: var(--panel, #fff); color: var(--text, #111827); border-color: #9ca3af; }
.notif-action-primary { background: #22a0ff; color: #fff !important; border-color: #22a0ff; margin-left: auto; }
.notif-action-primary:hover { background: #1d6fbd; border-color: #1d6fbd; }
body.dark .notif-bell { background: rgba(255,255,255,.04); border-color: #334155; color: #cbd5e1; }
body.dark .notif-bell:hover { background: rgba(255,255,255,.08); color: #fff; }
body.dark .notif-bell-panel { background: #1e293b; border-color: #334155; }
body.dark .notif-header,
body.dark .notif-footer { background: rgba(255,255,255,.03); border-color: #334155; }
body.dark .notif-row { border-color: rgba(255,255,255,.06); color: #e5e7eb; }
body.dark .notif-row:hover { background: rgba(255,255,255,.04); }
body.dark .notif-unread { background: linear-gradient(90deg, rgba(34,160,255,.12), transparent); }
body.dark .notif-row1 strong { color: #f9fafb; }
body.dark .notif-subject { color: #f9fafb; }
body.dark .notif-tid code { background: rgba(255,255,255,.06); color: #94a3b8; }
body.dark .notif-avatar { background: #334155; color: #93c5fd; }
body.dark .notif-action { border-color: #475569; color: #cbd5e1; }
body.dark .notif-action:hover { background: rgba(255,255,255,.06); color: #fff; }
/* Read-only banner for resolved/closed tickets */
.tkt-readonly-banner {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-radius: 10px; margin: 10px 0;
background: linear-gradient(90deg, rgba(34,160,255,.10), rgba(34,160,255,.04));
border: 1px solid rgba(34,160,255,.25); color: #1e3a5f;
}
.tkt-readonly-banner .tkt-ro-ico { font-size: 22px; }
.tkt-readonly-banner.tkt-ro-closed {
background: linear-gradient(90deg, rgba(107,114,128,.12), rgba(107,114,128,.04));
border-color: rgba(107,114,128,.30); color: #374151;
}
body.dark .tkt-readonly-banner { color: #cbe6ff; border-color: rgba(34,160,255,.35); }
body.dark .tkt-readonly-banner.tkt-ro-closed { color: #d1d5db; border-color: rgba(148,163,184,.35); }
/* Feedback widget styling */
.tkt-feedback {
border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 16px;
background: var(--panel-2, #f8fafc); margin: 14px 0;
}
.tkt-feedback h4 { margin: 0 0 10px; font-size: 15px; color: var(--text, #111827); }
.tkt-feedback .tkt-stars { display: flex; gap: 4px; margin: 8px 0 12px; }
.tkt-feedback .tkt-star-btn {
background: transparent; border: none; padding: 4px 8px; cursor: pointer;
font-size: 28px; line-height: 1; color: #d1d5db; transition: transform .12s, color .12s;
}
.tkt-feedback .tkt-star-btn:hover { transform: scale(1.15); color: #f59e0b; }
.tkt-feedback .tkt-star-btn.tkt-star-on { color: #f59e0b; }
.tkt-feedback textarea.tkt-comment {
width: 100%; min-height: 70px; padding: 9px 11px; font-size: 14px; line-height: 1.45;
border: 1px solid var(--border, #d1d5db); border-radius: 8px;
background: var(--panel, #fff); color: var(--text, #111827); resize: vertical;
font-family: inherit;
}
.tkt-feedback textarea.tkt-comment:focus { outline: none; border-color: #22a0ff; box-shadow: 0 0 0 3px rgba(34,160,255,.15); }
.tkt-feedback .tkt-fb-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.tkt-feedback .tkt-fb-status { margin-left: auto; font-size: 12px; color: #6b7280; }
body.dark .tkt-feedback { background: rgba(255,255,255,.03); border-color: #334155; }
body.dark .tkt-feedback h4 { color: #f9fafb; }
body.dark .tkt-feedback textarea.tkt-comment { background: #0b1220; color: #f3f4f6; border-color: #334155; }
/* end IT4Y_CUSTOMER_NOTIF_BELL_V1 */
/* IT4Y_RESOLVED_HIDE_REPLY_V1 — hide the leftover empty Reply UI when resolved/closed */
.view-tickets:has(.tkt-readonly-banner) > .card:has(textarea[id^="reply-"]),
.tkt-detail:has(.tkt-readonly-banner) .reply-box,
.tkt-detail:has(.tkt-readonly-banner) > .card:has(> h3:first-child + textarea),
.tkt-detail:has(.tkt-readonly-banner) > div:has(> textarea):not(.tkt-feedback),
body:has(.tkt-readonly-banner) [data-component="reply-box"],
body:has(.tkt-readonly-banner) > .app > main .reply-section,
/* Cover the common pattern: a card containing only "Reply" h3 + empty textarea */
body:has(.tkt-readonly-banner) .card:has(> h3 + textarea):not(:has(.tkt-feedback)):not(:has(.tkt-readonly-banner)) {
display: none !important;
}
/* end IT4Y_RESOLVED_HIDE_REPLY_V1 */
/* ════════════════════════════════════════════════════════════════════════
* IT4Y_CUST_TICKETS_REDESIGN_V1 — Modern customer Support Tickets page
* ════════════════════════════════════════════════════════════════════════ */
/* === 1. Compress the SOC tab help banner into a single collapsed bar === */
.view-tickets .soc-tab-banner,
[data-view="tickets"] .soc-tab-banner,
body:has([id="route-tickets"]) .soc-tab-banner {
position: relative;
padding: 10px 14px 10px 16px !important;
margin-bottom: 14px !important;
max-height: 44px;
overflow: hidden;
transition: max-height .25s ease;
background: linear-gradient(90deg, rgba(34,160,255,.06), transparent) !important;
border-left: 3px solid #22a0ff !important;
border-radius: 8px !important;
}
.soc-tab-banner.it4y-expanded { max-height: 600px !important; }
.soc-tab-banner > * { font-size: 13px !important; }
.soc-tab-banner > strong:first-of-type,
.soc-tab-banner > p:first-of-type,
.soc-tab-banner > div:first-of-type:not(.it4y-banner-toggle) {
display: inline !important;
margin: 0 !important;
}
.it4y-banner-toggle {
position: absolute; top: 8px; right: 14px;
background: transparent; border: 1px solid var(--border, #d1d5db); color: var(--text-dim, #4b5563);
border-radius: 16px; padding: 2px 10px; font-size: 11px; cursor: pointer; font-weight: 500;
transition: all .15s;
}
.it4y-banner-toggle:hover { background: #fff; color: var(--text, #111827); border-color: #9ca3af; }
body.dark .it4y-banner-toggle { background: rgba(255,255,255,.04); border-color: #475569; color: #cbd5e1; }
body.dark .it4y-banner-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
/* === 2. Header bar above the ticket list === */
.it4y-tkt-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0 4px 14px;
gap: 12px;
}
.it4y-tkt-header h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--text, #111827);
letter-spacing: -0.01em;
}
.it4y-tkt-header h2 .count {
display: inline-block;
margin-left: 8px;
padding: 2px 9px;
background: var(--panel-2, #f1f5f9);
border-radius: 10px;
font-size: 12px;
font-weight: 600;
color: var(--text-dim, #6b7280);
vertical-align: middle;
}
body.dark .it4y-tkt-header h2 .count { background: rgba(255,255,255,.06); color: #94a3b8; }
/* === 3. Transform the ticket table into a card-row list === */
.view-tickets-list-wrap {
background: var(--panel, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
overflow: hidden;
}
body.dark .view-tickets-list-wrap { background: #0b1220; border-color: #334155; }
.view-tickets-list-wrap table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.view-tickets-list-wrap thead { display: none; }
.view-tickets-list-wrap tbody tr.clickable {
display: grid;
grid-template-columns: 4px 1fr auto auto;
gap: 0 18px;
align-items: center;
padding: 14px 18px 14px 0;
border-bottom: 1px solid var(--border, #eef2f6);
cursor: pointer;
position: relative;
transition: background .15s, transform .15s;
}
.view-tickets-list-wrap tbody tr.clickable:hover {
background: linear-gradient(90deg, rgba(34,160,255,.04), transparent);
}
.view-tickets-list-wrap tbody tr.clickable:last-child { border-bottom: none; }
.view-tickets-list-wrap tbody tr.clickable td {
padding: 0;
border: none;
background: transparent !important;
}
/* Left color stripe — first | (ID) becomes the stripe */
.view-tickets-list-wrap tbody tr.clickable td:nth-child(1) {
width: 4px;
height: 100%;
min-height: 44px;
background: #cbd5e1;
font-size: 0;
border-radius: 0 4px 4px 0;
align-self: stretch;
}
.view-tickets-list-wrap tbody tr.clickable td:nth-child(1) code { display: none; }
/* Subject (2nd | ) becomes the main column with id+subject stacked */
.view-tickets-list-wrap tbody tr.clickable td:nth-child(2) {
font-size: 14.5px;
font-weight: 600;
color: var(--text, #111827);
line-height: 1.35;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.dark .view-tickets-list-wrap tbody tr.clickable td:nth-child(2) { color: #f3f4f6; }
.view-tickets-list-wrap tbody tr.clickable td:nth-child(2)::after {
content: attr(data-it4y-tid);
display: block;
margin-top: 4px;
font-size: 11.5px;
font-weight: 500;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--text-dim, #9ca3af);
letter-spacing: -0.01em;
}
/* Department (3rd | ) becomes a subtle pill */
.view-tickets-list-wrap tbody tr.clickable td:nth-child(3) {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-dim, #6b7280);
}
.view-tickets-list-wrap tbody tr.clickable td:nth-child(3) .pill {
background: var(--panel-2, #f1f5f9);
color: var(--text-dim, #475569);
font-size: 11px;
padding: 3px 9px;
border-radius: 6px;
font-weight: 500;
}
body.dark .view-tickets-list-wrap tbody tr.clickable td:nth-child(3) .pill {
background: rgba(255,255,255,.06); color: #cbd5e1;
}
/* Status (4th | ) prominent */
.view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill {
font-size: 11px;
padding: 4px 10px;
border-radius: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.green {
background: rgba(34,197,94,.12); color: #15803d;
}
.view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.yellow,
.view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.amber {
background: rgba(245,158,11,.14); color: #b45309;
}
.view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.blue {
background: rgba(34,160,255,.14); color: #1e40af;
}
.view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.gray,
.view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.muted {
background: rgba(107,114,128,.14); color: #4b5563;
}
body.dark .view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.green { color: #4ade80; }
body.dark .view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.yellow,
body.dark .view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.amber { color: #fbbf24; }
body.dark .view-tickets-list-wrap tbody tr.clickable td:nth-child(4) .pill.blue { color: #93c5fd; }
/* Last activity (5th | ) — we'll relocate via grid */
.view-tickets-list-wrap tbody tr.clickable td:nth-child(5) {
grid-column: 2;
grid-row: 2;
font-size: 11.5px;
color: var(--text-dim, #9ca3af);
font-weight: 500;
white-space: nowrap;
text-align: right;
align-self: end;
margin-top: 2px;
}
/* Override layout to give meta a 2nd row inside col 2 */
.view-tickets-list-wrap tbody tr.clickable {
grid-template-areas:
"stripe subj dept status"
"stripe meta dept status";
grid-template-rows: auto auto;
}
.view-tickets-list-wrap tbody tr.clickable td:nth-child(1) { grid-area: stripe; }
.view-tickets-list-wrap tbody tr.clickable td:nth-child(2) { grid-area: subj; }
.view-tickets-list-wrap tbody tr.clickable td:nth-child(3) { grid-area: dept; }
.view-tickets-list-wrap tbody tr.clickable td:nth-child(4) { grid-area: status; align-self: center; }
.view-tickets-list-wrap tbody tr.clickable td:nth-child(5) {
grid-area: meta;
text-align: left;
align-self: start;
margin-top: 2px;
}
.view-tickets-list-wrap tbody tr.clickable td:nth-child(5)::before {
content: '🕒 ';
margin-right: 3px;
opacity: .7;
}
/* === Status-based stripe colors === */
.view-tickets-list-wrap tbody tr.clickable.it4y-status-resolved td:nth-child(1) { background: #22c55e; }
.view-tickets-list-wrap tbody tr.clickable.it4y-status-closed td:nth-child(1) { background: #6b7280; }
.view-tickets-list-wrap tbody tr.clickable.it4y-status-open td:nth-child(1) { background: #22a0ff; }
.view-tickets-list-wrap tbody tr.clickable.it4y-status-pending_customer td:nth-child(1) { background: #f59e0b; }
.view-tickets-list-wrap tbody tr.clickable.it4y-status-pending_staff td:nth-child(1) { background: #3b82f6; }
.view-tickets-list-wrap tbody tr.clickable.it4y-status-pending td:nth-child(1) { background: #f59e0b; }
/* === Status pill auto-tinting (when no explicit pill color class) === */
.view-tickets-list-wrap tbody tr.clickable.it4y-status-pending_customer td:nth-child(4) .pill,
.view-tickets-list-wrap tbody tr.clickable.it4y-status-pending td:nth-child(4) .pill {
background: rgba(245,158,11,.14); color: #b45309;
}
.view-tickets-list-wrap tbody tr.clickable.it4y-status-pending_staff td:nth-child(4) .pill {
background: rgba(59,130,246,.14); color: #1d4ed8;
}
.view-tickets-list-wrap tbody tr.clickable.it4y-status-open td:nth-child(4) .pill {
background: rgba(34,160,255,.14); color: #1e40af;
}
/* === Empty state polish === */
.view-tickets-list-wrap .empty,
.view-tickets-list-wrap td[colspan] {
padding: 60px 20px !important;
text-align: center;
color: var(--text-dim, #9ca3af);
font-size: 14px;
}
/* === Hide the legacy "Your support tickets (N)" header that comes from the SPA — we render our own === */
.view-tickets .card > div > strong:first-child:not([data-it4y]) {
/* leave alone if SPA already has it */
}
/* === Remove the weird outline/focus box that wraps the page title === */
.view-tickets > .soc-tab-purpose-hint:focus,
.view-tickets > .page-title:focus,
.view-tickets > [tabindex]:focus { outline: none; }
/* end IT4Y_CUST_TICKETS_REDESIGN_V1 */
/* IT4Y_TKT_BANNER_FIX_V1 — force-collapse SOC tab help banner with high specificity */
.card.soc-tab-banner,
body .soc-tab-banner {
position: relative !important;
max-height: 42px !important;
overflow: hidden !important;
padding: 11px 80px 11px 16px !important;
margin-bottom: 16px !important;
background: linear-gradient(90deg, rgba(34,160,255,.08), rgba(34,160,255,.02)) !important;
border-left: 3px solid #22a0ff !important;
border-radius: 8px !important;
transition: max-height .25s ease !important;
cursor: pointer;
}
.card.soc-tab-banner.it4y-expanded,
body .soc-tab-banner.it4y-expanded {
max-height: 700px !important;
cursor: default;
padding-bottom: 16px !important;
}
/* The first child (banner title) becomes the visible one-liner */
.card.soc-tab-banner > *,
body .soc-tab-banner > * {
font-size: 13px !important;
}
.card.soc-tab-banner > strong:first-child,
body .soc-tab-banner > strong:first-child,
.card.soc-tab-banner > h2:first-child,
body .soc-tab-banner > h2:first-child,
.card.soc-tab-banner > h3:first-child,
body .soc-tab-banner > h3:first-child,
.card.soc-tab-banner > h4:first-child,
body .soc-tab-banner > h4:first-child {
display: inline-block !important;
margin: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--text, #111827) !important;
vertical-align: middle;
}
/* tiny "Support conversations" subtitle next to title when collapsed */
.card.soc-tab-banner:not(.it4y-expanded) > *:not(strong):not(h2):not(h3):not(h4):not(.it4y-banner-toggle) {
/* hidden by overflow:hidden + max-height clip */
}
.it4y-banner-toggle {
position: absolute !important;
top: 9px !important;
right: 14px !important;
background: #fff !important;
border: 1px solid #d1d5db !important;
color: #4b5563 !important;
border-radius: 14px !important;
padding: 3px 11px !important;
font-size: 11px !important;
cursor: pointer !important;
font-weight: 500 !important;
transition: all .15s !important;
z-index: 5;
}
.it4y-banner-toggle:hover {
background: #f9fafb !important;
color: #111827 !important;
border-color: #9ca3af !important;
}
body.dark .card.soc-tab-banner,
body.dark .soc-tab-banner {
background: linear-gradient(90deg, rgba(34,160,255,.12), rgba(34,160,255,.04)) !important;
}
body.dark .it4y-banner-toggle {
background: rgba(255,255,255,.06) !important;
border-color: #475569 !important;
color: #cbd5e1 !important;
}
body.dark .it4y-banner-toggle:hover {
background: rgba(255,255,255,.12) !important;
color: #fff !important;
}
/* Also nudge the "Your support tickets" header bar */
.card:has(table tr.clickable[onclick*="tickets/"]) > div:first-child:has(strong) {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 16px 18px 14px !important;
margin: 0 !important;
border-bottom: 1px solid var(--border, #eef2f6) !important;
}
.card:has(table tr.clickable[onclick*="tickets/"]) > div:first-child strong {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--text, #111827) !important;
}
body.dark .card:has(table tr.clickable[onclick*="tickets/"]) > div:first-child {
border-color: #334155 !important;
}
body.dark .card:has(table tr.clickable[onclick*="tickets/"]) > div:first-child strong {
color: #f3f4f6 !important;
}
/* end IT4Y_TKT_BANNER_FIX_V1 */
/* ════════════════════════════════════════════════════════════════════════
* IT4Y_TKT_DETAIL_MINIMAL_SAFE_V1 — CSS-only chat bubbles on ticket detail
* ════════════════════════════════════════════════════════════════════════ */
/* Hide the redundant SOC help banner on detail page */
.view-tickets-list-wrap ~ .card .soc-tab-banner,
body .soc-tab-banner:has(~ * .msg-bubble) { display: none !important; }
/* Each message row */
.msg-bubble {
display: block !important;
background: transparent !important;
border: none !important;
border-left: none !important;
padding: 0 !important;
margin: 0 0 16px !important;
position: relative !important;
}
/* Meta line (sender + timestamp) — clean caption, no truncation */
.msg-bubble .meta {
display: block !important;
font-size: 11.5px !important;
font-weight: 500 !important;
color: var(--text-dim, #6b7280) !important;
margin-bottom: 5px !important;
padding: 0 6px !important;
letter-spacing: 0.01em !important;
}
.msg-bubble .meta strong {
font-weight: 600 !important;
color: var(--text, #111827) !important;
}
body.dark .msg-bubble .meta strong { color: #f3f4f6 !important; }
/* The actual message bubble (the ) */
.msg-bubble pre,
.msg-bubble > pre {
display: inline-block !important;
max-width: 72% !important;
margin: 0 !important;
padding: 10px 14px !important;
font-family: inherit !important;
font-size: 14px !important;
line-height: 1.5 !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
border-radius: 16px !important;
vertical-align: top !important;
}
/* === SELF (customer): right-aligned, blue gradient === */
.msg-bubble.self {
text-align: right !important;
}
.msg-bubble.self .meta {
text-align: right !important;
}
.msg-bubble.self pre {
background: linear-gradient(135deg, #22a0ff 0%, #1d6fbd 100%) !important;
color: #fff !important;
border: none !important;
border-bottom-right-radius: 5px !important;
box-shadow: 0 1px 3px rgba(34,160,255,.22) !important;
text-align: left !important;
}
/* === OTHER (support): left-aligned, white bubble === */
.msg-bubble:not(.self) {
text-align: left !important;
}
.msg-bubble:not(.self) .meta {
text-align: left !important;
}
.msg-bubble:not(.self) pre {
background: var(--panel, #fff) !important;
color: var(--text, #111827) !important;
border: 1px solid var(--border, #e5e7eb) !important;
border-bottom-left-radius: 5px !important;
}
body.dark .msg-bubble:not(.self) pre {
background: rgba(255,255,255,.05) !important;
border-color: #334155 !important;
color: #f3f4f6 !important;
}
/* Conversation card padding */
.card:has(.msg-bubble) {
padding: 22px 26px !important;
border-radius: 14px !important;
}
/* "Conversation" header */
.card:has(.msg-bubble) > strong:first-child,
.card:has(.msg-bubble) > div:first-child > strong:first-child,
.card:has(.msg-bubble) > h2:first-child,
.card:has(.msg-bubble) > h3:first-child {
display: block !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--text-dim, #6b7280) !important;
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--border, #eef2f6) !important;
}
body.dark .card:has(.msg-bubble) > strong:first-child,
body.dark .card:has(.msg-bubble) > h3:first-child {
border-bottom-color: #334155 !important;
}
/* Reply textarea */
textarea[id^="reply-"] {
width: 100% !important;
min-height: 90px !important;
padding: 11px 14px !important;
font-size: 14px !important;
line-height: 1.5 !important;
border: 1px solid var(--border, #d1d5db) !important;
border-radius: 10px !important;
background: var(--panel-2, #fafbfc) !important;
color: var(--text, #111827) !important;
resize: vertical !important;
font-family: inherit !important;
box-sizing: border-box !important;
transition: border-color .15s, box-shadow .15s, background .15s !important;
}
textarea[id^="reply-"]:focus {
outline: none !important;
border-color: #22a0ff !important;
background: var(--panel, #fff) !important;
box-shadow: 0 0 0 3px rgba(34,160,255,.12) !important;
}
body.dark textarea[id^="reply-"] {
background: rgba(255,255,255,.03) !important;
border-color: #334155 !important;
color: #f3f4f6 !important;
}
/* end IT4Y_TKT_DETAIL_MINIMAL_SAFE_V1 */
/* ════════════════════════════════════════════════════════════════════════
* IT4Y_DARK_MODE_COMPREHENSIVE_V1 — Complete dark-mode coverage
* Sidebar + header already worked. This fills every other surface.
* ════════════════════════════════════════════════════════════════════════ */
/* Body bg in dark mode (page background behind cards) */
body.dark {
background: #0b1220 !important;
color: #e5e7eb !important;
}
/* Generic card surface */
body.dark .card,
body.dark .panel,
body.dark .it4dash,
body.dash[data-theme="dark"] .card,
html[data-theme="dark"] .card {
background: #111827 !important;
border-color: #1f2937 !important;
color: #e5e7eb !important;
}
/* The welcome banner */
body.dark .welcome-banner,
body.dark .welcome,
body.dark .hero {
background: linear-gradient(135deg, #111827 0%, rgba(34,160,255,.08) 100%) !important;
border-color: #1f2937 !important;
color: #e5e7eb !important;
}
/* Stat tiles */
body.dark .stat,
body.dark .stats .stat,
body.dark a.stat {
background: #111827 !important;
border: 1px solid #1f2937 !important;
color: #e5e7eb !important;
}
body.dark .stat:hover { background: #1f2937 !important; }
body.dark .stat .l,
body.dark .stat .label,
body.dark .stat .sublabel { color: #94a3b8 !important; }
/* Section header strip (the blue gradient "My Virtual Servers" bar) */
body.dark .sec-h,
body.dark .section-header {
background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%) !important;
color: #f3f4f6 !important;
}
/* VPS / resource cards */
body.dark .vps-card,
body.dark .resource-card,
body.dark .item-card {
background: #111827 !important;
border: 1px solid #1f2937 !important;
color: #e5e7eb !important;
}
/* Tab buttons (Overview / Terminal / Backups …) */
body.dark .tab-btn,
body.dark .tab-button,
body.dark [role="tab"],
body.dark .vps-tab {
background: #1f2937 !important;
border-color: #334155 !important;
color: #cbd5e1 !important;
}
body.dark .tab-btn.active,
body.dark .tab-button.active,
body.dark [role="tab"][aria-selected="true"],
body.dark .vps-tab.active {
background: #2563eb !important;
border-color: #2563eb !important;
color: #fff !important;
}
/* Page main background (behind cards) */
body.dark main,
body.dark .app-main,
body.dark #main-content,
body.dark #view-root,
body.dark .main-content {
background: #0b1220 !important;
color: #e5e7eb !important;
}
/* Tables */
body.dark table,
body.dark .table {
background: transparent !important;
color: #e5e7eb !important;
}
body.dark thead,
body.dark thead th {
background: #1f2937 !important;
color: #cbd5e1 !important;
border-color: #334155 !important;
}
body.dark td,
body.dark th { border-color: #1f2937 !important; }
body.dark tbody tr:hover { background: rgba(255,255,255,.03) !important; }
/* Pills / badges baseline */
body.dark .pill,
body.dark .badge,
body.dark .chip {
background: #1f2937 !important;
color: #cbd5e1 !important;
}
body.dark .pill.green { background: rgba(34,197,94,.18) !important; color: #4ade80 !important; }
body.dark .pill.red,
body.dark .pill.danger { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; }
body.dark .pill.yellow,
body.dark .pill.amber,
body.dark .pill.warning { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; }
body.dark .pill.blue,
body.dark .pill.info { background: rgba(59,130,246,.18) !important; color: #93c5fd !important; }
body.dark .pill.gray,
body.dark .pill.muted { background: rgba(148,163,184,.16) !important; color: #cbd5e1 !important; }
/* Form inputs */
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="search"],
body.dark input[type="number"],
body.dark input[type="tel"],
body.dark input[type="url"],
body.dark select,
body.dark textarea {
background: #0b1220 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark input::placeholder,
body.dark textarea::placeholder { color: #6b7280 !important; }
body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
border-color: #22a0ff !important;
box-shadow: 0 0 0 3px rgba(34,160,255,.18) !important;
}
/* Buttons (preserve color identity, only fix the ghost variants) */
body.dark .btn.ghost,
body.dark button.ghost {
background: transparent !important;
border-color: #334155 !important;
color: #cbd5e1 !important;
}
body.dark .btn.ghost:hover,
body.dark button.ghost:hover {
background: rgba(255,255,255,.06) !important;
color: #fff !important;
}
/* Modal / drawer / dialog */
body.dark .modal,
body.dark .modal-content,
body.dark .drawer,
body.dark .dialog,
body.dark dialog,
body.dark .popover,
body.dark .dropdown-menu,
body.dark .menu {
background: #111827 !important;
border: 1px solid #1f2937 !important;
color: #e5e7eb !important;
}
body.dark .modal-backdrop,
body.dark .backdrop { background: rgba(0,0,0,.6) !important; }
/* Toasts */
body.dark .toast {
background: #1f2937 !important;
border: 1px solid #334155 !important;
color: #e5e7eb !important;
}
/* Code / kbd */
body.dark code,
body.dark kbd,
body.dark pre {
background: #1f2937 !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
/* Headings / titles */
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
color: #f3f4f6 !important;
}
/* Borders / dividers */
body.dark hr,
body.dark .divider,
body.dark .border { border-color: #1f2937 !important; }
/* Links */
body.dark a:not(.btn):not(.pill):not(.nav-item) { color: #93c5fd; }
/* Empty states */
body.dark .empty,
body.dark .empty-state {
background: transparent !important;
color: #94a3b8 !important;
}
/* Search/command palette */
body.dark .search-input,
body.dark [class*="search"]:not(.icon) {
background: #111827 !important;
color: #e5e7eb !important;
}
/* end IT4Y_DARK_MODE_COMPREHENSIVE_V1 */
/* ════════════════════════════════════════════════════════════════════════
* IT4Y_TKT_BANNER_COLLAPSE_V1 — Clean banner collapse state
* Old: max-height:42px overflow:hidden → ugly bleed.
* New: clean header-only strip when collapsed.
* ════════════════════════════════════════════════════════════════════════ */
/* When collapsed: drop the max-height/overflow hack and just hide body */
.card.soc-tab-banner:not(.expanded) {
max-height: none !important;
overflow: visible !important;
padding: 10px 14px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
background: linear-gradient(135deg, rgba(34,160,255,.06) 0%, rgba(34,160,255,.02) 100%) !important;
border: 1px solid rgba(34,160,255,.18) !important;
border-radius: 10px !important;
}
.card.soc-tab-banner:not(.expanded) > *:not(.it4y-banner-header):not(.it4y-banner-toggle):not(.it4y-banner-dismiss) {
display: none !important;
}
.card.soc-tab-banner:not(.expanded) .it4y-banner-section,
.card.soc-tab-banner:not(.expanded) .it4y-banner-body,
.card.soc-tab-banner:not(.expanded) .it4y-banner-content {
display: none !important;
}
/* Style the inline title + pill */
.card.soc-tab-banner:not(.expanded) .it4y-banner-title,
.card.soc-tab-banner:not(.expanded) > strong,
.card.soc-tab-banner:not(.expanded) > b {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--brand, #22a0ff) !important;
margin: 0 !important;
}
/* "Your tenant" pill — keep it but compact */
.card.soc-tab-banner:not(.expanded) .it4y-banner-pill,
.card.soc-tab-banner .it4y-banner-pill {
font-size: 10.5px !important;
padding: 2px 8px !important;
border-radius: 999px !important;
background: rgba(34,197,94,.14) !important;
color: #15803d !important;
font-weight: 600 !important;
}
body.dark .card.soc-tab-banner .it4y-banner-pill {
background: rgba(34,197,94,.18) !important;
color: #4ade80 !important;
}
/* Dark mode banner background */
body.dark .card.soc-tab-banner:not(.expanded) {
background: linear-gradient(135deg, rgba(34,160,255,.08) 0%, rgba(34,160,255,.02) 100%) !important;
border-color: rgba(34,160,255,.22) !important;
}
body.dark .card.soc-tab-banner.expanded {
background: #111827 !important;
border-color: #1f2937 !important;
color: #e5e7eb !important;
}
/* "More" / "Less" button */
.it4y-banner-toggle {
background: transparent !important;
border: 1px solid var(--border, #d1d5db) !important;
color: var(--text-dim, #6b7280) !important;
padding: 3px 10px !important;
font-size: 11px !important;
border-radius: 999px !important;
font-weight: 600 !important;
cursor: pointer !important;
margin-left: auto !important;
}
.it4y-banner-toggle:hover {
background: rgba(34,160,255,.08) !important;
color: var(--brand, #22a0ff) !important;
border-color: var(--brand, #22a0ff) !important;
}
body.dark .it4y-banner-toggle {
border-color: #334155 !important;
color: #cbd5e1 !important;
}
body.dark .it4y-banner-toggle:hover {
background: rgba(34,160,255,.12) !important;
color: #93c5fd !important;
}
/* Dismiss × button — clean */
.it4y-banner-dismiss,
.card.soc-tab-banner > [class*="dismiss"],
.card.soc-tab-banner button[aria-label*="dismiss" i],
.card.soc-tab-banner button[aria-label*="close" i] {
background: transparent !important;
border: none !important;
color: var(--text-dim, #9ca3af) !important;
font-size: 16px !important;
font-weight: 400 !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
line-height: 1 !important;
}
.it4y-banner-dismiss:hover { background: rgba(239,68,68,.12) !important; color: #ef4444 !important; }
body.dark .it4y-banner-dismiss { color: #94a3b8 !important; }
/* When expanded, show full body */
.card.soc-tab-banner.expanded {
max-height: none !important;
overflow: visible !important;
padding: 16px 20px !important;
border-radius: 12px !important;
}
/* end IT4Y_TKT_BANNER_COLLAPSE_V1 */
/* ════════════════════════════════════════════════════════════════════════
* IT4Y_ADMIN_OVERVIEW_CONTRAST_V1 — fix Overview status-pills + numbers
* ════════════════════════════════════════════════════════════════════════ */
/* Card text + numbers in dark mode */
body.dark .card .num,
body.dark .card .count,
body.dark .card .stat-num,
body.dark .card .pill + strong,
body.dark .card strong,
body.dark .card td,
body.dark .card .row,
body.dark .card span:not(.pill):not(.badge):not(.chip) {
color: #e5e7eb !important;
}
/* Status pills baseline (all variants) */
body.dark .pill,
body.dark .status-pill,
body.dark [class*="pill-"],
body.dark [class*="status-"],
body.dark .badge {
background: rgba(148,163,184,.18) !important;
color: #cbd5e1 !important;
border: 1px solid rgba(148,163,184,.24) !important;
}
/* Specific status colors — keep semantic intent in dark */
body.dark .pill.trialing, body.dark .status-trialing, body.dark [class*="trialing"] { background: rgba(168,85,247,.18) !important; color: #d8b4fe !important; border-color: rgba(168,85,247,.32) !important; }
body.dark .pill.active, body.dark .status-active, body.dark [class*="-active"] { background: rgba(34,197,94,.18) !important; color: #4ade80 !important; border-color: rgba(34,197,94,.32) !important; }
body.dark .pill.past_due, body.dark .status-past_due, body.dark [class*="past_due"] { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.32) !important; }
body.dark .pill.suspended, body.dark .status-suspended, body.dark [class*="suspended"] { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.32) !important; }
body.dark .pill.grace, body.dark .status-grace, body.dark [class*="-grace"] { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.32) !important; }
body.dark .pill.provisioning,body.dark .status-provisioning,body.dark [class*="provisioning"]{ background: rgba(59,130,246,.18) !important; color: #93c5fd !important; border-color: rgba(59,130,246,.32) !important; }
body.dark .pill.failed, body.dark .status-failed, body.dark [class*="-failed"] { background: rgba(239,68,68,.22) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.40) !important; }
body.dark .pill.terminated, body.dark .status-terminated, body.dark [class*="terminated"] { background: rgba(100,116,139,.22) !important; color: #cbd5e1 !important; border-color: rgba(100,116,139,.40) !important; }
body.dark .pill.suspending, body.dark [class*="suspending"] { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.32) !important; }
body.dark .pill.pending, body.dark [class*="-pending"] { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.32) !important; }
body.dark .pill.paid, body.dark [class*="-paid"] { background: rgba(34,197,94,.18) !important; color: #4ade80 !important; border-color: rgba(34,197,94,.32) !important; }
body.dark .pill.draft, body.dark [class*="-draft"] { background: rgba(148,163,184,.18) !important; color: #cbd5e1 !important; border-color: rgba(148,163,184,.24) !important; }
body.dark .pill.void, body.dark [class*="-void"] { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.32) !important; }
body.dark .pill.refunded, body.dark [class*="-refunded"] { background: rgba(168,85,247,.18) !important; color: #d8b4fe !important; border-color: rgba(168,85,247,.32) !important; }
/* Status pill provider-hue overrides */
body.dark .pill.hetzner, body.dark [class*="-hetzner"] { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.32) !important; }
body.dark .pill.manual, body.dark [class*="-manual"] { background: rgba(148,163,184,.18) !important; color: #cbd5e1 !important; border-color: rgba(148,163,184,.24) !important; }
body.dark .pill.mock, body.dark [class*="-mock"] { background: rgba(20,184,166,.18) !important; color: #5eead4 !important; border-color: rgba(20,184,166,.32) !important; }
/* Overview "Subscriptions by status" etc. cards — force number-column readable */
body.dark .card h3,
body.dark .card h2,
body.dark .card .card-title { color: #f3f4f6 !important; }
/* Row spacing in those cards (numbers right-aligned, pills left) */
body.dark .card .row > *:last-child,
body.dark .card .row > b:last-child,
body.dark .card .row strong:last-child { color: #f3f4f6 !important; font-weight: 600 !important; }
/* end IT4Y_ADMIN_OVERVIEW_CONTRAST_V1 */
/* ════════════════════════════════════════════════════════════════════════
* IT4Y_ADMIN_TICKET_PILLS_V1 — Make ticket status pills readable in dark
* ════════════════════════════════════════════════════════════════════════ */
/* Universal ticket-row pill styling */
body.dark .ticket-row .pill,
body.dark .ticket-card .pill,
body.dark [class*="ticket"] .pill,
body.dark [data-status],
body.dark .status-pill {
background: rgba(148,163,184,.20) !important;
color: #cbd5e1 !important;
border: 1px solid rgba(148,163,184,.30) !important;
font-weight: 600 !important;
padding: 3px 9px !important;
border-radius: 999px !important;
font-size: 11px !important;
}
/* Status: Resolved (green) */
body.dark [data-status="resolved" i],
body.dark .pill.resolved,
body.dark .pill[data-status="resolved"],
body.dark .status-resolved,
body.dark .tk-status-resolved {
background: rgba(34,197,94,.20) !important;
color: #4ade80 !important;
border-color: rgba(34,197,94,.32) !important;
}
/* Status: Open (blue) */
body.dark [data-status="open" i],
body.dark .pill.open,
body.dark .pill[data-status="open"],
body.dark .status-open,
body.dark .tk-status-open {
background: rgba(59,130,246,.20) !important;
color: #93c5fd !important;
border-color: rgba(59,130,246,.32) !important;
}
/* Status: Pending Customer (amber) */
body.dark [data-status*="pending" i],
body.dark .pill[data-status*="pending"],
body.dark .status-pending_customer,
body.dark .tk-status-pending_customer,
body.dark .tk-status-pending_staff {
background: rgba(245,158,11,.20) !important;
color: #fbbf24 !important;
border-color: rgba(245,158,11,.32) !important;
}
/* Status: On Hold (gray) */
body.dark [data-status="on_hold" i],
body.dark .pill.on_hold,
body.dark .status-on_hold,
body.dark .tk-status-on_hold {
background: rgba(148,163,184,.20) !important;
color: #cbd5e1 !important;
border-color: rgba(148,163,184,.30) !important;
}
/* Status: Closed (slate) */
body.dark [data-status="closed" i],
body.dark .pill.closed,
body.dark .status-closed,
body.dark .tk-status-closed {
background: rgba(100,116,139,.20) !important;
color: #94a3b8 !important;
border-color: rgba(100,116,139,.30) !important;
}
/* Department / priority pills — common departments and priorities */
body.dark .pill[class*="dept"],
body.dark .pill.department,
body.dark .pill.support,
body.dark .pill.sales,
body.dark .pill.billing,
body.dark .pill.abuse {
background: rgba(168,85,247,.20) !important;
color: #d8b4fe !important;
border-color: rgba(168,85,247,.32) !important;
}
body.dark .pill.high,
body.dark .pill.urgent,
body.dark .pill.critical {
background: rgba(239,68,68,.20) !important;
color: #fca5a5 !important;
border-color: rgba(239,68,68,.32) !important;
}
body.dark .pill.medium {
background: rgba(245,158,11,.20) !important;
color: #fbbf24 !important;
}
body.dark .pill.low {
background: rgba(148,163,184,.20) !important;
color: #cbd5e1 !important;
}
/* end IT4Y_ADMIN_TICKET_PILLS_V1 */
/* IT4Y_PHASE346F_HIDE_EMPTY_CANCEL_V1 — hide the empty cancel button
in Modal.confirm dialogs where cancelLabel was passed as '' */
button[data-act="cancel"]:empty { display: none !important; }
/* === IT4Y_TITLE_FOCUS_NORING_V1 — no visible focus box around the page title (it's tabindex=-1, focused only for SR announce) === */
.page-title:focus,.page-title:focus-visible{outline:none !important;box-shadow:none !important;background:transparent !important}
/* === IT4Y_PAGE_BANNER_HIDE_ALL_V1 — remove generic per-page help banner (the "More" bar) from ALL customer pages === */
.page-banner-wrapper[data-phase359i]{display:none !important}
/* === IT4Y_TKT_CONVO_STICKY_FIX_V1 — opaque flush sticky Conversation header (no message peek-through) === */
html body:has(.msg-bubble) .card:has(.msg-bubble){padding-top:0 !important}
html body:has(.msg-bubble) .card:has(.msg-bubble)>h3:first-child{position:sticky;top:0;z-index:3;margin:0 0 10px !important;padding:13px 0 9px !important;background:var(--panel) !important;box-shadow:0 7px 9px -7px rgba(2,8,20,.30),0 1px 0 var(--border-soft)}
/* === IT4Y_TKT_CONVO_SCROLL_V1 — cap conversation thread into a scrollable pane (was extremely long) === */
body:has(.msg-bubble) .card:has(.msg-bubble){max-height:min(52vh,540px);overflow-y:auto;overscroll-behavior:contain}
body:has(.msg-bubble) .card:has(.msg-bubble)>h3:first-child{position:sticky;top:0;z-index:2;background:var(--panel);margin:0 0 10px !important;padding:4px 0 8px}
body:has(.msg-bubble) .card:has(.msg-bubble)::-webkit-scrollbar{width:9px}
body:has(.msg-bubble) .card:has(.msg-bubble)::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;border:2px solid var(--panel)}
body:has(.msg-bubble) .card:has(.msg-bubble){scrollbar-width:thin;scrollbar-color:var(--border) transparent}
/* === IT4Y_TKT_DENSITY_V1 — compact, enterprise-SaaS density for the ticket detail page === */
body:has(.msg-bubble) .app-main{padding-top:16px !important}
body:has(.msg-bubble) .card:not(.soc-tab-banner){max-width:1060px;margin-left:auto !important;margin-right:auto !important;padding:14px 18px !important;margin-bottom:12px !important}
body:has(.msg-bubble) .breadcrumbs{margin-bottom:7px !important;font-size:11.5px !important}
body:has(.msg-bubble) .page-title{font-size:17px !important;margin:2px 0 8px !important;letter-spacing:-.01em}
body:has(.msg-bubble) .card > h2:first-child,
body:has(.msg-bubble) .card > h3:first-child{font-size:13px !important;margin:0 0 10px !important}
body:has(.msg-bubble) .msg-bubble{margin-bottom:9px !important}
body:has(.msg-bubble) .msg-bubble .meta{margin-bottom:3px !important;font-size:10.5px !important}
body:has(.msg-bubble) .msg-bubble pre{padding:8px 12px !important;font-size:13px !important;line-height:1.45 !important;max-width:78% !important;border-radius:14px !important}
body:has(.msg-bubble) textarea#cr-reply.cr-input{min-height:74px !important}
body:has(.msg-bubble) .cr-card{padding:13px 16px !important}
/* IT4Y_TKT_BANNER_HIDE_V1 — hide redundant purpose-header help banner on ticket pages
(was rendering as an empty collapsed bar + lone "More" toggle — unprofessional). */
.page-banner-wrapper[data-phase359i="tickets"],
.view-tickets .soc-tab-banner,
[data-view="tickets"] .soc-tab-banner,
body:has([id="route-tickets"]) .soc-tab-banner { display:none !important; }
/* === IT4Y_TKT_COMPOSER_V1 — modern, responsive ticket reply composer (var-driven → auto light/dark) === */
.cr-card{padding:16px 18px}
.cr-composer{display:flex;flex-direction:column;gap:10px}
.cr-composer-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cr-composer-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.1px}
.cr-composer-sub{font-size:12px;color:var(--muted)}
.cr-input-wrap{border:1.5px solid var(--border);border-radius:14px;background:var(--bg-2);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.cr-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea#cr-reply.cr-input{display:block;width:100%;box-sizing:border-box;border:0 !important;outline:0 !important;background:transparent !important;resize:none;margin:0;padding:14px 16px;color:var(--text) !important;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;min-height:92px;max-height:320px;box-shadow:none !important}
textarea#cr-reply.cr-input::placeholder{color:var(--muted);opacity:.9}
textarea#cr-reply.cr-input:focus{outline:0 !important;box-shadow:none !important;border:0 !important}
.cr-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--border-soft);background:var(--panel-2)}
.cr-hint{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.cr-hint kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.4;background:var(--bg-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:2px 5px;color:var(--text-dim)}
.cr-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn.cr-send{background:var(--accent);color:#fff;border:1px solid var(--accent);font-weight:600;font-size:14px;padding:9px 18px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:filter .12s ease,transform .05s ease}
.btn.cr-send:hover{filter:brightness(1.08)}
.btn.cr-send:active{transform:translateY(1px)}
.cr-send-ico{font-size:13px;line-height:1;display:inline-block}
.btn.ghost.cr-resolve{border-radius:10px;padding:9px 14px;font-size:14px}
@media (max-width:600px){
.cr-card{padding:13px}
textarea#cr-reply.cr-input{font-size:16px !important;min-height:84px;padding:12px 14px}
.cr-toolbar{padding:10px}
.cr-hint{order:2;width:100%;justify-content:center}
.cr-actions{order:1;width:100%}
.btn.cr-send{flex:1 1 auto;justify-content:center;min-height:46px}
.btn.ghost.cr-resolve{min-height:46px}
}
/* ============================================================================
IT4Y_ENTERPRISE_UI_V1 — global SaaS-enterprise design polish (customer portal)
Pure CSS, var-driven (auto light/dark), refines shared primitives so EVERY
view upgrades consistently. No markup/JS/logic changes. Loads last → wins on
ties; theme-specific base rules with higher specificity are preserved.
============================================================================ */
/* — Typography / base — */
.app-shell,.auth-wrap{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.app-main .page-title{font-weight:700;letter-spacing:-.02em}
/* — Cards — */
.app-main .card{border:1px solid var(--border-soft);border-radius:14px;box-shadow:var(--shadow-sm)}
.app-main .card > h2:first-child,.app-main .card > h3:first-child{letter-spacing:-.01em;font-weight:700}
/* — Buttons: consistent, enterprise-grade — */
.btn{font:600 13.5px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:9px 16px;border-radius:10px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:7px;letter-spacing:.01em;transition:filter .12s ease,transform .04s ease,box-shadow .12s ease;box-shadow:var(--shadow-sm)}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;filter:none}
.btn.ghost{background:var(--panel);color:var(--text-dim);border:1px solid var(--border);box-shadow:none}
.btn.ghost:hover{background:var(--panel-2);color:var(--text);border-color:var(--muted);filter:none}
.btn.small{padding:5px 11px;font-size:12px;border-radius:8px;box-shadow:none}
.btn.warn{background:var(--warn);color:#241803;border-color:transparent}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent}
/* — Forms: clean controls + accent focus ring (fixes monospace + hardcoded bg) — */
.field{margin:14px 0}
.field label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.field input,.field select,.field textarea,
.app-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.app-main select,.app-main textarea,
.modal-overlay input:not([type=checkbox]):not([type=radio]),.modal-overlay select,.modal-overlay textarea{
font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
background:var(--bg-2) !important;color:var(--text) !important;
border:1px solid var(--border) !important;border-radius:9px !important;padding:10px 12px !important;box-shadow:none;
}
.field input::placeholder,.app-main input::placeholder,.app-main textarea::placeholder{color:var(--muted) !important;opacity:.85}
.field input:focus,.field select:focus,.field textarea:focus,
.app-main input:focus,.app-main select:focus,.app-main textarea:focus,
.modal-overlay input:focus,.modal-overlay select:focus,.modal-overlay textarea:focus{
outline:none !important;border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-soft) !important;
}
/* — Tables: enterprise data views — */
.app-main table th{background:var(--panel-2);color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:10px 14px;border-bottom:1px solid var(--border)}
.app-main table td{padding:11px 14px;border-bottom:1px solid var(--border-soft)}
.app-main table tbody tr{transition:background .1s ease}
.app-main table tbody tr:hover{background:var(--panel-2)}
/* — Navigation — */
.nav-item{border-radius:8px;padding:9px 12px;font-weight:500;transition:background .12s ease,color .12s ease,box-shadow .12s ease}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.app-header{border-bottom:1px solid var(--border-soft)}
/* — Pills / badges — */
.pill{padding:3px 9px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;letter-spacing:.4px}
/* — Content links — */
.app-main a:not(.btn):not(.nav-item):not(.pill):not(.tab){color:var(--accent);text-decoration:none}
.app-main a:not(.btn):not(.nav-item):not(.pill):not(.tab):hover{text-decoration:underline}
/* IT4Y_PHASE366_TABLE_PAGER_V1 — enterprise pagination control bar (var-driven, light/dark) */
.it4y-pager{margin:16px 2px 2px;width:100%}
.it4y-pager-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.it4y-pager-info{font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap}
.it4y-pager-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.it4y-pager-btn{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--border);background:var(--panel);color:var(--text-dim);border-radius:8px;font:600 12.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease,border-color .12s ease}
.it4y-pager-btn:hover:not(:disabled):not(.active){background:var(--panel-2);color:var(--text);border-color:var(--muted)}
.it4y-pager-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);cursor:default}
.it4y-pager-btn:disabled{opacity:.4;cursor:not-allowed}
.it4y-pager-gap{color:var(--muted);padding:0 3px;font-size:13px;user-select:none}
@media (max-width:640px){.it4y-pager-inner{justify-content:center}.it4y-pager-info{order:2;width:100%;text-align:center}}
/* IT4Y_PHASE367_VPS_INFO_V1 — enterprise VPS detail spec-cards (var-driven, responsive) */
.app-main .ig{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:14px}
.app-main .ig .ii{display:flex;flex-direction:column;gap:4px;background:var(--bg-2);border:1px solid var(--border-soft);border-radius:10px;padding:11px 14px;min-width:0;margin:0;transition:border-color .12s ease,box-shadow .12s ease}
.app-main .ig .ii:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}
.app-main .il{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);line-height:1.25}
.app-main .iv{font-size:14px;font-weight:600;color:var(--text);line-height:1.4;word-break:break-word;font-variant-numeric:tabular-nums}
@media (max-width:560px){.app-main .ig{grid-template-columns:1fr 1fr}}
@media (max-width:380px){.app-main .ig{grid-template-columns:1fr}}
/* IT4Y_PHASE368_HOVER_FIX_V1 — card/chip/action anchors must NOT get the inline-link underline
on hover. The dashboard stat tiles are with several text lines, so the global
a:hover underline drew an underline under EACH line -> the confusing "three lines" hover artifact.
Genuine inline text links keep their subtle underline; card hover feedback (lift/border/shadow,
e.g. .it4dash .stat:hover) is untouched. Consistent, subtle, enterprise-grade. */
.app-main a.stat, .app-main a.stat:hover, .app-main a.stat:focus, .app-main a.stat:active,
.app-main a.billing-chip, .app-main a.billing-chip:hover, .app-main a.billing-chip:focus,
.app-main a.vc, .app-main a.vc:hover,
.app-main a.new-vps, .app-main a.new-vps:hover,
.app-main a.tab, .app-main a.tab:hover,
.app-main a.nav-item, .app-main a.nav-item:hover {
text-decoration: none !important;
}
/* IT4Y_PHASE370_VPS_COMPACT_V1 — compact enterprise density for the customer VPS dashboard.
Dimensional-only (no colours/theme/markup/logic). Scoped to .it4dash. */
.it4dash .welcome{padding:13px 18px!important;margin-bottom:12px!important;border-left-width:3px!important;border-radius:11px!important}
.it4dash .welcome h1{font-size:18px!important;margin-bottom:2px!important}
.it4dash .welcome p{font-size:12.5px!important}
.it4dash .welcome .new-vps{padding:8px 15px!important;font-size:13px!important;border-radius:8px!important}
.it4dash .stats{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important;margin-bottom:12px!important}
.it4dash .stat{padding:12px 14px!important;border-width:1px!important;border-radius:10px!important}
.it4dash .stat .ic{font-size:21px!important;margin-bottom:3px!important}
.it4dash .stat .v{font-size:22px!important;margin-bottom:1px!important}
.it4dash .stat .l{font-size:12px!important}
.it4dash .sec{border-radius:11px!important;margin-bottom:12px!important}
.it4dash .sec-h{padding:9px 16px!important}
.it4dash .sec-h h2{font-size:14px!important}
.it4dash .sec-b{padding:14px!important}
.it4dash .vc{border-width:1px!important;border-radius:10px!important;margin-bottom:10px!important}
.it4dash .vc-h{padding:9px 14px!important}
.it4dash .vc-b{padding:14px!important}
.it4dash .vtit{font-size:15px!important}
.it4dash .tabs{gap:5px!important;margin-bottom:12px!important}
.it4dash .tab{padding:6px 11px!important;font-size:12.5px!important;border-width:1px!important;border-radius:7px!important}
.it4dash .live-line{margin-bottom:10px!important}
.it4dash .lstats{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(175px,1fr))!important;gap:10px!important;margin-bottom:10px!important}
.it4dash .lstat{padding:11px 13px!important;border-radius:8px!important}
.it4dash .lstat-h{margin-bottom:7px!important}
.it4dash .os-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(124px,1fr))!important;gap:8px!important}
.it4dash .os-card{padding:10px 8px!important}
.it4dash .os-card .pi{font-size:24px!important;margin-bottom:4px!important}
.it4dash .term-notice{padding:22px!important}
.it4dash .term-notice .ic{font-size:34px!important;margin-bottom:8px!important}
.it4dash .reinst-warn{padding:10px 14px!important;margin-bottom:10px!important}
.it4dash .stub{padding:16px!important}
.it4dash .stub .ic{font-size:30px!important}
.it4dash .ig{margin-top:10px!important}
/* ─────────────────────────────────────────────────────────────────────────
IT4Y_UI_REFRESH_2026_06_04 — customer VPS dashboard visual refresh (shadow-first).
Scope: .it4dash surfaces ONLY. THEME-SAFE — every colour references the existing
Phase-311 theme variables (var(--panel)/--border/--text/--muted/--accent/--danger/
--ok/--warn/--shadow-sm/--shadow-md), so light AND dark both re-skin automatically;
no hardcoded palette. This is the colour/elevation/typography layer the PHASE370
dimensional block deliberately omitted: real card edges + soft elevation, a proper
type scale (bold KPI numbers, quiet uppercase labels, bold section titles), a legible
status pill, a clear primary CTA, and de-emphasised locked actions. No markup / logic /
grid-template changes (grid columns stay as PHASE370 set them). */
.it4dash .stat,
.it4dash .sec,
.it4dash .vc,
.it4dash .lstat,
.it4dash .os-card{
border:1px solid var(--border)!important; /* PHASE370 set border-width but no style → edge was invisible */
box-shadow:var(--shadow-sm)!important;
transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease!important;
}
.it4dash .stat:hover,
.it4dash .os-card:hover{
border-color:var(--accent)!important;
box-shadow:var(--shadow-md)!important;
transform:translateY(-1px)!important;
}
/* Section header band — divider + bold title for clear hierarchy */
.it4dash .sec-h{border-bottom:1px solid var(--border)!important}
.it4dash .sec-h h2{font-size:15px!important;font-weight:700!important;letter-spacing:-.01em!important}
/* KPI tiles — big scannable numbers, quiet uppercase labels */
.it4dash .stat .v{font-size:26px!important;font-weight:700!important;color:var(--text)!important;line-height:1.12!important;letter-spacing:-.02em!important;font-variant-numeric:tabular-nums}
.it4dash .stat .l{font-size:11px!important;font-weight:700!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:.05em!important}
.it4dash .stat .ic{color:var(--accent)!important}
/* Welcome banner + VPS card title weight */
.it4dash .welcome h1{font-weight:700!important;letter-spacing:-.01em!important}
.it4dash .vtit{font-weight:700!important;letter-spacing:-.01em!important}
/* Primary CTA — make "+ New VPS" the clear accent action */
.it4dash .welcome .new-vps{background:var(--accent)!important;border:1px solid var(--accent)!important;color:#fff!important;font-weight:600!important}
.it4dash .welcome .new-vps:hover{background:color-mix(in srgb,var(--accent) 86%,#000)!important;border-color:color-mix(in srgb,var(--accent) 86%,#000)!important}
/* Status badge — turn the bare status word into a legible state pill */
.it4dash .badge{display:inline-flex!important;align-items:center;gap:5px;padding:2px 9px!important;border-radius:999px!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.03em;line-height:1.65;border:1px solid transparent!important}
.it4dash .badge.bs{background:color-mix(in srgb,var(--danger) 14%,transparent)!important;color:var(--danger)!important;border-color:color-mix(in srgb,var(--danger) 38%,transparent)!important}
.it4dash .badge.gs,.it4dash .badge.ok,.it4dash .badge.run{background:color-mix(in srgb,var(--ok) 15%,transparent)!important;color:var(--ok)!important;border-color:color-mix(in srgb,var(--ok) 38%,transparent)!important}
.it4dash .badge.ws,.it4dash .badge.ns{background:color-mix(in srgb,var(--warn) 16%,transparent)!important;color:var(--warn)!important;border-color:color-mix(in srgb,var(--warn) 40%,transparent)!important}
/* Action tabs — cleaner base, clear active underline, de-emphasised locked actions */
.it4dash .tab{font-weight:600!important;border-radius:8px!important}
.it4dash .tab.on{box-shadow:inset 0 -2px 0 var(--accent)!important;font-weight:700!important}
.it4dash .tab.tab-locked{opacity:.55!important}
/* Live-stat rows — quiet labels, tabular numeric values */
.it4dash .lstat-l{color:var(--muted)!important;font-weight:600!important}
.it4dash .lstat-v{font-weight:600!important;font-variant-numeric:tabular-nums}
#it4y-auth-splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg,#f8fafc);z-index:60}.it4y-splash-spin{width:34px;height:34px;border:3px solid rgba(37,99,235,.18);border-top-color:#2563eb;border-radius:50%;animation:it4y-spin .7s linear infinite;margin:0 auto 14px}@keyframes it4y-spin{to{transform:rotate(360deg)}}
/* ════════════════════════════════════════════════════════════════
* IT4Y_MOBILE_HEADER_FIX_2026_06_06 — enterprise mobile-first topbar.
* Header was a fixed-height bar with a non-wrapping action row -> on phones
* the email/LIVE/Sign-out wrapped and overlapped the Linux/Windows tabs.
* Let the header grow, drop the verbose identity (kept on Account), wrap the
* controls cleanly. Applies on real phones (media query) + the SPA's own
* is-mobile/force-mobile-preview classes (which it toggles at <=768px).
* ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
.app-shell{ grid-template-rows: auto 1fr !important; }
.app-header{ height:auto !important; min-height:52px; flex-wrap:wrap; align-items:center;
row-gap:6px; column-gap:8px; padding:8px 12px 8px 60px !important; }
.app-header .right{ flex-wrap:wrap; justify-content:flex-end; align-items:center;
gap:8px; margin-left:auto; max-width:100%; font-size:12px; }
.app-header .session-info{ display:none !important; }
.app-header .right .btn{ min-height:38px; padding:7px 12px; font-size:13px !important; }
#rt-status-pill{ min-width:0 !important; padding:3px 8px !important; margin-right:4px !important; }
}
body.is-mobile .app-shell, body.force-mobile-preview .app-shell{ grid-template-rows: auto 1fr; }
body.is-mobile .app-header, body.force-mobile-preview .app-header{
height:auto !important; min-height:52px; flex-wrap:wrap; align-items:center;
row-gap:6px; column-gap:8px; padding:8px 12px 8px 60px !important; }
body.is-mobile .app-header .session-info, body.force-mobile-preview .app-header .session-info,
body.is-mobile .session-info, body.force-mobile-preview .session-info{ display:none !important; }
body.is-mobile .app-header .right, body.force-mobile-preview .app-header .right{
flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; margin-left:auto; max-width:100%; }
body.is-mobile .app-header .right .btn, body.force-mobile-preview .app-header .right .btn{
min-height:38px; padding:7px 12px; }
body.is-mobile #rt-status-pill, body.force-mobile-preview #rt-status-pill{
min-width:0 !important; padding:3px 8px !important; margin-right:4px !important; }
/* end IT4Y_MOBILE_HEADER_FIX_2026_06_06 */
|