/* ==========================================================================
   report.css — Scoped styles for the TV Reception Report
   All rules scoped under #report-container to prevent Bootstrap collisions.
   Compass overlay is unscoped (lives at document root level).
   ========================================================================== */

/* --- Report Container Base --- */
#report-container {
   font-family: 'Inter', sans-serif;
   font-weight: 400;
   background: #f5f4ec;
   color: #403f40;
   padding: 1.5rem;
   margin: 0;
}


/* --- Report Header --- */
#report-container .report-header {
   background: #1a4d9b;
   color: #ffffff;
   padding: 1.75rem 2rem;
   border-radius: 0.75rem;
   margin-bottom: 2rem;
   box-shadow: 0 8px 24px rgba(26, 77, 150, 0.2);

   position: relative;
   overflow: hidden;
}
#report-container .report-header::before {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 5px;
   background: #dac52a;
}
#report-container .report-logo {
   display: block;
   height: 1.6rem;
   width: auto;
   margin-bottom: 1rem;
   position: relative;
   z-index: 2;
}
#report-container .report-header h5 { margin: 0 0 0.5rem; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; position: relative; z-index: 2; }
#report-container .report-header p { margin: 0; font-size: 0.95rem; opacity: 0.9; font-weight: 400; position: relative; z-index: 2; }
#report-container .report-header .brandmark-watermark {
   position: absolute;
   right: 3rem;
   top: 50%;
   transform: translateY(-50%);
   width: 8rem;
   height: 8rem;
   padding: 1.75rem;
   opacity: 0.25;
   pointer-events: none;
   z-index: 1;
}

/* --- Transmitter List (Header) --- */
#report-container .tx-list-container {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 0.35rem;
   position: relative;
   z-index: 2;
   max-width: 55%;
}
#report-container .tx-list-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   background: #363636;
   padding: 0.3rem 0.6rem;
   border-radius: 1rem;
   color: #ffffff;
   font-weight: 700;
   font-size: 0.75rem;
   letter-spacing: 0.01em;
   white-space: nowrap;
   border: 1.5px solid rgba(255, 255, 255, 0.15);
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease;
}
#report-container .tx-list-item:hover {
   background: #2e2e2e;
}
#report-container .tx-list-item.tx-selected {
   background: #2a2a2a;
   border-color: #dac52a;
   border-width: 2px;
   box-shadow: 0 0 8px rgba(218, 197, 42, 0.35);
}
#report-container .tx-list-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   display: inline-block;
   flex-shrink: 0;
}

/* --- Cards --- */
#report-container .card {
   border: none;
   background: #ffffff;
   box-shadow: 0 4px 16px rgba(64,63,64,0.06);
   margin-bottom: 1.5rem;
   border-radius: 0.75rem;
   overflow: hidden;
   transition: box-shadow 0.25s ease, transform 0.25s ease;
}

#report-container .card:hover {
   box-shadow: 0 8px 24px rgba(64,63,64,0.1);
   transform: translateY(-2px);
}
#report-container .card-header {
   background: #ffffff;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 0.85rem;
   letter-spacing: 0.05em;
   color: #1a4d9b;
   border-bottom: 2px solid #f5f4ec;
   padding: 1.25rem 1.5rem;
   display: flex;
   align-items: center;
}
#report-container .card-body { background: #ffffff; padding: 1.5rem; }

/* --- Data Rows --- */
#report-container .data-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 1rem 1.5rem;
   border-bottom: 1px solid #f5f4ec;
   background: #ffffff;
   transition: background 0.2s ease;
}
#report-container .data-row:nth-child(even) { background: rgba(245,244,236,0.3); }
#report-container .data-row:last-child { border-bottom: none; }
#report-container .data-row:hover { background: rgba(245,244,236,0.8); }
#report-container .data-key {
   color: #403f40;
   font-weight: 400;
   font-size: 0.9rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
#report-container .data-key .material-icons { font-size: 1.25rem; color: #1a4d9b; opacity: 0.8; }
#report-container .data-value {
   color: #403f40;
   text-align: right;
   max-width: 60%;
   font-size: 0.95rem;
   font-weight: 700;
   line-height: 1.4;
}

