/* Pitboard Studio editor refinements: collapsible toolbox, instrument faces and selection controls. */

.toolbox-group {
  --toolbox-group-colour: #aeb9c4;
  margin: 0 11px 1px;
  padding: 0;
  border: 1px solid #343b44;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(180deg, #2b2d30, #242629);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.toolbox-group-toggle {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--toolbox-group-colour);
  text-align: left;
  cursor: pointer;
}

.toolbox-group-toggle:hover {
  border: 0 !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--toolbox-group-colour), transparent 90%), transparent 72%) !important;
}

.toolbox-group-name {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.toolbox-group-chevron {
  color: var(--toolbox-group-colour);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  transition: transform .16s ease;
}

.toolbox-group.open .toolbox-group-chevron {
  transform: rotate(90deg);
}

.toolbox-group-body {
  padding: 7px 7px 2px;
  border-top: 1px solid color-mix(in srgb, var(--toolbox-group-colour), transparent 78%);
  background: rgba(8, 11, 15, .56);
}

.toolbox-group-body[hidden] {
  display: none;
}

.toolbox-group .toolbox-button {
  margin-bottom: 6px;
  border-color: #343e49;
}

.toolbox-group .toolbox-button:hover {
  border-color: var(--toolbox-group-colour) !important;
  box-shadow: inset 3px 0 var(--toolbox-group-colour);
}

.toolbox-group .toolbox-icon {
  color: var(--toolbox-group-colour);
  border-color: color-mix(in srgb, var(--toolbox-group-colour), #28313a 55%);
}

.toolbox-groups {
  padding: 7px 0 14px;
}

.dashboard-widget.selected {
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  z-index: 50;
}

.dashboard-widget > .resize-handle {
  display: none !important;
}

.pbs-selection-frame {
  position: absolute;
  inset: var(--pbs-selection-offset, -3px);
  z-index: 100;
  border: var(--pbs-selection-border, 2px) solid #37a9ff;
  box-shadow:
    0 0 0 var(--pbs-selection-keyline, 1px) rgba(255,255,255,.75),
    0 0 var(--pbs-selection-halo, 12px) rgba(55,169,255,.55);
  pointer-events: none;
}

.pbs-selection-name,
.pbs-selection-size {
  position: absolute;
  top: var(--pbs-label-top, -25px);
  min-height: var(--pbs-label-height, 19px);
  display: flex;
  align-items: center;
  padding: 0 var(--pbs-label-pad, 7px);
  border: var(--pbs-label-border, 1px) solid #37a9ff;
  border-radius: var(--pbs-label-radius, 3px);
  background: #0a2234;
  color: #eaf7ff;
  font-size: var(--pbs-label-font, 9px);
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 var(--pbs-label-shadow-y, 4px) var(--pbs-label-shadow-blur, 12px) rgba(0,0,0,.45);
}

.pbs-selection-name { left: 0; }
.pbs-selection-size { right: 0; color: #9fd6ff; }

.pbs-selection-handle {
  position: absolute;
  width: var(--pbs-handle-size, 12px);
  height: var(--pbs-handle-size, 12px);
  border: var(--pbs-handle-border, 2px) solid #168fe9;
  border-radius: var(--pbs-handle-radius, 2px);
  background: #f7fbff;
  box-shadow: 0 0 var(--pbs-handle-shadow, 7px) rgba(0,0,0,.72);
  pointer-events: auto;
}

.pbs-selection-handle[data-direction="nw"] { left: var(--pbs-handle-offset, -6px); top: var(--pbs-handle-offset, -6px); cursor: nwse-resize; }
.pbs-selection-handle[data-direction="n"] { left: 50%; top: var(--pbs-handle-offset, -6px); transform: translateX(-50%); cursor: ns-resize; }
.pbs-selection-handle[data-direction="ne"] { right: var(--pbs-handle-offset, -6px); top: var(--pbs-handle-offset, -6px); cursor: nesw-resize; }
.pbs-selection-handle[data-direction="e"] { right: var(--pbs-handle-offset, -6px); top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.pbs-selection-handle[data-direction="se"] { right: var(--pbs-handle-offset, -6px); bottom: var(--pbs-handle-offset, -6px); cursor: nwse-resize; }
.pbs-selection-handle[data-direction="s"] { left: 50%; bottom: var(--pbs-handle-offset, -6px); transform: translateX(-50%); cursor: ns-resize; }
.pbs-selection-handle[data-direction="sw"] { left: var(--pbs-handle-offset, -6px); bottom: var(--pbs-handle-offset, -6px); cursor: nesw-resize; }
.pbs-selection-handle[data-direction="w"] { left: var(--pbs-handle-offset, -6px); top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.motorsport-clock.precision,
.motorsport-compass.precision {
  background: transparent !important;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.58));
}

.motorsport-clock.precision svg,
.motorsport-compass.precision svg {
  border-radius: 50%;
  clip-path: circle(49.5% at 50% 50%);
  background:
    radial-gradient(circle at 50% 50%, #07090c 0 74%, rgba(7,9,12,.98) 75% 79%, transparent 80%),
    conic-gradient(from -28deg,
      #15191d 0deg,
      #f0eee7 24deg,
      #626970 62deg,
      #171b1f 112deg,
      #d7d7d2 166deg,
      #4e555b 220deg,
      #f5f2e8 286deg,
      #242a2f 336deg,
      #15191d 360deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 0 0 0 5px rgba(20,24,28,.88),
    inset 0 0 18px rgba(255,255,255,.16);
}

.motorsport-clock.precision .clock-outer-rim,
.motorsport-compass.precision .compass-outer-rim {
  fill: transparent;
  stroke: rgba(245,244,237,.94);
  stroke-width: .9;
}

.motorsport-clock.precision .clock-inner-face,
.motorsport-compass.precision .compass-inner-face {
  fill: rgba(5,7,10,.98);
  stroke: #747b80;
  stroke-width: 1.35;
}

.motorsport-clock.precision .clock-track-ring {
  stroke: rgba(255,255,255,.22);
  stroke-width: .75;
}

.motorsport-clock.precision .clock-major-tick,
.motorsport-compass.precision .compass-major-tick {
  stroke: #fffef8 !important;
  stroke-width: 1.65;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.5));
}

.motorsport-clock.precision .clock-minor-tick,
.motorsport-compass.precision .compass-minor-tick {
  stroke: #d9dcd9 !important;
  stroke-width: .48;
  opacity: .9;
}

.motorsport-clock.precision .clock-number {
  fill: #fffef7;
  font-size: 6.2px;
  font-weight: 700;
}

.motorsport-clock.precision .clock-brand-label,
.motorsport-compass.precision .compass-brand-label {
  fill: #f2f0e8;
  font-size: 3.15px;
  letter-spacing: 1.05px;
}

.motorsport-clock.precision .clock-hour-hand {
  stroke-width: 4.6;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95));
}

.motorsport-clock.precision .clock-minute-hand {
  stroke-width: 2.8;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95));
}

.motorsport-clock.precision .clock-second-hand {
  stroke-width: .75;
  filter: drop-shadow(0 0 2px rgba(229,72,51,.75));
}

.motorsport-clock.precision .clock-centre,
.motorsport-compass.precision .compass-centre {
  fill: #d9d8d2;
  stroke: #20252a;
  stroke-width: 1;
}

.motorsport-clock.precision .clock-centre-dot {
  fill: #161a1e;
}

.motorsport-clock.precision .clock-date-window,
.motorsport-compass.precision .compass-readout-window {
  fill: #030405;
  stroke: #b7b9b7;
  stroke-width: .55;
}

.motorsport-compass.precision .compass-cardinal {
  font-size: 6px;
  font-weight: 900;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.85));
}

.motorsport-compass.precision .compass-north-arrow {
  filter: drop-shadow(0 0 2px rgba(229,72,51,.8));
}

.motorsport-compass.precision .compass-south-arrow {
  fill: #f1efe8;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.9));
}

.precision-compass-intercardinal {
  fill: #aeb9c4;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 3.2px;
  font-weight: 800;
}

.precision-compass-degree-label {
  fill: #7f8a94;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 2.15px;
  font-weight: 700;
}