/* ==========================================================
   FlowDeal — Shared Responsive Overrides
   Loaded AFTER dashboard.css + each page's own CSS.
   Only fills gaps — does NOT duplicate existing media queries.
   ========================================================== */


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

    /* -- Categories: mapping form → 2 cols (already at 1200px, reinforce) -- */
    .add-mapping-form {
        grid-template-columns: 1fr 1fr;
    }

    /* -- Revenue: funnel horizontal scroll -- */
    .funnel { flex-wrap: wrap; justify-content: center; }
}


/* ==================== 768px — TABLET PORTRAIT ==================== */
@media (max-width: 768px) {

    /* ---- SHARED: Toasts ---- */
    .toast-notification { max-width: calc(100vw - 32px); right: 16px; }
    .toast-container { right: 16px; left: 16px; }
    .toast-container .toast,
    .toast { max-width: 100%; }

    /* ---- SHARED: Modals ---- */
    .modal-container,
    .modal,
    .channel-form-modal {
        width: 95%;
        max-width: 95vw;
        padding: 20px;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* ---- SHARED: Tables — ensure horizontal scroll ---- */
    .table-wrapper,
    .table-section,
    .click-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Categories: tabs horizontal scroll ---- */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .tabs .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* ---- Categories: mapping rows — simplified ---- */
    .mapping-row,
    .mapping-row-header {
        grid-template-columns: 60px 1fr 50px 50px 40px 60px;
        gap: 8px;
        padding: 10px 14px;
        font-size: 12px;
    }

    /* ---- Categories: add-mapping-form stacked ---- */
    .add-mapping-form {
        grid-template-columns: 1fr;
    }

    /* ---- Monitoring: alert items wrap ---- */
    .alert-item {
        flex-wrap: wrap;
        gap: 8px;
    }
    .alert-message {
        margin-left: 0;
        width: 100%;
        order: 10;
    }

    /* ---- Monitoring: webhook grid single col ---- */
    .webhook-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Monitoring: disk items single col ---- */
    .disk-items {
        grid-template-columns: 1fr;
    }

    /* ---- Monitoring: gauges — 3 col ---- */
    .gauges-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    /* ---- Revenue: breakdown stacked ---- */
    .breakdown-container {
        flex-direction: column;
    }
    .breakdown-bar-wrapper {
        min-width: unset;
        width: 100%;
    }

    /* ---- Workflows: card grid single col ---- */
    .wf-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Workflows: info grid stacked ---- */
    .wf-info-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Users: sections full-width ---- */
    .section-content { padding: 0 16px 16px; }

    /* ---- Recycling: inline form widths ---- */
    .search-input {
        width: 100% !important;
        min-width: unset;
    }

    /* ---- Recycling: rule form inline inputs ---- */
    #ruleName,
    #ruleCondValue {
        width: 100% !important;
        min-width: unset;
    }

    /* ---- Analytics: filter bar stacked ---- */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-bar select,
    .filter-bar button {
        width: 100%;
    }
}


