/* ============================================
   RESPONSIVE STYLES
   All media queries consolidated by breakpoint
   ============================================ */

/* ============================================
   TABLET - max-width: 1024px
   ============================================ */

@media (max-width: 1024px) {
    /* Header */
    .header-content {
        flex-wrap: wrap;
    }

    .nav {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Layout */
    .container {
        padding: var(--spacing-lg);
    }

    .section {
        padding: 1.25rem;
    }

    /* Charts */
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Entry-Composer auf Tablet wrappen */
    .entry-composer-row {
        flex-wrap: wrap;
    }

    .entry-composer-description {
        flex: 1 1 100%;
    }

    /* Stats */
    .stats-bar-content {
        gap: var(--spacing-md);
    }

    .stat-item {
        font-size: 0.9rem;
    }

    /* Dashboard Quick Stats */
    .quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Heatmap */
    .heatmap-row {
        grid-template-columns: 40px 1fr 60px;
        gap: var(--spacing-sm);
    }

    .day-sparkline {
        display: none;
    }

    /* Tag Bars */
    .tag-bar {
        grid-template-columns: 120px 1fr 70px 30px;
    }

    /* Forms */
    .form-group {
        margin-bottom: var(--spacing-md);
    }
}

/* ============================================
   MOBILE - max-width: 768px
   ============================================ */

@media (max-width: 768px) {
    /* Show burger menu, hide desktop nav */
    .burger-menu {
        display: flex;
    }

    .desktop-only {
        display: none !important;
    }

    /* Mobile Navigation: Right-Side-Drawer im iOS-Settings-Stil */
    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        bottom: auto;
        left: auto;
        width: min(86vw, 340px);
        max-width: 340px;
        max-height: none;
        height: 100vh;
        height: 100dvh;
        background: var(--white);
        padding: 0 0 env(safe-area-inset-bottom);
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        order: initial;
        flex-wrap: nowrap;
        transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
        overflow-y: auto;
        border-radius: 0;
        border-left: 1px solid var(--gray-200);
        border-top: 0;
        box-shadow: -20px 0 50px rgba(15, 12, 20, 0.18);
    }

    [data-theme="dark"] .nav {
        background: var(--background);
        border-left-color: rgba(64, 64, 64, 0.6);
        border-top-color: transparent;
    }

    .nav.mobile-active {
        right: 0;
        bottom: auto;
    }

    /* Drag-Handle entfaellt im Right-Drawer */
    .nav::before {
        content: none;
    }

    /* Mobile-only Sub-Elemente einblenden (Specificity > FA) */
    .nav-link .nav-link-icon {
        display: inline-flex;
    }
    .nav-link i.nav-link-chevron {
        display: inline-block;
    }
    .mobile-actions .mobile-action-label {
        display: block;
    }

    /* User-Header oben in der Sheet */
    .mobile-user-section {
        display: block;
        padding: 18px var(--spacing-lg) var(--spacing-md);
        border-bottom: 1px solid var(--gray-200);
        margin: 0;
    }

    [data-theme="dark"] .mobile-user-section {
        border-bottom-color: rgba(64, 64, 64, 0.6);
    }

    .mobile-user-info {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .user-avatar {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: var(--white);
    }

    .user-name-mobile {
        font-size: 1.05rem;
        font-weight: 600;
    }

    .org-name-mobile {
        font-size: 0.825rem;
        color: var(--gray-500);
    }

    /* Listen-Zeilen */
    .nav-link {
        display: grid;
        grid-template-columns: 32px 1fr auto;
        align-items: center;
        gap: 14px;
        padding: 14px var(--spacing-lg);
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--gray-200);
        font-size: 1rem;
        font-weight: 500;
        color: var(--dark);
        text-align: left;
        transition: background-color var(--transition-fast);
        height: auto;
        border-radius: 0;
    }

    [data-theme="dark"] .nav-link {
        border-bottom-color: rgba(64, 64, 64, 0.6);
    }

    .nav-link:active {
        background: var(--gray-100);
    }

    [data-theme="dark"] .nav-link:active {
        background: rgba(64, 64, 64, 0.4);
    }

    .nav-link:hover {
        background: var(--gray-50);
    }

    .nav-link-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--gray-100);
        color: var(--gray-600);
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        transition: background-color var(--transition-fast), color var(--transition-fast);
    }

    [data-theme="dark"] .nav-link-icon {
        background: rgba(64, 64, 64, 0.5);
        color: var(--dark);
    }

    .nav-link-label {
        flex: 1;
        min-width: 0;
    }

    .nav-link-chevron {
        color: var(--gray-300);
        font-size: 0.75rem;
    }

    .nav-link.active {
        background: transparent;
        color: var(--primary);
        font-weight: 600;
    }

    .nav-link.active .nav-link-icon {
        background: var(--primary);
        color: var(--white);
    }

    .nav-link.active .nav-link-chevron {
        color: var(--primary);
    }

    /* Quick-Actions als Tile-Reihe */
    .mobile-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
        padding: var(--spacing-lg);
        margin: 0;
        border-top: 1px solid var(--gray-200);
        background: var(--gray-50);
    }

    [data-theme="dark"] .mobile-actions {
        border-top-color: rgba(64, 64, 64, 0.6);
        background: rgba(38, 38, 38, 0.4);
    }

    .mobile-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: auto;
        height: auto;
        min-height: 64px;
        padding: 12px 8px;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        color: var(--dark);
        font-size: 1rem;
        cursor: pointer;
        transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    }

    [data-theme="dark"] .mobile-action-btn {
        background: rgba(38, 38, 38, 0.6);
        border-color: rgba(64, 64, 64, 0.6);
    }

    .mobile-action-btn > i,
    .mobile-action-btn > span:not(.mobile-action-label) {
        font-size: 1.05rem;
        color: var(--primary);
    }

    .mobile-action-label {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--gray-500);
        letter-spacing: 0.02em;
    }

    .mobile-action-btn:hover {
        border-color: var(--primary);
        background: var(--primary-lighter);
        color: var(--primary);
        transform: none;
    }

    .mobile-action-btn:hover .mobile-action-label {
        color: var(--primary);
    }

    .mobile-action-btn.logout > i {
        color: var(--error);
    }

    .mobile-action-btn.logout:hover {
        border-color: var(--error);
        background: rgba(231, 76, 60, 0.08);
    }

    .mobile-action-btn.logout:hover .mobile-action-label,
    .mobile-action-btn.logout:hover > i {
        color: var(--error-dark);
    }

    /* Header */
    .header {
        padding: 10px 0;
    }

    .header-content {
        gap: var(--spacing-md);
        padding: 0 var(--spacing-md);
        min-height: 44px;
        flex-wrap: nowrap;
    }

    .main {
        padding-top: 64px;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    /* Stats Bar */
    .stats-bar {
        padding: var(--spacing-075) 0;
    }

    .stats-bar-content {
        flex-wrap: wrap;
        gap: var(--spacing-075);
        padding: 0 var(--spacing-md);
    }

    .stat-item {
        flex: 1 1 calc(50% - var(--spacing-075));
        min-width: 140px;
        font-size: 0.85rem;
        flex-direction: column;
        text-align: center;
        gap: 2px;
    }

    /* Container & Sections */
    .container {
        padding: var(--spacing-md);
    }

    .section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .section-header {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon text"
            "actions actions";
        gap: var(--spacing-sm) var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .section-header-icon { grid-area: icon; width: 40px; height: 40px; font-size: 1rem; }
    .section-header-text { grid-area: text; }
    .section-header h2 { font-size: 1.25rem; }
    .section-header .section-actions {
        grid-area: actions;
        justify-self: stretch;
        gap: var(--spacing-sm);
    }

    .section-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    /* Hero */
    .hero h1 {
        font-size: 2rem;
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Timer-Dock auf Mobile kompakter */
    .timer-dock {
        bottom: 12px;
        right: 12px;
        left: auto;
        padding: 6px 8px 6px 6px;
    }

    .timer-dock-handle {
        width: 36px;
        height: 36px;
    }

    .timer-dock-display {
        font-size: 0.95rem;
    }

    /* Entry-Composer auf Mobile stapeln */
    .entry-composer-row {
        flex-direction: column;
        gap: 1px;
    }

    .entry-composer-arrow {
        display: none;
    }

    .entry-composer-duration {
        max-width: none;
        flex: 1 1 auto;
    }

    .entry-composer-submit {
        padding: 14px var(--spacing-lg);
    }

    .quick-access-grid {
        grid-template-columns: 1fr;
    }

    /* Forms */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
    }

    .form-group {
        width: 100%;
    }

    /* Buttons */
    .btn {
        padding: var(--spacing-075) 1.25rem;
        min-height: 44px;
    }

    .btn-small {
        padding: 0.65rem var(--spacing-md);
        min-height: 40px;
    }

    .section-actions .btn {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* View Toggle (Liste/Kalender) - gleichmaessige Buttons */
    .view-toggle {
        display: flex;
        gap: var(--spacing-sm);
    }

    .view-toggle .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Week-Filter: links-buendig statt space-between, sonst entstehen Luecken */
    .week-filter-bar {
        justify-content: flex-start;
    }

    .week-filter-group {
        width: 100%;
    }

    .week-filter-group .btn,
    .week-filter-bar select {
        width: 100%;
        min-width: 0;
    }

    /* Sort-Controls auf Dashboard-Karten */
    .card-controls {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .card-controls .btn,
    .card-controls .btn-toggle,
    .card-controls .sort-select,
    .card-controls select {
        flex: 1 1 calc(50% - var(--spacing-sm));
        min-width: 0;
    }

    /* Timer-Buttons stacken full-width statt nebeneinander */
    .timer-controls {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .timer-controls .btn {
        flex: 1 1 calc(50% - var(--spacing-sm));
        min-width: 0;
    }

    /* Globale Sicherheitsnetze gegen Button-/Input-Ueberhang */
    .btn,
    .btn-toggle,
    button,
    input,
    select,
    textarea {
        max-width: 100%;
    }

    /* Lange Labels in Buttons brechen statt zu ueberlaufen */
    .btn {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    /* Eintragsformular: Submit-Button full-width */
    .time-entry-form > form > button[type="submit"] {
        width: 100%;
    }

    /* Notification: nicht ueberbreit */
    .notification {
        min-width: 0;
        max-width: 100%;
    }

    /* User-Select / Org-Select duerfen Container nicht sprengen */
    .user-select {
        min-width: 0;
        max-width: 100%;
    }

    /* Period-Switcher (Zeiterfassung): in 2 Zeilen umbrechen */
    .entries-header {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .entries-header h3 {
        flex: 1 1 auto;
        white-space: normal;
    }

    .week-nav {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    .week-nav-label {
        flex: 1 1 auto;
        text-align: center;
        white-space: normal;
        min-width: 0;
        font-size: 0.85rem;
    }

    .week-nav > select,
    .week-nav > .sort-select {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        max-width: 100%;
    }

    .week-nav > button:not(.btn-icon) {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }

    /* Period-Switcher (Auswertung): ebenfalls umbrechen */
    .period-nav {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        gap: var(--spacing-sm);
    }

    .period-selector-group {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-sm);
        min-width: 0;
    }

    .period-selector-group select {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .period-label {
        flex: 1 1 100%;
        text-align: center;
        white-space: normal;
        min-width: 0;
    }

    /* Period-Navigation in der Auswertung (.period-navigation Container) */
    .period-nav-controls {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .period-selector {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-sm);
        min-width: 0;
    }

    .period-selector select {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    /* Calendar Navigation Header (Detail-Views) */
    .calendar-nav-header {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        justify-content: center;
    }

    .calendar-nav-header > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Wochen-Kalender-Nav (in Calendar-View dynamisch gerendert) */
    .week-calendar-nav {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    .week-calendar-nav .week-nav-label {
        flex: 1 1 100%;
        text-align: center;
        white-space: normal;
        min-width: 0;
    }

    /* Entry Cards: Stripe + 2-Spalten-Layout */
    .entry-card {
        grid-template-columns: 4px 1fr auto;
        grid-template-areas:
            "stripe time duration"
            "stripe details details"
            "stripe actions actions";
        text-align: left;
        padding: 12px 14px 12px 0;
        gap: 6px var(--spacing-sm);
    }

    .entry-card::before { grid-area: stripe; }
    .entry-card .entry-time { grid-area: time; }
    .entry-card .entry-duration { grid-area: duration; text-align: right; }
    .entry-card .entry-details { grid-area: details; }
    .entry-card .entry-actions { grid-area: actions; justify-content: flex-end; margin-top: 4px; }

    .entry-card .entry-meta {
        gap: 4px 8px;
    }

    .entry-card .entry-separator {
        display: none;
    }

    /* Cards */
    .cards-grid {
        grid-template-columns: 1fr;
    }

    /* Tables */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.85rem;
    }

    th, td {
        padding: 0.65rem;
    }

    .detail-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .detail-table thead {
        position: sticky;
        top: 0;
        background: var(--gray-lighter);
        z-index: 1;
    }

    .detail-table th,
    .detail-table td {
        min-width: 80px;
        padding: var(--spacing-sm);
        font-size: 0.8rem;
    }

    .detail-table td:first-child,
    .detail-table th:first-child {
        position: sticky;
        left: 0;
        background: var(--white);
        z-index: 2;
        border-right: 2px solid var(--gray-lighter);
    }

    .detail-table th:first-child {
        background: var(--gray-lighter);
        z-index: 3;
    }

    .detail-table .actions {
        flex-wrap: nowrap;
    }

    /* Charts */
    .charts-grid {
        grid-template-columns: 1fr;
    }

    .chart-container {
        height: 280px;
    }

    /* Filters */
    .filter-bar {
        flex-direction: column;
    }

    .filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-075);
    }

    .filter-group select,
    .filter-group .btn,
    .filter-group input {
        width: 100%;
        min-height: 44px;
    }

    /* Week Filter */
    .week-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .week-filter-group {
        justify-content: center;
    }

    .week-filter-bar select {
        min-width: 100px;
        flex: 1;
    }

    /* Views */
    .view-toggle {
        width: 100%;
    }

    .detail-header {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .week-timeline-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Calendar */
    .calendar-grid {
        gap: 2px;
    }

    .calendar-day {
        min-height: 60px;
        padding: 4px;
        font-size: 0.75rem;
    }

    /* Modals als Bottom-Sheets auf Mobile */
    .modal {
        padding: 0;
        align-items: flex-end;
        justify-content: stretch;
    }

    .modal-content {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 92vh;
        border: 0;
        border-top: 1px solid var(--gray-200);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        animation: sheetUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 -10px 40px rgba(15, 12, 20, 0.18);
    }

    .modal-content::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: var(--gray-300);
    }

    .modal-header {
        padding: 22px var(--spacing-md) var(--spacing-md);
    }

    .modal-header h3 {
        font-size: 1.15rem;
    }

    .modal-body,
    .form-section {
        padding: var(--spacing-md);
    }

    .modal-actions {
        flex-direction: column-reverse;
        gap: var(--spacing-075);
        padding: var(--spacing-md);
    }

    .modal-actions .btn {
        width: 100%;
    }

    /* Notifications */
    #notificationContainer {
        right: 10px;
        left: 10px;
    }

    .notification {
        min-width: unset;
        max-width: unset;
    }

    /* Modal close button */
    .modal-close {
        width: 44px;
        height: 44px;
        font-size: 1.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Export */
    .export-options {
        grid-template-columns: 1fr;
    }

    /* Project/Client Cards */
    .client-card,
    .project-card {
        padding: var(--spacing-md);
    }

    .client-name {
        font-size: 1rem;
    }

    .client-hours {
        font-size: 1.25rem;
    }

    .trend-sparkline {
        display: none;
    }

    /* Auth */
    .auth-container {
        padding: var(--spacing-lg);
        max-width: 95%;
        margin: var(--spacing-md);
    }

    .auth-buttons {
        flex-direction: column;
    }

    .user-info {
        align-items: center;
        margin-bottom: var(--spacing-sm);
    }

    .user-menu {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    #darkModeToggleAuth {
        top: 10px;
        right: 10px;
    }

    /* Dashboard */
    .quick-stats {
        grid-template-columns: 1fr;
    }

    .stat-value {
        font-size: 2rem;
    }

    .section-card {
        padding: var(--spacing-md);
    }

    .section-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .card-controls {
        width: 100%;
        flex-wrap: wrap;
    }

    .sort-select {
        flex: 1;
        min-width: 120px;
    }

    .heatmap-row {
        grid-template-columns: 30px 1fr 50px;
        font-size: 0.8rem;
    }

    .day-sparkline {
        display: none;
    }

    /* Tag Bars */
    .tag-bar {
        grid-template-columns: 100px 1fr 60px;
        gap: var(--spacing-sm);
    }

    .tag-indicator {
        display: none;
    }

    /* Entry Actions */
    .entry-actions .btn {
        padding: var(--spacing-sm) var(--spacing-075);
        min-width: 44px;
    }

    .card-actions .btn {
        flex: 1;
        justify-content: center;
    }

    /* Tags touch targets */
    .tag,
    .tag-pill {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .tag-pill-remove {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }

    /* Touch targets */
    .btn,
    .nav-link,
    .mobile-action-btn,
    select,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
    }

    /* Footer */
    .footer {
        padding: 1.25rem var(--spacing-md);
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-075);
    }
}

/* ============================================
   SMALL MOBILE - max-width: 480px
   ============================================ */

@media (max-width: 480px) {
    .container {
        padding: var(--spacing-075);
    }

    .section {
        padding: 0.875rem;
    }

    .header-content {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .logo-text {
        font-size: 1.1rem;
    }

    .nav-link {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.8rem;
    }

    .user-menu {
        flex-direction: column;
        width: 100%;
    }

    .user-select {
        width: 100%;
    }

    /* Stats */
    .stat-item {
        flex: 1 1 100%;
    }

    .stat-card {
        padding: var(--spacing-md);
    }

    .stat-value {
        font-size: 1.75rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    /* Hero */
    .hero-stats {
        grid-template-columns: 1fr;
    }

    /* Timer */
    .timer-display {
        font-size: 1.75rem;
    }

    /* Buttons */
    .btn {
        font-size: 0.95rem;
    }

    /* Tables */
    table {
        font-size: 0.8rem;
    }

    th, td {
        padding: var(--spacing-sm) 0.35rem;
    }

    /* Charts */
    .chart-container {
        height: 240px;
    }

    /* Modal full screen */
    .modal-content {
        width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    /* Calendar */
    .calendar-day {
        min-height: 50px;
        font-size: 0.7rem;
    }

    .week-timeline-container {
        grid-template-columns: 1fr;
    }

    /* Client Cards */
    .client-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .client-hours {
        font-size: 1.5rem;
    }

    .project-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

/* ============================================
   LANDSCAPE PHONE - max-height: 500px
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: var(--spacing-sm) 0;
    }

    .stats-bar {
        padding: var(--spacing-sm) 0;
    }

    .modal-content {
        max-height: 90vh;
    }

    .modal-body {
        padding: var(--spacing-075);
    }
}

/* ============================================
   ENHANCED LANDSCAPE - max-height: 600px
   ============================================ */

@media (max-height: 600px) and (orientation: landscape) {
    .header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .header-content {
        padding: 0;
    }

    .logo-text {
        font-size: 1.1rem;
    }

    .stats-bar {
        display: none;
    }

    .main {
        padding-top: 60px;
    }

    .section {
        padding: var(--spacing-md);
    }

    .section-header {
        margin-bottom: var(--spacing-md);
    }

    .section-header h2 {
        font-size: 1.25rem;
    }

    .timer-display {
        font-size: 1.75rem;
    }

    .timer-card {
        padding: var(--spacing-md);
    }

    .form-grid {
        gap: var(--spacing-075);
    }

    .form-group {
        margin-bottom: var(--spacing-sm);
    }

    .modal-content {
        max-height: 85vh;
        padding: var(--spacing-md);
    }

    .modal-header {
        margin-bottom: var(--spacing-075);
    }

    .chart-container,
    .chart-card canvas {
        max-height: 200px;
    }

    .nav-link {
        padding: var(--spacing-075) var(--spacing-md);
        font-size: 0.9rem;
    }

    .entry-card {
        padding: var(--spacing-075);
    }
}

/* ============================================
   RESPONSIVE - Week Timeline (1200px)
   ============================================ */

@media (max-width: 1200px) {
    .week-timeline-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .header,
    .nav,
    .user-menu,
    .btn,
    .filter-bar,
    .modal,
    .timer-container,
    .time-entry-form,
    .export-options,
    .footer,
    .filter-bar,
    .section-card-header .card-controls,
    .timeline-actions,
    .btn-expand {
        display: none !important;
    }

    .main {
        padding-top: 0;
    }

    .section {
        padding: var(--spacing-md);
    }

    .chart-card,
    .section-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .stat-card {
        border: 1px solid var(--gray-300);
    }

    .footer-note {
        display: none;
    }
}