/* ══════════════════════════════════════════════════════════
   iWebCMS V2 — Premium Dashboard Design System
   ══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
    --grad-primary: linear-gradient(135deg, #008BFF 0%, #0069cc 100%);
    --grad-success: linear-gradient(135deg, #3BC1A8 0%, #2ed8a4 100%);
    --grad-danger: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    --grad-warning: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    --grad-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --grad-purple: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    --grad-dark: linear-gradient(135deg, #0A2940 0%, #16476A 100%);

    --bg-base: #0A2940;
    --bg-surface: rgba(15, 45, 66, 0.7);
    --bg-card: rgba(10, 41, 64, 0.55);
    --bg-card-hover: rgba(22, 71, 106, 0.7);
    --bg-elevated: rgba(22, 71, 106, 0.65);

    --border-subtle: rgba(168, 196, 216, 0.08);
    --border-default: rgba(168, 196, 216, 0.12);
    --border-hover: rgba(0, 139, 255, 0.25);

    --status-healthy: #00e676;
    --status-warning: #ffd740;
    --status-offair: #ff5252;
    --status-muted: #ff9100;
    --status-copierdown: #448aff;
    --status-audioproblem: #e040fb;
    --status-offline: #ff5252;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-glow-primary: 0 0 20px rgba(0, 139, 255, 0.15);

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

/* ── History Auto-Fill Grid ── */
.history-grid {
    display: grid;
    gap: 8px;
}
.history-grid-sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.history-grid-md { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.history-grid-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.history-grid-item { min-width: 0; }

/* ── Global Background ── */
.app-main-content {
    background: var(--mud-palette-background);
    min-height: 100vh;
}

/* ── Main page content: full height, no blank space below ── */
.main-page-content {
    padding: 16px 24px;
    min-height: calc(100vh - 0px);
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ── Card Gradient Backgrounds ── */
.mud-paper {
    background-image: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-background) 100%) !important;
}

/* Light theme: off-white instead of pure white */
.mud-theme-light .mud-paper,
.mud-paper {
    background-image: linear-gradient(135deg, var(--mud-palette-surface), color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-primary))) !important;
}

/* ── Users Page: Responsive Layout ── */
.users-layout {
    flex-wrap: nowrap;
}
.users-left-panel {
    min-width: 200px;
    transition: width 0.2s ease;
}
@media (max-width: 900px) {
    .users-layout {
        flex-direction: column !important;
        height: auto !important;
    }
    .users-left-panel {
        width: 100% !important;
        max-height: 45vh;
    }
}

/* ── Checkbox compact spacing ── */
.mud-checkbox {
    margin: 0 !important;
    padding: 2px 0 !important;
    gap: 4px !important;
}
.mud-checkbox-small .mud-icon-root {
    font-size: 18px !important;
}

/* ── Channel Assignment Drawer ── */
.allot-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: flex-end;
    animation: allotOverlayIn 0.15s ease;
}
.allot-drawer {
    width: min(520px, 90vw);
    height: 100vh;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    animation: allotSlideIn 0.2s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}
.allot-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}
.allot-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
}
.allot-drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}
@@keyframes allotOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@@keyframes allotSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ── Page Entrance Animation ── */
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.pa-4 { animation: pageEnter 0.4s ease-out; }

/* ══════════════════════════════════════════
   CUSTOM SIDEBAR LAYOUT
   ══════════════════════════════════════════ */

.app-layout {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 64px;
    background: var(--mud-palette-drawer-background);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-subtle);
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

.app-sidebar:hover {
    width: clamp(200px, 22vw, 260px);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.app-main-content {
    margin-left: 64px;
    flex: 1;
    min-height: 100vh;
    background: var(--mud-palette-background);
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
}

/* ── Sidebar Header ── */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    min-height: 68px;
}

.sidebar-header .mud-icon-root {
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
}

.app-sidebar:hover .sidebar-brand-text {
    opacity: 1;
}

.sidebar-subtitle {
    font-size: 0.7rem;
    opacity: 0.5;
}

