body{
font-family: Arial, Helvetica, sans-serif;
margin:0;
background:#edf2f7;
color:#111827;
}

.container{
display:flex;
align-items:stretch;
min-height:100vh;
}

.sidebar{
width:220px;
background:#000;
color:#fff;
padding:20px 10px;
flex-shrink:0;
box-sizing:border-box;
box-shadow:2px 0 18px rgba(0,0,0,0.18);
position:relative;
z-index:20;
}

.sidebar h2{
margin-top:0;
}

.sidebar a{
display:block;
padding:10px 12px;
color:#d1d5db;
text-decoration:none;
border-radius:10px;
font-size:14px;
font-weight:600;
transition:background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar a:hover{
background:rgba(255,255,255,0.08);
color:#fff;
transform:translateX(2px);
}

.sidebar a.active{
background:#1f2937;
color:#fff;
}

.content{
flex:1;
min-width:0;
padding:28px;
box-sizing:border-box;
background:linear-gradient(180deg, #07152f 0%, #0b1f45 22%, #102b5d 58%, #163a78 100%);
}

.page-shell{
max-width:1120px;
margin:0 auto;
}

.content h1{
margin:0 0 22px 0;
font-size:32px;
line-height:1.15;
font-weight:800;
letter-spacing:-0.03em;
color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,0.18);
}

/* login */

.login-body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#101828;
}

.login-box{
background:white;
padding:40px;
border-radius:14px;
width:320px;
text-align:center;
box-shadow:0 14px 34px rgba(0,0,0,0.18);
}

.login-box input{
width:100%;
padding:12px 14px;
margin:10px 0;
box-sizing:border-box;
border:1px solid #d1d5db;
border-radius:10px;
font-size:15px;
}

.login-box button{
width:100%;
padding:12px;
background:#0f3ea8;
color:white;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:700;
}

.error{
color:red;
margin-top:10px;
}

.filter-form{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-bottom:18px;
padding:18px;
background:rgba(255,255,255,0.94);
border:1px solid rgba(15,23,42,0.08);
border-radius:18px;
box-shadow:0 12px 30px rgba(15,23,42,0.08);
backdrop-filter:blur(10px);
}

