/* ==========================================================================
   WAYSA HI-FI CONSOLE CORE MATRIX STYLESHEET (style.css)
   ========================================================================== */

:root {
    /* Lightened wood tones to warm natural oak/walnut */
    --wood-trim: #855838;
    --wood-grain: #633e24;
    --brushed-aluminum: linear-gradient(135deg, #f0f0f0 0%, #c5c5c5 25%, #e0e0e0 50%, #b0b0b0 75%, #f5f5f5 100%);
    --recessed-shadow: inset 3px 3px 6px rgba(0,0,0,0.4), inset -3px -3px 6px rgba(255,255,255,0.6);
    --bezel-3d: 2px 2px 4px rgba(0,0,0,0.2), -1px -1px 2px rgba(255,255,255,0.7);
    --led-green: #39ff14;
    --led-bg: #051a05;
}

/* Base Document Overrides */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    user-select: none; 
}

body {
    background: #ffffff; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
}

/* 1970s Hi-Fi Outer Cabinet Wrap with Soft Subtle Drop Shadows */
#hifi-chassis {
    width: 98vw;
    height: 96vh;
    max-width: 1400px;
    max-height: 850px;
    background: var(--wood-trim);
    border: 12px solid var(--wood-grain);
    /* Softened shadow profile to eliminate harsh edges */
    box-shadow: 0 15px 35px rgba(0,0,0,0.15), 0 5px 15px rgba(0,0,0,0.1);
    padding: 16px;
    position: relative;
    border-radius: 4px;
}

/* Silver Brushed Faceplate Panel Frame */
#faceplate {
    width: 100%;
    height: 100%;
    background: var(--brushed-aluminum);
    border: 2px solid #a0a0a0;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.15);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: #222;
}

/* Top Header Component Frame */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 12%;
    border-bottom: 2px solid rgba(0,0,0,0.15);
    padding-bottom: 10px;
}

.header-btn-group { 
    display: flex; 
    gap: 12px; 
}

/* Solid Jet-Black 3D Output Button Blocks */
.btn-black-3d {
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border: 1px solid #000;
    color: #fff;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 4px 0 #000, 2px 4px 6px rgba(0,0,0,0.3);
    transform: translateY(0);
    transition: all 0.05s ease;
}

.btn-black-3d:active, .btn-black-3d.active {
    background-image: none !important; /* Discards the black linear gradient mask */
    background-color: #d32f2f !important; /* Forces the rich engineering red illumination */
    color: #ffffff !important;
    box-shadow: 0 1px 0 #000, 1px 1px 2px rgba(0,0,0,0.5) !important;
    transform: translateY(3px);
    border-color: #ff5252 !important; /* Subtle flare on active button boundaries */
}


/* Recessed Letter Engraving Processing */
#brand-matrix {
    text-align: center;
    flex-grow: 1;
}

#brand-matrix h1 {
    font-size: 26px;
    font-weight: 900;
    color: #1a1a1a;
    letter-spacing: 4px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.7), -1px -1px 1px rgba(0,0,0,0.8);
    text-transform: uppercase;
}

#brand-matrix p {
    font-size: 11px;
    color: #444;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* Core Component Body Block Layout */
#main-console {
    display: flex;
    height: 76%;
    margin-top: 15px;
    gap: 20px;
}

/* Left Navigation Control Deck */
#left-matrix-rack {
    width: 22%;
    background: rgba(0,0,0,0.03);
    border-right: 1px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    padding-right: 8px;
}

#left-matrix-rack .btn-black-3d {
    text-align: left;
    padding: 9px 12px;
    font-size: 10px;
}

/* Center Control Core Monitor */
#center-monitor-bezel {
    width: 48%;
    background: #0d0d0d;
    border-radius: 8px;
    border: 4px solid #1a1a1a;
    box-shadow: var(--recessed-shadow);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.recessed-screen-window {
    background: #fff;
    color: #000;
    border: 2px solid #222;
    border-radius: 4px;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
    padding: 12px;
    overflow: auto;
}