.app-drawer-title {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    font-size: 1.25rem;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-spacer { flex: 1; }

/* ── Sidebar Footer ── */
.sidebar-footer {
    padding: 8px 8px 12px;
    border-top: 1px solid var(--border-subtle);
}

.sidebar-footer-divider {
    border-top: 1px solid var(--border-subtle);
    margin-bottom: 8px;
}

.sidebar-footer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-footer-row:hover {
    background: rgba(148, 163, 184, 0.06);
}

.sidebar-footer-row.clickable {
    cursor: pointer;
}

.sidebar-footer-text {
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar:hover .sidebar-footer-text {
    opacity: 0.7;
}

/* ── Navigation ── */
.app-nav .mud-nav-link {
    border-radius: var(--radius-sm) !important;
    margin: 2px 8px !important;
    padding: 10px 12px !important;
    transition: all var(--transition-base) !important;
    position: relative;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

.app-nav .mud-nav-link:hover {
    background-color: rgba(148, 163, 184, 0.06) !important;
    border-left-color: rgba(0, 139, 255, 0.3);
}

.app-nav .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(0, 139, 255, 0.1) 0%, transparent 100%) !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600 !important;
}

.app-nav .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Collapsed sidebar: hide text, center icons */
.app-sidebar:not(:hover) .mud-nav-link-text,
.app-sidebar:not(:hover) .mud-nav-group-expand-icon,
.app-sidebar:not(:hover) .mud-collapse {
    display: none !important;
}

.app-sidebar:not(:hover) .mud-nav-link {
    justify-content: center !important;
    padding: 10px 0 !important;
    margin: 2px 6px !important;
}

.app-sidebar:not(:hover) .app-nav-section {
    visibility: hidden;
    height: 8px;
    padding: 0 !important;
    margin: 0 6px;
}

.app-nav-section {
    padding: 16px 16px 6px 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    font-size: 0.65rem !important;
    color: rgba(148, 163, 184, 0.5) !important;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

/* ══════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════ */

.dashboard-header {
    margin-bottom: 28px;
    animation: pageEnter 0.4s ease-out;
}

.dashboard-title {
    font-weight: 800 !important;
    letter-spacing: -0.04em;
    font-size: 2rem !important;
    color: var(--mud-palette-text-primary);
}

/* ── Stat Cards ── */
.stat-card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--mud-palette-surface) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: all var(--transition-base) !important;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    opacity: 0.8;
}

.stat-card--networks::before { background: var(--grad-primary); }
.stat-card--channels::before { background: linear-gradient(135deg, #818cf8, #a78bfa); }
.stat-card--healthy::before { background: var(--grad-success); }
.stat-card--alerts::before { background: var(--grad-danger); }

.stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md), var(--shadow-glow-primary) !important;
    border-color: var(--border-hover) !important;
}

.stat-card-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px !important;
}

.stat-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-icon--total {
    background: linear-gradient(135deg, rgba(0, 139, 255, 0.15), rgba(0, 105, 204, 0.15));
    color: var(--mud-palette-primary);
    box-shadow: 0 4px 12px rgba(0, 139, 255, 0.1);
}

.stat-icon--channels {
    background: linear-gradient(135deg, rgba(0, 139, 255, 0.12), rgba(59, 193, 168, 0.12));
    color: var(--mud-palette-secondary);
    box-shadow: 0 4px 12px rgba(0, 139, 255, 0.1);
}

.stat-icon--healthy {
    background: linear-gradient(135deg, rgba(59, 193, 168, 0.15), rgba(46, 216, 164, 0.15));
    color: var(--mud-palette-success);
    box-shadow: 0 4px 12px rgba(59, 193, 168, 0.1);
}

.stat-icon--alert {
    background: linear-gradient(135deg, rgba(255, 65, 108, 0.15), rgba(255, 75, 43, 0.15));
    color: var(--mud-palette-error);
    box-shadow: 0 4px 12px rgba(255, 65, 108, 0.1);
}

