/**
 * Toggle Track Skin — Racked Hardware
 *
 * 1U rackmount proportions. Brushed aluminum, hex screw details,
 * engraved/debossed labels, rack ear brackets. Think Distressor,
 * LA-2A faceplate, API 500 module.
 *
 * @package ToggleTrack
 * @since   1.0.0
 */

/* ---------- Color Palette ---------- */

.tt-skin-racked-hardware {
    --tt-bg: #c8c8c8;
    --tt-text: #1a1a1a;
    --tt-active: #ffffff;
    --tt-controls: #b0b0b0;
    --tt-progress: #999999;
    --tt-accent: #2266cc;
}

/* ---------- Container — Brushed Aluminum Faceplate ---------- */

.tt-skin-racked-hardware {
    border-radius: 2px;
    border: 2px solid #aaaaaa;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    /* Brushed aluminum texture */
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 3px
        ),
        linear-gradient(
            180deg,
            #d8d8d8 0%,
            #c8c8c8 30%,
            #c0c0c0 70%,
            #b8b8b8 100%
        );
}

/* Rack ears — left/right side elements */
.tt-skin-racked-hardware::before,
.tt-skin-racked-hardware::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.04) 1px,
            transparent 2px,
            transparent 3px
        ),
        linear-gradient(
            180deg,
            #bbb 0%,
            #aaa 50%,
            #bbb 100%
        );
    z-index: 3;
}

.tt-skin-racked-hardware::before {
    left: 0;
    border-right: 1px solid #999;
    border-radius: 2px 0 0 2px;
}

.tt-skin-racked-hardware::after {
    right: 0;
    border-left: 1px solid #999;
    border-radius: 0 2px 2px 0;
}

/* Make room for rack ears */
.tt-skin-racked-hardware .tt-wrapper {
    position: relative;
    z-index: 2;
    padding: 14px 32px;
}

/* ---------- Hex Screws in Rack Ears ---------- */

/* Top-left screw */
.tt-skin-racked-hardware .tt-wrapper::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 8px;
    width: 10px;
    height: 10px;
    background:
        radial-gradient(
            circle at 40% 35%,
            #d0d0d0 0%,
            #aaa 50%,
            #888 100%
        );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 5;
}

/* Bottom-left screw */
.tt-skin-racked-hardware .tt-wrapper::after {
    content: "";
    position: absolute;
    left: -16px;
    bottom: 8px;
    width: 10px;
    height: 10px;
    background:
        radial-gradient(
            circle at 40% 35%,
            #d0d0d0 0%,
            #aaa 50%,
            #888 100%
        );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 5;
}

/* Right-side screws via track-selector pseudo-elements */
.tt-skin-racked-hardware .tt-track-selector::before {
    content: "";
    position: absolute;
    right: -16px;
    top: -6px;
    width: 10px;
    height: 10px;
    background:
        radial-gradient(
            circle at 40% 35%,
            #d0d0d0 0%,
            #aaa 50%,
            #888 100%
        );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 5;
}

.tt-skin-racked-hardware .tt-track-selector {
    position: relative;
}

/* ---------- Track Buttons — Engraved Labels ---------- */

.tt-skin-racked-hardware .tt-track-btn {
    border-radius: 2px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.08em;
    /* Debossed/engraved text effect */
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5),
        0 -1px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid #999;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

.tt-skin-racked-hardware .tt-track-btn:hover {
    background: #b8b8b8;
}

.tt-skin-racked-hardware .tt-track-btn.tt-active {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2),
        0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* ---------- Play Button ---------- */

.tt-skin-racked-hardware .tt-play-btn {
    border-radius: 3px;
    border: 1px solid #999;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
    background:
        linear-gradient(
            180deg,
            #c0c0c0 0%,
            #aaaaaa 100%
        );
}

.tt-skin-racked-hardware .tt-play-btn:hover {
    background:
        linear-gradient(
            180deg,
            #cccccc 0%,
            #b4b4b4 100%
        );
}

.tt-skin-racked-hardware .tt-play-btn:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
    background:
        linear-gradient(
            180deg,
            #aaa 0%,
            #b0b0b0 100%
        );
}

/* ---------- Progress Bar — Panel Meter Style ---------- */

.tt-skin-racked-hardware .tt-progress-bar {
    height: 8px;
    border-radius: 1px;
    border: 1px solid #999;
    background:
        linear-gradient(
            180deg,
            #909090 0%,
            #999999 50%,
            #909090 100%
        );
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.tt-skin-racked-hardware .tt-progress-fill {
    border-radius: 0;
    background: linear-gradient(
        180deg,
        #3388ee 0%,
        #2266cc 50%,
        #1a55aa 100%
    );
}

/* ---------- Control Buttons — Hardware Switches ---------- */

.tt-skin-racked-hardware .tt-loop-btn,
.tt-skin-racked-hardware .tt-loudness-btn,
.tt-skin-racked-hardware .tt-ab-btn {
    border-radius: 2px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 0.08em;
    border: 1px solid #999;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5),
        0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

.tt-skin-racked-hardware .tt-loop-btn:hover,
.tt-skin-racked-hardware .tt-loudness-btn:hover,
.tt-skin-racked-hardware .tt-ab-btn:hover {
    background: #b8b8b8;
}

.tt-skin-racked-hardware .tt-loop-btn.tt-active,
.tt-skin-racked-hardware .tt-loudness-btn.tt-active,
.tt-skin-racked-hardware .tt-ab-btn.tt-active {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2),
        0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* ---------- Time Display — Engraved Readout ---------- */

.tt-skin-racked-hardware .tt-time {
    font-weight: 700;
    font-size: 0.8em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4),
        0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* ---------- Volume / Speed Labels ---------- */

.tt-skin-racked-hardware .tt-volume-label,
.tt-skin-racked-hardware .tt-speed-label {
    text-transform: uppercase;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4),
        0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* ---------- Meter ---------- */

.tt-skin-racked-hardware .tt-meter {
    border: 1px solid #999;
    border-radius: 1px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.tt-skin-racked-hardware .tt-meter-label {
    text-transform: uppercase;
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---------- Loading Overlay ---------- */

.tt-skin-racked-hardware .tt-loading {
    background: rgba(180, 180, 180, 0.95);
}

.tt-skin-racked-hardware .tt-loading-text {
    color: #1a1a1a;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 0.8em;
}

.tt-skin-racked-hardware .tt-loading-bar {
    border: 1px solid #999;
}

/* ---------- Extras Row — Silkscreen Divider ---------- */

.tt-skin-racked-hardware .tt-extras {
    border-top: 1px solid #aaa;
    padding-top: 10px;
}