/* --- Dashboard Metrics Grid --- */
#report-container .stats-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   padding: 0 1.5rem 1.5rem;
}
#report-container .stat-card {
   background: #f5f4ec;
   border-radius: 0.5rem;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   border: 1px solid rgba(0,0,0,0.03);
}
#report-container .stat-icon { color: #1a4d9b; font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.9; }
#report-container .stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #403f40; opacity: 0.8; margin-bottom: 0.25rem; font-weight: 700; line-height: 1.2; }
#report-container .stat-value { font-size: 1.1rem; font-weight: 700; color: #403f40; line-height: 1.2; }

#report-container .badge-signal {
   font-size: 0.75rem;
   padding: 0.35rem 0.6rem;
   border-radius: 2rem;
   box-shadow: 0 2px 4px rgba(0,0,0,0.08);
   font-weight: 700;
   letter-spacing: 0.02em;
   text-transform: uppercase;
   display: inline-block;
   margin-top: 0.25rem;
}

#report-container #waiting { color: #403f40; text-align: center; padding: 4rem 0; font-weight: 400; font-size: 1rem; }

/* --- Channel List (matches popup styling) --- */
#report-container .report-ch-list {
   padding: 0 1.5rem 1.5rem;
}
#report-container .report-ch-row {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.7rem 0.5rem;
   border-bottom: 1px solid rgba(245,244,236,0.6);
   font-size: 0.9rem;
}
#report-container .report-ch-row:last-child { border-bottom: none; }
#report-container .report-ch-header {
   background: #f5f4ec;
   border-radius: 6px 6px 0 0;
   border-bottom: 2px solid #fff;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 0.75rem;
   letter-spacing: 0.05em;
   color: #1a4d9b;
   padding: 0.65rem 0.5rem;
}
#report-container .report-ch-net {
   flex: 1;
   font-weight: 700;
   color: #403f40;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
#report-container .report-ch-detail {
   width: 5.5rem;
   text-align: right;
   font-variant-numeric: tabular-nums;
   color: #403f40;
   font-weight: 400;
   white-space: nowrap;
}
#report-container .report-ch-num {
   color: #1a4d9b;
   font-weight: 700;
}
#report-container .report-ch-pol,
#report-container .report-ch-pol-header {
   width: 26px;
   text-align: center;
   font-size: 0.72rem;
   font-weight: 700;
   border-radius: 4px;
   padding: 2px 0;
   flex-shrink: 0;
}
#report-container .report-ch-pol-header {
   background: transparent;
   color: #1a4d9b;
}
#report-container .report-ch-pol.pol-h { background: #1a4d9b; color: #fff; }
#report-container .report-ch-pol.pol-v { background: #dac52a; color: #403f40; }
#report-container .report-ch-row:nth-child(even):not(.report-ch-header) {
   background: rgba(245,244,236,0.25);
}

/* --- Product Recommendation Cards --- */
#report-container .product-card {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   padding: 1.5rem;
   background: #ffffff;
   cursor: pointer;
   text-decoration: none;
   color: inherit;
   transition: background 0.2s ease;
}
#report-container .product-card:hover { background: #f5f4ec; }
#report-container .product-thumb {
   width: 120px;
   height: 120px;
   border-radius: 0.75rem;
   object-fit: contain;
   background: #ffffff;
   border: 1px solid #f5f4ec;
   box-shadow: 0 2px 8px rgba(64,63,64,0.06);
   flex-shrink: 0;
   padding: 0.25rem;
}
#report-container .product-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
#report-container .product-name {
   font-weight: 700;
   font-size: 1.05rem;
   color: #1a4d9b;
   margin: 0 0 0.35rem;
   line-height: 1.3;
}
#report-container .product-desc {
   font-size: 0.9rem;
   color: #403f40;
   opacity: 0.85;
   margin: 0 0 0.75rem;
   line-height: 1.4;
   font-weight: 400;
}

/* --- Alternatives Dropdown --- */
#report-container .alt-products-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 0.85rem 1rem;
   background: #f5f4ec;
   color: #1a4d9b;
   font-size: 0.8rem;
   font-weight: 700;
   cursor: pointer;
   user-select: none;
   transition: background 0.2s ease;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}
