/* manager_arcade.css
Ingresso Security Platform - Manager Portal
Arcade theme (2026-10-09): the visual language of the Visitor Kiosk and the
Attendant Appliance (kiosk_ui.py / app.py), applied to the portal for
product branding. Loaded AFTER manager.css and only overrides it, so
removing the in manager_header.php restores the old look exactly.
Sources of every value:
sky + colour fields MESH_SKY / MESH_BLOBS
arcade keys ArcadeButton.paintEvent + the key palettes
(NP_SAVE_KEY, NP_ADMIT_KEY, TILE_SCAN, AUTH_KEY,
BACKKEY, NP_CANCEL_KEY)
lettering _tile_letters: warm-white face, rim = ink darker,
hard offset shadow
chevron ball ArrowChip3D
deck / keycaps KB_DECK_* / KB_CAP / KB_LIT_*
wells FIELD_HI / FIELD_LO / FIELD_RIM
site tile SITE_TYPES colours, gradient to #0c1b30
*/
:root {
--sky-0: #150a2e; --sky-1: #241049; --sky-2: #1c0b3a; --sky-3: #0b0520;
--deck-0: rgba(22,32,58,.86); --deck-1: rgba(10,17,32,.88); --deck-2: rgba(5,8,16,.92);
--rim: #35507e; --rim-soft: rgba(127,211,255,.14);
--face: #fff4dc; --cyan: #7fe7ff;
--well-lo: #04070e; --well-hi: #0e1a2c; --well-rim: #2a3f5f;
--muted: #9fb0c8; --muted-2: #7d8fb0;
--border: rgba(127,211,255,.14); --border-2: rgba(127,211,255,.24);
--card-bg: rgba(5,8,16,.45); --card-bg-2: rgba(5,8,16,.6);
--teal: #22e0d8; --teal-dark: #046a68;
}
/* -- Background: the kiosk sky ---------------------------------------------- */
html { background: var(--sky-3); }
html, body { height: auto; min-height: 100%; }
body {
color: #e8eef7;
background:
radial-gradient(42vw 42vw at 14% 82%, rgba(255,60,150,.30), transparent 70%),
radial-gradient(48vw 48vw at 54% 108%, rgba(120,60,255,.38), transparent 70%),
radial-gradient(38vw 38vw at 90% 70%, rgba(0,210,230,.22), transparent 70%),
radial-gradient(28vw 28vw at 36% 58%, rgba(255,150,40,.10), transparent 70%),
radial-gradient(30vw 30vw at 74% 104%, rgba(255,40,120,.20), transparent 70%),
linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 35%, var(--sky-2) 70%, var(--sky-3) 100%);
background-attachment: fixed;
}
/* -- Sidebar: the keyboard deck --------------------------------------------- */
.sidebar {
width: 262px; gap: 0; padding: 16px 14px 14px;
background: linear-gradient(180deg, rgba(22,32,58,.94) 0%, rgba(10,17,32,.96) 48%, rgba(5,8,16,.97) 100%);
border-right: 1px solid var(--rim);
box-shadow: inset -1px 0 0 rgba(127,211,255,.18), 8px 0 30px rgba(0,0,0,.55);
scrollbar-width: thin; scrollbar-color: #35507e transparent;
}
.shell { position: relative; }
.shell::before {
content: ""; position: fixed; top: 18px; bottom: 18px; left: 260px; width: 3px; border-radius: 3px; z-index: 5; pointer-events: none;
background: linear-gradient(180deg, transparent, #7fd3ff 20%, #9d5cff 55%, #ff36c6 85%, transparent);
box-shadow: 0 0 12px #7fd3ff; opacity: .85;
}
/* brand key: the INGRESSO wordmark on a rainbow arcade key under smoked
glass (approved 2026-10-09, option R2). Cyan -> violet -> pink is the same
run as the neon strip on the sidebar edge. */
.brandkey { padding-bottom: 9px; margin-bottom: 12px; }
.bk-cap {
position: relative; text-align: center; border-radius: 18px; padding: 15px 10px 12px;
background:
linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.03) 42%, rgba(0,0,0,.10) 42.1%, rgba(0,0,0,.55) 100%),
linear-gradient(180deg, rgba(11,5,32,.15), rgba(11,5,32,.55)),
linear-gradient(90deg, #22c8e0, #8d4dff 52%, #ff36c6);
box-shadow: 0 0 0 1.4px #120428, 0 8px 0 #1a0636, 0 8px 0 1.4px #0c0220, 0 16px 28px rgba(141,77,255,.35);
}
.bk-cap::after { content: ""; position: absolute; left: 16px; right: 16px; top: 2px; height: 2.4px; border-radius: 2px; background: rgba(255,255,255,.55); }
.bk-cap img { height: 23px; display: block; margin: 0 auto;
filter: brightness(0) invert(1) sepia(.2) drop-shadow(1.4px 0 0 #120428) drop-shadow(-1.4px 0 0 #120428) drop-shadow(0 1.4px 0 #120428) drop-shadow(0 -1.4px 0 #120428) drop-shadow(2px 3px 0 #120428); }
.bk-sub { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 4.5px; margin-top: 9px; color: var(--face);
-webkit-text-stroke: 2.2px #120428; paint-order: stroke fill; text-shadow: 1px 2px 0 #120428; }
/* community: the site tile */
.switcher {
--c: #12a594;
position: relative; display: flex; align-items: center; gap: 11px; justify-content: flex-start;
border-radius: 16px; padding: 9px 11px; margin-bottom: 12px;
background: linear-gradient(180deg, var(--c) 0%, #0c1b30 100%); border: 1px solid var(--c);
box-shadow: 0 10px 22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4);
transition: filter .15s, transform .1s;
}
.switcher:hover { border-color: #fff; background: linear-gradient(180deg, var(--c) 0%, #0c1b30 100%); filter: brightness(1.08); }
.switcher > div:not(.sw-ico) { min-width: 0; flex: 1 1 auto; }
.switcher .sw-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; background: rgba(5,8,16,.35); border: 1px solid rgba(255,255,255,.35); }
.switcher .sw-label { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 2.4px; color: #e2eefb; opacity: .85; }
.switcher .sw-name { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.05; color: var(--face);
-webkit-text-stroke: 2.4px rgba(0,0,0,.55); paint-order: stroke fill; text-shadow: 1.5px 2px 0 rgba(0,0,0,.55);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher .sw-role { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 2.4px; color: #e2eefb; }
.switcher .sw-caret { margin-left: auto; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #c9f7ff; font-size: 13px;
background: radial-gradient(circle at 30% 27%, #3a5a86, #0d1220 65%, #000); box-shadow: 0 3px 3px rgba(0,0,0,.5); }
/* search */
.side-search { gap: 8px; margin: 0 0 12px; }
.side-search input { height: 36px; border-radius: 10px; background: linear-gradient(180deg, var(--well-lo), var(--well-hi)); border: 1px solid var(--well-rim); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); color: #e8eef7; }
.side-search input:focus { border-color: #5fe4ff; box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 3px rgba(95,228,255,.18); }
.side-search input::placeholder { color: #5b6f92; }
.side-search-btn {
--cap: #22e0d8; --base: #046a68; --ink: #00201f;
flex: 0 0 40px; width: 40px; height: 36px; border: 0; border-radius: 11px; color: #00201f; position: relative;
background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.03) 42%, transparent 42.1%),
linear-gradient(180deg, #8af0ec 0%, #22e0d8 46%, #1fcac3 50%, #034a49 100%);
box-shadow: 0 0 0 1.4px #023a39, 0 4px 0 0 #023837, 0 4px 0 1.4px #012120, 0 10px 18px rgba(34,224,216,.45);
}
.side-search-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.05) 42%, transparent 42.1%), linear-gradient(180deg, #9af4f0 0%, #3ae6df 46%, #22d0c9 50%, #034a49 100%); color: #00201f; border: 0; }
.side-search-btn:active { transform: translateY(4px); box-shadow: 0 0 0 1.4px #023a39, 0 2px 8px rgba(34,224,216,.35); }
.side-search-btn svg { stroke-width: 3; }
/* group labels */
.nav-group-label { display: flex; align-items: center; gap: 8px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 3.2px; color: #7fd3ff; padding: 8px 4px 6px; text-shadow: 0 0 8px rgba(127,211,255,.6); }
.nav-group-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(127,211,255,.6), transparent); }
/* nav: keycaps */
.nav-item {
--lit: #5fe4ff; --hot: #c9f7ff;
position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px 0 5px; margin: 0 0 6px; border-radius: 11px;
color: #c9d4ea; font-size: 14px; font-weight: 600; border: 1px solid rgba(196,220,255,.16);
background: linear-gradient(180deg, #232a3d 0%, #141a29 42%, #0d1220 43%, #0a0f1b 100%);
box-shadow: 0 3px 0 #04060c, 0 4px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
transition: border-color .12s, color .12s, transform .06s, box-shadow .06s;
}
.nav-item .ic {
width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; color: #0a0f1b;
background: radial-gradient(circle at 32% 28%, var(--hot), var(--lit) 55%, color-mix(in srgb, var(--lit) 55%, #000));
box-shadow: 0 0 9px color-mix(in srgb, var(--lit) 70%, transparent), inset 0 -2px 3px rgba(0,0,0,.35);
}
.nav-item .ic svg { display: block; }
.nav-item:hover { background: linear-gradient(180deg, #2a3248 0%, #182033 42%, #0f1526 43%, #0b111e 100%); border-color: color-mix(in srgb, var(--lit) 55%, transparent); color: #fff; }
.nav-item:active { transform: translateY(2px); box-shadow: 0 1px 0 #04060c, 0 2px 4px rgba(0,0,0,.5); }
.nav-item.active {
color: var(--hot); border-color: var(--lit); transform: translateY(2px); padding-right: 26px;
background: linear-gradient(180deg, color-mix(in srgb, var(--lit) 26%, #141a29) 0%, color-mix(in srgb, var(--lit) 12%, #0d1220) 100%);
box-shadow: 0 1px 0 #04060c, 0 0 0 1px color-mix(in srgb, var(--lit) 40%, transparent), 0 0 18px color-mix(in srgb, var(--lit) 50%, transparent), inset 0 0 14px color-mix(in srgb, var(--lit) 22%, transparent);
text-shadow: 0 0 10px color-mix(in srgb, var(--lit) 80%, transparent);
}
.nav-item.active::after { content: ""; position: absolute; right: 10px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--lit)); box-shadow: 0 0 8px var(--lit), 0 0 16px var(--lit); }
.k-num { --lit: #ffc73a; --hot: #fff0c2; }
.k-char { --lit: #5fe4ff; --hot: #c9f7ff; }
.k-sym { --lit: #e46bff; --hot: #f8d6ff; }
.k-mod { --lit: #ff6b6b; --hot: #ffd6d6; }
.k-on { --lit: #8dff4f; --hot: #e6ffd0; }
.nav-badge { background: radial-gradient(circle at 35% 30%, #ffd6d6, #ff4d5e 55%, #b81c2d); color: #2a0006; font-family: 'Rajdhani', sans-serif; }
.nav-item.active .nav-badge { margin-right: 4px; }
.nav-item.alarm-active { border-color: #ff4d5e; box-shadow: 0 3px 0 #04060c, 0 0 14px rgba(255,77,94,.45); }
/* footer */
.sidebar-footer { padding-top: 12px; }
.kc-toggle { border-radius: 14px; padding: 8px 11px; margin-bottom: 8px; background: linear-gradient(180deg, var(--well-hi), var(--well-lo)); border: 1px solid var(--well-rim); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.kc-toggle:hover { border-color: #5fe4ff; }
.kc-toggle.on { border-color: rgba(141,255,79,.55); background: linear-gradient(180deg, #0f2414, #04070e); box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 14px rgba(141,255,79,.18); }
.kc-toggle .kc-t { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--face); }
.kc-toggle .kc-s { font-size: 11px; color: var(--muted); }
.kc-toggle.on .kc-s { color: #8dff4f; }
.kc-sw { width: 44px; height: 24px; border-radius: 12px; background: linear-gradient(180deg, #04070e, #0e1a2c); border: 1px solid #2a3f5f; box-shadow: inset 0 2px 4px rgba(0,0,0,.7); }
.kc-sw::after { top: 2px; left: 2px; width: 18px; height: 18px; background: radial-gradient(circle at 35% 30%, #ffd6d6, #ff4d5e 55%, #8a0f1f); box-shadow: 0 0 8px rgba(255,77,94,.7); }
.kc-toggle.on .kc-sw { background: linear-gradient(180deg, #04070e, #0f2414); }
.kc-toggle.on .kc-sw::after { left: 22px; background: radial-gradient(circle at 35% 30%, #e6ffd0, #8dff4f 55%, #2c7a05); box-shadow: 0 0 10px #8dff4f, 0 0 20px rgba(141,255,79,.6); }
.user-chip { border-radius: 14px; padding: 9px 10px; background: linear-gradient(180deg, #16203a, #050810); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 rgba(127,211,255,.2); }
.user-chip .avatar { width: 36px; height: 36px; font-family: 'Rajdhani', sans-serif; font-size: 15px; color: var(--face); -webkit-text-stroke: 2px #1c0740; paint-order: stroke fill;
background: radial-gradient(circle at 30% 27%, #e2ccff, #9d5cff 45%, #4f1bb5 80%, #1c0740); box-shadow: 0 3px 3px rgba(0,0,0,.5), 0 0 12px rgba(157,92,255,.55); }
.user-chip .u-name { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; color: var(--face); }
.user-chip .u-logout { color: var(--cyan); font-size: 12px; }
.user-chip .u-logout:hover { color: #fff; }
/* -- Page head -------------------------------------------------------------- */
.page-head { align-items: flex-start; }
.page-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: var(--face);
-webkit-text-stroke: 3px #3a1080; paint-order: stroke fill; text-shadow: 3px 4px 0 #1c0740; }
.page-sub { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); margin-top: 8px; }
.badge-role { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 2.5px; padding: 5px 12px; color: var(--cyan); border: 1px solid rgba(127,231,255,.45); background: rgba(5,8,16,.6); box-shadow: 0 0 12px rgba(127,231,255,.18); }
/* -- Panels: the deck ------------------------------------------------------- */
.panel, .rd-card, .mini-card, .filter-bar, .metric, .dash-svc {
background: linear-gradient(180deg, var(--deck-0), var(--deck-1) 48%, var(--deck-2));
border: 1px solid var(--rim); border-radius: 18px;
box-shadow: inset 0 1px 0 rgba(127,211,255,.22), 0 14px 30px rgba(0,0,0,.5);
}
.rd-card, .mini-card, .filter-bar { border-radius: 16px; }
.panel-title, .modal-head, .mini-title, .dc-title, .detail-title, .pref-title, .cs-title {
font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1.5px; color: var(--face);
}
.panel-title { font-size: 18px; text-transform: uppercase; }
.rd-card-head { font-weight: 700; letter-spacing: 2px; color: var(--face); border-bottom-color: var(--rim); }
.rd-head-blue { background: linear-gradient(90deg, rgba(63,123,255,.45), rgba(63,123,255,.08)); }
.metric .m-value { color: var(--face); -webkit-text-stroke: 2px #1c0740; paint-order: stroke fill; }
.cap-banner { background: rgba(34,224,216,.08); border-color: rgba(34,224,216,.35); color: #8af0ec; border-radius: 12px; }
.coming-soon { border-color: var(--rim); background: rgba(5,8,16,.45); }
/* -- Tables: plain text, deck rules ----------------------------------------- */
.tbl { font-size: 14px; }
.tbl th { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--muted-2); border-bottom-color: var(--rim); }
.tbl td { color: #dbe3f2; border-bottom-color: var(--rim-soft); }
.tbl-hover tbody tr.addr-row:hover, .link-row:hover { background: rgba(127,211,255,.05); }
.cell-link { color: var(--cyan); }
.dc-row.sel > td { background: rgba(34,224,216,.16) !important; }
/* -- Status chips: the kiosk status lights ---------------------------------- */
.pill { display: inline-block; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 11px; border-radius: 999px; }
.pill-granted { color: #06180a; background: radial-gradient(circle at 30% 25%, #e6ffd0, #8dff4f 55%, #4fbf1c); box-shadow: 0 0 10px rgba(141,255,79,.45); }
.pill-denied { color: #2a0006; background: radial-gradient(circle at 30% 25%, #ffd6d6, #ff4d5e 55%, #b81c2d); box-shadow: 0 0 10px rgba(255,77,94,.45); }
.pill-warn { color: #3d2400; background: radial-gradient(circle at 30% 25%, #fff0c2, #ffc73a 55%, #c48a05); box-shadow: 0 0 10px rgba(255,199,58,.45); }
/* -- Wells: every text field and select ------------------------------------- */
.search,
.form-field input[type=text], .form-field input[type=number], .form-field input[type=password],
.form-field input[type=email], .form-field input[type=date], .form-field select,
.filter-field input, .filter-field select, .dc-field > select, .sched-grid input[type=time] {
background: linear-gradient(180deg, var(--well-lo), var(--well-hi));
border: 1px solid var(--well-rim); border-radius: 10px; color: #e8eef7;
box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
}
.search:focus, .form-field input:focus, .form-field select:focus, .filter-field input:focus,
.filter-field select:focus, .dc-field > select:focus, .sched-grid input[type=time]:focus {
border-color: #5fe4ff; background: linear-gradient(180deg, var(--well-lo), #10263a);
box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 3px rgba(95,228,255,.18);
}
.search::placeholder { color: #5b6f92; }
.form-field label, .filter-field label, .info-k, .rd-info .k { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1.8px; color: var(--muted); }
.form-field label .req { color: #ff6b6b; }
.check-label input { accent-color: #22e0d8; }
select option, select optgroup { background-color: #10203c; }
/* -- Arcade keys: ArcadeButton.paintEvent ----------------------------------- */
/* Base = the full footprint (box-shadow lip), cap = the face, hard colour
break at 46-50 %, gloss over the top 42 %, a bright line along the top edge,
a coloured glow underneath. Pressed, the cap drops onto the base. */
.btn, .exp-view, .aplay-btn {
--cap: #9fb6d4; --base: #2b3d55; --ink: #070e18; --lip: 6px; --rad: 15px;
}
.btn {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
height: 44px; padding: 0 22px; border: 0; border-radius: var(--rad); cursor: pointer;
font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 1.6px; text-transform: uppercase;
color: var(--face);
-webkit-text-stroke: 3.2px color-mix(in srgb, var(--ink) 66%, #000); paint-order: stroke fill;
text-shadow: 2px 3px 0 color-mix(in srgb, var(--ink) 66%, #000);
background:
linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.03) 42%, transparent 42.1%),
linear-gradient(180deg, color-mix(in srgb, var(--cap) 72%, #fff) 0%, var(--cap) 46%, color-mix(in srgb, var(--cap) 90%, #000) 50%, color-mix(in srgb, var(--base) 70%, #000) 100%);
box-shadow:
0 0 0 1.4px color-mix(in srgb, var(--base) 45%, #000),
0 var(--lip) 0 0 color-mix(in srgb, var(--base) 48%, #000),
0 var(--lip) 0 1.4px color-mix(in srgb, var(--base) 30%, #000),
0 calc(var(--lip) + 8px) 26px color-mix(in srgb, var(--cap) 50%, transparent);
transition: transform .06s, box-shadow .06s, filter .15s;
white-space: nowrap; text-decoration: none;
}
.btn::after {
content: ""; position: absolute; left: calc(var(--rad) * .8); right: calc(var(--rad) * .8); top: 2px; height: 2.4px; border-radius: 2px;
background: color-mix(in srgb, var(--cap) 35%, #fff); opacity: .95; pointer-events: none;
}
.btn:hover, .btn-primary:hover, .btn-danger:hover, .btn-warn:hover, .dash-btn-access:hover {
filter: brightness(1.08) saturate(1.08); opacity: 1; border: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.03) 42%, transparent 42.1%),
linear-gradient(180deg, color-mix(in srgb, var(--cap) 72%, #fff) 0%, var(--cap) 46%, color-mix(in srgb, var(--cap) 90%, #000) 50%, color-mix(in srgb, var(--base) 70%, #000) 100%);
}
.btn:active, .btn-act:active:not(:disabled) {
transform: translateY(var(--lip));
background: linear-gradient(180deg, color-mix(in srgb, var(--cap) 88%, #000) 0%, color-mix(in srgb, var(--cap) 80%, #000) 50%, color-mix(in srgb, var(--base) 66%, #000) 100%);
box-shadow: 0 0 0 1.4px color-mix(in srgb, var(--base) 45%, #000), 0 2px 10px color-mix(in srgb, var(--cap) 35%, transparent);
}
.btn:active::after { background: var(--cap); }
.btn-sm {
--lip: 5px; --rad: 12px; height: 34px; padding: 0 15px; font-size: 14px; letter-spacing: 1.4px;
-webkit-text-stroke: 2.6px color-mix(in srgb, var(--ink) 66%, #000); text-shadow: 1.5px 2px 0 color-mix(in srgb, var(--ink) 66%, #000);
}
/* lift tables a touch so a row's key does not sit on the rule below it */
.tbl td .btn-sm { margin-bottom: 4px; }
.tbl td .btn-sm + .btn-sm { margin-left: 8px; }
/* palettes (appliance key tables) */
.btn-primary, .dc-btn-upload { --cap: #22e0d8; --base: #046a68; --ink: #00201f; } /* NP_SAVE_KEY */
.btn-go, .dash-btn-access { --cap: #8dff32; --base: #2c7a05; --ink: #06180a; } /* NP_ADMIT_KEY */
.btn-amber, .btn-warn, .dc-btn-lock, .btn-provision { --cap: #ffab1f; --base: #c46a05; --ink: #3d2400; } /* TILE_SCAN */
.btn-violet, .dash-btn-arrivals { --cap: #9d5cff; --base: #4f1bb5; --ink: #1c0740; } /* AUTH_KEY */
.btn-blue, .btn-test { --cap: #3f7bff; --base: #16309e; --ink: #050f38; } /* BACKKEY */
.btn-pink { --cap: #ff36c6; --base: #78065c; --ink: #1f0018; } /* NP_DATE_KEY */
.btn-danger, .btn-del { --cap: #ff4d5e; --base: #8a0f1f; --ink: #2a0006; }
.btn-time { --cap: #22e0d8; --base: #046a68; --ink: #00201f; }
.btn-editc { --cap: #9fb6d4; --base: #2b3d55; --ink: #070e18; } /* NP_CANCEL_KEY */
.dc-btn-lock, .dc-btn-upload { background: unset !important; border: 0 !important; color: var(--face) !important; }
.dc-btn-lock, .dc-btn-upload {
background:
linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.03) 42%, transparent 42.1%),
linear-gradient(180deg, color-mix(in srgb, var(--cap) 72%, #fff) 0%, var(--cap) 46%, color-mix(in srgb, var(--cap) 90%, #000) 50%, color-mix(in srgb, var(--base) 70%, #000) 100%) !important;
}
.btn-act { border-radius: var(--rad); }
.btn-act:hover:not(:disabled) { transform: none; }
.btn-act .bico { -webkit-text-stroke: 0; }
.btn:disabled, .btn[disabled] { filter: grayscale(.85) brightness(.75); opacity: .55; }
/* the 3D chevron ball (ArrowChip3D) - opt in with */
.btn .chip {
position: relative; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; margin-right: -8px; -webkit-text-stroke: 0; text-shadow: none;
background: radial-gradient(circle at 30% 27%, color-mix(in srgb, var(--ink) 55%, #fff) 0%, color-mix(in srgb, var(--ink) 80%, #fff) 30%, var(--ink) 62%, #000 100%);
box-shadow: 0 3px 3px rgba(0,0,0,.45), 0 0 10px color-mix(in srgb, var(--ink) 60%, transparent), inset -3px -4px 6px color-mix(in srgb, var(--cap) 45%, transparent);
}
.btn .chip::before { content: ""; position: absolute; left: 7px; top: 7px; width: 7px; height: 7px; border-right: 3px solid color-mix(in srgb, var(--cap) 75%, #fff); border-top: 3px solid color-mix(in srgb, var(--cap) 75%, #fff); transform: rotate(45deg); border-radius: 1px; }
.btn .chip::after { content: ""; position: absolute; left: 5px; top: 3px; width: 7px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.7); filter: blur(.6px); }
.btn-sm .chip { width: 20px; height: 20px; margin-right: -6px; }
.btn-sm .chip::before { left: 5px; top: 6px; width: 6px; height: 6px; border-width: 2.6px; }
/* small round keys */
.icon-btn { border-radius: 10px; background: linear-gradient(180deg, #232a3d, #141a29 42%, #0d1220 43%, #0a0f1b); border: 1px solid rgba(196,220,255,.2); color: var(--cyan); box-shadow: 0 3px 0 #04060c; }
.icon-btn:hover { background: linear-gradient(180deg, #2a3248, #182033 42%, #0f1526 43%, #0b111e); border-color: #5fe4ff; color: #fff; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #04060c; }
.aplay-btn { --cap: #22e0d8; --base: #046a68;
background: radial-gradient(circle at 32% 28%, #c9fffb, #22e0d8 50%, #046a68); color: #00201f; box-shadow: 0 3px 0 #023837, 0 6px 12px rgba(34,224,216,.4); }
.aplay-fill { background: linear-gradient(90deg, #22e0d8, #7fe7ff); }
/* -- Tabs: lit keys ----------------------------------------------------------- */
.tabs, .tech-tabs { border-bottom-color: var(--rim); gap: 8px; }
.tab, .tech-tab { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); border-radius: 10px 10px 0 0; }
.tab:hover, .tech-tab:hover { color: #fff; }
.tab.active, .tech-tab.active { color: #c9f7ff; border-bottom: 3px solid #5fe4ff; text-shadow: 0 0 10px rgba(95,228,255,.7); background: linear-gradient(180deg, transparent, rgba(95,228,255,.1)); }
.tab-count { background: rgba(5,8,16,.6); color: var(--muted); font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.tab.active .tab-count { background: #5fe4ff; color: #06202a; }
.tech-subtabs { background: rgba(5,8,16,.55); border: 1px solid var(--rim); border-radius: 12px; }
.tech-subtab { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 9px; }
.tech-subtab.active { background: linear-gradient(180deg, color-mix(in srgb, #5fe4ff 26%, #141a29), color-mix(in srgb, #5fe4ff 12%, #0d1220)); color: #c9f7ff; box-shadow: 0 0 0 1px #5fe4ff, 0 0 12px rgba(95,228,255,.35); }
/* -- Flash, modal, toast, loader -------------------------------------------- */
.flash { border-radius: 12px; }
.flash-success { background: rgba(141,255,79,.10); border-color: rgba(141,255,79,.45); color: #b8ff8f; }
.flash-error { background: rgba(255,77,94,.10); border-color: rgba(255,77,94,.5); color: #ff8a95; }
.modal-overlay { background: rgba(11,5,32,.72); backdrop-filter: blur(3px); }
.modal {
background: linear-gradient(180deg, #16203a, #0a1120 48%, #050810); border: 1px solid var(--rim); border-radius: 20px;
box-shadow: inset 0 1px 0 rgba(127,211,255,.3), 0 0 0 3px rgba(5,8,16,.8), 0 24px 70px rgba(0,0,0,.7), 0 0 40px rgba(157,92,255,.18);
}
.modal-head { font-size: 22px; text-transform: uppercase; }
.modal-x { color: var(--cyan); }
.toast { background: linear-gradient(180deg, #16203a, #050810); border: 1px solid var(--rim); border-left: 4px solid #ff4d5e; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 18px rgba(255,77,94,.25); }
.toast-title { font-weight: 700; letter-spacing: 1px; color: var(--face); }
.route-loader { background: rgba(11,5,32,.6); }
.route-loader .rl-ring { border-color: rgba(127,211,255,.15); border-top-color: #5fe4ff; border-right-color: #9d5cff; box-shadow: 0 0 18px rgba(95,228,255,.4); }
.route-loader .rl-text { color: var(--cyan); letter-spacing: 4px; }
/* -- Dashboard ---------------------------------------------------------------- */
.dash-actions { gap: 14px; margin-bottom: 20px; }
.dash-tile {
border: 1px solid var(--accent); border-radius: 17px; padding: 14px 8px 12px;
background: linear-gradient(180deg, var(--accent) 0%, #0c1b30 92%);
box-shadow: 0 12px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.dash-ic { color: #fff; }
.dash-num { font-size: 40px; color: var(--face); -webkit-text-stroke: 4px color-mix(in srgb, var(--accent) 35%, #000); paint-order: stroke fill; text-shadow: 3px 4px 0 color-mix(in srgb, var(--accent) 35%, #000); }
.dash-lbl { font-family: 'Rajdhani', sans-serif; font-size: 12px; letter-spacing: 2.5px; color: #fff; }
.dash-sub { color: #e2eefb; opacity: .8; }
.dash-svc { border-color: var(--rim); }
.dash-svc-head { font-family: 'Rajdhani', sans-serif; letter-spacing: 2.5px; }
.dash-svc-name { font-size: 19px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--face); }
.dash-svc-status { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.dash-svc-status.on { color: #8dff4f; }
.dash-svc-status.on .dot { width: 10px; height: 10px; background: radial-gradient(circle at 35% 30%, #e6ffd0, #8dff4f 60%, #3d8b1e); box-shadow: 0 0 10px #8dff4f; }
.dash-svc-phone { font-size: 32px; color: var(--face); letter-spacing: 1px; }
.dash-exp-red, .dash-exp-amber { border-width: 1px; }
.dash-exp-red { border-color: rgba(255,77,94,.55); }
.dash-exp-amber { border-color: rgba(255,199,58,.5); }
.dash-exp-head { font-family: 'Rajdhani', sans-serif; letter-spacing: 2.5px; font-size: 13px; }
.dash-exp-red .dash-exp-head, .exp-card-red .exp-type, .exp-card-red .exp-date { color: #ff8a95; }
.dash-exp-amber .dash-exp-head, .exp-card-amber .exp-date { color: #ffc73a; }
.exp-card-amber .exp-type { color: #e46bff; }
.exp-card { border-radius: 14px; background: rgba(5,8,16,.55); padding: 12px; }
.exp-card-red { border-color: rgba(255,77,94,.5); }
.exp-card-amber { border-color: rgba(228,107,255,.45); }
.exp-type, .exp-date { font-family: 'Rajdhani', sans-serif; letter-spacing: 1.8px; }
.exp-name { font-size: 15px; font-weight: 600; }
/* the View link is an arcade key too */
.exp-view {
position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 11px; margin-bottom: 5px;
font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--face);
-webkit-text-stroke: 2.4px color-mix(in srgb, var(--ink) 66%, #000); paint-order: stroke fill; text-shadow: 1.5px 2px 0 color-mix(in srgb, var(--ink) 66%, #000);
box-shadow: 0 0 0 1.4px color-mix(in srgb, var(--base) 45%, #000), 0 5px 0 0 color-mix(in srgb, var(--base) 48%, #000), 0 12px 20px color-mix(in srgb, var(--cap) 45%, transparent);
}
.exp-card-red .exp-view, .exp-card-amber .exp-view {
background:
linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.03) 42%, transparent 42.1%),
linear-gradient(180deg, color-mix(in srgb, var(--cap) 72%, #fff) 0%, var(--cap) 46%, color-mix(in srgb, var(--cap) 90%, #000) 50%, color-mix(in srgb, var(--base) 70%, #000) 100%);
}
.exp-card-red .exp-view { --cap: #ff4d5e; --base: #8a0f1f; --ink: #2a0006; }
.exp-card-amber .exp-view { --cap: #9d5cff; --base: #4f1bb5; --ink: #1c0740; }
.exp-view:hover { opacity: 1; filter: brightness(1.08); }
.exp-view:active { transform: translateY(5px); box-shadow: 0 0 0 1.4px color-mix(in srgb, var(--base) 45%, #000); }
/* -- misc -------------------------------------------------------------------- */
.back-link { color: var(--cyan); font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.detail-icon { background: rgba(5,8,16,.6); border-color: var(--rim); color: var(--cyan); }
.detail-avatar { background: radial-gradient(circle at 30% 27%, #e2ccff, #9d5cff 45%, #4f1bb5 80%, #1c0740); color: var(--face); }
.dc-editor-title, .sched-day.sched-holiday .sched-dayname, .sort-ind { color: var(--cyan); }
.ba-cap-cell { background: rgba(5,8,16,.55); border-color: var(--rim); border-radius: 14px; }
.ba-cap-num { color: var(--face); }
@media (max-width: 860px) {
.sidebar { width: 220px; }
.shell::before { left: 218px; }
}
/* manager.css colour-codes the controller row keys on hover with a
(0,3,0) selector; restate the cap so hover only brightens. */
.btn-act:hover:not(:disabled) {
color: var(--face); border: 0; box-shadow:
0 0 0 1.4px color-mix(in srgb, var(--base) 45%, #000),
0 var(--lip) 0 0 color-mix(in srgb, var(--base) 48%, #000),
0 var(--lip) 0 1.4px color-mix(in srgb, var(--base) 30%, #000),
0 calc(var(--lip) + 8px) 26px color-mix(in srgb, var(--cap) 50%, transparent);
background:
linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.03) 42%, transparent 42.1%),
linear-gradient(180deg, color-mix(in srgb, var(--cap) 72%, #fff) 0%, var(--cap) 46%, color-mix(in srgb, var(--cap) 90%, #000) 50%, color-mix(in srgb, var(--base) 70%, #000) 100%);
}
/* -- Technician Area: arcade keys for the top tabs, themed bare controls (2026-10-09) -- */
.tech-tabs { border-bottom: 0; gap: 12px; margin-bottom: 22px; padding-bottom: 8px; }
.tech-tab {
--cap: #9fb6d4; --base: #2b3d55; --ink: #070e18;
position: relative; display: inline-flex; align-items: center; height: 42px; padding: 0 20px;
border: 0 !important; border-radius: 13px; margin-bottom: 0;
font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1.4px; text-transform: uppercase;
color: #fff; -webkit-text-stroke: 2.8px color-mix(in srgb, var(--ink) 66%, #000); paint-order: stroke fill;
text-shadow: 1.5px 2px 0 color-mix(in srgb, var(--ink) 66%, #000);
background:
linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.03) 42%, transparent 42.1%),
linear-gradient(180deg, color-mix(in srgb, var(--cap) 72%, #fff) 0%, var(--cap) 46%, color-mix(in srgb, var(--cap) 90%, #000) 50%, color-mix(in srgb, var(--base) 70%, #000) 100%);
box-shadow: 0 0 0 1.4px color-mix(in srgb, var(--base) 45%, #000), 0 5px 0 0 color-mix(in srgb, var(--base) 48%, #000);
filter: saturate(.8) brightness(.78); transition: filter .15s, transform .06s;
}
.tech-tab:hover { filter: none; color: #fff; }
.tech-tab.active {
filter: brightness(1.12) saturate(1.1); transform: translateY(2px); outline: 2px solid rgba(255,255,255,.85); outline-offset: 3px; text-shadow: 1.5px 2px 0 color-mix(in srgb, var(--ink) 66%, #000);
box-shadow: 0 0 0 1.4px color-mix(in srgb, var(--base) 45%, #000), 0 3px 0 0 color-mix(in srgb, var(--base) 48%, #000),
0 8px 22px color-mix(in srgb, var(--cap) 55%, transparent);
background:
linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.03) 42%, transparent 42.1%),
linear-gradient(180deg, color-mix(in srgb, var(--cap) 72%, #fff) 0%, var(--cap) 46%, color-mix(in srgb, var(--cap) 90%, #000) 50%, color-mix(in srgb, var(--base) 70%, #000) 100%);
}
.tech-tab:nth-child(8n+1) { --cap: #22e0d8; --base: #046a68; --ink: #00201f; }
.tech-tab:nth-child(8n+2) { --cap: #ffab1f; --base: #c46a05; --ink: #3d2400; }
.tech-tab:nth-child(8n+3) { --cap: #8dff32; --base: #2c7a05; --ink: #06180a; }
.tech-tab:nth-child(8n+4) { --cap: #3f7bff; --base: #16309e; --ink: #050f38; }
.tech-tab:nth-child(8n+5) { --cap: #9d5cff; --base: #4f1bb5; --ink: #1c0740; }
.tech-tab:nth-child(8n+6) { --cap: #ff36c6; --base: #78065c; --ink: #1f0018; }
.tech-tab:nth-child(8n+7) { --cap: #ff4d5e; --base: #8a0f1f; --ink: #2a0006; }
.tech-tab:nth-child(8n+8) { --cap: #9fb6d4; --base: #2b3d55; --ink: #070e18; }
/* bare inputs and checkboxes on Technician Area pages */
.main:has(.tech-tabs) input[type=text]:not(.form-field input),
.main:has(.tech-tabs) input[type=number]:not(.form-field input),
.main:has(.tech-tabs) input[type=email]:not(.form-field input),
.main:has(.tech-tabs) input[type=time]:not(.form-field input),
.main:has(.tech-tabs) input[type=date]:not(.form-field input) {
height: 36px; box-sizing: border-box; background: rgba(5,8,16,.6); border: 1px solid var(--rim, #2a3f5f);
border-radius: 9px; padding: 0 11px; color: #fff; font-family: inherit; font-size: 14px; outline: none;
}
.main:has(.tech-tabs) input:focus { border-color: #5fe4ff; box-shadow: 0 0 0 3px rgba(95,228,255,.18); }
.main:has(.tech-tabs) input[type=checkbox] { accent-color: #22e0d8; width: 18px; height: 18px; }
/* 2026-10-14: ADMIT (Attendant Desk) and ANSWER (kiosk / intercom call popups)
set their own flat green and dark text in the page