.stat-value {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.stat-label {
    font-size: 0.78rem;
    opacity: 0.5;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

/* ── Section Titles ── */
.section-title {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    margin-bottom: 14px;
    opacity: 0.75;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-default);
}

/* ── Action Cards ── */
.action-card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--mud-palette-surface) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    cursor: pointer;
    transition: all var(--transition-base) !important;
    position: relative;
    overflow: hidden;
}

.action-card::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    background: var(--grad-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.action-card:hover::after { opacity: 1; }

.action-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--border-hover) !important;
}

.action-card-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px !important;
}

.action-card-inner .mud-icon-root:first-child {
    font-size: 1.8rem;
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

/* ── Status Breakdown ── */
.status-breakdown-card {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--mud-palette-surface) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: all var(--transition-base);
}

.status-breakdown-card:hover {
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-sm) !important;
}

.status-breakdown-card > .mud-paper-content,
.status-breakdown-card > div {
    padding: 18px !important;
}

.status-breakdown-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.status-dot-healthy { background: var(--status-healthy); box-shadow: 0 0 8px rgba(0, 230, 118, 0.3); }
.status-dot-warning { background: var(--status-warning); box-shadow: 0 0 8px rgba(255, 215, 64, 0.3); }
.status-dot-offair { background: var(--status-offair); box-shadow: 0 0 8px rgba(255, 82, 82, 0.3); }
.status-dot-muted { background: var(--status-muted); box-shadow: 0 0 8px rgba(255, 145, 0, 0.3); }
.status-dot-copierdown { background: var(--status-copierdown); box-shadow: 0 0 8px rgba(68, 138, 255, 0.3); }
.status-dot-audioproblem { background: var(--status-audioproblem); box-shadow: 0 0 8px rgba(224, 64, 251, 0.3); }
.status-dot-offline { background: var(--status-offline); box-shadow: 0 0 8px rgba(255, 82, 82, 0.3); }

/* ── Attention Cards ── */
.attention-card {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--mud-palette-surface) !important;
    backdrop-filter: blur(12px) !important;
    transition: all var(--transition-base);
}

.attention-card:hover {
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-sm) !important;
}

.attention-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--border-subtle);
}

.attention-card-inner:last-child { border-bottom: none; }

.attention-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attention-dot-offair {
    background: var(--status-offair);
    box-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
    animation: pulse-dot 2s ease-in-out infinite;
}

.attention-dot-warning {
    background: var(--status-warning);
    box-shadow: 0 0 8px rgba(255, 215, 64, 0.5);
    animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* ── Chart Container ── */
.chart-container {
    background: var(--mud-palette-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 24px;
    transition: all var(--transition-base);
}

.chart-container:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}

.chart-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 16px;
    letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════
   CHANNEL CARD
   ══════════════════════════════════════════ */

.channel-card {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    transition: all var(--transition-base) !important;
    background: var(--mud-palette-surface) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-subtle) !important;
}

.channel-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--border-hover) !important;
}

.channel-card .mud-card-media {
    background-color: #000;
    object-fit: contain;
}

