/* KDS website palette and original logo, sourced from https://www.kdsmt.com/.
   Kept separate to support independently branded reseller deployments. */
:root {
  --primary: #7e3084;
  --primary-dark: #581c5c;
  --accent: #9333ea;
  --secondary: #f59e0b;
  --teal: var(--primary);
  --ink: #1e293b;
  --border: #e2e8f0;
  color: var(--ink);
  background: #f8fafc;
}
body { background: linear-gradient(180deg, #f3e8ff 0, #f8fafc 540px); }
header { border-top: 4px solid var(--primary); height: 94px; }
.brand { align-items: center; gap: 12px; }
.brand img { object-fit: contain; width: 193px; height: 60px; }
.brand small { border-color: var(--border); color: var(--primary-dark); }
.primary { background: var(--primary); border-color: var(--primary); }
.primary:hover { background: var(--primary-dark); }
button:hover, .button:hover { background: #f3e8ff; }
button.primary:hover, .button.primary:hover { background: var(--primary-dark); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline-color: #c995db; }
nav .selected, .pill, .secret { background: #f3e8ff; color: var(--primary-dark); }
nav button { color: #64748b; }
.status-dot.online { background: #16a34a; }
th { background: #f3e8ff; }
#notice { background: var(--primary-dark); }
#screen:focus { box-shadow: inset 0 0 0 3px var(--accent); }
#screen { cursor:default; }
#remote-cursor { position:absolute; pointer-events:none; z-index:2; max-width:128px; max-height:128px; filter:drop-shadow(0 0 1px white) drop-shadow(0 0 2px var(--primary)); }
#conversion-status { padding:8px 12px; margin-bottom:8px; background:#f3e8ff; color:var(--primary-dark); border-radius:6px; font-size:13px; }
.modifier-keys { display:flex; gap:3px; }
.modifier-keys button[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:white; }
.keyboard-help { position:relative; padding:0; margin:0; border:0; font-size:12px; background:transparent; }
.keyboard-help[open] { position:absolute; bottom:70px; left:14px; max-width:500px; z-index:4; background:white; padding:18px; border:1px solid var(--border); box-shadow:0 4px 18px #0002; }
/* Staff workspace uses the monitor width; customer landing pages keep their reading width. */
.staff-console.signed-in { background:#f5f6fa; }
.staff-console.signed-in > header { height:65px; padding:0 24px; }
.staff-console.signed-in .brand img { width:145px; height:45px; }
.staff-console.signed-in main { max-width:none; padding:18px 24px 28px; min-height:calc(100dvh - 112px); }
.staff-console.signed-in > footer { padding:14px 24px; }
.signed-in #tabs { gap:4px; margin-bottom:20px; padding-bottom:8px; }
.signed-in button,.signed-in input,.signed-in select,.signed-in textarea { font-size:13px; padding:8px 12px; }
.signed-in .section-head { margin-bottom:14px; gap:12px; }
.signed-in h1 { font-size:25px; letter-spacing:-.6px; margin:0 0 5px; }
.signed-in .section-head p { margin:0; }
.count { display:inline-block; font-size:12px; letter-spacing:0; padding:3px 7px; background:#ebe4ef; color:var(--primary); border-radius:5px; vertical-align:middle; }
.signed-in .filters { gap:8px; margin-bottom:14px; }
.signed-in .filters input { max-width:520px; }
.signed-in .filters #refresh { margin-left:auto; }
#device-grid { display:block; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:white; }
#device-grid:empty { display:none; }
#device-grid .device { display:grid; grid-template-columns:80px minmax(160px,1fr) 130px minmax(220px,1.2fr) auto; align-items:center; gap:18px; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:14px 18px; }
#device-grid .device:last-child { border-bottom:0; }
#device-grid .device:hover { background:#faf7fc; }
#device-grid .device > span:first-child { font-size:12px; }
#device-grid .device h2 { font-size:15px; margin:0; letter-spacing:0; }
#device-grid .pill { justify-self:start; font-size:9px; letter-spacing:.4px; }
#device-grid .metadata { margin:0; line-height:1.55; font-size:11px; }
#device-grid .actions { margin:0; gap:6px; }
#device-grid .actions button { font-size:12px; padding:7px 10px; }
#device-grid .actions { flex-wrap:nowrap; }
#device-grid .actions .device-settings-button { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:7px; color:#64748b; background:transparent; border-color:transparent; }
#device-grid .actions .device-settings-button:hover { color:var(--primary); border-color:#e4d3e9; background:#f3e8ff; }
.device-settings-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.device-settings-name { font-weight:650; margin:16px 0 2px; overflow-wrap:anywhere; }
.device-settings-name + p { margin:0 0 20px; }
.device-health { margin:18px 0 10px; padding:12px 14px; background:#f8fafc; border:1px solid var(--border); border-radius:8px; font-size:12px; }
.device-health > div { display:grid; grid-template-columns:130px minmax(0,1fr); gap:10px; padding:5px 0; }
.device-health dt { color:#64748b; }
.device-health dd { margin:0; overflow-wrap:anywhere; }
#device-health-note { font-size:12px; margin:0 0 20px; }
@media(max-width:460px) { .device-health > div { grid-template-columns:1fr; gap:3px; } }
.device-settings-menu { display:flex; flex-direction:column; gap:12px; }
.signed-in .device-setting-action { display:flex; flex-direction:column; align-items:flex-start; gap:7px; text-align:left; padding:15px 16px; border-color:var(--border); }
.device-setting-action strong { font-size:14px; }
.device-setting-action span { font-size:12px; font-weight:400; line-height:1.6; color:#64748b; }
.device-setting-action.device-setting-danger { margin-top:8px; color:#a62332; border-color:#f0d5da; }
.device-setting-action.device-setting-danger:hover { background:#fff4f5; }
.signed-in .panel { padding:20px; box-shadow:none; }
.signed-in .person { padding:12px 16px; margin-bottom:6px; }
.signed-in .session-banner { padding:12px 16px; margin-bottom:16px; }
.signed-in #users { margin-bottom:18px; }
.signed-in .table-wrap { border:1px solid var(--border); border-radius:8px; }
.signed-in table { margin:0; }
.signed-in th,.signed-in td { padding:10px 12px; }
@media(max-width:1100px) { #device-grid .device { grid-template-columns:75px minmax(140px,1fr) minmax(180px,1fr) auto; gap:12px; } #device-grid .pill { display:none; } }
@media(max-width:700px) { .staff-console.signed-in main { padding:14px; } #device-grid .device { grid-template-columns:1fr auto; } #device-grid .device > span:first-child { grid-column:1; } #device-grid .device h2 { grid-column:1; } #device-grid .metadata { grid-column:1; } #device-grid .actions { grid-column:2; grid-row:1 / span 3; flex-direction:column; } .signed-in .filters input { max-width:none; width:100%; } }
.welcome aside { border-top-color: var(--primary); }
.welcome .eyebrow { color: var(--primary-dark); }
.session-metrics { color: #64748b; font-size: 12px; padding: 12px 0 0; line-height: 1.6; }
.customer-label { font-size: 14px; color: var(--primary-dark); }
.support-steps { padding-left: 23px; margin: 24px 0; }
.support-steps li { padding-left: 10px; margin-bottom: 24px; }
.support-steps li::marker { color: var(--primary); font-weight: 800; }
.support-steps p { margin: 6px 0 0; font-size: 14px; color: #64748b; }
.support-reassurance { border-top: 1px solid var(--border); padding-top: 20px; font-size: 14px; line-height: 1.6; }
.support-safety { max-width: 880px; margin: 0 auto 20px; font-size: 13px; color: #64748b; text-align: center; }
.staff-link { color: var(--primary); font-weight: 600; }
.staff-intro { max-width: 510px; }
.session-banner { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px; margin-bottom:24px; background:#f3e8ff; border:1px solid #d8b4e2; border-radius:10px; }
.session-banner p { margin:5px 0 0; font-size:13px; color:#64748b; }
.support-wait { padding:14px 0 0; color:var(--primary-dark); font-weight:600; }
body.viewer-open > header, body.viewer-open > footer { display:none; }
body.viewer-open main { max-width:none; padding:14px; min-height:100dvh; }
.staff-console.signed-in.viewer-open main { padding:10px; min-height:100dvh; }
#remote { display:flex; flex-direction:column; height:calc(100dvh - 20px); gap:8px; min-height:420px; }
#remote .remote-head { flex:none; align-items:center; margin:0; gap:14px; }
.remote-heading { display:flex; align-items:center; gap:18px; min-width:0; }
.remote-heading h2 { font-size:18px; margin:0 0 4px; overflow-wrap:anywhere; }
#remote .actions { align-items:center; }
#remote #screen-wrap { flex:1; min-height:160px; border-radius:8px; }
#remote #screen { max-width:100%; max-height:100%; flex:none; }
#remote .session-metrics { flex:none; padding:0; font-size:11px; }
#remote .input-bar { flex:none; padding:0; }
#remote #files { flex:none; margin:0; padding:10px 16px; max-height:22vh; overflow:auto; }
.fullscreen-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.collapse-icon, .fullscreen-hint { display:none; }
#remote:fullscreen { box-sizing:border-box; width:100vw; height:100dvh; min-height:0; padding:12px; background:#f8fafc; }
#remote:fullscreen .expand-icon { display:none; }
#remote:fullscreen .collapse-icon, #remote:fullscreen .fullscreen-hint { display:inline; }
@media (max-width:1100px) {
  #remote .remote-head { flex-direction:column; align-items:stretch; gap:8px; }
  #remote .remote-head .actions { justify-content:flex-start; }
  #remote button, #remote select { padding:7px 10px; font-size:12px; }
  .session-banner { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 600px) {
  header { padding-left: 20px; padding-right: 20px; }
  .brand img { width: 150px; height: 47px; }
  .header-right { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .header-right button { padding: 7px 9px; }
}
/* Compact administration lists and scoped account controls. */
.admin-summary { display:flex; gap:12px; margin:0 0 20px; flex-wrap:wrap; }
.admin-summary > div { display:flex; align-items:baseline; gap:10px; padding:12px 20px; background:#fff; border:1px solid var(--border); border-radius:8px; min-width:135px; }
.admin-summary strong { font-size:25px; color:var(--primary); }
.admin-summary span { font-size:12px; color:#64748b; }
.admin-table { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fff; }
.admin-table:empty { display:none; }
.admin-row { display:grid; grid-template-columns:minmax(190px,1.2fr) 100px minmax(220px,1.3fr) auto; gap:18px; padding:15px 18px; align-items:center; border-bottom:1px solid var(--border); }
.admin-row:last-child { border-bottom:0; }
.admin-row:hover { background:#fcf9fd; }
.admin-person strong,.admin-person small,.admin-details small { display:block; overflow-wrap:anywhere; }
.admin-person small,.admin-details { font-size:12px; color:#64748b; line-height:1.65; }
.admin-person strong { margin-bottom:3px; font-size:14px; }
.account-state { justify-self:start; border-radius:20px; padding:4px 10px; font-size:11px; font-weight:600; text-transform:capitalize; background:#f1f5f9; color:#475569; }
.account-state.active { background:#e8f5ec; color:#166534; }
.account-state.pending { background:#f3e8ff; color:var(--primary-dark); }
.account-state.expired { background:#fff3db; color:#92400e; }
.admin-row .actions { margin:0; gap:6px; }
.admin-row button { font-size:12px; padding:7px 12px; }
.check-inline { display:flex; flex-direction:row; align-items:center; gap:8px; font-size:13px; }
.check-inline input[type=checkbox],.permission-table input { width:17px; height:17px; margin:0; flex:none; }
.management-actions { margin:20px 0; }
#dialog:has(.permission-table) { width:min(780px,calc(100vw - 40px)); max-width:780px; }
.permission-table { width:100%; font-size:13px; }
.permission-table th,.permission-table td { padding:10px 8px; }
.permission-table td:not(:first-child),.permission-table th:not(:first-child) { text-align:center; }
#email-settings input[type=password] { font-family:monospace; }
#dialog-content .secret { overflow-wrap:anywhere; word-break:break-all; }
@media(max-width:850px) { .admin-row { grid-template-columns:minmax(140px,1fr) auto; gap:10px; } .admin-details { grid-column:1; } .admin-row .actions { grid-column:2; grid-row:2; flex-wrap:wrap; justify-content:flex-end; } .admin-summary > div { min-width:110px; padding:10px 14px; } }