#report-container .alt-products-toggle:hover { background: #ebe9db; }
#report-container .alt-products-toggle .material-icons { font-size: 1.25rem; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
#report-container .alt-products-toggle.open .material-icons { transform: rotate(180deg); }
#report-container .alt-products-list {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#report-container .alt-products-list.open { max-height: 800px; }
#report-container .alt-product-item {
   display: flex;
   align-items: center;
   gap: 1.25rem;
   padding: 1.25rem 1.5rem;
   border-top: 1px solid #f5f4ec;
   background: #ffffff;
   text-decoration: none;
   color: inherit;
   transition: background 0.2s ease;
}
#report-container .alt-product-item:hover { background: rgba(245,244,236,0.6); }
#report-container .alt-product-thumb {
   width: 64px;
   height: 64px;
   border-radius: 0.5rem;
   object-fit: contain;
   background: #ffffff;
   border: 1px solid #f5f4ec;
   flex-shrink: 0;
   padding: 0.2rem;
}
#report-container .alt-product-name {
   font-weight: 700;
   font-size: 0.95rem;
   color: #1a4d9b;
   flex: 1;
   min-width: 0;
   line-height: 1.3;
}
#report-container .alt-product-arrow {
   color: #dac52a;
   font-size: 1.25rem;
   transition: transform 0.2s ease;
}
#report-container .product-nav-arrow {
   transition: transform 0.2s ease, opacity 0.2s ease;
}
#report-container .product-card:hover .product-nav-arrow {
   transform: translateX(4px);
   opacity: 0.8;
}
#report-container .alt-product-item:hover .alt-product-arrow { transform: translateX(3px); }

/* --- Info/Warning Banners --- */
#report-container .info-banner {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 1.25rem;
   background: #f5f4ec;
   margin: 1.5rem;
   border-radius: 0.5rem;
   border-left: 4px solid #1a4d9b;
}
#report-container .info-banner .material-icons { color: #1a4d9b; font-size: 1.25rem; margin-top: 0.05rem; }
#report-container .info-banner-text { font-size: 0.9rem; font-weight: 400; color: #403f40; line-height: 1.5; margin: 0; }
#report-container .info-banner-text strong { font-weight: 700; color: #1a4d9b; }

#report-container .warning-banner {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 1.25rem;
   background: rgba(218, 197, 42, 0.15);
   margin: 1.5rem;
   border-radius: 0.5rem;
   border-left: 4px solid #dac52a;
}
#report-container .warning-banner .material-icons { color: #dac52a; font-size: 1.25rem; margin-top: 0.05rem; }
#report-container .warning-banner-text { font-size: 0.9rem; font-weight: 400; color: #403f40; line-height: 1.5; margin: 0; }
#report-container .warning-banner-text strong { font-weight: 700; color: #403f40; }

/* --- Skeletons --- */
#report-container .skeleton {
   background: linear-gradient(90deg, #f5f4ec 25%, #ebe9db 50%, #f5f4ec 75%);
   background-size: 200% 100%;
   animation: skeleton-loading 1.5s infinite linear;
   border-radius: 0.25rem;
}
@keyframes skeleton-loading {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
}
#report-container .skeleton-card { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.5rem; background: #ffffff; border-radius: 0.75rem; border: 1px solid #f5f4ec; margin-bottom: 1.5rem; box-shadow: 0 4px 16px rgba(64,63,64,0.06); }
#report-container .skeleton-thumb { width: 120px; height: 120px; flex-shrink: 0; border-radius: 0.75rem; padding: 0.25rem; }
#report-container .skeleton-info { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 0.5rem; }
#report-container .skeleton-text { height: 1rem; margin-bottom: 0.75rem; width: 100%; }
#report-container .skeleton-text.short { width: 70%; }
#report-container .skeleton-text.title { height: 1.25rem; width: 45%; margin-bottom: 1rem; }

/* --- Mobile Responsive --- */
@media (max-width: 576px) {
   #report-container .report-header {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 1.25rem !important;
   }
   #report-container .tx-list-container {
      max-width: 100%;
      width: 100%;
      align-items: stretch;
   }
   #report-container .tx-list-item {
      justify-content: flex-start;
      white-space: normal;
   }
}