#topic-window { 
    height: 15%; 
    font-size: 14px; 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
}

#body-window { 
    height: 73%; 
    font-size: 12px; 
    line-height: 1.5; 
    font-family: sans-serif; 
}

/* Screen Display Modifiers Micro buttons */
#display-toggle-space {
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.micro-toggle-btn {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cccccc, #666666);
    border: 1px solid #333;
    box-shadow: 0 2px 2px rgba(0,0,0,0.6);
    cursor: pointer;
}

.micro-toggle-btn:active { 
    box-shadow: inset 1px 1px 2px #000; 
}

/* Right Control System — Dedicated 4-VU Matrix Array Layout */
#right-gizmo-rack {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Analogue Rotary Knob Engine Container */
.knob-subassembly {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.rotary-knob-outer {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e0e0 0%, #999 50%, #555 100%);
    border: 3px solid #666;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 1px 3px rgba(255,255,255,0.6);
    position: relative;
    cursor: grab;
    transform: rotate(-120deg);
}

.rotary-knob-outer::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: 3px;
    height: 14px;
    background: #111;
    transform: translateX(-50%);
    border-radius: 1px;
}

.knob-label { 
    font-size: 10px; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #333; 
}

/* 2x2 Dedicated Weather Control Grid */
#weather-matrix-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    height: 82%;
}

.vu-city-block {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
    padding: 4px;
}

.city-header-title {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #222;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.vu-meter-bezel-recessed {
    width: 100%;
    height: 70px;
    background: #151515;
    border: 2px solid #252525;
    border-radius: 3px;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.7);
    position: relative;
    overflow: hidden;
}

.vu-canvas { 
    width: 100%; 
    height: 100%; 
    background: #fdfbe7;
}

/* Hardware Cassette Counter Block (Temperature & Humidity layout from reference image) */
.cassette-counter-bay-recessed {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    background: #0a0a0a;
    padding: 3px 6px;
    border: 1px solid #222;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8);
    border-radius: 2px;
    margin-top: 4px;
}

.counter-sub-block { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 48%;
}

.counter-sub-block label { 
    font-size: 7px; 
    color: #aaa; 
    text-transform: uppercase;
    font-weight: bold;
}

.digit-window-4s {
    background: #000;
    color: #ff3b30;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    padding: 1px 3px;
    letter-spacing: 1px;
    border: 1px solid #222;
    box-shadow: inset 0 0 3px rgba(255,0,0,0.5);
    margin-top: 1px;
    width: 100%;
    text-align: center;
}

/* Footer Container Frame */
footer {
    height: 8%;
    border-top: 2px solid rgba(0,0,0,0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    font-size: 11px;
    font-weight: bold;
    color: #444;
}

/* Language Toggle Matrix */
#lang-switchbox { 
    display: flex; 
    gap: 8px; 
}

.flag-toggle-switch {
    width: 32px;
    height: 22px;
    cursor: pointer;
    border: 1px solid #555;
    box-shadow: var(--bezel-3d);
    transition: transform 0.1s ease;
}

.flag-toggle-switch:active { 
    transform: scale(0.9); 
}

/* ==========================================================================
   RTL MULTI-LANGUAGE SYSTEM OVERRIDES
   ========================================================================== */
html[dir="rtl"] { 
    direction: rtl; 
}

html[dir="rtl"] header { 
    flex-direction: row-reverse; 
}

html[dir="rtl"] #main-console { 
    flex-direction: row-reverse; 
}

html[dir="rtl"] #left-matrix-rack {
    border-right: none;
    border-left: 1px solid rgba(0,0,0,0.1);
    padding-right: 0;
    padding-left: 8px;
}

html[dir="rtl"] #left-matrix-rack .btn-black-3d { 
    text-align: right; 
}

html[dir="rtl"] footer { 
    flex-direction: row-reverse; 
}