.channel-card-status {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.channel-card-status.healthy { background: var(--grad-success); }
.channel-card-status.warning { background: var(--grad-warning); }
.channel-card-status.offair { background: var(--grad-danger); }
.channel-card-status.muted { background: linear-gradient(135deg, #ff9100, #ff6d00); }
.channel-card-status.copierdown { background: var(--grad-info); }
.channel-card-status.audioproblem { background: linear-gradient(135deg, #e040fb, #aa00ff); }

.channel-card .mud-card-header { padding: 10px 14px !important; }
.channel-card .mud-card-content { padding: 6px 14px 8px !important; }
.channel-card .mud-card-actions { padding: 4px 14px 10px !important; }

/* ── Status Glow ── */
.status-glow-warning { box-shadow: inset 0 3px 0 0 var(--status-warning), 0 0 16px rgba(255, 215, 64, 0.08) !important; }
.status-glow-offair { box-shadow: inset 0 3px 0 0 var(--status-offair), 0 0 16px rgba(255, 82, 82, 0.08) !important; }
.status-glow-muted { box-shadow: inset 0 3px 0 0 var(--status-muted), 0 0 16px rgba(255, 145, 0, 0.08) !important; }
.status-glow-copierdown { box-shadow: inset 0 3px 0 0 var(--status-copierdown), 0 0 16px rgba(68, 138, 255, 0.08) !important; }
.status-glow-audioproblem { box-shadow: inset 0 3px 0 0 var(--status-audioproblem), 0 0 16px rgba(224, 64, 251, 0.08) !important; }

/* ══════════════════════════════════════════
   HISTORY CARD
   ══════════════════════════════════════════ */

.history-card {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    transition: all var(--transition-base) !important;
    background: var(--mud-palette-surface) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.history-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--border-hover) !important;
}

.history-card.selected {
    border: 2px solid var(--mud-palette-primary) !important;
    background-color: rgba(0, 139, 255, 0.06) !important;
    box-shadow: 0 0 16px rgba(0, 139, 255, 0.1) !important;
}

.history-card .mud-card-media {
    background-color: #000;
    object-fit: contain;
}

.history-card .mud-card-content { padding: 10px 14px !important; }

.history-card-wrapper { position: relative; }

.selection-overlay {
    position: absolute;
    top: 8px; left: 8px;
    opacity: 0;
    transition: opacity var(--transition-base);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    padding: 2px;
    z-index: 2;
}

.history-card:hover .selection-overlay,
.history-card.selected .selection-overlay { opacity: 1; }

/* ══════════════════════════════════════════
   PREMIUM BUTTONS & FILTERS
   ══════════════════════════════════════════ */

.btn-gradient {
    background: var(--grad-primary) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all var(--transition-base) !important;
    box-shadow: 0 4px 12px rgba(0, 139, 255, 0.2) !important;
}

.btn-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 139, 255, 0.35) !important;
}

.filter-pill {
    border-radius: 20px !important;
    border: 1px solid var(--border-default) !important;
    background: transparent !important;
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.8rem !important;
    padding: 6px 16px !important;
    transition: all var(--transition-base) !important;
    text-transform: none !important;
}

.filter-pill:hover {
    border-color: var(--border-hover) !important;
    color: var(--mud-palette-primary) !important;
    background: rgba(0, 139, 255, 0.05) !important;
}

.filter-pill.active {
    background: var(--grad-primary) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 139, 255, 0.25) !important;
}

/* ── Premium Input Focus ── */
.mud-select .mud-input-outlined { border-color: var(--border-default) !important; }
.mud-select .mud-input-outlined:hover { border-color: var(--border-hover) !important; }
.mud-select .mud-input-focused .mud-input-outlined {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 139, 255, 0.15) !important;
}

/* ── Global Compact Inputs (all screen sizes) ── */
.mud-input .mud-input-slot,
.mud-text-field-input {
    font-size: 0.85rem;
}
.mud-input-label {
    font-size: 0.8rem;
}
.mud-select .mud-select-input {
    font-size: 0.85rem;
}
.mud-autocomplete .mud-input-slot {
    font-size: 0.85rem;
}

/* ── Premium Paper ── */
.premium-paper {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--mud-palette-surface) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* ══════════════════════════════════════════
   PROGRESS & LOADING
   ══════════════════════════════════════════ */

.mud-progress-linear { border-radius: 4px; overflow: hidden; }
.mud-progress-linear .mud-progress-linear-bar { background: var(--grad-primary) !important; }

/* ══════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════ */

.mud-pagination { gap: 4px; }
.mud-pagination .mud-button-root { border-radius: var(--radius-sm) !important; }
.mud-pagination .mud-button-root.mud-selected {
    background: var(--grad-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 139, 255, 0.2);
}

/* ══════════════════════════════════════════
   DIALOG
   ══════════════════════════════════════════ */