/* ==================== 480px — MOBILE ==================== */
@media (max-width: 480px) {

    /* ---- SHARED: Navbar ultra-compact ---- */
    .navbar {
        padding: 8px 12px;
        gap: 6px;
    }
    .navbar h1,
    .navbar .navbar-title {
        font-size: 12px;
        letter-spacing: 0;
    }
    .navbar-logo {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    .navbar-links .page-nav-link {
        padding: 4px 6px;
        font-size: 8px;
        letter-spacing: 0;
    }
    .navbar-actions .nav-btn {
        padding: 6px 10px;
        font-size: 10px;
        letter-spacing: 0;
    }

    /* ---- SHARED: Content tighter padding ---- */
    .content,
    .container {
        padding: 12px;
    }

    /* ---- SHARED: Section cards tighter ---- */
    .pipeline-flow-section,
    .heatmap-section,
    .bottleneck-section,
    .activity-feed,
    .section,
    .filters-section {
        padding: 16px;
        border-radius: var(--radius-md);
    }

    /* ---- SHARED: Stats grids — 2 col ---- */
    .stats-grid,
    .stats-bar,
    .pipeline-stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* ---- SHARED: Stat cards compact ---- */
    .stat-card .value,
    .stat-mini .val,
    .pipeline-stat-card .value {
        font-size: 18px;
    }
    .stat-card h3,
    .stat-mini .label,
    .stat-card .label,
    .pipeline-stat-card .label {
        font-size: 8px;
        letter-spacing: 1px;
    }

    /* ---- SHARED: Section headings smaller ---- */
    .pipeline-flow-section h2,
    .heatmap-header h2,
    .bottleneck-header h2,
    .activity-feed-header h2,
    .section-title {
        font-size: 14px;
    }

    /* ---- SHARED: Modals — near full screen ---- */
    .modal-container,
    .modal,
    .channel-form-modal {
        width: 100%;
        max-width: 100vw;
        border-radius: var(--radius-md);
        padding: 16px;
        margin: 8px;
    }
    .modal-header h3 {
        font-size: 15px;
    }
    .modal-actions {
        flex-direction: column;
    }

    /* ---- Dashboard: pipeline boxes compact ---- */
    .pipeline-box {
        min-width: 100px;
        padding: 10px 14px;
    }
    .pipeline-box .stage-value {
        font-size: 22px;
    }
    .pipeline-box .stage-label {
        font-size: 7px;
        letter-spacing: 2px;
    }
    .pipeline-box .stage-name {
        font-size: 10px;
    }

    /* ---- Dashboard: pipeline row single col ---- */
    .pipeline-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* ---- Dashboard: pipeline metrics 2 col ---- */
    .pipeline-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .pipeline-metric .metric-value {
        font-size: 18px;
    }

    /* ---- Dashboard: bottleneck grid 2 col ---- */
    .bottleneck-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .bottleneck-stage .stage-count {
        font-size: 22px;
    }
    .bottleneck-timing {
        flex-direction: column;
        gap: 8px;
    }

    /* ---- Dashboard: heatmap compact ---- */
    .heatmap-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .heatmap-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .heatmap-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ---- Dashboard: activity feed compact ---- */
    .activity-item {
        padding: 8px;
        gap: 8px;
    }
    .activity-icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
    .activity-title {
        font-size: 11px;
    }
    .activity-summary {
        flex-direction: column;
        gap: 8px;
    }

    /* ---- Dashboard: chart cards compact ---- */
    .pipeline-charts-grid {
        gap: 10px;
    }
    .pipeline-chart-card {
        padding: 14px;
    }
    .pipeline-chart-wrap {
        height: 160px;
    }

    /* ---- Dashboard: pipeline filter row wrap ---- */
    .pipeline-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .pipeline-filter-group {
        width: 100%;
        flex-wrap: wrap;
    }
    .pipeline-select,
    .pipeline-apply-btn {
        flex: 1;
        min-width: 0;
    }

    /* ---- Analytics: tabs horizontal scroll ---- */
    .tabs-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 11px;
    }

    /* ---- Analytics: peak hours grid 4-col ---- */
    .peak-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* ---- Analytics: channel grid single col ---- */
    .channel-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Products: filters stacked ---- */
    .filters-row {
        flex-direction: column;
    }
    .filters-row select,
    .filters-row input {
        width: 100%;
        min-width: unset;
    }
    .filter-btn {
        width: 100%;
        text-align: center;
    }
    .result-count {
        margin-left: 0;
        text-align: center;
    }

    /* ---- Products: pagination compact ---- */
    .pagination {
        flex-wrap: wrap;
        padding: 0 12px 16px;
    }
    .pagination button {
        padding: 6px 10px;
        font-size: 10px;
    }

    /* ---- Approval: compact cards ---- */
    .control-deck {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-group {
        width: 100%;
    }
    .sort-wrap {
        width: 100%;
    }
    .sort-wrap .filter-select {
        width: 100%;
    }

    /* ---- Categories: pipeline L1 cards — tighter ---- */
    .pipeline-l1-grid {
        gap: 12px;
    }

    /* ---- Categories: mapping rows scrollable ---- */
    .mapping-row,
    .mapping-row-header {
        min-width: 500px;
    }

    /* ---- Monitoring: services grid — single col ---- */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Monitoring: gauges — 2 col ---- */
    .gauges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .gauge-circle {
        width: 80px;
        height: 80px;
    }
    .gauge-value {
        font-size: 14px;
    }

    /* ---- Monitoring: neon buttons compact ---- */
    .neon-btn {
        padding: 6px 36px 6px 12px;
        font-size: 8px;
        letter-spacing: 0.5px;
    }
    .neon-btn .neon-icon {
        width: 22px;
        font-size: 10px;
    }

    /* ---- Monitoring: sections-row always stacked ---- */
    .sections-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* ---- Revenue: funnel vertical ---- */
    .funnel {
        flex-direction: column;
        align-items: stretch;
    }
    .funnel-step {
        min-width: unset;
    }
    .funnel-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    /* ---- Revenue: table cells compact ---- */
    .table-wrapper th,
    .table-wrapper td {
        padding: 8px 10px;
        font-size: 11px;
    }

    /* ---- Recycling: settings bar ---- */
    .settings-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .settings-bar h3 {
        font-size: 14px;
    }

    /* ---- Recycling: data tables compact ---- */
    .data-table {
        font-size: 10px;
    }
    .data-table th,
    .data-table td {
        padding: 8px 6px;
    }

    /* ---- Users: current user card ---- */
    .current-user-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 16px;
    }
    .current-user-info {
        flex-direction: column;
        align-items: center;
    }
    .current-user-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ---- Users: table compact ---- */
    table thead th,
    table tbody td {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* ---- Workflows: card grid single col ---- */
    .wf-grid {
        grid-template-columns: 1fr;
    }
    .wf-card {
        min-width: unset;
    }

    /* ---- Workflows: card header compact ---- */
    .wf-card-header {
        flex-direction: column;
        gap: 8px;
    }
    .wf-info-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* ---- Login: compact ---- */
    .login-box {
        padding: 32px 24px;
    }
    .login-box h1 {
        font-size: 22px;
    }
}


/* ==================== 360px — VERY SMALL PHONES ==================== */
@media (max-width: 360px) {

    /* Navbar: emoji-only links (hide text via overflow) */
    .navbar-links .page-nav-link {
        padding: 4px 5px;
        font-size: 7px;
    }

    /* Stats: single column */
    .stats-grid,
    .stats-bar,
    .pipeline-stat-grid {
        grid-template-columns: 1fr;
    }

    /* Bottleneck: single column */
    .bottleneck-grid {
        grid-template-columns: 1fr;
    }

    /* Pipeline metrics: single column */
    .pipeline-metrics {
        grid-template-columns: 1fr;
    }

    /* Gauges: single column */
    .gauges-grid {
        grid-template-columns: 1fr;
    }
}