/* --- Report Action Buttons (Print / Share) --- */
#report-container .report-action-btn {
   background: transparent;
   border: 2px solid #1a4d9b;
   color: #1a4d9b;
   font-weight: 700;
   padding: 0.6rem 1.25rem;
   border-radius: 0.5rem;
   transition: background 0.2s, color 0.2s;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
   align-items: center;
}
#report-container .report-action-btn:hover {
   background: #1a4d9b;
   color: #ffffff;
}
#report-container .report-action-btn:disabled {
   opacity: 0.7;
   cursor: wait;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- Transmitter Compass Button Card --- */
#report-container .compass-btn-card {
   display: none !important;
   cursor: pointer;
   transition: background 0.2s ease, transform 0.1s ease, border-color 0.4s ease;
   border: 2px solid transparent;
   -webkit-tap-highlight-color: transparent;
}
#report-container .compass-btn-card:active { transform: scale(0.96); background: rgba(26,77,150,0.06); }
#report-container.compass-supported .compass-btn-card { display: flex !important; animation: compassPulse 2.5s ease-in-out infinite; }
#report-container.compass-supported .bearing-card-desktop { display: none !important; }

@keyframes compassPulse {
   0%, 100% { border-color: rgba(218,197,42,0.2); box-shadow: 0 2px 4px rgba(0,0,0,0.02); transform: scale(1); background: #f5f4ec; }
   50% { border-color: #dac52a; box-shadow: 0 4px 16px rgba(218,197,42,0.35); transform: scale(1.02); background: #ffffff; }
}

#report-container .compass-btn-cta {
   font-size: 0.7rem; color: #1a4d9b; font-weight: 700;
   display: flex; align-items: center; gap: 0.2rem;
   margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ==========================================================================
   Compass Overlay — UNSCOPED (lives at document root, not inside offcanvas)
   ========================================================================== */
.compass-overlay {
   position: fixed; top: 0; left: 0; right: 0; bottom: 0;
   width: 100vw; height: 100dvh; min-height: 100vh;
   background: rgba(26, 77, 150, 0.95);
   z-index: 99999;
   display: flex; flex-direction: column; align-items: center; justify-content: center;
   opacity: 0; visibility: hidden;
   transition: opacity 0.35s ease, visibility 0.35s ease;
   backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
   padding: 2rem; box-sizing: border-box;
   user-select: none; -webkit-user-select: none; touch-action: none;
   font-family: 'Inter', sans-serif;
}
.compass-overlay.open { opacity: 1; visibility: visible; }

.compass-close-btn {
   position: absolute; top: max(1rem, env(safe-area-inset-top, 1rem)); right: 1rem;
   background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.15);
   color: #fff; width: 44px; height: 44px; border-radius: 50%;
   cursor: pointer; display: flex; align-items: center; justify-content: center;
   transition: background 0.2s ease; z-index: 10;
}
.compass-close-btn:active { background: rgba(255,255,255,0.25); }
.compass-close-btn .material-icons { font-size: 1.5rem; }

.compass-info { text-align: center; color: #fff; margin-bottom: 2rem; }
.compass-info-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; margin-bottom: 0.3rem; }
.compass-info-title { font-size: 1.15rem; font-weight: 700; color: #dac52a; margin: 0 0 0.2rem; }
.compass-info-bearing { font-size: 0.9rem; opacity: 0.7; margin: 0; font-weight: 400; color: #fff; }
.compass-container { position: relative; width: 280px; height: 280px; }
.compass-heading-readout { text-align: center; color: #fff; margin-top: 2rem; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.compass-heading-suffix { font-size: 1rem; opacity: 0.5; font-weight: 400; }
.compass-heading-label { text-align: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; opacity: 0.4; margin-top: 0.3rem; font-weight: 700; }
.compass-error { text-align: center; color: #dac52a; font-size: 0.9rem; padding: 1rem; max-width: 300px; }
.compass-error .material-icons { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; opacity: 0.8; }
.compass-calibration-hint { text-align: center; color: rgba(255,255,255,0.4); font-size: 0.75rem; margin-top: 1.5rem; max-width: 240px; line-height: 1.4; }