/* ==========================================================================
   FIRE ALARM PANEL FASCIA STYLES
   Pixel-accurate rendition of the industrial addressable fire alarm panel
   ========================================================================== */

:root {
  --panel-bg: #d7d8d6;
  --panel-bg-dark: #c8c9c6;
  --panel-bevel-light: #f5f6f4;
  --panel-bevel-dark: #a2a4a0;
  --panel-line: #6b6f71;
  
  --btn-bg: #eceee8;
  --btn-border: #8c8f8b;
  --btn-active: #d2d4cf;
  --btn-text: #1d2124;

  --led-off-red: #3a1111;
  --led-on-red: #ff2222;
  --led-glow-red: rgba(255, 34, 34, 0.85);

  --led-off-yellow: #3a320d;
  --led-on-yellow: #ffc400;
  --led-glow-yellow: rgba(255, 196, 0, 0.85);

  --led-off-amber: #3d240d;
  --led-on-amber: #ff9100;
  --led-glow-amber: rgba(255, 145, 0, 0.85);

  --led-off-green: #0d3215;
  --led-on-green: #10e038;
  --led-glow-green: rgba(16, 224, 56, 0.85);

  --lcd-border-bevel: #505456;
  --lcd-bg: #ffffff;
}

/* Outer Panel Cabinet Housing */
.facp-cabinet {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  background: linear-gradient(180deg, #dfdfdc 0%, #d4d5d1 50%, #cacbc7 100%);
  border: 3px solid #75797b;
  border-radius: 6px;
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  padding: 16px 20px 24px 20px;
  box-sizing: border-box;
  user-select: none;
}

/* Distinctive Top Gable Pediment Roofline */
.cabinet-roofline {
  width: 100%;
  height: 28px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.roofline-svg {
  width: 100%;
  height: 24px;
}

/* Bottom Inverted Chevron Bar */
.cabinet-bottom-groove {
  width: 100%;
  height: 18px;
  margin-top: 18px;
  position: relative;
}

/* Main Interior Layout Grid: Left Annunciators | Center LCD & Controls | Right Printer */
.fascia-interior {
  display: grid;
  grid-template-columns: 290px 1fr 200px;
  gap: 18px;
  align-items: start;
}

/* -------------------------------------------------------------
   LEFT: Dual-Column 24-LED Annunciator Matrix
   ------------------------------------------------------------- */
.annunciator-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  row-gap: 5px;
  background: rgba(0, 0, 0, 0.03);
  padding: 8px;
  border: 1px solid #b5b8b4;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}

.annunciator-pill {
  height: 27px;
  background: linear-gradient(180deg, #f5f6f3 0%, #e2e4de 100%);
  border: 1.5px solid #8c908c;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  color: #212529;
  letter-spacing: -0.2px;
  line-height: 1.05;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 #ffffff;
}

.annunciator-pill.align-left-led {
  justify-content: flex-start;
  gap: 5px;
}

.annunciator-pill .label-text {
  flex: 1;
  text-align: center;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.annunciator-pill.align-left-led .label-text {
  text-align: left;
}

/* Photorealistic Circular LED Indicators */
.led-indicator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  border: 1px solid #4a4d4f;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  transition: all 0.15s ease-in-out;
}

/* Specular highlight on unlit lens */
.led-indicator::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 3px;
  height: 3px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
}

/* LED Color Schemes */
.led-indicator.red {
  background: radial-gradient(circle at 35% 35%, #7e2424 0%, var(--led-off-red) 70%, #150505 100%);
}
.led-indicator.red.active {
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, #ff6868 20%, var(--led-on-red) 65%, #c50c0c 100%);
  box-shadow: 
    0 0 6px 2px var(--led-glow-red),
    0 0 12px 4px rgba(255, 34, 34, 0.45);
  animation: pulse-fire 0.9s infinite alternate;
}

.led-indicator.amber {
  background: radial-gradient(circle at 35% 35%, #7a4613 0%, var(--led-off-amber) 70%, #170d04 100%);
}
.led-indicator.amber.active {
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, #ffbd59 20%, var(--led-on-amber) 65%, #c26900 100%);
  box-shadow: 
    0 0 6px 2px var(--led-glow-amber),
    0 0 10px 3px rgba(255, 145, 0, 0.45);
}

.led-indicator.yellow {
  background: radial-gradient(circle at 35% 35%, #695b12 0%, var(--led-off-yellow) 70%, #141203 100%);
}
.led-indicator.yellow.active {
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, #ffe677 20%, var(--led-on-yellow) 65%, #b58b00 100%);
  box-shadow: 
    0 0 6px 2px var(--led-glow-yellow),
    0 0 10px 3px rgba(255, 196, 0, 0.4);
  animation: pulse-yellow 1.4s infinite alternate;
}

.led-indicator.green {
  background: radial-gradient(circle at 35% 35%, #185c25 0%, var(--led-off-green) 70%, #031306 100%);
}
.led-indicator.green.active {
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, #76fca5 25%, var(--led-on-green) 65%, #088c21 100%);
  box-shadow: 
    0 0 6px 2px var(--led-glow-green),
    0 0 10px 3px rgba(16, 224, 56, 0.45);
}

@keyframes pulse-fire {
  0% { transform: scale(1); filter: brightness(0.95); }
  100% { transform: scale(1.08); filter: brightness(1.25); }
}

@keyframes pulse-yellow {
  0% { filter: brightness(0.9); }
  100% { filter: brightness(1.15); }
}

/* -------------------------------------------------------------
   CENTER: Main LCD & Operating Controls
   ------------------------------------------------------------- */
.fascia-center {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* LCD Display Housing with authentic beveled plastic bezel */
.lcd-bezel {
  background: linear-gradient(135deg, #303335 0%, #1c1e1f 100%);
  padding: 8px;
  border-radius: 6px;
  border: 2px solid #5a5f62;
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,0.8),
    0 2px 5px rgba(255,255,255,0.4);
}

.lcd-screen {
  background: #ffffff;
  min-height: 220px;
  border: 2px solid #111;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.25);
  position: relative;
}

/* LCD Header Counters Bar */
.lcd-header {
  background: #2b2b2b;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 3px 2px;
  border-bottom: 1.5px solid #000;
}

.counter-chip {
  background: #3e4144;
  color: #d1d5db;
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  padding: 3px 1px;
  border-radius: 2px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.counter-chip.alert-red {
  background: #d32f2f;
  color: #ffffff;
  animation: pulse-badge 0.8s infinite alternate;
}

.counter-chip.alert-amber {
  background: #ef6c00;
  color: #ffffff;
}

.counter-chip.alert-yellow {
  background: #fbc02d;
  color: #111;
}

@keyframes pulse-badge {
  0% { opacity: 0.85; }
  100% { opacity: 1; }
}

/* LCD Fire View - Matches image exactly */
.lcd-fire-view {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fire-condition-bar {
  background: #d32f2f;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 2.5px 4px;
  letter-spacing: 0.1px;
  border-bottom: 1px solid #9a0007;
}

.fire-event-row {
  background: #1565c0;
  color: #ffffff;
  padding: 4px 8px;
  font-size: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid #0d47a1;
}

.fire-event-row.selected {
  background: #1976d2;
}

.fire-event-row .event-id {
  font-weight: 800;
  color: #ffee58;
}

.fire-event-row .event-time {
  font-size: 9px;
  color: #e3f2fd;
}

.fire-event-row .event-zone {
  font-weight: 700;
  background: rgba(0,0,0,0.25);
  padding: 1px 4px;
  border-radius: 2px;
}

.fire-event-row .event-title {
  font-weight: 700;
}

.fire-event-row .event-loc {
  width: 100%;
  font-size: 9.5px;
  color: #ffffff;
  font-weight: 600;
  margin-top: 1px;
}

.lcd-viewport-details {
  flex: 1;
  background: #f8fafc;
  padding: 6px 10px;
  font-size: 9.5px;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #cbd5e1;
  padding-bottom: 1px;
}

.detail-row span:first-child {
  font-weight: 700;
  color: #475569;
}

.fire-last-zone-bar {
  background: #d32f2f;
  color: #ffffff;
  padding: 3px 6px;
  font-size: 9px;
  border-top: 1px solid #9a0007;
}

.fire-last-zone-bar .badge-title {
  font-weight: 800;
  color: #ffee58;
  font-size: 8.5px;
}

.fire-last-zone-bar .last-text {
  font-weight: 600;
}

.fire-last-zone-bar .last-loc {
  font-size: 8.5px;
  opacity: 0.95;
}

/* LCD Fault View */
.lcd-fault-view {
  flex: 1;
  background: #fffde7;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.fault-condition-bar {
  background: #f57f17;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  padding: 3px 0;
}

.fault-event-list {
  flex: 1;
  overflow-y: auto;
  max-height: 120px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fault-item {
  background: #ffffff;
  border: 1px solid #ffd54f;
  padding: 3px 6px;
  font-size: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fault-badge {
  font-weight: 800;
  color: #d84315;
}

.fault-title {
  font-weight: 600;
  color: #212121;
}

.fault-loc {
  font-size: 8.5px;
  color: #616161;
}

.fault-action-note {
  font-size: 8.5px;
  color: #b71c1c;
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
}

/* -------------------------------------------------------------
   LCD SCREENSAVER VIEW (MULTRON STANDBY LOGO)
   ------------------------------------------------------------- */
.lcd-screensaver {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 48%, #ffffff 0%, #f4f6fa 55%, #e1e6ef 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10;
  animation: screensaver-fade-in 0.45s ease-out;
}

@keyframes screensaver-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.screensaver-header-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #cbd5e1;
  padding-bottom: 4px;
}

.screensaver-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 7px #16a34a;
  display: inline-block;
  margin-right: 5px;
}

.screensaver-sys-title {
  font-size: 9px;
  font-weight: 800;
  color: #1e3a8a;
  letter-spacing: 0.5px;
}

.screensaver-clock {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  color: #0369a1;
}

.screensaver-center-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
}

.screensaver-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  animation: screensaver-breathe 4s infinite ease-in-out;
}

.multron-screensaver-img {
  max-width: 250px;
  width: 75%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 26, 180, 0.28));
}

@keyframes screensaver-breathe {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.025);
  }
}

.screensaver-badge {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.25);
}

.screensaver-subtext {
  font-size: 8px;
  color: #64748b;
  font-weight: 600;
}

.screensaver-footer-bar {
  width: 100%;
  text-align: center;
  border-top: 1px solid #e2e8f0;
  padding-top: 3px;
}

.pulse-hint {
  font-size: 8px;
  color: #64748b;
  font-weight: 600;
  animation: pulse-hint-text 2s infinite ease-in-out;
}

@keyframes pulse-hint-text {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* LCD Home / Standby View */
.lcd-home-view {
  flex: 1;
  background: linear-gradient(180deg, #f0fdf4 0%, #e6f4ea 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 12px;
}

.system-normal-banner {
  text-align: center;
  border-bottom: 2px solid #2e7d32;
  padding-bottom: 6px;
}

.system-normal-banner .shield-icon {
  font-size: 18px;
}

.system-normal-banner .normal-title {
  font-size: 11px;
  font-weight: 800;
  color: #1b5e20;
  letter-spacing: 0.3px;
}

.system-normal-banner .normal-subtitle {
  font-size: 8.5px;
  color: #388e3c;
  margin-top: 1px;
}

.system-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 6px 0;
}

.summary-cell {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #a5d6a7;
  padding: 4px 6px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
}

.summary-cell .lbl {
  font-weight: 700;
  color: #2e7d32;
}

.summary-cell .val.green {
  font-weight: 800;
  color: #1b5e20;
}

.summary-cell .val.red {
  font-weight: 800;
  color: #c62828;
}

.standby-notice {
  font-size: 8.5px;
  text-align: center;
  color: #4b5563;
  font-style: italic;
}

/* Menu & Submenus */
.lcd-menu-view {
  flex: 1;
  background: #1e293b;
  color: #f1f5f9;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.menu-header {
  font-size: 9.5px;
  font-weight: 800;
  color: #38bdf8;
  border-bottom: 1px solid #334155;
  padding-bottom: 3px;
  margin-bottom: 4px;
}

.menu-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5px;
}

.menu-item {
  padding: 3px 6px;
  font-size: 9px;
  border-radius: 2px;
  cursor: pointer;
}

.menu-item.highlighted {
  background: #0284c7;
  color: #ffffff;
  font-weight: 700;
}

.menu-footer {
  font-size: 8px;
  color: #94a3b8;
  border-top: 1px solid #334155;
  padding-top: 3px;
  text-align: center;
}

/* Device Table in LCD */
.lcd-devices-view {
  flex: 1;
  background: #0f172a;
  color: #f8fafc;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
}

.device-table-container {
  flex: 1;
  overflow-y: auto;
  max-height: 120px;
}

.lcd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8px;
}

.lcd-table th {
  background: #1e293b;
  color: #38bdf8;
  text-align: left;
  padding: 2px 3px;
  border-bottom: 1px solid #475569;
}

.lcd-table td {
  padding: 2px 3px;
  border-bottom: 1px solid #1e293b;
}

.selected-row {
  background: #0369a1 !important;
}

.st-normal { color: #4ade80; }
.st-alarm { color: #f87171; font-weight: bold; }
.st-prealarm { color: #fbbf24; }
.st-fault { color: #facc15; }
.st-disabled { color: #94a3b8; }

/* Event Log view */
.lcd-logs-view {
  flex: 1;
  background: #090d16;
  color: #22c55e;
  font-family: "Courier New", Courier, monospace;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
}

.log-entries {
  flex: 1;
  overflow-y: auto;
  max-height: 120px;
  font-size: 8px;
}

.log-line {
  margin-bottom: 2px;
}

.log-t {
  color: #93c5fd;
}

/* Lamp Test screen */
.lcd-lamp-test {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 8px;
}

.test-bar {
  padding: 6px;
  font-weight: 800;
  font-size: 10px;
  text-align: center;
  color: #ffffff;
}

.test-bar.red { background: #dc2626; }
.test-bar.yellow { background: #ca8a04; }
.test-bar.green { background: #16a34a; }
.test-bar.blue { background: #2563eb; }

/* Softkeys Row directly integrated in LCD */
.lcd-softkeys {
  background: #d8dad2;
  border-top: 1.5px solid #000;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 3px 2px;
}

.softkey-pill {
  background: linear-gradient(180deg, #f2f4ec 0%, #dcdee4 100%);
  border: 1px solid #757978;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  padding: 3px 0;
  cursor: pointer;
  color: #1a1e21;
  box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  transition: all 0.1s;
}

.softkey-pill:active {
  transform: translateY(1px);
  background: #c3c6cb;
}

.softkey-pill.muted {
  background: #fef08a;
  border-color: #ca8a04;
}

.softkey-pill.silenced {
  background: #fed7aa;
  border-color: #ea580c;
}

/* System Status Bar at bottom of LCD */
.lcd-statusbar {
  background: #111417;
  color: #e2e8f0;
  font-size: 8px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  padding: 2px 6px;
  border-top: 1px solid #334155;
}

.lcd-statusbar .time {
  color: #38bdf8;
  font-family: monospace;
}

/* -------------------------------------------------------------
   DIRECT CATEGORY PILL BUTTONS (Directly Under LCD)
   ------------------------------------------------------------- */
.category-filter-bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}

.category-pill-btn {
  flex: 1;
  height: 25px;
  background: linear-gradient(180deg, #fafafa 0%, #e2e4df 100%);
  border: 1.5px solid #7c807c;
  border-radius: 13px;
  font-size: 9px;
  font-weight: 700;
  color: #212529;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 
    0 2px 3px rgba(0,0,0,0.2),
    inset 0 1px 0 #ffffff;
  transition: all 0.1s ease;
}

.category-pill-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eaece7 100%);
}

.category-pill-btn:active {
  transform: translateY(1.5px);
  box-shadow: 
    0 1px 1px rgba(0,0,0,0.2),
    inset 0 1px 2px rgba(0,0,0,0.2);
}

/* -------------------------------------------------------------
   OPERATING KEYPAD & NAVIGATION AREA
   ------------------------------------------------------------- */
.keypad-operating-deck {
  display: grid;
  grid-template-columns: 80px 80px 140px 110px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

/* Function Key Columns */
.key-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.facp-btn {
  height: 27px;
  background: linear-gradient(180deg, #ffffff 0%, #e1e3de 100%);
  border: 1.5px solid #737775;
  border-radius: 6px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: #1e2225;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 
    0 2px 3px rgba(0,0,0,0.2),
    inset 0 1px 0 #ffffff;
  transition: all 0.08s ease;
}

.facp-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ecefe9 100%);
}

.facp-btn:active {
  transform: translateY(1.5px);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.25);
  background: #d4d7d1;
}

.facp-btn.danger {
  border-color: #b91c1c;
  color: #b91c1c;
}

/* Navigation D-Pad Cluster */
.dpad-cluster {
  position: relative;
  width: 125px;
  height: 125px;
  margin: 0 auto;
}

/* Outer circular ring */
.dpad-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, #e7e9e3 0%, #cfd2cc 100%);
  border: 2px solid #787d7b;
  box-shadow: 
    0 3px 6px rgba(0,0,0,0.25),
    inset 0 1px 2px #ffffff;
}

/* Direction Arrows */
.dpad-arrow {
  position: absolute;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 800;
  color: #333739;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s;
}

.dpad-arrow:hover {
  color: #000;
}

.dpad-arrow:active {
  transform: scale(0.9);
}

.dpad-arrow.up {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 24px;
}

.dpad-arrow.down {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 24px;
}

.dpad-arrow.left {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 32px;
}

.dpad-arrow.right {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 32px;
}

/* Center Tab Button */
.dpad-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #dcdee0 100%);
  border: 1.5px solid #6c7170;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  color: #212529;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dpad-center-btn:active {
  transform: translate(-50%, -50%) scale(0.94);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.25);
}

/* Auxiliary Cancel (X) and OK (✓) keys outside D-pad */
.dpad-corner-btn {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #dcdee0 100%);
  border: 1.5px solid #6c7170;
  box-shadow: 0 2px 3px rgba(0,0,0,0.2);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.dpad-corner-btn.cancel {
  top: -2px;
  right: -10px;
  color: #dc2626;
}

.dpad-corner-btn.confirm {
  bottom: -2px;
  right: -10px;
  color: #16a34a;
}

.dpad-corner-btn:active {
  transform: scale(0.92);
}

/* Numeric Keypad 3x4 Grid */
.numeric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.num-btn {
  height: 26px;
  background: linear-gradient(180deg, #ffffff 0%, #e1e3de 100%);
  border: 1.5px solid #737775;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #1e2225;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1.5px 2px rgba(0,0,0,0.18), inset 0 1px 0 #ffffff;
  transition: all 0.08s ease;
}

.num-btn:hover {
  background: #f7f8f6;
}

.num-btn:active {
  transform: translateY(1px);
  background: #d4d7d1;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

/* -------------------------------------------------------------
   RIGHT: Thermal Printer Module & Keylock
   ------------------------------------------------------------- */
.fascia-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 380px;
}

.printer-module {
  background: linear-gradient(180deg, #e3e5e0 0%, #d2d5ce 100%);
  border: 2px solid #828684;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 
    inset 0 1px 2px #ffffff,
    0 3px 6px rgba(0,0,0,0.15);
  position: relative;
}

.printer-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.printer-led-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  border: 1px solid #15803d;
  box-shadow: 0 0 5px #22c55e;
}

.printer-badge {
  border: 1.5px solid #2d3133;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 800;
  color: #1e2326;
  letter-spacing: 0.5px;
  border-radius: 2px;
}

.printer-slot-opening {
  background: #111417;
  height: 7px;
  border-radius: 3px;
  border: 1px solid #474b4e;
  margin-bottom: 4px;
}

/* Protruding Thermal Paper Tape */
.printer-paper-slip {
  background: #fdfdfc;
  border: 1px solid #b8bcb9;
  border-bottom: 2px dashed #9ca3af;
  border-radius: 2px;
  padding: 6px 8px;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
  font-family: "Courier New", Courier, monospace;
  font-size: 8px;
  color: #111827;
  line-height: 1.25;
}

.printer-feed-line {
  margin-bottom: 2px;
}

.printer-feed-line.header {
  font-weight: bold;
  text-align: center;
  border-bottom: 1px dashed #6b7280;
  padding-bottom: 2px;
}

.printer-feed-line.bold {
  font-weight: bold;
}

.printer-feed-line.time {
  color: #4b5563;
  font-size: 7.5px;
}

.printer-door-outline {
  margin-top: 8px;
  height: 48px;
  border: 1.5px dashed #878c89;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  color: #555a58;
  font-weight: 600;
  background: rgba(0,0,0,0.02);
}

/* Cabinet Key Lock Barrel */
.cabinet-keylock {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #c4c8c7 50%, #7d8281 100%);
  border: 2px solid #5a5e5d;
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  margin-left: auto;
  margin-right: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.keylock-slot {
  width: 14px;
  height: 3px;
  background: #232729;
  border-radius: 1px;
}