/* ========================================================
   24SEVEN.FM NETWORK - UNIFIED STUDIO.CSS 
   ======================================================== */

/* --------------------------------------------------------
   GLOBAL STUDIO STRUCTURE (Applies to all stations)
   -------------------------------------------------------- */
body, html { margin: 0; padding: 0; width: 100%; min-height: 100vh; overflow-x: hidden; }

.studio-container {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.9);
}

.studio-body { flex: 1; padding: 20px 30px; display: flex; flex-direction: column; gap: 15px; }

/* Top Zone Grid */
.top-zone { display: grid; grid-template-columns: 500px 1fr; gap: 30px; margin-bottom: 5px; }

/* Unified Rounded Tables */
.info-table {
    width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
    border-radius: 6px; background: rgba(0,0,0,0.6); overflow: hidden;
    border: 1px solid; /* Color inherited by Theme Zone */
}
.info-table td { 
    padding: 8px 12px; vertical-align: middle; text-align: center; 
    font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.info-table a { font-size: 14px !important; }
.info-table .left-cell { width: 500px; max-width: 500px; }

/* Typography & Layout Overrides */
.song-artist { font-weight: normal !important; font-size: inherit !important; }
.time-badge { background: #000; padding: 1px 6px; border-radius: 2px; font-family: monospace; font-size: 14px; margin: 0 4px; }
.action-bar-inline { display: flex; align-items: center; justify-content: center; gap: 8px; }
.amazon-flags { display: flex; gap: 4px; align-items: center; }
.amazon-flags img { height: 14px; border-radius: 2px; }
.amazon-flags a, .fav-button { transition: transform 0.2s; display: flex; }
.amazon-flags a:hover, .fav-button:hover { transform: scale(1.2); text-decoration: none; }
.spacer { margin: 0 4px; font-size: 14px; }

/* Middle Zone (Album & Chat) */
.middle-zone { display: grid; grid-template-columns: 500px 1fr; gap: 30px; border: none; }
.album-art-box { width: 500px; height: 500px; background: #000; overflow: hidden; border: none; }
.album-art-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chat-wrapper { 
    height: 500px; box-sizing: border-box; display: flex; flex-direction: column; 
    background: rgba(0, 0, 0, 0.75); padding: 15px; border-radius: 6px; 
    box-shadow: 0px 5px 15px rgba(0,0,0,0.5); border: 1px solid;
}
.chat-box { flex: 1; display: flex; flex-direction: column; background: #000; border-radius: 4px; overflow: hidden; }
.chat-view { flex: 1; width: 100%; border: none; }
.chat-input { height: 90px; width: 100%; border: none; background: #0a0a05; }

/* Bottom Zone (Queue & Played) */
.bottom-zone { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 15px; }
.track-list { 
    background: rgba(0, 0, 0, 0.75); padding: 15px; border-radius: 6px; 
    box-shadow: 0px 5px 15px rgba(0,0,0,0.5); border: 1px solid;
}
.track-list h3 { margin: 0 0 12px 0; padding-bottom: 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.micro-track { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 10px; }
.micro-track:last-child { margin-bottom: 0; }
.micro-track img { width: 40px; height: 40px; border-radius: 2px; }
.micro-track-info { display: flex; flex-direction: column; width: 100%; }
.micro-track-row1 { display: flex; align-items: baseline; gap: 8px; }
.micro-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; font-size: 15px !important;}
.micro-req { margin-top: 2px; font-size: 13px !important; }

/* Footer */
.studio-footer { padding: 15px; background: transparent; text-align: center; font-size: 10px; border-top: 1px solid; }

/* --------------------------------------------------------
   STATION THEME ZONES (Color Mapping)
   -------------------------------------------------------- */

/* 1. 1980s.FM (Pink / Burgundy) */
.station-80s { background: radial-gradient(circle at 50% 25%, #2b1320 0%, #110000 40%, #000000 100%); background-attachment: fixed; }
.station-80s .info-table, .station-80s .chat-wrapper, .station-80s .track-list { border-color: #CC0066; }
.station-80s .info-table td, .station-80s .info-table tr:first-child td, .station-80s .info-table .left-cell { border-color: #CC0066; }
.station-80s .chat-input, .station-80s .track-list h3, .station-80s .studio-footer { border-color: #CC0066; }
.station-80s .time-badge, .station-80s .micro-track img { border-color: #66334C; }
.station-80s .chat-box { border: 1px solid #CC0066; }

/* 2. Adagio.FM (Brown / Orange) */
.station-afm { background: radial-gradient(circle at 50% 25%, #2b1c0d 0%, #150d06 40%, #000000 100%); background-attachment: fixed; }
.station-afm .info-table, .station-afm .chat-wrapper, .station-afm .track-list { border-color: #CC6600; }
.station-afm .info-table td, .station-afm .info-table tr:first-child td, .station-afm .info-table .left-cell, .station-afm .track-list h3, .station-afm .chat-input, .station-afm .studio-footer { border-color: #CC6600; }
.station-afm .time-badge, .station-afm .micro-track img { border-color: #664c33; }
.station-afm .chat-box { border: 1px solid #CC6600; }

/* 3. Death.FM (Red / Charcoal) */
.station-dfm { background: radial-gradient(circle at 50% 25%, #220000 0%, #080000 40%, #000000 100%); background-attachment: fixed; }
.station-dfm .info-table, .station-dfm .chat-wrapper, .station-dfm .track-list { border-color: #FF0000; }
.station-dfm .info-table td, .station-dfm .info-table tr:first-child td, .station-dfm .info-table .left-cell, .station-dfm .track-list h3, .station-dfm .chat-input, .station-dfm .studio-footer { border-color: #FF0000; }
.station-dfm .time-badge, .station-dfm .micro-track img { border-color: #660000; }
.station-dfm .chat-box { border: 1px solid #FF0000; }

/* 4. Entranced.FM (Yellow / Olive) */
.station-efm { background: radial-gradient(circle at 50% 25%, #2b2b11 0%, #151508 40%, #000000 100%); background-attachment: fixed; }
.station-efm .info-table, .station-efm .chat-wrapper, .station-efm .track-list { border-color: #444400; }
.station-efm .info-table td, .station-efm .info-table tr:first-child td, .station-efm .info-table .left-cell, .station-efm .track-list h3, .station-efm .chat-input, .station-efm .studio-footer { border-color: #444400; }
.station-efm .time-badge, .station-efm .micro-track img { border-color: #555500; }
.station-efm .chat-box { border: 1px solid #444400; }

/* 5. StreamingSoundtracks (Blue / Navy) */
.station-sst { background: radial-gradient(circle at 50% 25%, #000022 0%, #00000d 40%, #000000 100%); background-attachment: fixed; }
.station-sst .info-table, .station-sst .chat-wrapper, .station-sst .track-list { border-color: #336699; }
.station-sst .info-table td, .station-sst .info-table tr:first-child td, .station-sst .info-table .left-cell, .station-sst .track-list h3, .station-sst .chat-input, .station-sst .studio-footer { border-color: #336699; }
.station-sst .time-badge, .station-sst .micro-track img { border-color: #225588; }
.station-sst .chat-box { border: 1px solid #336699; }
    ```