/* =====================================================
   CPOINT DMX Desk V5 Modular
   style.css (V5.4 Alpha baseline + tooltip support)
===================================================== */


/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {

  --desk-bg: #0e0e11;
  --panel-bg: #18181c;
  --text-color: #e6e6e6;
  --accent-color: #4da3ff;

}


/* =====================================================
   THEMES
===================================================== */

[data-theme="light"] {

  --desk-bg: #e9e9ec;
  --panel-bg: #ffffff;
  --text-color: #202020;

}

[data-theme="midnight"] {

  --desk-bg: #070b18;
  --panel-bg: #10182a;

}

[data-theme="graphite"] {

  --desk-bg: #1a1a1a;
  --panel-bg: #2a2a2a;

}

[data-theme="blue"] {

  --desk-bg: #081a2c;
  --panel-bg: #0f2b45;

}

[data-theme="amber"] {

  --desk-bg: #2b1b00;
  --panel-bg: #3c2600;

}


/* =====================================================
   GLOBAL DESK
===================================================== */

html,
body {

  margin: 0;
  padding: 0;

  background: var(--desk-bg);
  color: var(--text-color);

  font-family: system-ui, sans-serif;

}


/* =====================================================
   PANEL HOST LAYOUT
===================================================== */

#panel-host {

  display: flex;

  gap: 20px;

  padding: 20px;

  align-items: flex-start;

}


/* =====================================================
   PANEL SLOT
===================================================== */

.panel-slot {

  background: var(--panel-bg);

  border-radius: 14px;

  padding: 18px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 6px 18px rgba(0,0,0,0.35);

}


/* =====================================================
   PANEL HEADER (BANK ROW)
===================================================== */

.panel-header {

  margin-bottom: 14px;

}


/* =====================================================
   BANK LABEL
===================================================== */

.page-label {

  white-space: nowrap;

  font-weight: 500;

}


/* =====================================================
   FADER CONTAINER
===================================================== */

.fader-container {

  display: flex;

  gap: 16px;

}


/* =====================================================
   CHANNEL STRIP
===================================================== */

.fader-wrapper {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  padding: 12px 8px;

  border-radius: 10px;

  border: 2px solid transparent;

  min-width: 60px;

}


/* =====================================================
   FOCUS BORDER
===================================================== */

.fader-focus {

  border-color: var(--accent-color);

}


/* =====================================================
   CHANNEL NUMBER
===================================================== */

.channel-number {

  font-size: 12px;

  font-weight: 500;

}


/* =====================================================
   STEP BUTTONS
===================================================== */

.step-arrow {

  width: 26px;

  height: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid var(--accent-color);

  color: var(--accent-color);

  background: transparent;

  cursor: pointer;

}

.step-arrow:hover {

  background: var(--accent-color);

  color: #000;

}


/* =====================================================
   VERTICAL FADER
===================================================== */

input[type="range"].fader {

  appearance: none;

  -webkit-appearance: none;

  writing-mode: vertical-lr;

  direction: rtl;

  width: 28px;

  height: 170px;

  background: transparent;

}


/* =====================================================
   VALUE DISPLAY
===================================================== */

.fader-value {

  font-size: 12px;

}


/* =====================================================
   PERCENT DISPLAY
===================================================== */

.fader-percent {

  font-size: 11px;

  opacity: 0.75;

}


/* =====================================================
   CHANNEL NAME
===================================================== */

.channel-name {

  font-size: 11px;

  max-width: 72px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  text-align: center;

  cursor: text;

}


/* =====================================================
   CHANNEL NAME TOOLTIP (HOVER SUPPORT ONLY ADDITION)
===================================================== */

.channel-tooltip {

  position: absolute;

  top: 100%;

  margin-top: 4px;

  padding: 2px 6px;

  font-size: 11px;

  background: var(--panel-bg);

  border: 1px solid var(--accent-color);

  border-radius: 4px;

  white-space: nowrap;

  pointer-events: none;

  z-index: 10;

}