/* ==================================================================
DV Group - Employee Panel
Same design language as the SMS panel. No AdminLTE, no Bootstrap.
Part 1: tokens, shell, navigation, components.
================================================================== */
/*
* The palette, type scale, radii and shadows are the admin panel's, value
* for value, so the two panels read as one product. Where this stylesheet
* had its own name for something the admin names differently, both names
* are defined and point at the same value.
*/
:root {
--brand: #1d4ed8;
--brand-strong: #1e40af;
--brand-accent: #0ea5e9;
--brand-soft: rgba(29, 78, 216, 0.09);
--brand-ring: rgba(29, 78, 216, 0.28);
--bg: #f4f6fb;
--bg-elevated: #ffffff;
--bg-sunken: #eef2f8;
--surface: #ffffff;
--surface-2: #f8fafc;
--surface-3: #eef2f8;
--side-bg: #0b1324;
--side-bg-2: #0f1a31;
--side-fg: #9aa7bd;
--side-fg-strong: #e7ecf5;
--side-muted: #56637b;
--side-hover: rgba(255, 255, 255, 0.06);
--side-line: rgba(255, 255, 255, 0.07);
/* the names the older rules in this file use */
--sidebar-bg: var(--side-bg);
--sidebar-fg: var(--side-fg);
--sidebar-fg-active: var(--side-fg-strong);
--sidebar-hover: var(--side-hover);
--text: #0f172a;
--text-muted: #5b6475;
--text-subtle: #94a0b4;
--border: #e3e8f0;
--border-strong: #cfd7e3;
--ok: #047857;
--ok-bg: #e7f8f0;
--warn: #b45309;
--warn-bg: #fff6e5;
--bad: #c81e1e;
--bad-bg: #fdecec;
--info: #1d63c9;
--info-bg: #eaf2fe;
--violet: #6d28d9;
--violet-bg: #f1ebfd;
--radius-sm: 7px;
--radius: 10px;
--radius-lg: 14px;
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 6px 16px -6px rgba(15, 23, 42, 0.16), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, 0.28);
--side-w: 264px;
--rail-w: 70px;
--top-h: 60px;
--sidebar-w: var(--side-w);
--header-h: var(--top-h);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
color-scheme: light;
}
[data-theme="dark"] {
--brand: #4f7df5;
--brand-strong: #3b6cf0;
--brand-soft: rgba(79, 125, 245, 0.14);
--brand-ring: rgba(79, 125, 245, 0.35);
--bg: #0a0f1c;
--bg-elevated: #121a2b;
--bg-sunken: #0a1020;
--surface: #121a2b;
--surface-2: #161f33;
--surface-3: #1b263d;
--side-bg: #070b15;
--side-bg-2: #0a1020;
--text: #e6ebf5;
--text-muted: #9aa6bb;
--text-subtle: #66748c;
--border: #243049;
--border-strong: #31405e;
--ok: #34d399;
--ok-bg: rgba(52, 211, 153, 0.13);
--warn: #fbbf24;
--warn-bg: rgba(251, 191, 36, 0.13);
--bad: #f87171;
--bad-bg: rgba(248, 113, 113, 0.13);
--info: #60a5fa;
--info-bg: rgba(96, 165, 250, 0.13);
--violet: #a78bfa;
--violet-bg: rgba(167, 139, 250, 0.14);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
--shadow-md: 0 8px 18px -6px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
font-family: var(--font);
font-size: 14px;
line-height: 1.55;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 4px; font-weight: 600; letter-spacing: -0.011em; color: var(--text); }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
p { margin: 0 0 12px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
img { max-width: 100%; }
/* ---------- Chips, and the padding the page bodies expect ----------
The shell that used to live here - .shell, .sidebar, .nav-item,
.topbar, .menu-panel, .avatar - was replaced by the admin panel's
frame, which is Part 6 at the end of this file. These two are all
that is still referenced: a chip is used on the pages themselves,
and .content is a wrapper the old page bodies print. */
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-muted);
padding: 5px 10px;
border-radius: 18px;
font-size: 12px;
font-weight: 500;
}
.chip:hover { text-decoration: none; color: var(--text); }
.chip.chip-bad { background: var(--bad-bg); color: var(--bad); border-color: currentColor; }
.chip.chip-ok { background: var(--ok-bg); color: var(--ok); border-color: currentColor; }
.content { padding: 22px; flex: 1; width: 100%; }
/* ---------- Cards ---------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
margin-bottom: 18px;
overflow: hidden;
}
.card-head {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px;
}
.card-head h3 { margin: 0; }
.card-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }
.card-foot {
padding: 13px 18px;
border-top: 1px solid var(--border);
background: var(--surface-2);
display: flex; gap: 10px; align-items: center;
}
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ---------- Stats ---------- */
.stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px 18px;
box-shadow: var(--shadow-xs);
position: relative;
overflow: hidden;
}
.stat-label { color: var(--text-muted); font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
.stat-value { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.stat-meta { font-size: 12px; color: var(--text-subtle); margin-top: 5px; }
.stat-ico {
width: 30px; height: 30px; border-radius: 8px;
display: grid; place-items: center;
background: var(--brand-soft); color: var(--brand);
position: absolute; top: 15px; right: 15px;
}
.stat.ok .stat-ico { background: var(--ok-bg); color: var(--ok); }
.stat.bad .stat-ico { background: var(--bad-bg); color: var(--bad); }
.stat.warn .stat-ico { background: var(--warn-bg); color: var(--warn); }
/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
label.lbl, .lbl { display: block; font-size: 12.8px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.req { color: var(--bad); font-weight: 700; }
/* ---------- copy buttons ---------- */
.dv-copy {
background: none;
border: 0;
padding: 2px 5px;
margin-left: 5px;
border-radius: 4px;
color: var(--text-subtle);
font-size: 12px;
line-height: 1;
cursor: pointer;
vertical-align: baseline;
}
.dv-copy:hover { color: var(--brand); background: var(--surface-2); }
.dv-copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* the tick after a successful copy */
.dv-copy.is-copied { color: var(--ok); background: var(--ok-bg); }
/* ---------- list filters ---------- */
.dv-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.dv-filter-f { flex: 1 1 170px; min-width: 150px; }
.dv-filter-f .lbl { margin-bottom: 4px; }
.dv-filter-check { flex: 0 0 auto; padding-bottom: 9px; }
.dv-filter-go { flex: 0 0 auto; display: flex; gap: 8px; }
.dv-due { color: var(--bad); font-weight: 650; }
/* ---------- service detail fields ---------- */
/* Label above value, so a long IP or domain is never squeezed and the three
columns line up down the page. */
.dv-f { padding: 7px 0; border-bottom: 1px solid var(--border); }
.dv-f:first-child { padding-top: 0; }
.dv-f:last-child { border-bottom: 0; }
.dv-f-k {
display: block;
font-size: 11.8px;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 2px;
}
.dv-f-v { display: block; font-size: 13.7px; font-weight: 600; color: var(--text); word-break: break-word; }
.dv-f-v:empty::after { content: "-"; color: var(--text-subtle); font-weight: 400; }
.dv-f-head {
margin: 0 0 10px;
font-size: 12px;
font-weight: 650;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.dv-svc > [class*="col-"] { margin-bottom: 8px; }
/* The buttons were stacked in the last column under the internal notes;
they belong together on one line beneath the details. */
.dv-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.dv-actions form { margin: 0; }
.dv-actions-note { margin: 9px 0 0; }
/* ---------- ticket conversation ---------- */
.dv-thread { list-style: none; margin: 0; padding: 0; }
.dv-msg { display: flex; gap: 14px; padding: 0 0 20px; position: relative; }
.dv-msg:last-child { padding-bottom: 0; }
/* The line down the gutter ties the messages together without needing a rule
between every pair, which is what the old
rows were doing. */
.dv-msg::before {
content: "";
position: absolute;
left: 17px;
top: 38px;
bottom: 2px;
width: 1px;
background: var(--border);
}
.dv-msg:last-child::before { display: none; }
.dv-msg-avatar {
position: relative;
z-index: 1;
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 12.5px;
font-weight: 650;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-muted);
}
.dv-msg.is-staff .dv-msg-avatar { background: var(--brand); border-color: var(--brand); color: #fff; }
.dv-msg.is-event .dv-msg-avatar { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.dv-msg-body {
flex: 1 1 auto;
min-width: 0;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 11px 14px;
}
.dv-msg.is-staff .dv-msg-body { background: var(--info-bg); border-color: transparent; }
.dv-msg.is-event .dv-msg-body { background: var(--ok-bg); border-color: transparent; }
.dv-msg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.dv-msg-head strong { font-size: 13.3px; font-weight: 650; }
.dv-msg-head time { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.dv-msg-tag {
font-size: 10.8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px 6px;
border-radius: 4px;
background: var(--brand);
color: #fff;
}
.dv-msg-text { font-size: 13.6px; line-height: 1.65; word-break: break-word; }
.dv-msg-file {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 9px;
padding: 4px 10px;
border-radius: 6px;
background: var(--surface);
border: 1px solid var(--border-strong);
font-size: 12.4px;
}
.dv-msg-file:hover { border-color: var(--brand); text-decoration: none; }
.dv-msg-file.is-locked { color: var(--text-muted); border-style: dashed; cursor: help; }
.dv-msg-del { float: right; margin-left: 10px; color: var(--text-subtle); font-size: 12.5px; }
.dv-msg-del:hover { color: var(--bad); }
@media (max-width: 575px) {
.dv-msg { gap: 10px; }
.dv-msg::before { left: 14px; }
.dv-msg-avatar { width: 30px; height: 30px; font-size: 11px; }
.dv-msg-head time { margin-left: 0; width: 100%; }
}
/* ---------- attendance calendar ---------- */
.dv-cal .card-body { padding: 16px; }
.dv-cal-nav {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 14px;
line-height: 1;
}
.dv-cal-nav:hover { background: rgba(255, 255, 255, 0.32); color: #fff; text-decoration: none; }
.dv-cal-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.dv-cal-grid th {
padding: 2px 0 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--text-subtle);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dv-cal-grid th abbr { text-decoration: none; border: 0; cursor: default; }
/* A square that stays square at any width, so the grid never goes lopsided. */
.dv-cal-day {
position: relative;
padding: 0;
border-radius: 8px;
text-align: center;
font-size: 12.8px;
font-weight: 550;
color: var(--text);
background: var(--surface-2);
}
.dv-cal-day::before { content: ""; display: block; padding-top: 100%; }
.dv-cal-day > span { position: absolute; inset: 0; display: grid; place-items: center; }
.dv-cal-pad { padding: 0; border: 0; background: none; }
.dv-cal-day.is-present { background: var(--ok-bg); color: var(--ok); }
.dv-cal-day.is-leave { background: var(--surface-2); color: var(--text-muted); text-decoration: line-through; }
.dv-cal-day.is-holiday { background: var(--warn-bg); color: var(--warn); }
.dv-cal-day.is-absent { background: var(--bad-bg); color: var(--bad); }
.dv-cal-day.is-off { background: transparent; color: var(--text-subtle); }
.dv-cal-day.is-future { background: transparent; color: var(--text-subtle); }
.dv-cal-day.is-today { outline: 2px solid var(--brand); outline-offset: -2px; font-weight: 700; }
.dv-cal-day[title] { cursor: help; }
.dv-cal-key {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin: 16px 0 0;
padding: 14px 0 0;
border-top: 1px solid var(--border);
list-style: none;
font-size: 12.2px;
color: var(--text-muted);
}
.dv-cal-key li { display: inline-flex; align-items: center; gap: 7px; }
.dv-cal-key i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.dv-cal-key i.is-present { background: var(--ok); }
.dv-cal-key i.is-leave { background: var(--text-subtle); }
.dv-cal-key i.is-holiday { background: var(--warn); }
.dv-cal-key i.is-absent { background: var(--bad); }
.dv-cal-key strong { color: var(--text); font-weight: 650; }
/* ---------- attendance ---------- */
/* The hero on this page carries an icon rather than initials, so it does not
need the gradient the profile avatar uses. */
.dv-avatar-plain { background: var(--surface-2); color: var(--brand); border: 1px solid var(--border); }
.dv-row-today > td { background: var(--info-bg) !important; font-weight: 600; }
/* ---------- lookup tabs ---------- */
/* Driven by radio inputs and :checked, so switching tabs needs no script and
still works if one fails to load. The radios sit before the panes so the
sibling selector can reach them. */
.dv-tabs { position: relative; }
.dv-tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.dv-tablist {
display: flex;
gap: 4px;
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
margin-bottom: 16px;
}
.dv-tab {
padding: 9px 15px;
margin-bottom: -1px;
border: 1px solid transparent;
border-bottom: 2px solid transparent;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-size: 13.2px;
font-weight: 550;
color: var(--text-muted);
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.dv-tab:hover { color: var(--text); background: var(--surface-2); }
.dv-tabpane { display: none; }
.dv-tabpane .input-group { max-width: 520px; }
.dv-tab-reseller {
display: flex;
align-items: center;
gap: 7px;
margin: 11px 0 0;
font-size: 12.8px;
color: var(--text-muted);
cursor: pointer;
}
.dv-tab-reseller input { width: auto; margin: 0; }
/* One rule per tab: the checked radio lights its label and opens its pane. */
.dv-tabs > .dv-tab-radio:nth-of-type(1):checked ~ .dv-tablist > .dv-tab:nth-of-type(1),
.dv-tabs > .dv-tab-radio:nth-of-type(2):checked ~ .dv-tablist > .dv-tab:nth-of-type(2),
.dv-tabs > .dv-tab-radio:nth-of-type(3):checked ~ .dv-tablist > .dv-tab:nth-of-type(3),
.dv-tabs > .dv-tab-radio:nth-of-type(4):checked ~ .dv-tablist > .dv-tab:nth-of-type(4) {
color: var(--brand);
border-bottom-color: var(--brand);
background: transparent;
}
.dv-tabs > .dv-tab-radio:nth-of-type(1):checked ~ .dv-tabpanes > .dv-tabpane:nth-of-type(1),
.dv-tabs > .dv-tab-radio:nth-of-type(2):checked ~ .dv-tabpanes > .dv-tabpane:nth-of-type(2),
.dv-tabs > .dv-tab-radio:nth-of-type(3):checked ~ .dv-tabpanes > .dv-tabpane:nth-of-type(3),
.dv-tabs > .dv-tab-radio:nth-of-type(4):checked ~ .dv-tabpanes > .dv-tabpane:nth-of-type(4) {
display: block;
}
/* Keyboard focus has to be visible, since the real control is hidden. */
.dv-tab-radio:focus-visible ~ .dv-tablist > .dv-tab { outline: none; }
.dv-tabs > .dv-tab-radio:nth-of-type(1):focus-visible ~ .dv-tablist > .dv-tab:nth-of-type(1),
.dv-tabs > .dv-tab-radio:nth-of-type(2):focus-visible ~ .dv-tablist > .dv-tab:nth-of-type(2),
.dv-tabs > .dv-tab-radio:nth-of-type(3):focus-visible ~ .dv-tablist > .dv-tab:nth-of-type(3),
.dv-tabs > .dv-tab-radio:nth-of-type(4):focus-visible ~ .dv-tablist > .dv-tab:nth-of-type(4) {
outline: 2px solid var(--brand);
outline-offset: -2px;
}
/* ---------- empty states ---------- */
.dv-empty-state { max-width: 640px; margin: 0 auto; padding: 34px 16px; text-align: center; }
.dv-empty-ico {
width: 58px;
height: 58px;
margin: 0 auto 14px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 22px;
}
.dv-empty-state h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 650; }
.dv-empty-state > p { margin: 0 auto; max-width: 440px; color: var(--text-muted); font-size: 13.5px; }
.dv-empty-forms { margin-top: 22px; text-align: left; }
/* ---------- profile ---------- */
.dv-profile-hero {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
padding: 22px;
margin-bottom: 18px;
}
/* The initials sit underneath; a photo, when there is one, covers them, and
a photo that fails to load removes itself and lets them back through. */
.dv-avatar {
position: relative;
flex: 0 0 auto;
width: 88px;
height: 88px;
border-radius: 18px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--brand), var(--brand-accent));
color: #fff;
font-size: 29px;
font-weight: 650;
letter-spacing: 0.5px;
overflow: hidden;
user-select: none;
}
.dv-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dv-profile-id { flex: 1 1 260px; min-width: 0; }
.dv-profile-id h2 { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.25; }
.dv-profile-role { margin: 3px 0 0; color: var(--text-muted); font-size: 13.6px; }
.dv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dv-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--border);
font-size: 12.4px;
color: var(--text-muted);
white-space: nowrap;
}
.dv-chip strong { color: var(--text); font-weight: 600; }
.dv-chip i { color: var(--brand); font-size: 11.5px; }
.dv-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* An in-page confirm step: the button opens a small box under itself.
It sits in the flow rather than floating - the card around it clips
overflow, and a floating box lost its own "Yes" button to that. */
.dv-confirm { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dv-confirm > summary { list-style: none; cursor: pointer; }
.dv-confirm > summary::-webkit-details-marker { display: none; }
.dv-confirm[open] > summary { background: var(--surface-2); }
.dv-confirm-pop {
width: 280px;
max-width: 100%;
padding: 14px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.dv-confirm-pop p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.dv-confirm-pop p strong { display: block; color: var(--text); margin-bottom: 2px; }
.dv-confirm-pop form { display: flex; gap: 8px; }
/* Each detail card is a list of label/value rows rather than a run of bold
text, so the values line up down the right and scan in one pass. */
.dv-panel { height: calc(100% - 18px); margin-bottom: 18px; }
.dv-panel-ico { color: var(--brand); margin-right: 7px; }
.dv-panel-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.dv-dl { margin: 0; }
.dv-dl > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid var(--border);
}
.dv-dl > div:first-child { padding-top: 0; }
.dv-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dv-dl dt {
margin: 0;
flex: 0 0 auto;
color: var(--text-muted);
font-size: 12.7px;
font-weight: 500;
}
.dv-dl dd {
margin: 0;
min-width: 0;
text-align: right;
font-size: 13.7px;
font-weight: 600;
color: var(--text);
word-break: break-word;
}
.dv-dl-empty { color: var(--text-subtle); font-weight: 400; font-style: italic; }
@media (max-width: 575px) {
.dv-profile-hero { gap: 16px; padding: 18px; }
.dv-avatar { width: 68px; height: 68px; font-size: 23px; border-radius: 15px; }
.dv-profile-actions { margin-left: 0; width: 100%; }
.dv-confirm { align-items: flex-start; }
.dv-dl > div { flex-direction: column; gap: 3px; }
.dv-dl dd { text-align: left; }
}
/* ---------- click to call ---------- */
.dv-call-form { display: inline; }
.dv-call-btn {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
line-height: 1;
color: var(--ok);
cursor: pointer;
}
.dv-call-btn:hover { color: var(--brand); }
.dv-call-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="search"], input[type="url"], select, textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 13.5px;
transition: border-color 0.12s, box-shadow 0.12s;
appearance: none;
}
select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-ring);
}
input:disabled, select:disabled, textarea:disabled {
background: var(--bg-sunken); color: var(--text-subtle); cursor: not-allowed;
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--brand); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px 15px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: var(--brand);
color: #fff;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
cursor: pointer;
white-space: nowrap;
transition: filter 0.12s, background 0.12s, color 0.12s;
}
.btn:hover { text-decoration: none; color: #fff; filter: brightness(0.93); }
.btn:disabled, .btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background: var(--surface-2); color: var(--text); filter: none; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-success { background: var(--ok); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); filter: none; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-lg { padding: 11px 20px; font-size: 14.5px; }
.btn-block { width: 100%; }
/* Sits on a gradient card header, where the usual surface colours would
vanish into the blue. */
.btn-on-brand { background: #fff; border-color: #fff; color: var(--brand); font-weight: 600; }
.btn-on-brand:hover { background: rgba(255, 255, 255, 0.88); color: var(--brand); filter: none; }
.bg-gradient-primary .btn-on-brand { color: var(--brand); }
/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.table {
width: 100%;
border-collapse: collapse;
font-size: 13.2px;
color: var(--text);
background: var(--surface);
}
table.table thead th {
background: var(--surface-2);
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-size: 11.4px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: left;
padding: 10px 12px;
white-space: nowrap;
}
table.table tbody td { padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
table.table tbody tr:hover { background: var(--surface-2); }
table.table tfoot td { padding: 10px 12px; border-top: 1px solid var(--border); font-weight: 600; }
.empty { padding: 42px 20px; text-align: center; color: var(--text-muted); }
/* ---------- Pills / badges ---------- */
.pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border: 1px solid transparent;
border-radius: 20px;
font-size: 11.6px;
font-weight: 600;
white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-muted { background: var(--surface-2); color: var(--text-subtle); border-color: var(--border); }
.pill-plain::before { display: none; }
/* ---------- Alerts ---------- */
.alert {
display: flex;
gap: 10px;
padding: 12px 14px;
border: 1px solid transparent;
border-radius: var(--radius);
margin-bottom: 16px;
font-size: 13.4px;
}
.alert strong { display: block; margin-bottom: 2px; }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: currentColor; }
.alert-error, .alert-danger { background: var(--bad-bg); color: var(--bad); border-color: currentColor; }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: currentColor; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: currentColor; }
.alert a { color: inherit; text-decoration: underline; }
.alert-body { min-width: 0; flex: 1; }
.alert .close {
background: none; border: 0; color: inherit; opacity: 0.6;
font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.alert .close:hover { opacity: 1; }
/* ---------- Pager ---------- */
.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager-btn {
display: inline-flex; align-items: center;
padding: 6px 11px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-size: 12.8px; font-weight: 600;
}
.pager-btn:hover { background: var(--surface-2); text-decoration: none; }
.pager-btn.is-disabled { opacity: 0.45; pointer-events: none; }
.pager-info { color: var(--text-muted); font-size: 12.5px; }
/* ---------- Misc utilities ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: 12.4px; }
.tiny { font-size: 11.5px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.text-ok { color: var(--ok); }
.text-bad { color: var(--bad); }
.text-warn { color: var(--warn); }
.hidden { display: none !important; }
/* ---------- Sign in ---------- */
.auth-wrap {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(1200px 600px at 10% -10%, var(--brand-soft), transparent 60%),
radial-gradient(900px 500px at 110% 110%, rgba(14, 165, 233, 0.1), transparent 55%),
var(--bg);
}
.auth-card {
width: 100%;
max-width: 410px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 30px;
}
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
/* Same mark, bigger, on the white sign-in card - no tile needed here. */
.auth-brand img { display: block; height: 38px; width: auto; }
.auth-logo-mark {
width: 42px; height: 42px; border-radius: 11px;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--brand), var(--brand-accent));
color: #fff; font-weight: 700; font-size: 16px;
}
.auth-brand strong { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.auth-title { font-size: 19px; font-weight: 600; margin-bottom: 3px; }
.auth-sub { color: var(--text-muted); margin-bottom: 20px; font-size: 13.4px; }
.auth-foot { margin-top: 18px; text-align: center; color: var(--text-subtle); font-size: 12.4px; }
.input-icon { position: relative; }
.input-icon svg {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
color: var(--text-subtle); pointer-events: none;
}
.input-icon input { padding-left: 36px; }
/* ---------- 403 ---------- */
.dv-error-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(1000px 500px at 50% -20%, var(--brand-soft), transparent 60%),
var(--bg);
}
.dv-error-card {
max-width: 440px;
text-align: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 34px 30px;
}
.dv-error-mark {
width: 62px; height: 62px; margin: 0 auto 14px;
border-radius: 16px;
display: grid; place-items: center;
background: var(--bad-bg); color: var(--bad);
font-size: 20px; font-weight: 700;
}
.dv-error-card h1 { font-size: 20px; margin-bottom: 8px; }
.dv-error-card .btn { margin-top: 16px; }
/* ==================================================================
Part 2: compatibility layer.
The page bodies were written against AdminLTE/Bootstrap class names.
Rather than rewrite thirty-one pages, those names are re-implemented
here in the new design language, so the markup keeps working and the
look is the panel's own.
================================================================== */
/* ---------- page scaffold ---------- */
/* Grows to fill whatever height is left, which is what keeps the footer
against the bottom of the window on a short page. */
.content-wrapper { display: block; width: 100%; flex: 1 0 auto; }
.content-header { padding: 18px 22px 0; }
.content-header h1 { font-size: 21px; font-weight: 600; margin: 0; }
section.content { padding: 18px 22px 24px; }
.container-fluid { width: 100%; padding: 0; margin: 0; }
/* ---------- 12 column grid ---------- */
.row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
.row > [class*="col-"] { padding-left: 8px; padding-right: 8px; width: 100%; min-width: 0; }
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col, .col-auto { flex: 1 1 0; max-width: 100%; }
@media (min-width: 576px) {
.col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
.col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-sm-9 { flex: 0 0 75%; max-width: 75%; }
.col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
.col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-md-9 { flex: 0 0 75%; max-width: 75%; }
.col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
.col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
.col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
/* ---------- legacy card ---------- */
.card-header {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.card-header.border-transparent { border-bottom-color: var(--border); }
.card-title { margin: 0; font-size: 14.5px; font-weight: 600; }
h3.card-title { font-size: 14.5px; }
.card-footer {
padding: 13px 18px;
border-top: 1px solid var(--border);
background: var(--surface-2);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.card-tools, .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* The old theme painted card headers with a blue gradient. Keep that accent,
drawn the way the rest of this panel is drawn. */
.bg-gradient-primary,
.card-header.bg-gradient-primary {
background: linear-gradient(135deg, var(--brand), var(--brand-accent));
border-bottom-color: transparent;
color: #fff;
}
.bg-gradient-primary .card-title,
.bg-gradient-primary h3,
.bg-gradient-primary a { color: #fff; }
.elevation-1, .elevation-2, .elevation-3, .elevation-4 { box-shadow: var(--shadow-sm); }
/* ---------- legacy tables ---------- */
.table {
width: 100%;
border-collapse: collapse;
font-size: 13.2px;
color: var(--text);
background: var(--surface);
margin-bottom: 0;
}
.table th, .table td { padding: 10px 12px; vertical-align: middle; text-align: left; }
.table thead th {
background: var(--surface-2);
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-size: 11.4px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.table tbody td { border-top: 1px solid var(--border); }
.table-bordered th, .table-bordered td { border: 1px solid var(--border); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--surface-2); }
.table-hover tbody tr:hover, .table tbody tr:hover { background: var(--brand-soft); }
.table-responsive { overflow-x: auto; width: 100%; }
.table a { color: var(--brand); }
/* ---------- legacy forms ---------- */
.form-control {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background-color: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 13.5px;
}
.form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
select.form-control { padding-right: 32px; }
.form-control-sm { padding: 6px 10px; font-size: 12.6px; }
.form-group { margin-bottom: 14px; }
.input-group { display: flex; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; min-width: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group-append, .input-group-prepend { display: flex; }
.input-group-append .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group-append .btn + .btn { margin-left: -1px; }
.input-group-prepend .btn { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group-text {
display: flex; align-items: center;
padding: 0 11px;
border: 1px solid var(--border-strong);
background: var(--surface-2);
color: var(--text-muted);
font-size: 13px;
}
.input-group-sm > .form-control { padding: 6px 10px; font-size: 12.6px; }
/* Bare submit buttons in the old pages still need to look like buttons. */
input[type="submit"], input[type="button"] {
padding: 8px 15px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: var(--brand);
color: #fff;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
width: auto;
}
input[type="submit"]:hover, input[type="button"]:hover { filter: brightness(0.93); }
/* ---------- breadcrumb ---------- */
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
font-size: 12.8px;
color: var(--text-subtle);
}
.breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-right: 6px; color: var(--text-subtle); }
.breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb-item a { color: var(--text-muted); }
.float-sm-right, .float-right { margin-left: auto; }
.breadcrumb.float-sm-right, .breadcrumb.float-right { justify-content: flex-end; }
@media (max-width: 575px) {
.breadcrumb.float-sm-right { justify-content: flex-start; }
}
/* ---------- info boxes (dashboard tiles) ---------- */
.info-box {
display: flex;
align-items: stretch;
gap: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
margin-bottom: 16px;
overflow: hidden;
min-height: 78px;
}
.info-box-icon {
display: grid; place-items: center;
width: 70px; flex: 0 0 70px;
background: var(--brand-soft);
color: var(--brand);
font-size: 24px;
}
.info-box-content { padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.info-box-text { color: var(--text-muted); font-size: 12.6px; font-weight: 500; }
.info-box-number { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.progress-description { color: var(--text-subtle); font-size: 12px; }
.progress { height: 7px; background: var(--bg-sunken); border-radius: 20px; overflow: hidden; margin: 6px 0; }
.progress-bar { height: 100%; background: var(--brand); border-radius: 20px; display: block; }
/* Old contextual colours, remapped onto the palette. */
.bg-primary, .bg-info { background: var(--brand-soft) !important; color: var(--brand) !important; }
.bg-success, .bg-green { background: var(--ok-bg) !important; color: var(--ok) !important; }
.bg-danger, .bg-red { background: var(--bad-bg) !important; color: var(--bad) !important; }
.bg-warning, .bg-yellow { background: var(--warn-bg) !important; color: var(--warn) !important; }
.bg-secondary, .bg-gray { background: var(--surface-2) !important; color: var(--text-muted) !important; }
.text-success { color: var(--ok) !important; }
.text-danger { color: var(--bad) !important; }
.text-warning { color: var(--warn) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--brand) !important; }
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 20px;
font-size: 11.4px;
font-weight: 600;
}
.badge-success { background: var(--ok-bg); color: var(--ok); }
.badge-danger { background: var(--bad-bg); color: var(--bad); }
.badge-warning { background: var(--warn-bg); color: var(--warn); }
.badge-info, .badge-primary { background: var(--brand-soft); color: var(--brand); }
/* ---------- pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; }
.page-item { display: inline-block; }
.page-link {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; padding: 5px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-size: 12.8px; font-weight: 600;
}
.page-link:hover { background: var(--surface-2); text-decoration: none; }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-item.disabled .page-link { background: var(--bg-sunken); color: var(--text-subtle); pointer-events: none; }
.pagination-sm .page-link { min-width: 29px; padding: 4px 8px; font-size: 12.2px; }
/* ---------- todo list (dashboard) ---------- */
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list > li {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 8px;
background: var(--surface-2);
}
/* ---------- spacing / alignment utilities ---------- */
.p-0 { padding: 0 !important; }
.p-1 { padding: 6px !important; }
.p-2 { padding: 12px !important; }
.p-3 { padding: 18px !important; }
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 6px !important; }
.mb-2 { margin-bottom: 12px !important; }
.mb-3 { margin-bottom: 18px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 6px !important; }
.mt-2 { margin-top: 12px !important; }
.mt-3 { margin-top: 18px !important; }
.mr-1 { margin-right: 6px !important; }
.mr-2 { margin-right: 12px !important; }
.ml-1 { margin-left: 6px !important; }
.ml-2 { margin-left: 12px !important; }
.ml-auto { margin-left: auto !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-flex { display: flex !important; }
.w-100 { width: 100% !important; }
.clearfix::after { content: ""; display: table; clear: both; }
.fade { transition: opacity 0.15s linear; }
.fade.show { opacity: 1; }
.alert-dismissible { position: relative; }
/* ---------- DataTables (kept for the pages that page with it) ---------- */
.dataTables_wrapper { width: 100%; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 12.8px;
color: var(--text-muted);
}
.dataTables_wrapper .dataTables_filter { float: right; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
width: auto;
padding: 6px 10px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-size: 12.8px;
}
.dataTables_wrapper .dataTables_filter input { min-width: 200px; }
.dataTables_wrapper .dataTables_info {
padding-top: 10px;
color: var(--text-muted);
font-size: 12.5px;
}
.dataTables_wrapper .dataTables_paginate { float: right; padding-top: 8px; display: flex; gap: 4px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; padding: 5px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text) !important;
font-size: 12.8px; font-weight: 600;
cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--surface-2); text-decoration: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: var(--brand); border-color: var(--brand); color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
background: var(--bg-sunken); color: var(--text-subtle) !important; pointer-events: none;
}
.dataTables_wrapper::after { content: ""; display: table; clear: both; }
table.dataTable { width: 100% !important; }
/* ---------- responsive ---------- */
@media (max-width: 1100px) {
:root { --sidebar-w: 232px; }
}
@media (max-width: 900px) {
.sidebar {
position: fixed;
left: 0; top: 0;
transform: translateX(-100%);
transition: transform 0.2s ease;
box-shadow: var(--shadow-lg);
}
.sidebar.open { transform: translateX(0); }
.mobile-only { display: grid; }
.hide-sm { display: none !important; }
.content { padding: 16px; }
.content-header { padding: 14px 16px 0; }
section.content { padding: 14px 16px 20px; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate { float: none; }
.dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
}
@media (max-width: 640px) {
.row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.topbar { padding: 0 12px; gap: 8px; }
.card-body { padding: 14px; }
}
@media print {
.sidebar, .topbar, .sidebar-scrim { display: none !important; }
.content { padding: 0; }
.card { box-shadow: none; border-color: #ccc; }
}
/* ==================================================================
Part 3: Today Calls.
The one page with its own paging, bulk save bar and call actions.
================================================================== */
.dv-call-page .dv-card .card-body { background: var(--surface); padding: 0; }
.dv-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.dv-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-pill {
display: inline-block;
padding: 5px 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text-muted);
font-size: 12.6px;
font-weight: 600;
line-height: 1.4;
transition: all 0.14s ease-in-out;
}
.dv-pill:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.dv-pill.active {
background: var(--brand);
border-color: var(--brand);
color: #fff;
box-shadow: 0 2px 6px var(--brand-ring);
}
.dv-search-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.dv-search-box { width: 260px; max-width: 100%; }
.dv-per-page { width: auto; min-width: 110px; }
.dv-table-wrap { overflow-x: auto; }
.dv-table { font-size: 13px; color: var(--text); width: 100%; border-collapse: collapse; }
.dv-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-size: 11.4px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
padding: 10px 12px;
text-align: left;
}
.dv-table tbody td { padding: 8px 12px; vertical-align: middle; border-top: 1px solid var(--border); }
.dv-table tbody tr:hover { background: var(--brand-soft); }
.dv-table .dv-name { font-weight: 600; white-space: nowrap; }
.dv-table .dv-mobile { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-table .dv-mobile:hover { color: var(--brand); }
.dv-table .dv-domain { word-break: break-all; max-width: 230px; }
.dv-table .dv-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.dv-table .dv-date {
display: inline-block;
padding: 1px 8px;
border-radius: 6px;
background: var(--info-bg);
color: var(--info);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.dv-table .dv-col-remark { min-width: 250px; }
.dv-table .dv-remark-input { min-width: 200px; }
.dv-table .dv-remark-input.dv-changed {
border-color: var(--warn);
background: var(--warn-bg);
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.16);
}
.dv-table tr.dv-done { background: var(--ok-bg); }
.dv-table tr.dv-done .dv-name::after {
content: "called";
display: inline-block;
margin-left: 7px;
padding: 0 6px;
border-radius: 6px;
background: var(--ok);
color: #fff;
font-size: 9.6px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
vertical-align: middle;
}
.dv-actions { white-space: nowrap; }
.dv-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
margin: 0 2px;
padding: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text-muted);
line-height: 1;
transition: all 0.14s ease-in-out;
}
a.dv-icon-btn:hover, button.dv-icon-btn:hover { text-decoration: none; transform: translateY(-1px); }
.dv-icon-btn.dv-call-pending { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); cursor: pointer; }
.dv-icon-btn.dv-call-pending:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.dv-icon-btn.dv-call-done { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); cursor: default; }
.dv-icon-btn.dv-view:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.dv-empty { padding: 44px 16px !important; color: var(--text-muted); font-size: 14px; text-align: center; }
/* ---------- bulk save bar ---------- */
.dv-default-submit {
position: absolute;
width: 0; height: 0;
padding: 0; border: 0;
opacity: 0; overflow: hidden;
}
.dv-actionbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.dv-actionbar-info { color: var(--text-muted); font-size: 12.8px; }
.dv-actionbar-info.dv-dirty { color: var(--warn); font-weight: 600; }
.dv-save-all { min-width: 165px; }
.dv-save-all.dv-has-changes { box-shadow: 0 2px 10px var(--brand-ring); }
.dv-sticky-save {
display: none;
position: fixed;
right: 22px; bottom: 22px;
z-index: 50;
align-items: center;
gap: 12px;
padding: 9px 10px 9px 16px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.dv-sticky-save.show { display: flex; }
.dv-sticky-text { color: var(--text); font-size: 12.8px; white-space: nowrap; }
/* ---------- pager ---------- */
.dv-pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 16px;
border-top: 1px solid var(--border);
background: var(--surface-2);
}
.dv-pager-info { color: var(--text-muted); font-size: 12.6px; }
.dv-pagination { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 767px) {
.dv-toolbar, .dv-pager, .dv-actionbar { flex-direction: column; align-items: stretch; }
.dv-search-form { flex-wrap: wrap; }
.dv-search-box, .dv-per-page { width: 100%; }
.dv-table thead th { position: static; }
.dv-pagination { justify-content: center; }
.dv-save-all { width: 100%; }
.dv-sticky-save { right: 12px; left: 12px; bottom: 12px; justify-content: space-between; }
}
/* ==================================================================
Part 4: the employee policy, set as a document rather than a page.
================================================================== */
.dv-policy { max-width: none; }
.dv-policy-head {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 26px 30px 20px;
border-bottom: 3px solid var(--brand);
}
.dv-policy-kicker {
color: var(--brand);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.dv-policy-title {
margin: 4px 0 2px;
font-size: 25px;
font-weight: 650;
letter-spacing: -0.02em;
}
.dv-policy-sub { margin: 0; color: var(--text-muted); font-size: 13.6px; }
.dv-policy-head .btn { margin-left: auto; flex: 0 0 auto; }
.dv-policy-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.dv-policy-meta > div { padding: 12px 18px; border-right: 1px solid var(--border); }
.dv-policy-meta > div:last-child { border-right: 0; }
.dv-policy-meta dt {
color: var(--text-subtle);
font-size: 10.6px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 3px;
}
.dv-policy-meta dd { margin: 0; font-size: 13.2px; font-weight: 600; color: var(--text); }
.dv-policy-toc {
padding: 18px 30px;
border-bottom: 1px solid var(--border);
}
.dv-policy-toc .lbl { display: block; margin-bottom: 8px; }
.dv-policy-toc ol {
columns: 2;
column-gap: 32px;
margin: 0;
padding-left: 18px;
font-size: 13.2px;
}
.dv-policy-toc li { margin-bottom: 4px; break-inside: avoid; }
.dv-policy-body { padding: 8px 30px 26px; }
.dv-policy-body section {
padding: 22px 0;
border-bottom: 1px solid var(--border);
}
.dv-policy-body section:last-child { border-bottom: 0; }
.dv-policy-body h3 {
font-size: 16.5px;
font-weight: 650;
letter-spacing: -0.01em;
margin: 0 0 10px;
scroll-margin-top: 80px;
}
.dv-policy-body > section > p { color: var(--text-muted); font-size: 13.8px; margin-bottom: 12px; }
.dv-clauses {
list-style: none;
margin: 0;
padding: 0;
}
.dv-clauses li {
position: relative;
padding: 0 0 0 46px;
margin-bottom: 11px;
font-size: 13.9px;
line-height: 1.65;
color: var(--text);
}
.dv-clauses li > strong:first-child {
position: absolute;
left: 0;
top: 0;
width: 38px;
color: var(--brand);
font-variant-numeric: tabular-nums;
font-weight: 650;
}
.dv-clauses li strong { font-weight: 650; }
.dv-clauses-sub { margin: 9px 0 3px; }
.dv-clauses-sub li { padding-left: 32px; margin-bottom: 7px; font-size: 13.6px;
color: var(--text-muted); }
.dv-clauses-sub li > strong:first-child { width: 24px; color: var(--text-muted); }
.dv-clauses-sub li strong:not(:first-child) { color: var(--text); }
.dv-policy-foot {
padding: 14px 30px;
border-top: 1px solid var(--border);
background: var(--surface-2);
color: var(--text-subtle);
font-size: 12.2px;
}
@media (max-width: 900px) {
.dv-policy-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-policy-meta > div:nth-child(2) { border-right: 0; }
.dv-policy-toc ol { columns: 1; }
.dv-policy-head, .dv-policy-toc, .dv-policy-body, .dv-policy-foot { padding-left: 18px; padding-right: 18px; }
}
@media print {
.dv-no-print { display: none !important; }
.dv-policy { max-width: none; border: 0; box-shadow: none; }
.dv-policy-body section { break-inside: avoid; }
}
/* ---------- dashboard: customer lookup ---------- */
.dv-lookup { max-width: 100%; }
.dv-lookup .card-title { display: inline-flex; align-items: center; gap: 8px; }
.dv-lookup-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.dv-lookup-form { margin: 0; }
.dv-lookup-form .lbl { margin-bottom: 7px; }
.dv-lookup-form .input-group > .form-control { min-width: 0; }
.dv-lookup-form .btn {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.dv-lookup-form .hint { margin-top: 7px; }
@media (max-width: 800px) {
.dv-lookup-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* ==================================================================
Part 5: Polish.
Refinements that apply to every page without a line of markup
changing - the tables, the action icons and the focus ring are the
same three or four pieces on nearly every screen, so improving them
here improves all of them at once.
================================================================== */
/* ---------- long lists ----------
The header row stays readable while the rows scroll past. It sits
below the topbar rather than at the very top of the viewport, or it
would slide underneath it. */
.table thead th,
table.table thead th {
position: sticky;
top: var(--header-h);
z-index: 1;
}
/* A table inside its own scroller sticks to that box, not the page. */
.table-responsive .table thead th,
.table-wrap table.table thead th { top: 0; }
/* Dates, amounts, quantities and IDs line up in a column instead of
wandering, which is most of what makes a dense table hard to scan. */
.table td, .table th,
table.table td, table.table th { font-variant-numeric: tabular-nums; }
/* Give a row a little more air, and keep the first and last cell clear
of the card edge. */
.table tbody td, table.table tbody td { padding-top: 11px; padding-bottom: 11px; }
.table tbody td:first-child, .table thead th:first-child { padding-left: 16px; }
.table tbody td:last-child, .table thead th:last-child { padding-right: 16px; }
/* Striping and hover together used to fight each other - the hover tint
only showed on even rows. Hover now wins on both. */
.table-striped tbody tr:hover,
.table-striped tbody tr:nth-of-type(odd):hover { background: var(--brand-soft); }
/* ---------- the action column ----------
Every list ends in a few bare Font Awesome glyphs separated by hard
spaces. They are links, so they deserve to look like something you
can press: a quiet square that lights up under the pointer. */
.table td a:not(.btn) > .fa,
.table td a:not(.btn) > .fas,
.table td a:not(.btn) > .far,
.table td a:not(.btn) > .fab {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text-muted);
font-size: 12.5px;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.table td a:not(.btn):hover > .fa,
.table td a:not(.btn):hover > .fas,
.table td a:not(.btn):hover > .far,
.table td a:not(.btn):hover > .fab {
background: var(--brand-soft);
border-color: var(--brand-ring);
color: var(--brand);
}
/* Every link in the panel that pairs an icon with words is a .btn, and
:not(.btn) above leaves those exactly as they were. */
/* ---------- phones ----------
A wide table used to push the whole page sideways, so the sidebar
button and the page heading went off-screen with it. The table
scrolls inside its own card now. */
@media (max-width: 860px) {
.card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table thead th, table.table thead th { position: static; }
}
/* ---------- keyboard ----------
Everything interactive shows where the keyboard is. Only :focus-visible,
so a mouse click never draws a ring. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.dv-nav-link:focus-visible,
.dv-nav-toggle:focus-visible,
.chip:focus-visible,
.dv-top-btn:focus-visible,
.dv-user-btn:focus-visible,
.dv-icon-btn:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ---------- motion ----------
Honour the system setting rather than animating regardless. */
@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;
}
}
/* ---------- printing ----------
A ticket, a lead or a month of attendance is sometimes printed or
saved as a PDF. Drop the chrome, keep the content, and never break a
card across two pages. */
@media print {
.page-head-actions, .card-head-actions, .card-tools,
.dv-actions, .dv-filter, .breadcrumb, .dv-copy { display: none !important; }
.card { break-inside: avoid; }
.table thead th, table.table thead th { position: static; }
.table thead { display: table-header-group; }
a[href]::after { content: ""; }
}
/* ==================================================================
Part 6: the panel shell, matched to the admin panel.
The admin panel at dvgroup/adminbkp was rebuilt on this frame -
sidebar that collapses to a rail with flyout menus, a page filter
above the menu, the page title and its trail in the top bar, and an
alerts menu. This is that chrome, so an employee moving between the
two panels finds the same thing in the same place.
Two differences, both deliberate:
- there is no page footer. The credit sits in the menu instead,
which is where it was asked for.
- the menu groups are /, not buttons driven by
script, so the menu still opens with JavaScript unavailable.
Both the [open] attribute and the .open class are styled, so it
behaves the same either way.
Names that already meant something else in this file are renamed:
the top bar's round buttons are .dv-top-btn (.dv-icon-btn is a table
action here) and its initials badge is .dv-user-avatar (.dv-avatar is
the large one on the profile and ticket pages).
================================================================== */
.dv-shell { display: flex; min-height: 100vh; }
/* ---------------------------- sidebar ---------------------------- */
.dv-sidebar {
width: var(--side-w);
flex: 0 0 var(--side-w);
background: linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
color: var(--side-fg);
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
z-index: 50;
transition: width 0.18s ease, flex-basis 0.18s ease, transform 0.2s ease;
}
.dv-brand {
display: flex; align-items: center; gap: 11px;
height: var(--top-h);
padding: 0 16px;
border-bottom: 1px solid var(--side-line);
color: #fff;
flex: 0 0 auto;
}
.dv-brand:hover { text-decoration: none; color: #fff; }
.dv-brand-logo {
width: 36px; height: 36px; flex: 0 0 36px;
border-radius: 10px;
background: #fff;
display: grid; place-items: center;
box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
overflow: hidden;
}
.dv-brand-logo img { width: 28px; height: auto; }
.dv-brand-text { min-width: 0; }
.dv-brand-text strong { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.dv-brand-text span { display: block; font-size: 11px; color: var(--side-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.dv-side-search { padding: 12px 12px 4px; flex: 0 0 auto; }
.dv-side-search label { position: relative; display: block; margin: 0; }
.dv-side-search .dv-side-search-ico {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
display: grid; place-items: center;
color: var(--side-muted); pointer-events: none;
}
.dv-side-search input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--side-line);
color: var(--side-fg-strong);
border-radius: 8px;
padding: 8px 10px 8px 33px;
font: inherit; font-size: 13px;
box-shadow: none;
}
.dv-side-search input::placeholder { color: var(--side-muted); }
.dv-side-search input:focus {
outline: none;
border-color: rgba(96, 140, 255, 0.6);
background: rgba(255, 255, 255, 0.08);
box-shadow: none;
}
.dv-nav {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 10px 16px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.dv-nav::-webkit-scrollbar { width: 6px; }
.dv-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.dv-nav-label {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
color: var(--side-muted);
padding: 16px 10px 6px;
white-space: nowrap;
}
.dv-nav-group { margin-bottom: 2px; position: relative; }
.dv-nav-link, .dv-nav-toggle {
display: flex; align-items: center; gap: 11px;
width: 100%;
padding: 8px 10px;
border-radius: 8px;
border: 0;
background: transparent;
color: var(--side-fg);
font: inherit; font-size: 13.5px; font-weight: 500;
text-align: left;
cursor: pointer;
white-space: nowrap;
transition: background 0.12s, color 0.12s;
}
.dv-nav-toggle { list-style: none; }
.dv-nav-toggle::-webkit-details-marker { display: none; }
.dv-nav-toggle::marker { content: ""; }
.dv-nav-link:hover, .dv-nav-toggle:hover { background: var(--side-hover); color: var(--side-fg-strong); text-decoration: none; }
.dv-nav-ico {
width: 18px; flex: 0 0 18px;
display: grid; place-items: center;
font-size: 14px; opacity: 0.85;
}
.dv-nav-ico svg { width: 17px; height: 17px; }
.dv-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dv-nav-caret { margin-left: auto; opacity: 0.6; transition: transform 0.18s ease; display: grid; place-items: center; }
.dv-nav-caret svg { width: 12px; height: 12px; }
.dv-nav-group.open > .dv-nav-toggle .dv-nav-caret,
.dv-nav-group[open] > .dv-nav-toggle .dv-nav-caret { transform: rotate(90deg); }
.dv-nav-group.has-active > .dv-nav-toggle { color: var(--side-fg-strong); }
.dv-nav-sub {
display: none;
padding: 3px 0 6px 20px;
margin-left: 8px;
border-left: 1px solid var(--side-line);
}
.dv-nav-group.open > .dv-nav-sub,
.dv-nav-group[open] > .dv-nav-sub { display: block; }
.dv-nav-sub .dv-nav-link { font-size: 13px; padding: 6px 10px; }
.dv-nav-sub .dv-nav-link .dv-nav-ico { opacity: 0.7; }
.dv-nav-sub .dv-nav-link .dv-nav-ico svg { width: 15px; height: 15px; }
.dv-nav-link.active {
background: linear-gradient(90deg, var(--brand) 0%, #2f63e8 100%);
color: #fff;
box-shadow: 0 6px 16px -6px rgba(29, 78, 216, 0.7);
}
.dv-nav-link.active .dv-nav-ico { opacity: 1; }
.dv-nav-badge {
margin-left: auto;
font-size: 10.5px; font-weight: 700;
min-width: 20px; padding: 1px 6px;
border-radius: 20px;
text-align: center;
background: rgba(255, 255, 255, 0.1);
color: var(--side-fg-strong);
}
.dv-nav-badge.is-hot { background: #ef4444; color: #fff; }
.dv-nav-badge.is-warn { background: #f59e0b; color: #1f1300; }
.dv-nav-flyout-title { display: none; }
.dv-nav-empty { display: none; padding: 12px 10px; font-size: 12.5px; color: var(--side-muted); }
.dv-nav.is-filtering .dv-nav-label { display: none; }
.dv-nav.is-filtering .dv-nav-sub { display: block; }
.dv-nav .is-hidden { display: none !important; }
.dv-side-foot {
flex: 0 0 auto;
border-top: 1px solid var(--side-line);
padding: 10px;
}
.dv-rail-toggle {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0; border-radius: 8px;
background: transparent; color: var(--side-muted);
font: inherit; font-size: 12.5px; cursor: pointer;
}
.dv-rail-toggle:hover { background: var(--side-hover); color: var(--side-fg-strong); }
.dv-rail-toggle .dv-rail-ico { display: grid; place-items: center; width: 18px; transform: rotate(180deg); transition: transform 0.2s ease; }
.dv-rail-toggle .dv-rail-ico svg { width: 15px; height: 15px; }
.dv-side-credit {
padding: 6px 10px 2px;
font-size: 11.5px;
color: var(--side-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Collapsed to an icon rail (desktop). Groups open as a flyout on hover. */
@media (min-width: 992px) {
.dv-rail .dv-sidebar { width: var(--rail-w); flex-basis: var(--rail-w); }
.dv-rail .dv-brand { padding: 0; justify-content: center; }
.dv-rail .dv-brand-text,
.dv-rail .dv-side-search,
.dv-rail .dv-nav-label,
.dv-rail .dv-nav-text,
.dv-rail .dv-nav-caret,
.dv-rail .dv-side-credit,
.dv-rail .dv-rail-toggle span { display: none; }
.dv-rail .dv-nav { overflow: visible; padding: 8px; }
.dv-rail .dv-nav-link, .dv-rail .dv-nav-toggle { justify-content: center; padding: 10px 0; }
.dv-rail .dv-nav-ico svg { width: 19px; height: 19px; }
.dv-rail .dv-nav > .dv-nav-group > .dv-nav-link > .dv-nav-badge,
.dv-rail .dv-nav-toggle > .dv-nav-badge {
position: absolute; top: 2px; right: 4px; min-width: 16px; padding: 0 4px; font-size: 9.5px;
}
.dv-rail .dv-nav-group > .dv-nav-sub,
.dv-rail .dv-nav-group.open > .dv-nav-sub,
.dv-rail .dv-nav-group[open] > .dv-nav-sub { display: none; }
.dv-rail .dv-nav-group:hover > .dv-nav-sub,
.dv-rail .dv-nav-group:focus-within > .dv-nav-sub {
display: block;
position: absolute;
left: calc(100% + 8px);
top: 0;
min-width: 230px;
margin: 0;
padding: 6px;
background: var(--side-bg-2);
border: 1px solid var(--side-line);
border-radius: 10px;
box-shadow: var(--shadow-lg);
z-index: 70;
}
.dv-rail .dv-nav-group:hover > .dv-nav-sub::before {
content: ""; position: absolute; left: -10px; top: 0; width: 10px; height: 100%;
}
.dv-rail .dv-nav-sub .dv-nav-text { display: block; }
.dv-rail .dv-nav-sub .dv-nav-link { justify-content: flex-start; padding: 7px 10px; }
.dv-rail .dv-nav-flyout-title {
display: block; padding: 6px 10px 8px; margin-bottom: 4px;
border-bottom: 1px solid var(--side-line);
color: var(--side-fg-strong); font-weight: 650; font-size: 13px;
}
.dv-rail .dv-side-foot { display: flex; justify-content: center; }
.dv-rail .dv-rail-toggle { justify-content: center; }
.dv-rail .dv-rail-toggle .dv-rail-ico { transform: none; }
/* A single link shows its name as a tooltip in the rail. */
.dv-rail .dv-nav > .dv-nav-group > .dv-nav-link:hover::after {
content: attr(data-label);
position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
background: #0f172a; color: #fff; font-size: 12.5px; white-space: nowrap;
padding: 5px 9px; border-radius: 6px; box-shadow: var(--shadow-md); z-index: 70;
}
}
/* -------------------------- main column -------------------------- */
.dv-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dv-topbar {
height: var(--top-h);
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; gap: 12px;
padding: 0 20px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
@supports (backdrop-filter: blur(10px)) {
.dv-topbar {
background: color-mix(in srgb, var(--surface) 88%, transparent);
backdrop-filter: saturate(160%) blur(10px);
-webkit-backdrop-filter: saturate(160%) blur(10px);
}
}
.dv-page-title { min-width: 0; }
.dv-page-title h1 { font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-crumbs { font-size: 12px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-crumbs a { color: var(--text-muted); }
.dv-top-spacer { flex: 1 1 auto; }
.dv-top-btn {
position: relative;
width: 36px; height: 36px; flex: 0 0 36px;
display: inline-grid; place-items: center;
border: 1px solid var(--border); border-radius: 9px;
background: var(--surface); color: var(--text-muted);
cursor: pointer; font-size: 14px;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dv-top-btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; border-color: var(--border-strong); }
.dv-count {
position: absolute; top: -6px; right: -6px;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px;
font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
background: var(--surface-3); color: var(--text-muted);
border: 2px solid var(--surface);
}
.dv-count.is-hot { background: #ef4444; color: #fff; }
.dv-count.is-warn { background: #f59e0b; color: #1f1300; }
.dv-count.is-ok { background: #10b981; color: #fff; }
.dv-alerts { display: flex; align-items: center; gap: 8px; }
.dv-menu { position: relative; }
.dv-menu-panel {
position: absolute; right: 0; top: calc(100% + 8px);
min-width: 250px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 6px;
display: none;
z-index: 80;
}
.dv-menu.open > .dv-menu-panel,
.dv-menu-panel.open { display: block; }
.dv-menu-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.dv-menu-head strong { display: block; font-size: 13.5px; }
.dv-menu-head span { font-size: 12px; color: var(--text-muted); }
.dv-menu-panel a, .dv-menu-panel button {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0; border-radius: 8px;
background: none; color: var(--text);
font: inherit; font-size: 13.5px; text-align: left;
cursor: pointer;
}
.dv-menu-panel a:hover, .dv-menu-panel button:hover { background: var(--surface-2); text-decoration: none; }
.dv-menu-panel svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-muted); }
.dv-menu-panel .dv-menu-count { margin-left: auto; font-weight: 650; font-size: 12px; color: var(--text-muted); }
.dv-menu-panel .dv-menu-count.is-hot { color: var(--bad); }
.dv-menu-sep { height: 1px; background: var(--border); margin: 6px 0; }
.dv-menu-done {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; font-size: 13px; color: var(--text-muted);
}
.dv-user-btn {
display: flex; align-items: center; gap: 9px;
height: 38px; padding: 0 8px 0 4px;
border: 1px solid transparent; border-radius: 10px;
background: transparent; color: var(--text);
font: inherit; font-size: 13.5px; font-weight: 550;
cursor: pointer;
}
.dv-user-btn:hover { background: var(--surface-2); border-color: var(--border); }
.dv-user-avatar {
width: 30px; height: 30px; flex: 0 0 30px;
border-radius: 50%;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--brand), var(--brand-accent));
color: #fff; font-size: 12px; font-weight: 700;
}
.dv-content { flex: 1 1 auto; padding: 22px 24px 28px; width: 100%; max-width: 1680px; }
/*
* The page bodies carry their own wrappers from the old template, so the
* padding has to come from one place or it is applied twice. The trail
* each page prints is dropped as well - the top bar shows it now - but
* the column beside it is where a page puts its message, so the row
* itself stays.
*/
.dv-content > .content-wrapper { padding: 0; }
.dv-content section.content { padding: 0; }
.dv-content .content-header { padding: 0; }
.dv-content .content-header .breadcrumb { display: none; }
.dv-content .content-header .row:first-child { margin-bottom: 0; }
.dv-scrim { display: none; }
.dv-mobile-only { display: none !important; }
@media (max-width: 991.98px) {
.dv-sidebar {
position: fixed; left: 0; top: 0; bottom: 0;
transform: translateX(-100%);
box-shadow: var(--shadow-lg);
}
.dv-nav-open .dv-sidebar { transform: none; }
.dv-scrim { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.5); z-index: 45; }
.dv-nav-open .dv-scrim { display: block; }
.dv-mobile-only { display: inline-grid !important; }
.dv-desktop-only { display: none !important; }
.dv-content { padding: 16px; }
.dv-topbar { padding: 0 14px; gap: 8px; }
}
@media (max-width: 640px) {
.dv-alerts .dv-top-btn:not(.dv-keep) { display: none; }
.dv-user-name { display: none; }
.dv-crumbs { display: none; }
}
@media print {
.dv-sidebar, .dv-topbar, .dv-scrim { display: none !important; }
.dv-content { padding: 0; max-width: none; }
}
/* ==================================================================
Part 7: cards and rows, matched to the admin panel.
The admin panel gave up the solid blue band across the top of every
card: the heading sits on a pale strip with a thin brand bar down its
left edge instead. On a page with four or five cards that is the
difference between a wall of blue and something you can read, so this
panel does the same.
The tickets list coloured whole rows with inline colours - lime, egg
yellow, black with white text, cyan. The colour said which platform
the ticket came from, which is worth keeping, so it is kept: as a
soft tint from the palette with an accent down the left edge, which
also means it still works in dark mode.
================================================================== */
.card-header {
background: transparent;
position: relative;
}
.card-header.bg-gradient-primary,
.card-header.bg-primary,
.card-header.bg-info {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
color: var(--text);
border-bottom: 1px solid var(--border);
}
.card-header.bg-gradient-primary::before,
.card-header.bg-primary::before,
.card-header.bg-info::before {
content: "";
position: absolute;
left: 0; top: 14px; bottom: 14px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--brand);
}
.bg-gradient-primary .card-title,
.bg-gradient-primary h3,
.bg-gradient-primary a { color: var(--text); }
.bg-gradient-primary a:hover { color: var(--brand); }
.card-title { font-size: 15px; font-weight: 650; }
/* The white-on-blue button those headings carried is now an ordinary
primary button, because the heading behind it is no longer blue. */
.btn-on-brand,
.bg-gradient-primary .btn-on-brand {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.btn-on-brand:hover,
.bg-gradient-primary .btn-on-brand:hover {
background: var(--brand-strong);
border-color: var(--brand-strong);
color: #fff;
filter: none;
}
/* A card lifts slightly under the pointer, as on the dashboard tiles. */
.info-box { transition: box-shadow 0.12s, border-color 0.12s; }
.info-box:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
/* ---------- where a ticket came from ----------
One soft tint and one accent per platform. The accent is what carries
at a glance; the tint is faint enough to read black text on. */
.table tbody tr.dv-src { position: relative; }
.table tbody tr.dv-src > td:first-child { box-shadow: inset 3px 0 0 0 var(--dv-src-accent, var(--border-strong)); }
.table tbody tr.dv-src > td { background: var(--dv-src-tint, transparent); }
.table tbody tr.dv-src:hover > td { background: var(--brand-soft); }
tr.dv-src-group { --dv-src-accent: var(--brand); --dv-src-tint: var(--brand-soft); }
tr.dv-src-hosting { --dv-src-accent: var(--warn); --dv-src-tint: var(--warn-bg); }
tr.dv-src-connect { --dv-src-accent: var(--info); --dv-src-tint: var(--info-bg); }
tr.dv-src-bot { --dv-src-accent: var(--ok); --dv-src-tint: var(--ok-bg); }
tr.dv-src-reseller { --dv-src-accent: var(--violet); --dv-src-tint: var(--violet-bg); }
/* A reseller's customer, marked on the name rather than by repainting
the cell in pink. */
.dv-cell-reseller { font-weight: 600; }
.dv-cell-reseller::after {
content: "reseller";
display: inline-block;
margin-left: 7px;
padding: 1px 7px;
border-radius: 20px;
background: var(--violet-bg);
color: var(--violet);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
vertical-align: 1px;
}
/* The same treatment for a service's own state on the customer page. */
tr.dv-src-cancelled { --dv-src-accent: var(--bad); --dv-src-tint: var(--bad-bg); }
tr.dv-src-suspended { --dv-src-accent: var(--bad); --dv-src-tint: var(--bad-bg); }
tr.dv-src-expired { --dv-src-accent: var(--warn); --dv-src-tint: var(--warn-bg); }
/* ==================================================================
Part 8: the table chrome inside a card.
A listing sits in a card with no padding of its own (card-body p-0),
so the table can run edge to edge and its cells supply the inset.
DataTables adds its own furniture around that table - the "Show N
entries" box, the search field, the "Showing 1 to 1" line and the
pager - and none of it knew about that inset, so it sat hard against
the card's border while the column beside it started 16px in.
Everything now lines up on the same 16px, which is where the first
column starts.
================================================================== */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
padding-left: 16px;
padding-right: 16px;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { padding-top: 12px; }
.dataTables_wrapper .dataTables_info { padding-bottom: 14px; }
.dataTables_wrapper .dataTables_paginate { padding-bottom: 12px; }
/* The same for a table that is not a DataTable but still sits in a
card with no padding - its caption-like bits need the inset too. */
.card-body.p-0 > .alert,
.card-body.p-0 > .hint,
.card-body.p-0 > p { margin-left: 16px; margin-right: 16px; }
/* A page heading is shown once, in the top bar. Four pages printed it a
second time at the top of the content; the row around it still holds
the page's message, so only the heading goes. */
.dv-content .content-header h1 { display: none; }
/* The search box and its label on one line, with a gap between them. */
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
}
/* ==================================================================
Co-pilot
The button and panel on every page (.dv-cop-float), and the same box
laid into copilot.php (.dv-cop-inline). Answers are the instruction
text itself, so they are styled as reference cards, not chat bubbles.
================================================================== */
.dv-cop-float {
position: fixed;
right: 22px;
bottom: 22px;
/* above the page and the sticky top bar, below the menus and the
mobile sidebar scrim */
z-index: 44;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.dv-cop-fab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 17px 11px 14px;
border: 0;
border-radius: 999px;
background: var(--brand);
color: #fff;
font: inherit;
font-weight: 600;
font-size: 13.5px;
box-shadow: var(--shadow-lg);
cursor: pointer;
}
.dv-cop-fab:hover { background: var(--brand-strong); }
.dv-cop-fab:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.dv-cop-float.is-open .dv-cop-fab { box-shadow: var(--shadow-md); }
.dv-cop-panel {
display: flex;
flex-direction: column;
background: var(--surface);
color: var(--text);
min-height: 0;
}
.dv-cop-panel[hidden] { display: none; }
.dv-cop-float .dv-cop-panel {
order: -1;
width: 410px;
height: min(620px, calc(100vh - 120px));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.dv-cop-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px 12px 14px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.dv-cop-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex: none;
border-radius: 9px;
background: var(--brand-soft);
color: var(--brand);
}
.dv-cop-title { flex: 1; min-width: 0; line-height: 1.25; }
.dv-cop-title strong { display: block; font-size: 14px; }
.dv-cop-title span { font-size: 11.5px; color: var(--text-muted); }
.dv-cop-hbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex: none;
border: 0; border-radius: 7px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.dv-cop-hbtn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.dv-cop-hbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.dv-cop-log {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
background: var(--bg);
}
.dv-cop-intro p { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
.dv-cop-intro[hidden] { display: none; }
.dv-cop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-cop-chip {
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text);
border-radius: 999px;
padding: 5px 11px;
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.dv-cop-chip:hover { border-color: var(--brand); color: var(--brand); }
.dv-cop-msg { max-width: 100%; font-size: 13px; }
.dv-cop-you {
align-self: flex-end;
max-width: 85%;
background: var(--brand);
color: #fff;
padding: 7px 12px;
border-radius: 12px 12px 3px 12px;
overflow-wrap: anywhere;
}
.dv-cop-bot { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.dv-cop-wait { color: var(--text-muted); font-style: italic; padding: 4px 2px; }
.dv-cop-none {
background: var(--warn-bg);
color: var(--warn);
border: 1px solid currentColor;
border-radius: var(--radius);
padding: 9px 12px;
font-weight: 500;
}
.dv-cop-none.is-error { background: var(--bad-bg); color: var(--bad); }
.dv-cop-group {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.dv-cop-ghead {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
font-size: 12px;
}
.dv-cop-src {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-subtle);
}
.dv-cop-path { font-weight: 600; color: var(--text); }
.dv-cop-tag {
margin-left: auto;
font-size: 11px;
font-weight: 600;
padding: 1px 8px;
border-radius: 999px;
background: var(--surface-3);
color: var(--text-muted);
}
.dv-cop-tag.is-ok { background: var(--ok-bg); color: var(--ok); }
.dv-cop-tag.is-warn { background: var(--warn-bg); color: var(--warn); }
.dv-cop-tag.is-bad { background: var(--bad-bg); color: var(--bad); }
.dv-cop-tag.is-info { background: var(--info-bg); color: var(--info); }
.dv-cop-tag.is-violet { background: var(--violet-bg); color: var(--violet); }
.dv-cop-tag.is-brand { background: var(--brand-soft); color: var(--brand); }
.dv-cop-items { list-style: none; margin: 0; padding: 0; }
.dv-cop-item { padding: 8px 12px; border-top: 1px solid var(--border); }
.dv-cop-item:first-child { border-top: 0; }
.dv-cop-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.dv-cop-line strong { font-weight: 600; }
.dv-cop-link { overflow-wrap: anywhere; font-size: 12.5px; }
.dv-cop-line .dv-copy { margin-left: 0; }
.dv-cop-text { color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.dv-cop-text:first-child { margin-top: 0; color: var(--text); }
.dv-cop-notes { margin: 4px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 12.5px; }
.dv-cop-gfoot { padding: 6px 12px 8px; border-top: 1px solid var(--border); }
.dv-copy.dv-cop-reply {
margin: 0;
padding: 4px 9px;
border: 1px solid var(--border-strong);
border-radius: 6px;
color: var(--text);
font: inherit;
font-size: 12px;
}
.dv-copy.dv-cop-reply:hover { border-color: var(--brand); }
.dv-cop-form {
display: flex;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.dv-cop-form input { flex: 1; min-width: 0; }
.dv-cop-send { flex: none; padding-left: 13px; padding-right: 13px; }
/* ---------- the co-pilot page ---------- */
.dv-cop-page {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.dv-cop-card { margin-bottom: 0; }
.dv-cop-card .card-head .chip { margin-left: auto; }
.dv-cop-card .dv-cop-inline {
display: flex;
flex-direction: column;
height: calc(100vh - 190px);
min-height: 460px;
}
.dv-cop-inline .dv-cop-panel { flex: 1; }
/* The card has its own heading; the box only keeps its clear button. */
.dv-cop-inline .dv-cop-mark,
.dv-cop-inline .dv-cop-title strong { display: none; }
.dv-cop-inline .dv-cop-head { padding: 6px 10px 6px 14px; }
.dv-cop-kb .card-body { display: flex; flex-direction: column; gap: 8px; }
.dv-cop-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dv-cop-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.dv-cop-files svg { color: var(--text-subtle); }
.dv-cop-kb .hint { margin: 0 0 6px; }
.dv-cop-fold {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.dv-cop-fold > summary {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
list-style: none;
}
.dv-cop-fold > summary::-webkit-details-marker { display: none; }
.dv-cop-fold > summary:hover { background: var(--surface-2); }
.dv-cop-fold[open] > summary { border-bottom: 1px solid var(--border); }
.dv-cop-fold-title { flex: 1; font-weight: 600; font-size: 13.5px; }
.dv-cop-fold-count {
font-size: 11.5px; color: var(--text-muted);
background: var(--surface-3); border-radius: 999px; padding: 1px 8px;
}
.dv-cop-fold .dv-cop-group { border: 0; border-radius: 0; border-top: 1px solid var(--border); }
.dv-cop-fold summary + .dv-cop-group { border-top: 0; }
@media (max-width: 1100px) {
.dv-cop-page { grid-template-columns: minmax(0, 1fr); }
.dv-cop-card .dv-cop-inline { height: 70vh; }
}
@media (max-width: 575px) {
.dv-cop-float { right: 12px; bottom: 12px; left: 12px; }
.dv-cop-float .dv-cop-panel { width: 100%; height: calc(100vh - 96px); }
.dv-cop-fab span { display: none; }
.dv-cop-fab { padding: 13px; }
}
@media print {
.dv-cop-float { display: none; }
}