.mud-dialog {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border-subtle) !important;
    backdrop-filter: blur(24px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.mud-dialog-content { padding: 24px !important; }
.mud-dialog-title { border-bottom: 1px solid var(--border-subtle) !important; }

/* ══════════════════════════════════════════
   AVATAR
   ══════════════════════════════════════════ */

.mud-avatar {
    background: var(--grad-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 139, 255, 0.2);
}

/* ══════════════════════════════════════════
   SNACKBAR
   ══════════════════════════════════════════ */

.mud-snackbar {
    border-radius: var(--radius-md) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* ══════════════════════════════════════════
   CHIP
   ══════════════════════════════════════════ */

.mud-chip { border-radius: 8px !important; font-weight: 500 !important; font-size: 0.75rem !important; }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 600px) {
    .stat-card-inner { padding: 16px !important; gap: 12px; }
    .stat-icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .stat-value { font-size: 1.4rem !important; }
    .action-card-inner { padding: 16px !important; }
    .dashboard-title { font-size: 1.5rem !important; }
}

/* ══════════════════════════════════════════
   HEARTBEAT ANIMATION
   ══════════════════════════════════════════ */

@keyframes heartbeat-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    25% { opacity: 0.7; transform: scale(1.15); }
    50% { opacity: 1; transform: scale(1); }
    75% { opacity: 0.85; transform: scale(1.08); }
}

.status-glow-healthy {
    box-shadow: inset 0 3px 0 0 var(--status-healthy), 0 0 16px rgba(59, 193, 168, 0.12) !important;
}

/* ══════════════════════════════════════════
   CHANNEL CARD MEDIA WRAPPER + OVERLAY DOT
   ══════════════════════════════════════════ */

.channel-card-media-wrapper {
    position: relative;
}

.status-overlay-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.status-overlay-healthy { background: var(--status-healthy); box-shadow: 0 0 8px rgba(59, 193, 168, 0.5); animation: heartbeat-pulse 2s ease-in-out infinite; }
.status-overlay-warning { background: var(--status-warning); box-shadow: 0 0 8px rgba(255, 215, 64, 0.5); }
.status-overlay-offair { background: var(--status-offair); box-shadow: 0 0 8px rgba(255, 82, 82, 0.5); animation: pulse-dot 1s ease-in-out infinite; }
.status-overlay-offline { background: var(--status-offline); box-shadow: 0 0 8px rgba(255, 82, 82, 0.5); animation: pulse-dot 1s ease-in-out infinite; }
.status-overlay-muted { background: var(--status-muted); box-shadow: 0 0 8px rgba(255, 145, 0, 0.5); }
.status-overlay-copierdown { background: var(--status-copierdown); box-shadow: 0 0 8px rgba(68, 138, 255, 0.5); }
.status-overlay-audioproblem { background: var(--status-audioproblem); box-shadow: 0 0 8px rgba(224, 64, 251, 0.5); }

/* ── Offline status styles ── */
.channel-card-status.offline { background: linear-gradient(135deg, #ff5252, #d32f2f); }
.status-glow-offline { box-shadow: inset 0 3px 0 0 var(--status-offline), 0 0 16px rgba(255, 82, 82, 0.12) !important; }

/* ══════════════════════════════════════════
   COMPACT MINI CARD (compact mode)
   ══════════════════════════════════════════ */

.compact-channel-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.compact-mini-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--mud-palette-surface);
    transition: all var(--transition-base);
    overflow: hidden;
    flex: 0 1 auto;
    min-width: 220px;
    max-width: 320px;
}