.filter-form select,
.filter-form input{
padding:12px 14px;
border:1px solid #cfd8e3;
border-radius:12px;
font-size:14px;
background:#fff;
transition:border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.filter-form select:focus,
.filter-form input:focus{
outline:none;
border-color:#2457d6;
box-shadow:0 0 0 3px rgba(36,87,214,0.12);
}

.filter-form select{
min-width:260px;
}

.filter-form input{
min-width:260px;
}

.filter-form button{
padding:12px 18px;
background:#0f3ea8;
color:#fff;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:700;
letter-spacing:0.01em;
transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.filter-form button:hover{
background:#0c3290;
transform:translateY(-1px);
box-shadow:0 10px 20px rgba(15,62,168,0.18);
}

.table-wrap{
overflow-x:auto;
margin-top:16px;
padding:12px;
background:#fff;
border:1px solid rgba(15,23,42,0.08);
border-radius:20px;
box-shadow:0 14px 34px rgba(15,23,42,0.08);
-webkit-overflow-scrolling:touch;
}

.monitor-table{
width:100%;
border-collapse:collapse;
font-size:12.5px;
border:1px solid #d7dee7;
table-layout:auto;
background:#fff;
}

.monitor-table th,
.monitor-table td{
padding:5px 10px;
border:1px solid #d7dee7;
text-align:left;
vertical-align:middle;
}

.monitor-table th{
background:#000;
color:#fff;
font-weight:700;
letter-spacing:0.01em;
text-align:center;
}

.monitor-table tr:hover{
background:#f8fafc;
}

.monitor-table td:first-child,
.monitor-table th:first-child{
text-align:center;
}

.country-cell{
white-space:nowrap;
font-size:20px;
text-align:center;
width:90px;
}

.delayed-row td{
background:#ffe7c2;
}

.delayed-row:hover td{
background:#ffddb0;
}

.offline-row td{
background:#ffd6d6;
}

.offline-row:hover td{
background:#ffcccc;
}

.song-cell{
font-weight:500;
color:#111;
letter-spacing:0.1px;
}

.pagination{
margin-top:18px;
display:flex;
flex-wrap:wrap;
gap:8px;
}

.pagination a{
display:inline-block;
padding:8px 12px;
border:1px solid #d0d7e2;
text-decoration:none;
color:#222;
background:#fff;
border-radius:10px;
transition:background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pagination a:hover{
background:#f3f6fb;
transform:translateY(-1px);
}

.pagination a.active-page{
background:#0f3ea8;
color:#fff;
border-color:#0f3ea8;
}

.status-cell{
text-align:center;
width:80px;
}

.status-dot{
width:12px;
height:12px;
border-radius:50%;
display:inline-block;
}

.status-dot.online{
background:#22c55e;
}

.status-dot.delayed{
background:#f59e0b;
}

.status-dot.offline{
background:#ef4444;
}

.updated-row td{
animation:rowFlash 2s ease;
}

@keyframes rowFlash{
0%{ background:#fff3b0; }
100%{ background:transparent; }
}

.playlist-wrapper{
display:flex;
flex-direction:column;
gap:18px;
margin-top:20px;
}

.hour-block{
border:1px solid rgba(15,23,42,0.08);
border-radius:18px;
overflow:hidden;
background:#fff;
box-shadow:0 10px 24px rgba(15,23,42,0.06);
}

.hour-title{
background:linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
padding:10px 14px;
font-weight:700;
font-size:14px;
border-bottom:1px solid #dcdcdc;
display:flex;
justify-content:space-between;
align-items:center;
}

.hour-count{
font-weight:400;
font-size:12px;
color:#666;
}

.playlist-table{
margin-top:0;
border:none;
}

.playlist-table th,
.playlist-table td{
padding:4px 10px;
font-size:13px;
}

.hour-block .table-wrap{
margin-top:0;
padding:0;
border:none;
border-radius:0;
box-shadow:none;
}

.compact-hour-block{
border-radius:18px;
}

.empty-hour{
color:#777;
font-style:italic;
text-align:center;
background:#fafafa;
}

/* Multi-station search table layout */

.col-station{
white-space:nowrap;
width:1%;
}

.col-small{
white-space:nowrap;
width:1%;
text-align:center;
}

.multi-search .monitor-table td:nth-child(2),
.multi-search .monitor-table th:nth-child(2){
text-align:center;
}

.station-cell{
white-space:nowrap;
width:1%;
}

.col-song{
text-align:center;
}

/* NOW PLAYING compact played column */

.col-played{
white-space:nowrap;
width:1%;
text-align:center;
}

/* NOW PLAYING compact status column */

.col-status{
white-space:nowrap;
width:1%;
text-align:center;
}

.song-hover-trigger{
cursor:pointer;
display:inline-block;
}

.song-hover-trigger:hover{
text-decoration:underline;
}

.song-hover-popup{
position:absolute;
z-index:9999;
background:#fff;
border:1px solid #dcdcdc;
box-shadow:0 10px 28px rgba(0,0,0,0.18);
border-radius:12px;
padding:34px 6px 6px;
box-sizing:border-box;
}

.song-hover-popup.hidden{
display:none;
}

.song-hover-popup-close{
position:absolute;
top:8px;
right:10px;
border:none;
background:none;
font-size:20px;
line-height:1;
cursor:pointer;
color:#666;
}

.song-hover-popup-close:hover{
color:#000;
}

#song-hover-popup-body{
min-width:0;
}

.heatmap-loading,
.heatmap-error{
padding:12px 14px;
font-size:13px;
white-space:nowrap;
}

.song-heatmap-title{
font-size:11px;
font-weight:700;
margin-bottom:4px;
}

.song-heatmap-scroll{
overflow:visible;
max-width:none;
max-height:none;
}

.song-heatmap-table{
border-collapse:collapse;
font-size:10px;
table-layout:fixed;
width:auto;
min-width:0;
}

.song-heatmap-table th,
.song-heatmap-table td{
border:1px solid #dcdcdc;
padding:0;
text-align:center;
width:14px;
height:14px;
line-height:14px;
}

.song-heatmap-table th{
background:#111827;
color:#fff;
font-weight:600;
}

.heatmap-date-col{
width:58px !important;
min-width:58px;
white-space:nowrap;
text-align:left !important;
padding-left:4px !important;
font-size:10px;
}

.heatmap-dot{
display:inline-block;
width:6px;
height:6px;
border-radius:50%;
background:#2563eb;
vertical-align:middle;
}

.song-stations-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
padding:20px;
box-sizing:border-box;
}

.song-stations-modal.hidden{
display:none;
}

.song-stations-content{
position:relative;
background:#fff;
padding:20px;
border-radius:16px;
max-width:380px !important;
width:100%;
box-sizing:border-box;
box-shadow:0 18px 40px rgba(0,0,0,0.22);
max-height:85vh;
overflow-y:auto;
overflow-x:hidden;
}

@media (max-width: 768px){
.song-stations-content{
max-width:90vw !important;
width:90vw !important;
max-height:85vh;
overflow-y:auto;
overflow-x:hidden;
}
}

.song-modal-close{
position:absolute;
top:10px;
right:12px;
border:none;
background:none;
font-size:20px;
cursor:pointer;
color:#666;
}

.song-modal-close:hover{
color:#000;
}

.song-stations-content table tr:hover{
background:#f3f4f6;
}

.song-stations-content .monitor-table{
table-layout:auto;
width:100%;
}

.song-stations-content .monitor-table th,
.song-stations-content .monitor-table td{
white-space:nowrap;
padding:6px 8px;
}

.song-stations-content .monitor-table th:nth-child(1),
.song-stations-content .monitor-table td:nth-child(1){
white-space:normal;
width:auto;
text-align:left;
}

.song-stations-content .monitor-table th:nth-child(2),
.song-stations-content .monitor-table td:nth-child(2),
.song-stations-content .monitor-table th:nth-child(3),
.song-stations-content .monitor-table td:nth-child(3){
width:1%;
text-align:center;
}

.trend-badge{
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
min-width:auto;
padding:4px 8px;
border-radius:999px;
font-size:12px;
font-weight:700;
text-align:center;
white-space:nowrap;
}

.trend-arrow{
font-size:12px;
line-height:1;
}

.trend-label{
line-height:1;
}

.trend-diff{
font-weight:600;
font-size:11px;
opacity:0.85;
line-height:1;
}

.trend-new{
background:#e6f0ff;
color:#1d4ed8;
}

.trend-re{
background:#fff4e6;
color:#c2410c;
}

.trend-up{
background:#eafaf0;
color:#15803d;
}

.trend-down{
background:#fff1f1;
color:#b91c1c;
}

.trend-hold{
background:#fff8db;
color:#a16207;
}

.toptracks-table .col-tight{
width:1%;
white-space:nowrap;
text-align:center;
}

.logo{
text-align:center;
margin-bottom:20px;
padding:12px;
background:#ffffff;
border-radius:16px;
}

.logo img{
max-width:160px;
height:auto;
display:block;
margin:0 auto;
transition:0.2s ease;
}

.logo img:hover{
transform:scale(1.03);
opacity:0.92;
}

/* tighter NOW PLAYING on desktop and mobile */
.nowplaying-table .station-cell{
width:110px;
max-width:110px;
white-space:normal;
word-break:break-word;
line-height:1.2;
}

.nowplaying-table .col-played{
width:1%;
white-space:normal;
line-height:1.15;
}

.nowplaying-table .status-cell,
.nowplaying-table .col-status{
padding-left:4px !important;
padding-right:4px !important;
}

/* Mobile UI elements */

.mobile-topbar{
display:none;
}

.mobile-menu-overlay{
display:none;
}

.mobile-sidebar-close-wrap{
display:none;
}

.mobile-menu-toggle{
background:#000;
color:#fff;
border:none;
padding:10px 14px;
border-radius:8px;
font-size:15px;
cursor:pointer;
}

.mobile-topbar-title{
font-weight:700;
font-size:15px;
}

.mobile-menu-close{
background:none;
border:none;
color:#fff;
font-size:24px;
cursor:pointer;
padding:0;
}

.song-mobile-actions{
position:fixed;
inset:0;
background:rgba(0,0,0,0.35);
display:flex;
align-items:flex-end;
justify-content:center;
z-index:10030;
padding:0;
box-sizing:border-box;
}

.song-mobile-actions.hidden{
display:none;
}

.song-mobile-actions-sheet{
background:#fff;
width:100%;
max-width:520px;
border-radius:16px 16px 0 0;
padding:18px 16px 20px;
box-sizing:border-box;
}

.song-mobile-actions-title{
font-weight:700;
margin-bottom:14px;
font-size:14px;
line-height:1.4;
word-break:break-word;
}

.song-mobile-action-btn{
display:block;
width:100%;
padding:12px 14px;
margin-bottom:10px;
border:1px solid #dcdcdc;
background:#fff;
border-radius:10px;
font-size:15px;
text-align:left;
cursor:pointer;
}

.song-mobile-actions-close{
float:right;
background:none;
border:none;
font-size:22px;
cursor:pointer;
margin-bottom:10px;
}

@media (min-width: 769px){
.song-mobile-actions{
display:none !important;
}
}

@media (max-width: 768px){

html, body{
font-size:16px;
}

body.mobile-menu-open{
overflow:hidden;
}

.mobile-topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
background:#fff;
border-bottom:1px solid #ddd;
position:sticky;
top:0;
z-index:20000;
}

.mobile-menu-toggle{
font-size:16px;
padding:10px 14px;
border:none;
background:#000;
color:#fff;
border-radius:8px;
cursor:pointer;
min-height:44px;
line-height:1;
}

.mobile-topbar-title{
font-size:16px;
font-weight:700;
line-height:1.2;
}

.mobile-menu-overlay{
display:block;
position:fixed;
inset:0;
background:rgba(0,0,0,0.45);
z-index:19990;
opacity:0;
pointer-events:none;
transition:opacity 0.2s ease;
}

.mobile-menu-overlay.active{
opacity:1;
pointer-events:auto;
}

.container{
display:block;
min-height:auto;
}

.sidebar{
position:fixed;
top:0;
left:0;
width:280px;
max-width:82vw;
height:100vh;
z-index:20010;
transform:translateX(-100%);
transition:transform 0.25s ease;
overflow-y:auto;
padding:16px 14px 22px;
box-sizing:border-box;
}

.sidebar.mobile-open{
transform:translateX(0);
}

.mobile-sidebar-close-wrap{
display:flex;
justify-content:flex-end;
margin-bottom:8px;
}

.mobile-menu-close{
appearance:none;
border:none;
background:none;
color:#fff;
font-size:28px;
line-height:1;
cursor:pointer;
padding:4px 6px;
}

.logo{
margin-bottom:16px;
padding:10px;
}

.logo img{
max-width:140px;
}

.sidebar a{
display:block;
padding:12px 10px;
font-size:16px;
line-height:1.2;
border-radius:8px;
}

.content{
padding:14px !important;
margin-left:0 !important;
background:linear-gradient(180deg, #07152f 0%, #0b1f45 26%, #123166 70%, #1a4588 100%);
}

.content h1{
font-size:24px;
line-height:1.2;
margin-bottom:16px;
}

.filter-form{
display:flex;
flex-direction:column;
align-items:stretch;
gap:10px;
}

.filter-form select,
.filter-form input,
.filter-form button{
width:100%;
box-sizing:border-box;
font-size:16px;
min-height:44px;
}

.monitor-table{
font-size:14px;
min-width:720px;
}

.monitor-table th,
.monitor-table td{
padding:8px 10px !important;
}

.song-cell{
font-size:14px;
line-height:1.35;
}

.song-hover-popup{
position:fixed !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
width:95vw !important;
max-width:95vw !important;
max-height:80vh;
overflow:auto;
padding:34px 8px 8px;
box-sizing:border-box;
z-index:30000 !important;
}

.song-hover-popup-close{
top:7px;
right:9px;
font-size:22px;
}

.song-stations-modal{
z-index:30010 !important;
padding:12px;
}

.song-stations-content{
width:100%;
max-width:none;
max-height:85vh;
overflow:auto;
box-sizing:border-box;
padding:16px 14px 14px;
border-radius:14px;
}

.song-stations-content h2{
font-size:18px;
line-height:1.3;
margin:0 28px 14px 0;
}

.song-modal-close{
top:8px;
right:10px;
font-size:24px;
}

.status-cell,
.col-status{
width:1% !important;
white-space:nowrap;
text-align:center;
padding-left:6px !important;
padding-right:6px !important;
}

.status-dot{
width:10px;
height:10px;
}

.col-played{
width:1% !important;
white-space:normal;
font-size:12px;
padding-left:8px !important;
padding-right:8px !important;
}

.toptracks-table .col-tight{
width:1% !important;
white-space:nowrap;
}

.trend-badge{
font-size:11px;
padding:4px 7px;
}

.song-heatmap-table{
font-size:9px;
}

.song-heatmap-title{
font-size:12px;
}

.heatmap-date-col{
font-size:9px;
}

.nowplaying-table{
min-width:0;
width:100%;
table-layout:fixed;
}

.nowplaying-table th,
.nowplaying-table td{
padding:6px 6px !important;
}

.nowplaying-table .station-cell{
width:88px;
max-width:88px;
font-size:13px;
}

.nowplaying-table .song-cell{
font-size:13px;
line-height:1.25;
}

.nowplaying-table .col-played{
font-size:12px;
width:68px !important;
max-width:68px;
}

.nowplaying-table .status-cell,
.nowplaying-table .col-status{
width:28px !important;
max-width:28px;
padding-left:2px !important;
padding-right:2px !important;
}

.song-stations-content .monitor-table{
min-width:0;
width:100%;
table-layout:auto;
}

.song-stations-content .monitor-table th,
.song-stations-content .monitor-table td{
font-size:13px;
padding:6px 6px !important;
}

.song-stations-content .monitor-table th:nth-child(2),
.song-stations-content .monitor-table td:nth-child(2),
.song-stations-content .monitor-table th:nth-child(3),
.song-stations-content .monitor-table td:nth-child(3){
width:1%;
white-space:nowrap;
}
}


/* Desktop NOW PLAYING layout tightening */
.nowplaying-table{
table-layout:fixed;
width:100%;
}

.nowplaying-table .col-status,
.nowplaying-table .status-cell{
width:34px !important;
max-width:34px;
white-space:nowrap;
text-align:center;
padding-left:3px !important;
padding-right:3px !important;
}

.nowplaying-table .station-cell{
width:1%;
max-width:none;
white-space:nowrap;
word-break:normal;
line-height:1.2;
}

.nowplaying-table .song-cell{
width:auto;
line-height:1.2;
}

.nowplaying-table .col-played{
width:116px !important;
max-width:116px;
white-space:nowrap;
text-align:center;
line-height:1.15;
}

.nowplaying-table td,
.nowplaying-table th{
padding-top:5px;
padding-bottom:5px;
}

@media (min-width: 769px){
.content{
padding:28px 22px;
}

.table-wrap{
padding:10px;
}

.nowplaying-table .station-cell{
width:1%;
max-width:none;
white-space:nowrap;
}

.nowplaying-table .col-played{
width:110px !important;
max-width:110px;
}
}

.table-wrap{
padding:12px;
}

.nowplaying-table .station-cell{
width:124px;
max-width:124px;
}

.nowplaying-table .col-played{
width:118px !important;
max-width:118px;
}
}


/* Database table sizing/alignment */
.database-table th{
text-align:center;
}

.database-table td:nth-child(2),
.database-table td:nth-child(3),
.database-table td:nth-child(4),
.database-table th:nth-child(2),
.database-table th:nth-child(3),
.database-table th:nth-child(4){
width:1%;
white-space:nowrap;
text-align:center;
}


/* FIX: Station column should NOT stretch */
.nowplaying-table td:nth-child(2),
.nowplaying-table th:nth-child(2){
width:1% !important;
white-space:nowrap;
max-width:1%;
}

/* Let SONG take remaining space */
.nowplaying-table td:nth-child(3){
width:auto;
}

/* subtle table background */
.table-wrap{
background:#f7f9fc !important;
}

.monitor-table{
background:#f7f9fc !important;
}

.monitor-table th{
background:#000;
color:#fff;
text-align:center;
}



/* ===== v7 targeted fixes ===== */

/* slightly darker soft gray for all table cards */
.table-wrap{
background:#f1f4f8 !important;
}

.monitor-table{
background:#f1f4f8 !important;
}

/* NOW PLAYING: keep Station visible, Song centered */
.nowplaying-table{
table-layout:fixed !important;
}

.nowplaying-table th:nth-child(2),
.nowplaying-table td:nth-child(2){
width:130px !important;
min-width:130px !important;
max-width:130px !important;
white-space:normal !important;
word-break:break-word !important;
overflow-wrap:anywhere;
line-height:1.2;
text-align:left !important;
}

.nowplaying-table th:nth-child(3),
.nowplaying-table td:nth-child(3){
text-align:center !important;
}

.nowplaying-table th:nth-child(4),
.nowplaying-table td:nth-child(4){
width:112px !important;
min-width:112px !important;
max-width:112px !important;
white-space:nowrap !important;
text-align:center !important;
}

.nowplaying-table th:nth-child(1),
.nowplaying-table td:nth-child(1){
width:34px !important;
min-width:34px !important;
max-width:34px !important;
white-space:nowrap !important;
text-align:center !important;
}

/* MULTI-STATION SEARCH: no wrapping in station/first/last played */
.multi-search .monitor-table{
table-layout:auto !important;
}

.multi-search .monitor-table th:nth-child(1),
.multi-search .monitor-table td:nth-child(1){
white-space:nowrap !important;
width:1% !important;
text-align:left !important;
}

.multi-search .monitor-table th:nth-child(3),
.multi-search .monitor-table td:nth-child(3),
.multi-search .monitor-table th:nth-child(4),
.multi-search .monitor-table td:nth-child(4){
white-space:nowrap !important;
width:1% !important;
text-align:center !important;
}

.multi-search .monitor-table th:nth-child(5),
.multi-search .monitor-table td:nth-child(5),
.multi-search .monitor-table th:nth-child(6),
.multi-search .monitor-table td:nth-child(6){
width:72px !important;
max-width:72px !important;
text-align:center !important;
white-space:normal !important;
line-height:1.15;
word-break:break-word;
}

.multi-search .monitor-table th:nth-child(5),
.multi-search .monitor-table th:nth-child(6){
padding-left:6px !important;
padding-right:6px !important;
}

.multi-search .monitor-table th{
vertical-align:middle;
}

.multi-search .monitor-table td:nth-child(2),
.multi-search .monitor-table th:nth-child(2){
text-align:center !important;
}

@media (max-width: 768px){
.nowplaying-table th:nth-child(2),
.nowplaying-table td:nth-child(2){
width:92px !important;
min-width:92px !important;
max-width:92px !important;
}

.nowplaying-table th:nth-child(4),
.nowplaying-table td:nth-child(4){
width:72px !important;
min-width:72px !important;
max-width:72px !important;
white-space:normal !important;
}

.multi-search .monitor-table th:nth-child(1),
.multi-search .monitor-table td:nth-child(1),
.multi-search .monitor-table th:nth-child(3),
.multi-search .monitor-table td:nth-child(3),
.multi-search .monitor-table th:nth-child(4),
.multi-search .monitor-table td:nth-child(4){
white-space:nowrap !important;
}
}


/* ===== v8 zebra + mobile played wrap + narrower stations modal ===== */

/* subtle zebra rows */
.monitor-table tbody tr:nth-child(even) td{
background:rgba(255,255,255,0.42);
}

.monitor-table tbody tr:nth-child(odd) td{
background:rgba(255,255,255,0.18);
}

.delayed-row td{
background:#ffe7c2 !important;
}

.delayed-row:hover td{
background:#ffddb0 !important;
}

.offline-row td{
background:#ffd6d6 !important;
}

.offline-row:hover td{
background:#ffcccc !important;
}

/* narrower "other stations" popup on desktop */
.song-stations-content{
max-width:380px !important;
}

/* compact table inside other stations popup */
.song-stations-content .monitor-table{
font-size:12px;
}

.song-stations-content .monitor-table th,
.song-stations-content .monitor-table td{
padding:5px 6px !important;
}

.song-stations-content .monitor-table th:nth-child(2),
.song-stations-content .monitor-table td:nth-child(2),
.song-stations-content .monitor-table th:nth-child(3),
.song-stations-content .monitor-table td:nth-child(3){
width:58px !important;
max-width:58px !important;
min-width:58px !important;
white-space:normal !important;
line-height:1.1;
}

@media (max-width: 768px){
/* Played At on two lines on mobile NOW PLAYING */
.nowplaying-table th:nth-child(4),
.nowplaying-table td:nth-child(4){
width:66px !important;
min-width:66px !important;
max-width:66px !important;
white-space:normal !important;
line-height:1.05 !important;
word-break:break-word;
}

/* make mobile stations popup use available width but stay compact */
.song-stations-content{
max-width:90vw !important;
width:90vw !important;
}

.song-stations-content .monitor-table th,
.song-stations-content .monitor-table td{
font-size:12px !important;
padding:5px 5px !important;
}

.song-stations-content .monitor-table th:nth-child(2),
.song-stations-content .monitor-table td:nth-child(2),
.song-stations-content .monitor-table th:nth-child(3),
.song-stations-content .monitor-table td:nth-child(3){
width:52px !important;
min-width:52px !important;
max-width:52px !important;
white-space:normal !important;
line-height:1.05 !important;
}
}