/**
 * Tablet Responsive CSS - Landscape Only
 * Targets tablets in landscape orientation (768px-1279px width).
 * Portrait mode is not optimized — app uses desktop layout as-is.
 */

/* ==========================================================================
   TABLET LANDSCAPE - All Pages
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1279px) and (orientation: landscape) {

    /* ---------- Prevent Horizontal Overflow ---------- */
    /* Use 'clip' not 'hidden' — overflow:hidden breaks position:sticky on descendants */
    html, body {
        overflow-x: clip !important;
        max-width: 100vw;
    }

    /* ---------- Daily View: Column Layout ---------- */
    /* !important needed to override inline styles applied by loadSavedColumnWidths() JS,
       which saves desktop column widths and re-applies them on page load */
    .left-column {
        flex: 1 1 0 !important;  /* Fill remaining space after right-col + divider */
        min-width: 0 !important; /* Allow shrinking below content width */
        max-width: none !important;
    }
    .right-column {
        flex: 0 0 200px !important; /* Fixed width sidebar on tablet */
        min-width: 180px !important;
        max-width: 200px !important;
    }

    /* ---------- Daily View: Chart Container Width ---------- */
    /* Ensure charts and their parents don't exceed the left-column width */
    .left-column .content-card,
    .left-column .card-body,
    .left-column .charts-container,
    .left-column .chart-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ---------- Daily View: Chart Heights ---------- */
    /* Event Timeline: 225px → 190px */
    #chart-container-event-timeline .d-flex[style*="height: 225px"],
    #chart-container-event-timeline [style*="height: 225px"] {
        height: 190px !important;
    }

    /* Waveform charts: 150px → 130px */
    .chart-container .d-flex[style*="height: 150px"],
    .chart-container [style*="height:150px"],
    .chart-container [style*="height: 150px"] {
        height: 130px !important;
    }

    /* ---------- Daily View: Chart Title Sidebar ---------- */
    /* Vertical signal label bar: 25px → 20px */
    .chart-container .d-flex.align-items-center[style*="width: 25px"] {
        width: 20px !important;
        min-width: 20px !important;
    }
    .chart-container .d-flex.align-items-center[style*="width: 25px"] span {
        font-size: 0.65rem !important;
    }

    /* ---------- Daily View: Calendar ---------- */
    table.calendar td {
        padding: 2px !important;
        font-size: 0.7rem !important;
    }
    table.calendar th {
        padding: 2px !important;
        font-size: 0.65rem !important;
    }
    #calendarHeader {
        padding: 4px 6px !important;
    }
    #calendarHeader .form-select {
        font-size: 0.75rem !important;
        padding: 2px 4px !important;
    }
    #calendarSelectorsWrapper {
        gap: 4px !important;
    }

    /* ---------- Daily View: Nav Tabs ---------- */
    .nav-tabs .nav-link {
        padding: 4px 8px !important;
        font-size: 0.78rem !important;
    }
    .nav-tabs-compact .nav-link {
        padding: 3px 8px !important;
        font-size: 0.72rem !important;
    }

    /* ---------- Daily View: Statistics Panel ---------- */
    .right-column table td,
    .right-column table th {
        padding: 2px 4px !important;
        font-size: 0.75rem !important;
    }
    .right-column .card-body {
        padding: 0.35rem !important;
    }

    /* ---------- Daily View: Profile Indicator ---------- */
    .profile-indicator {
        font-size: 0.75rem !important;
    }

    /* ---------- Overview: Chart Heights ---------- */
    .overview-chart-container {
        height: 130px !important;
    }
    /* Overview chart wrappers that use inline height */
    .preview-overview-charts [style*="height: 150px"] {
        height: 130px !important;
    }

    /* ---------- Statistics: Horizontal Scroll for Wide Tables ---------- */
    .statistics-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .statistics-table-wrapper table {
        font-size: 0.8rem;
    }

    /* ---------- Reports: Compact Table ---------- */
    .reports-table td,
    .reports-table th {
        padding: 4px 6px !important;
        font-size: 0.8rem !important;
    }

    /* ---------- General: Compact Spacing ---------- */
    .card-header-custom {
        padding: 0.35rem !important;
    }

    /* ---------- Profile Page: Logo Sizing ---------- */
    .actions-panel .logo-container img {
        max-width: 100% !important;
        height: auto !important;
    }
    .actions-panel .logo-container img[height="75"] {
        height: 50px !important;
    }

    /* ---------- Graph Selector Panel (Daily View) ---------- */
    #graph-selector label {
        font-size: 0.75rem !important;
    }
    #graph-selector .form-check {
        margin-bottom: 2px !important;
    }
}


/* ==========================================================================
   TOUCH-FRIENDLY TARGETS (tablets and touch devices)
   ========================================================================== */
@media (pointer: coarse) {

    /* Wider column divider for easier drag */
    .column-divider {
        width: 12px !important;
    }

    /* Larger chart resize handles */
    .chart-resize-handle {
        height: 14px !important;
    }

    /* Calendar tap targets */
    table.calendar td:not(:empty) {
        min-height: 28px;
        min-width: 28px;
    }

    /* Column divider and resize handles need touch-action: none
       so touchmove can be preventDefault'd for drag gestures */
    .column-divider,
    .chart-resize-handle {
        touch-action: none;
    }

    /* Other interactive elements: manipulation disables double-tap zoom */
    .nav-tabs .nav-link,
    .nav-tabs-compact .nav-link,
    table.calendar td {
        touch-action: manipulation;
    }

    /* Nav tabs - slightly larger for touch */
    .nav-tabs .nav-link {
        min-height: 36px;
    }

    /* Form controls - larger touch targets */
    .form-select,
    .form-check-input {
        min-height: 32px;
    }
}