/* ================================================================
 * DATEI: css/responsive.css
 * ZWECK: Responsive Breakpoints fuer das neue Layout
 *        (icon-rail + main-area + sidebar + main-content)
 * DESIGN: Refined Brass Studio -- warm charcoal + brass/gold accents
 * BREAKPOINTS:
 *   Desktop:  > 1200px  -- full layout
 *   Tablet:   900-1200px -- icon-rail icons only, sidebar toggleable
 *   Mobile:   < 900px   -- icon-rail hidden, bottom-nav, sidebar hidden
 * REFERENZIERT: css/variables.css, css/layout.css
 * REFERENZIERT VON: index.html
 * ================================================================ */

/* ========== TABLET (900px - 1200px) ========== */
@media (max-width: 1200px) {

    /* Icon rail: collapse to just icons, hide labels */
    .icon-rail {
        width: 52px;
        min-width: 52px;
    }

    .icon-rail .rail-label,
    .icon-rail .rail-item-text,
    .icon-rail .rail-section-title {
        display: none;
    }

    .icon-rail .rail-item {
        justify-content: center;
        padding: var(--space-2);
    }

    .icon-rail .rail-item i {
        margin: 0;
    }

    /* Sidebar: toggleable overlay */
    .sidebar {
        position: fixed;
        top: var(--topbar-height);
        left: var(--rail-width);
        height: calc(100vh - var(--topbar-height) - var(--statusbar-height));
        z-index: 100;
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
        box-shadow: none;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }

    /* Main content: no sidebar margin */
    .main-content {
        margin-left: 0;
    }

    /* Monitoring adjustments */
    .monitoring-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .monitoring-actions {
        flex-wrap: wrap;
    }

    /* Top bar: compact tabs */
    .top-bar .main-tab {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-xs);
        gap: var(--space-1);
    }

    .top-bar .main-tab span {
        display: none;
    }

    /* Slide-over panels: full width */
    .slide-over {
        width: 100%;
    }

    /* Media grid: smaller columns */
    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* Schedule grid: allow scroll */
    .schedule-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Player/Media overlays: wider */
    .player-overlay,
    .media-overlay {
        width: 480px;
        max-width: 90vw;
    }

    /* Reporting layout */
    .reporting-filters {
        flex-wrap: wrap;
    }
}

/* ========== SMALL TABLET (900px - 1024px) ========== */
@media (max-width: 1024px) {

    /* Sidebar: hidden by default, overlay when toggled */
    .sidebar {
        width: var(--sidebar-width);
    }

    /* Playlist panel: hide on narrow */
    .playlist-drop-panel {
        display: none;
    }

    /* Monitoring/Reporting: stack sidebar below */
    .player-view-layout {
        flex-direction: column;
    }

    .player-sidebar {
        width: 100%;
        min-width: unset;
        max-height: 280px;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    /* Reporting sidebar: inline */
    .reporting-layout {
        flex-direction: column;
    }

    .reporting-sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    /* Modal adjustments */
    .modal-content {
        width: 90%;
        max-width: 90%;
    }

    .group-modal-content {
        width: 90%;
        max-width: 90%;
    }
}

/* ========== MOBILE (< 900px) ========== */
@media (max-width: 900px) {

    /* Icon rail: hidden on mobile */
    .icon-rail {
        display: none;
    }

    /* Status bar: hidden on mobile */
    .status-bar {
        display: none;
    }

    /* Main area: full width */
    .main-area {
        margin-left: 0;
        width: 100%;
    }

    /* Sidebar: completely hidden */
    .sidebar {
        display: none !important;
    }

    /* Top bar: simplified */
    .top-bar {
        height: var(--topbar-height);
        padding: 0 var(--space-3);
    }

    .top-bar .main-tabs {
        display: none;
    }

    .top-bar .logo {
        font-size: var(--font-base);
    }

    .top-bar .user-name {
        display: none;
    }

    /* Main content: full width, account for bottom-nav */
    .main-content {
        margin-left: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Content views: remove flex constraints for scroll */
    .content-views {
        overflow: visible;
        flex: none;
    }

    .view {
        overflow: visible;
    }

    .view.active {
        display: flex;
        overflow: visible;
        flex: none;
    }

    .tab-content.active {
        overflow: visible;
        flex: none;
    }

    /* Media split view: stack vertically */
    .media-split-view {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .media-folders-panel {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        resize: none;
        border-bottom: 1px solid var(--border-subtle);
        flex-shrink: 0;
    }

    .media-browser-panel {
        min-width: 0;
        overflow: visible;
        flex: none;
    }

    .media-grid-container {
        overflow: visible;
        flex: none;
    }

    /* Media grid: responsive columns */
    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* Playlist panel: hidden */
    .playlist-drop-panel {
        display: none;
    }

    /* Context bar: compact */
    .context-bar {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }

    .breadcrumb {
        font-size: var(--font-xs);
    }

    /* Overlays: full width */
    .player-overlay,
    .media-overlay,
    .slide-over {
        width: 100% !important;
        max-width: 100%;
    }

    /* Content tabs: horizontal scroll */
    .content-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .content-tabs::-webkit-scrollbar {
        display: none;
    }

    .content-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Schedule header: wrap */
    .schedule-header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .schedule-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reporting */
    .reporting-toolbar {
        flex-wrap: wrap;
        padding: var(--space-3);
    }

    .reporting-filters {
        flex-direction: column;
        gap: var(--space-3);
    }

    .date-range-picker {
        width: 100%;
    }

    .reporting-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .reporting-chart-panel {
        max-height: 250px;
    }

    /* Monitoring */
    .monitoring-header {
        padding: var(--space-3);
        gap: var(--space-3);
        flex-shrink: 0;
    }

    .monitoring-stats {
        width: 100%;
        justify-content: space-between;
    }

    .stat-badge {
        flex: 1;
        min-width: auto;
        padding: var(--space-2) var(--space-3);
    }

    .stat-value {
        font-size: var(--font-lg);
    }

    .monitoring-toolbar {
        padding: var(--space-3);
        flex-wrap: wrap;
        flex-shrink: 0;
    }

    .monitoring-list {
        padding: var(--space-3);
    }

    .monitoring-item {
        flex-wrap: wrap;
    }

    /* Modals: near full-screen */
    .modal-content {
        width: 95%;
        max-width: 95%;
        max-height: 85vh;
    }

    .group-modal-content {
        width: 95%;
        max-width: 95%;
        max-height: 90vh;
    }
}

/* ========== SMALL MOBILE (< 520px) ========== */
@media (max-width: 520px) {

    .monitoring-stats {
        flex-wrap: wrap;
    }

    .stat-badge {
        flex: 1 1 calc(50% - var(--space-2));
    }

    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .monitoring-item-status {
        width: 100%;
        justify-content: flex-end;
    }

    .reporting-toolbar {
        gap: var(--space-2);
    }

    .toggle-group {
        width: 100%;
    }

    .top-bar {
        padding: 0 var(--space-2);
    }
}

/* ========== DESKTOP: hide mobile-only elements ========== */
@media (min-width: 901px) {

    .bottom-nav {
        display: none !important;
    }

    .sidebar-backdrop,
    .mobile-menu-btn {
        display: none;
    }

    #view-players {
        display: none !important;
    }
}