.compact-mini-card:hover {
    background: var(--mud-palette-surface);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.compact-mini-status-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.compact-mini-content {
    flex: 1;
    min-width: 0;
    padding-right: 24px;
}

.compact-mini-network {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

.compact-mini-channel {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.compact-mini-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.compact-mini-audio {
    white-space: nowrap;
}

.compact-mini-offair { border-left: 3px solid var(--status-offair); }
.compact-mini-offline { border-left: 3px solid var(--status-offline); }
.compact-mini-warning { border-left: 3px solid var(--status-warning); }
.compact-mini-healthy { border-left: 3px solid var(--status-healthy); }
.compact-mini-muted { border-left: 3px solid var(--status-muted); }
.compact-mini-copierdown { border-left: 3px solid var(--status-copierdown); }
.compact-mini-audioproblem { border-left: 3px solid var(--status-audioproblem); }

/* ══════════════════════════════════════════
   STATUS DOTS (shared)
   ══════════════════════════════════════════ */

.compact-dot-healthy { background: var(--status-healthy); box-shadow: 0 0 6px rgba(59, 193, 168, 0.4); animation: heartbeat-pulse 2s ease-in-out infinite; }
.compact-dot-warning { background: var(--status-warning); box-shadow: 0 0 6px rgba(255, 215, 64, 0.4); }
.compact-dot-offair { background: var(--status-offair); box-shadow: 0 0 6px rgba(255, 82, 82, 0.4); animation: pulse-dot 1s ease-in-out infinite; }
.compact-dot-offline { background: var(--status-offline); box-shadow: 0 0 6px rgba(255, 82, 82, 0.4); animation: pulse-dot 1s ease-in-out infinite; }
.compact-dot-muted { background: var(--status-muted); }
.compact-dot-copierdown { background: var(--status-copierdown); }
.compact-dot-audioproblem { background: var(--status-audioproblem); }

/* ══════════════════════════════════════════
   PREVIEW PAGE — Toolbar & Filter Overlay
   ══════════════════════════════════════════ */

.preview-toolbar {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 12px;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--border-subtle);
}

.preview-toolbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Preview Stats Bar ── */
.preview-stats-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.preview-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.preview-stat-item strong {
    color: var(--mud-palette-text-primary);
}

.preview-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.preview-stat-dot-online { background: var(--status-healthy); box-shadow: 0 0 4px rgba(0, 230, 118, 0.4); }
.preview-stat-dot-offline { background: var(--status-offair); box-shadow: 0 0 4px rgba(255, 82, 82, 0.4); }
.preview-stat-dot-muted { background: var(--status-muted); box-shadow: 0 0 4px rgba(255, 145, 0, 0.4); }

.preview-stat-time {
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.preview-grid-container {
    padding: 8px;
}

.preview-fade-in {
    animation: pageEnter 0.4s ease-out;
}

.preview-filter-overlay {
    position: fixed;
    top: 0;
    left: 64px;
    right: 0;
    z-index: 20;
    animation: slideDown 0.25s ease-out;
    padding: 8px 12px;
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.filter-panel-paper {
    border-radius: var(--radius-md) !important;
    padding: 12px 16px !important;
}

.filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

/* ══════════════════════════════════════════
   AUDIO PROGRESS BARS
   ══════════════════════════════════════════ */

.audio-bars-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audio-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.audio-bar-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}

.audio-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.audio-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.audio-bar-left {
    background: linear-gradient(90deg, #008BFF, #38bdf8);
}

.audio-bar-right {
    background: linear-gradient(90deg, #3BC1A8, #2dd4bf);
}

.audio-bar-value {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    width: 22px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════
   CARD IMAGE OVERLAYS (Copier & Mute)
   ══════════════════════════════════════════ */

.card-overlay-icon {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.card-overlay-copier {
    bottom: 8px;
    left: 8px;
}

.card-overlay-mute {
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.55);
}

.card-overlay-mute:hover {
    background: rgba(0, 0, 0, 0.75);
}

.copier-running {
    background: rgba(59, 193, 168, 0.7);
    color: #fff;
}

.copier-down {
    background: rgba(255, 82, 82, 0.7);
    color: #fff;
}

/* ══════════════════════════════════════════
   RESPONSIVE — Small Desktop (≤1199px)
   ══════════════════════════════════════════ */

@media (max-width: 1199px) {
    :root {
        --radius-sm: 6px;
        --radius-md: 10px;
        --radius-lg: 13px;
        --radius-xl: 16px;
    }

    /* Sidebar narrower */
    .app-sidebar { width: 52px; }
    .app-sidebar:hover { width: clamp(180px, 20vw, 230px); }
    .app-main-content { margin-left: 52px; }

    .sidebar-header { padding: 14px 10px; min-height: 56px; gap: 10px; }
    .sidebar-header .mud-icon-root { font-size: 22px !important; }
    .app-drawer-title { font-size: 1.05rem; }
    .sidebar-subtitle { font-size: 0.6rem; }

    .app-nav .mud-nav-link {
        padding: 7px 10px !important;
        margin: 1px 6px !important;
        font-size: 0.82rem;
    }
    .app-sidebar:not(:hover) .mud-nav-link {
        padding: 7px 0 !important;
    }
    .app-nav-section {
        font-size: 0.58rem !important;
        padding: 12px 12px 4px !important;
    }

    .sidebar-footer { padding: 4px 6px 8px; }
    .sidebar-footer-row { padding: 3px 6px; gap: 6px; }
    .sidebar-footer-text { font-size: 0.72rem; }

    /* Headings smaller */
    .mud-typography-h4 { font-size: 1.35rem !important; }
    .mud-typography-h5 { font-size: 1.1rem !important; }
    .mud-typography-h6 { font-size: 0.95rem !important; }
    .dashboard-title { font-size: 1.6rem !important; }

    /* Buttons smaller */
    .mud-button-root {
        font-size: 0.82rem !important;
        min-height: 32px;
        padding: 4px 12px;
    }
    .mud-button-root .mud-icon-root {
        font-size: 18px !important;
    }
    .mud-button-size-small {
        min-height: 28px !important;
        font-size: 0.76rem !important;
        padding: 2px 8px !important;
    }
    .mud-icon-button { min-width: 32px !important; min-height: 32px !important; }
    .mud-icon-button .mud-icon-root { font-size: 18px !important; }
    .mud-icon-button-size-small { min-width: 26px !important; min-height: 26px !important; }
    .mud-icon-button-size-small .mud-icon-root { font-size: 16px !important; }

    /* Inputs smaller */
    .mud-input,
    .mud-input-root {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }
    .mud-input-slot {
        font-size: 0.78rem !important;
    }
    .mud-input-label,
    .mud-input-label-filled,
    .mud-input-label-outlined,
    .mud-input-label-text {
        font-size: 0.74rem !important;
    }
    .mud-input-helper-text {
        font-size: 0.68rem !important;
    }
    .mud-input-outlined,
    .mud-input-filled,
    .mud-text-field-input {
        min-height: 32px !important;
        padding: 4px 8px !important;
    }
    .mud-select {
        font-size: 0.78rem !important;
        min-height: 32px !important;
    }
    .mud-select-input {
        font-size: 0.78rem !important;
        padding: 4px 8px !important;
    }
    .mud-input-group-text {
        font-size: 0.78rem !important;
    }
    .mud-autocomplete {
        font-size: 0.78rem !important;
    }
    .mud-picker .mud-input-root {
        font-size: 0.78rem !important;
    }

    /* Tables smaller */
    .mud-table thead th,
    .mud-table tbody td {
        padding: 6px 10px !important;
        font-size: 0.82rem !important;
    }
    .mud-table thead th { font-size: 0.78rem !important; }
    .mud-table-toolbar { padding: 6px 12px !important; }

    /* Chips smaller */
    .mud-chip {
        font-size: 0.7rem !important;
        height: 24px !important;
        padding: 0 8px !important;
    }
    .mud-chip-size-small {
        height: 20px !important;
        font-size: 0.65rem !important;
    }

    /* Cards less padding */
    .stat-card-inner { padding: 16px !important; gap: 14px; }
    .stat-icon { width: 42px; height: 42px; font-size: 1.2rem; }
    .stat-value { font-size: 1.5rem !important; }
    .action-card-inner { padding: 16px !important; gap: 14px; }
    .action-card-inner .mud-icon-root:first-child { font-size: 1.4rem; }

    /* Dialog tighter */
    .mud-dialog-content { padding: 18px !important; }
    .mud-dialog { max-width: 420px !important; }

    /* Paper less padding */
    .mud-paper { border-radius: var(--radius-md) !important; }

    /* Snackbar smaller */
    .mud-snackbar {
        font-size: 0.82rem !important;
        padding: 8px 14px !important;
    }

    /* MudGrid spacing */
    .mud-grid-item { padding: 4px !important; }

    /* Main page content tighter */
    .main-page-content { padding: 10px 14px; }

    /* Checkbox compact */
    .mud-checkbox { margin: 0 !important; padding: 0 !important; }
    .mud-checkbox span { font-size: 0.82rem !important; }

    /* Filter pills */
    .filter-pill {
        font-size: 0.72rem !important;
        padding: 4px 12px !important;
    }

    /* Preview toolbar */
    .preview-toolbar { padding: 6px 10px; }

    /* MudItem padding */
    .mud-item { padding: 4px !important; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Small Screens
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    .app-sidebar {
        width: 48px;
    }

    .app-sidebar:hover {
        width: clamp(180px, 55vw, 240px);
    }

    .app-main-content {
        margin-left: 48px;
    }

    .sidebar-header {
        padding: 12px 8px;
        min-height: 52px;
    }

    .sidebar-header .mud-icon-root {
        font-size: 20px !important;
    }

    .app-drawer-title {
        font-size: 1rem;
    }

    .sidebar-subtitle {
        font-size: 0.6rem;
    }

    .app-nav .mud-nav-link {
        padding: 8px 10px !important;
        margin: 1px 4px !important;
        font-size: 0.82rem;
    }

    .app-sidebar:not(:hover) .mud-nav-link {
        padding: 8px 0 !important;
        margin: 1px 4px !important;
    }

    .app-nav-section {
        font-size: 0.58rem !important;
        padding: 10px 10px 4px !important;
    }

    .sidebar-footer {
        padding: 4px 4px 8px;
    }

    .sidebar-footer-row {
        padding: 3px 6px;
        gap: 6px;
    }

    .sidebar-footer-text {
        font-size: 0.72rem;
    }

    .mud-table thead th,
    .mud-table tbody td {
        padding: 6px 8px !important;
        font-size: 0.8rem;
    }

    .mud-toolbar {
        padding: 4px 8px !important;
        gap: 4px !important;
        flex-wrap: wrap;
    }

    /* Even smaller inputs on tablet */
    .mud-input, .mud-input-slot, .mud-select-input {
        font-size: 0.74rem !important;
    }
    .mud-input-label, .mud-input-label-text {
        font-size: 0.7rem !important;
    }

    .pa-4 {
        padding: 8px !important;
    }
}

@media (max-width: 480px) {
    .app-sidebar {
        width: 42px;
    }

    .app-sidebar:hover {
        width: clamp(170px, 70vw, 220px);
    }

    .app-main-content {
        margin-left: 42px;
    }

    .sidebar-header {
        padding: 10px 6px;
        min-height: 46px;
    }

    .sidebar-header .mud-icon-root {
        font-size: 18px !important;
    }

    .app-nav .mud-nav-link {
        padding: 6px 8px !important;
        margin: 1px 2px !important;
        font-size: 0.78rem;
    }

    .app-sidebar:not(:hover) .mud-nav-link {
        padding: 6px 0 !important;
    }

    .mud-button-root {
        font-size: 0.78rem;
        padding: 4px 10px;
    }

    /* Smallest inputs on mobile */
    .mud-input, .mud-input-slot, .mud-select-input, .mud-input-group-text {
        font-size: 0.7rem !important;
    }
    .mud-input-label, .mud-input-label-text {
        font-size: 0.66rem !important;
    }
    .mud-select, .mud-text-field-input {
        min-height: 28px !important;
        padding: 2px 6px !important;
    }
}