/**
 * Maestro Calendar — device layer (screen only).
 * Phone / tablet / notebook / desktop / TV / ultrawide / curve.
 * Print stays on print.css (light paper). This file is screen-only.
 */

@media screen {
    :root {
        --safe-inline: env(safe-area-inset-left, 0px);
        --safe-inline-end: env(safe-area-inset-right, 0px);
        --safe-block: env(safe-area-inset-top, 0px);
        --safe-block-end: env(safe-area-inset-bottom, 0px);
    }

    .sidebar {
        padding-left: var(--safe-inline);
        padding-bottom: var(--safe-block-end);
    }

    .main-header {
        padding-left: max(16px, calc(16px + var(--safe-inline)));
        padding-right: max(16px, calc(16px + var(--safe-inline-end)));
        padding-top: var(--safe-block);
    }

    .main-content {
        padding-left: max(16px, calc(32px + var(--safe-inline)));
        padding-right: max(16px, calc(32px + var(--safe-inline-end)));
        padding-bottom: max(24px, calc(24px + var(--safe-block-end)));
    }

    .toast-host {
        right: max(20px, calc(20px + var(--safe-inline-end)));
        bottom: max(20px, calc(20px + var(--safe-block-end)));
    }

    .mc-modal {
        padding: max(16px, var(--safe-block)) max(16px, var(--safe-inline-end)) max(16px, var(--safe-block-end)) max(16px, var(--safe-inline));
    }

    .mc-modal .modal-dialog {
        max-width: min(560px, calc(100vw - 32px - var(--safe-inline) - var(--safe-inline-end)));
    }

    .mc-modal.modal-md .modal-dialog,
    .mc-modal .modal-md {
        max-width: min(560px, calc(100vw - 32px - var(--safe-inline) - var(--safe-inline-end)));
    }

    .mc-modal.modal-lg .modal-dialog,
    .mc-modal .modal-lg {
        max-width: min(920px, calc(100vw - 32px - var(--safe-inline) - var(--safe-inline-end)));
    }

    .drawer {
        padding-top: var(--safe-block);
        padding-bottom: var(--safe-block-end);
        padding-right: var(--safe-inline-end);
    }

    .mc-dp-pop--sheet {
        width: min(360px, calc(100vw - 16px - var(--safe-inline) - var(--safe-inline-end)));
        max-height: calc(100dvh - 16px);
        overflow: auto;
    }

    .activities-table-wrap,
    .dash-table-wrap,
    .gantt-wrap,
    .kanban,
    .ts-table-host {
        -webkit-overflow-scrolling: touch;
    }

    /* sm — phone */
    @media (max-width: 639.98px) {
        .main-header {
            gap: 8px;
            padding-left: max(10px, calc(10px + var(--safe-inline)));
            padding-right: max(10px, calc(10px + var(--safe-inline-end)));
        }

        .header-search { flex: 1 1 auto; max-width: none; min-width: 0; }
        .header-spacer { display: none; }
        .user-info,
        .user-menu-chevron,
        .lang-menu-current,
        .lang-menu-chevron { display: none; }
        .lang-menu { margin-right: 0; }
        .lang-menu-trigger { padding: 0; width: var(--touch-target); height: var(--touch-target); justify-content: center; border-color: transparent; }
        .user-menu-trigger { padding: 2px; }
        .dropdown-menu { right: 0; min-width: min(240px, calc(100vw - 16px)); }
        /* Keep daily controls usable without forcing the document wider than a
           phone. Project, timer and account stay; desktop utilities stay out. */
        .header-actions > .hubit-app-menu,
        .header-actions > [data-action="print-page"],
        .header-actions > .theme-toggle,
        .header-actions > .lang-menu { display: none; }
        .header-actions { min-width: 0; gap: 8px; }
        .header-actions > #projectContext {
            flex: 1 1 140px;
            min-width: 0;
            max-width: 172px;
        }
        .header-actions > #projectContext .pc-trigger {
            width: 100%;
            min-width: 0;
        }
        .header-actions > #projectContext .pc-trigger-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* Compact timer state on phones: the action remains available while its
           descriptive text and secondary chevron move to the opened panel. */
        .header-actions > #ttHeader {
            flex: 0 0 72px;
            width: 72px;
            max-width: 72px;
            margin-right: 0;
            overflow: hidden;
        }
        .header-actions > #ttHeader .tt-header-body,
        .header-actions > #ttHeader .tt-header-chevron,
        .header-actions > #ttHeader .tt-header-pulse,
        .header-actions > #ttHeader .tt-header-elapsed { display: none !important; }
        .header-actions > .user-menu { flex: 0 0 40px; }

        .main-content { padding: 12px max(12px, calc(12px + var(--safe-inline-end))) max(16px, calc(16px + var(--safe-block-end))) max(12px, calc(12px + var(--safe-inline))); }

        .page-header { flex-direction: column; align-items: stretch; }
        .page-header h1 { font-size: var(--font-size-xl); }
        .page-actions { margin-left: 0; width: 100%; }
        .page-actions .btn { flex: 1 1 auto; }

        .page-toolbar { padding: 10px 12px; }
        .page-toolbar-filters,
        .page-toolbar-views { width: 100%; }

        .section { padding: var(--space-4); gap: var(--space-3); }

        .mc-modal { padding: 0; align-items: stretch; }
        .mc-modal .modal-dialog,
        .mc-modal.modal-md .modal-dialog,
        .mc-modal .modal-md,
        .mc-modal.modal-lg .modal-dialog,
        .mc-modal .modal-lg {
            max-width: none;
            width: 100%;
            min-height: 100dvh;
            border-radius: 0;
            margin: 0;
        }
        .mc-modal .modal-footer { padding: 10px 14px max(10px, var(--safe-block-end)); }
        .mc-modal .modal-footer .btn { flex: 1 1 0; min-width: 0; }

        .toast-host { left: 12px; right: 12px; bottom: max(12px, calc(12px + var(--safe-block-end))); }
        .toast { min-width: 0; max-width: none; }

        .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; align-items: stretch; }
        .fc .fc-toolbar-title { font-size: 1.1rem; }
        .fc .fc-button { min-height: var(--touch-target); }

        .calendar-shell { min-height: 0; }

        .kpi-grid { grid-template-columns: 1fr; }

        .dash-toolbar .filter-group,
        .dash-toolbar .filter-group select,
        .ts-filters .ts-search,
        .ttd-filters label,
        .tpl-toolbar .search,
        .tpl-toolbar .filter-group {
            min-width: 0;
            width: 100%;
            max-width: none;
        }

        .ctx-menu-host,
        .export-menu,
        .tt-panel {
            max-width: calc(100vw - 16px);
        }
    }

    /* md — large phone / small tablet */
    @media (min-width: 640px) and (max-width: 767.98px) {
        .header-search { max-width: 280px; }
        .user-info { display: none; }
    }

    @media (min-width: 640px) and (max-width: 1023.98px) {
        .main-content { padding: 18px 20px; }
        .page-header h1 { font-size: var(--font-size-xl); }
        .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* Phone landscape — keep chrome compact so the canvas remains usable */
    @media (max-height: 500px) and (orientation: landscape) {
        .main-header { min-height: 48px; height: auto; }
        .sidebar { width: min(var(--sidebar-width), 72vw); }
        .main-content { padding-top: 12px; padding-bottom: 12px; }
    }

    /* lg — already handled in layout.css (sidebar overlay < 1024) */

    /* xl — notebook */
    @media (min-width: 1280px) {
        .header-search { max-width: 480px; }
    }

    /* 2xl — large desktop */
    @media (min-width: 1536px) {
        .main-content { padding: 28px 40px; }
        .header-search { max-width: 560px; }
    }

    /* TV / FHD desktop — slightly roomier chrome, readable forms */
    @media (min-width: 1920px) {
        .main-content { padding: 32px 48px; }
        .page-header h1 { font-size: var(--font-size-3xl); }
        .section,
        .settings-page,
        .dash-page,
        .tpl-page,
        .form-grid-2,
        .form-grid-3 {
            max-width: var(--content-readable);
        }
    }

    /* Ultrawide / curve — keep content off the bent edges; canvases stay full-bleed */
    @media (min-width: 2560px) {
        .main-content {
            padding-left: 80px;
            padding-right: 80px;
        }

        .main-content > .page-header,
        .main-content > .page-toolbar,
        .main-content > .section,
        .main-content > form,
        .main-content > .settings-page,
        .main-content > .dash-page,
        .main-content > .tpl-page {
            max-width: var(--content-readable);
            margin-left: auto;
            margin-right: auto;
        }

        .main-content:has(.calendar-shell) > .page-header,
        .main-content:has(.calendar-shell) > .page-toolbar,
        .main-content:has(.gantt) > .page-header,
        .main-content:has(.gantt) > .page-toolbar,
        .main-content:has(.kanban) > .page-header,
        .main-content:has(.kanban) > .page-toolbar,
        .main-content:has(.activities-table-wrap) > .page-header,
        .main-content:has(.activities-table-wrap) > .page-toolbar {
            max-width: none;
        }
    }

    /* Touch / remote: 44×44 minimum (guide R9 / --space-11) */
    @media (pointer: coarse) {
        .btn,
        .header-btn,
        .mobile-menu-btn,
        .nav-item,
        .nav-group-summary,
        .sidebar-collapse-btn,
        .lang-menu-trigger,
        .user-menu-trigger,
        .dropdown-item,
        .mc-dp-input,
        .mc-dp-nav,
        .mc-dp-cell,
        .fc .fc-button,
        .page-toolbar-views button,
        .workflow-view-switch button,
        .chip-group .chip {
            min-height: var(--touch-target);
        }

        .btn-icon,
        .btn-icon-sm,
        .header-btn,
        .mobile-menu-btn,
        .mc-dp-nav,
        .mc-modal .modal-close {
            min-width: var(--touch-target);
            min-height: var(--touch-target);
        }

        .color-swatch { width: var(--touch-target); height: var(--touch-target); }
    }

    /* TV remote / 10-foot UI — larger type and targets */
    @media (min-width: 1920px) and (pointer: coarse) {
        html { font-size: 1rem; }

        .btn,
        .header-btn,
        .nav-item,
        .mc-dp-cell,
        .fc .fc-button {
            min-height: 48px;
        }
    }

    .auth-body {
        padding-left: var(--safe-inline);
        padding-right: var(--safe-inline-end);
        padding-bottom: var(--safe-block-end);
    }
}