/* =====================================================
   CargoSimplify — Global Responsive Overrides
   Ensures all screens from Login to Admin to Customer
   work on mobile, tablet, and desktop.
   ===================================================== */

/* ═══════════════════════════════════════════
   BASE: Prevent horizontal overflow globally
   ═══════════════════════════════════════════ */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Ensure all images scale */
img {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════
   TABLET (769px – 1024px)
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Sidebar auto-collapses to 72px on tablets — main area adjusts */
    .sb-main { margin-left: 72px !important; }
    .sb-main.sidebar-collapsed { margin-left: 72px !important; }

    /* Admin Dashboard: 5-col stat grid → 3 */
    .stat-grid-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Admin Dashboard: cards padding */
    .dash-card-body {
        padding: 14px 18px 18px;
    }

    /* Forms: 2-col grid → still 2, but tighter gap */
    .ng-form-row,
    .ng-form-grid {
        gap: 14px;
    }

    /* Welcome banner tighter */
    .welcome-banner {
        padding: 22px 24px;
    }
    .welcome-banner h1 {
        font-size: 20px;
    }

    /* Tables: reduce cell padding */
    .ng-data-table thead th,
    .ng-data-table tbody td {
        padding: 10px 14px;
    }

    /* Report Shell */
    .rsh-header {
        gap: 12px;
    }

    /* Migration dialog */
    .sb-mig-dialog {
        max-width: 95vw;
    }
}

/* ═══════════════════════════════════════════
   MOBILE LANDSCAPE / SMALL TABLET (577px – 768px)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── GLOBAL LAYOUT ── */
    .sb-content {
        padding: 12px !important;
    }

    /* ── ADMIN DASHBOARD ── */
    .stat-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card-ng {
        padding: 14px 16px;
    }

    .stat-ng-number {
        font-size: 20px;
    }

    .stat-icon-badge {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
    }
    .stat-icon-badge .mud-icon-root {
        font-size: 20px !important;
    }

    .welcome-banner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 20px;
    }
    .welcome-banner h1 {
        font-size: 18px;
    }
    .welcome-banner p {
        font-size: 13px;
    }
    .welcome-date-pill {
        font-size: 12px;
        padding: 8px 12px;
    }

    .dash-card-header {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .dash-card-body {
        padding: 12px 16px 16px;
    }
    .dash-card-title {
        font-size: 14px;
    }

    .quick-action-tile {
        padding: 12px;
    }

    /* ── PAGE HEADERS ── */
    .page-header-row,
    .ng-page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .page-title,
    .ng-page-header h1 {
        font-size: 1.2rem;
    }

    /* ── FORMS ── */
    .ng-form-row,
    .ng-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .ng-span-2 {
        grid-column: span 1 !important;
    }
    .ng-form-card-header {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .ng-form-card-header h2 {
        font-size: 16px;
    }
    .ng-card-body {
        padding: 16px;
    }
    .ng-card-header {
        padding: 14px 16px;
    }
    .ng-form-actions {
        flex-wrap: wrap;
    }

    /* ── DATA TABLES (admin ng-data-table) ── */
    .ng-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
    }
    .ng-data-table {
        min-width: 600px;
    }
    .ng-data-table thead th,
    .ng-data-table tbody td {
        padding: 8px 10px;
        font-size: 12px;
    }
    .ng-actions-cell {
        gap: 2px;
    }
    .ng-action-btn {
        width: 30px;
        height: 30px;
    }

    /* ── REPORT SHELL ── */
    .rsh-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 14px;
    }
    .rsh-header-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .rsh-title {
        font-size: 17px;
    }
    .rsh-summary {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .rsh-filters {
        padding: 14px 16px;
    }

    /* ── REPORT FILTER BAR ── */
    .rfb-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .rfb-field {
        min-width: 0 !important;
        width: 100%;
    }
    .rfb-apply-field {
        width: 100%;
    }
    .rfb-apply-btn {
        width: 100%;
        justify-content: center;
    }

    /* ── ALL REPORT TABLES (custom html tables) ── */
    [class*="-table-wrapper"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    [class*="-table"] {
        min-width: 700px;
    }

    /* ── REPORT TOOLBARS ── */
    [class$="-toolbar"] {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ── REPORT STAT CARDS (all prefixes) ── */
    [class*="-stat-card"] {
        padding: 12px 14px;
    }
    [class*="-stat-value"] {
        font-size: 18px;
    }
    [class*="-stat-icon"] {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    [class*="-stat-icon"] .material-icons {
        font-size: 18px;
    }

    /* ── CUSTOMER LIST: search box ── */
    .cl-search-box input {
        width: 100% !important;
        max-width: none !important;
    }

    /* ── AUDIT LOGS: MudBlazor filter overrides ── */
    .mud-select,
    .mud-picker {
        min-width: 0 !important;
    }

    /* ── STORAGE CONNECTIONS: port field ── */
    .sc-form-group[style*="max-width"] {
        max-width: none !important;
    }

    /* ── STEP WIZARD ── */
    .step-indicator {
        margin-bottom: 20px;
    }
    .step-dot {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    /* ── PROFILE ── */
    .prf-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── CUSTOMER DETAIL TABS ── */
    .mud-tabs .mud-tab {
        font-size: 12px !important;
        padding: 8px 12px !important;
        min-width: auto !important;
    }
    .mud-tabs-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── CUSTOMER DASHBOARD (customer portal) ── */
    .cdash-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .cdash-report-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .cdash-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }

    /* ── MIGRATION DIALOG ── */
    .sb-mig-dialog {
        max-width: 100%;
        max-height: 90vh;
        margin: 10px;
        border-radius: 12px;
    }
    .sb-mig-header {
        padding: 14px 16px;
    }
    .sb-mig-title {
        font-size: 16px;
    }
    .sb-mig-body {
        padding: 14px 16px;
    }
    .sb-mig-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sb-mig-table {
        min-width: 600px;
    }
    .sb-mig-deploy-all-btn {
        width: 100%;
        justify-content: center;
    }

    /* ── MUDBLAZOR OVERRIDES ── */
    .mud-grid-item {
        padding: 4px !important;
    }
    .mud-card {
        border-radius: 12px !important;
    }

    /* ── E-WAYBILL EXPIRY FILTERS ── */
    .ewe-filter-bar {
        flex-direction: column;
    }
    .ewe-filter-field,
    .ewe-filter-group {
        width: 100%;
        min-width: 0 !important;
    }
}

/* ═══════════════════════════════════════════
   MOBILE PORTRAIT (≤ 576px)
   ═══════════════════════════════════════════ */
@media (max-width: 576px) {

    .sb-content {
        padding: 8px !important;
    }

    /* Stat grid → 1 column on very small screens */
    .stat-grid-5 {
        grid-template-columns: 1fr !important;
    }

    /* Summary cards → 1 column */
    .rsh-summary {
        grid-template-columns: 1fr !important;
    }

    /* Welcome banner minimal */
    .welcome-banner {
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 16px;
    }
    .welcome-banner h1 {
        font-size: 16px;
    }

    /* Report shell header */
    .rsh-icon-badge {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 8px;
    }
    .rsh-title {
        font-size: 15px;
    }
    .rsh-description {
        font-size: 12px;
    }
    .rsh-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Form actions: stack vertically */
    .ng-form-actions {
        flex-direction: column;
    }
    .ng-form-actions button {
        width: 100%;
        justify-content: center;
    }

    /* Report table min-width smaller for phones */
    [class*="-table"] {
        min-width: 500px;
    }

    /* Column picker and export panels */
    [class*="-col-picker-panel"],
    [class*="-export-panel"] {
        min-width: 180px;
    }

    /* Page headers */
    .page-title,
    .ng-page-header h1 {
        font-size: 1.1rem;
    }

    /* Cards reduce padding */
    .ng-card-body {
        padding: 12px;
    }

    /* Customer dashboard */
    .cdash-kpi-grid,
    .cdash-report-grid {
        grid-template-columns: 1fr !important;
    }

    /* Api Masters grid */
    .am-masters-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tally Import grid */
    .tim-masters-grid {
        grid-template-columns: 1fr !important;
    }

    /* Migration button: icon only on small screens */
    .sb-migration-btn span:not(.material-icons) {
        display: none;
    }
    .sb-migration-btn {
        padding: 6px 10px;
    }

    /* MudBlazor timeline compact */
    .mud-timeline-item-body {
        min-width: 0 !important;
    }

    /* Impersonation bar compact */
    .sb-impersonation-bar {
        font-size: 11px;
        padding: 0 12px;
        gap: 6px;
    }
    .sb-imp-back {
        padding: 3px 10px;
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════
   VERY SMALL SCREENS (≤ 400px)
   ═══════════════════════════════════════════ */
@media (max-width: 400px) {

    .sb-content {
        padding: 6px !important;
    }

    /* Even more compact stat cards */
    .stat-card-ng {
        padding: 10px 12px;
        gap: 10px;
    }
    .stat-ng-number {
        font-size: 18px;
    }
    .stat-ng-label {
        font-size: 10px;
    }
    .stat-icon-badge {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    /* Filter bar tighter */
    .rfb-bar {
        gap: 8px;
    }

    /* Report buttons smaller */
    .rsh-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    .rsh-btn .material-icons {
        font-size: 14px;
    }

    /* Report headers tighter */
    .rsh-header-left {
        gap: 10px;
    }

    /* Tool buttons compact */
    [class*="-tool-btn"] {
        width: 30px;
        height: 30px;
    }
    [class*="-tool-btn"] .material-icons {
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════════
   LARGE DESKTOP (≥ 1400px)
   ═══════════════════════════════════════════ */
@media (min-width: 1400px) {
    /* Report summary: fit more cards */
    .rsh-summary {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* ═══════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════ */
@media print {
    .sb-sidebar,
    .sb-topbar,
    .sb-impersonation-bar,
    .sb-backdrop,
    .sb-migration-btn,
    .rsh-header-actions,
    .rfb-bar,
    [class*="-toolbar"],
    [class*="-col-picker"],
    [class*="-export-wrap"] {
        display: none !important;
    }

    .sb-main {
        margin-left: 0 !important;
    }

    .sb-content {
        padding: 0 !important;
    }

    .rsh-body {
        border: none;
        box-shadow: none;
    }

    [class*="-table"] {
        min-width: 0 !important;
        font-size: 11px;
    }

    [class*="-table"] th,
    [class*="-table"] td {
        padding: 4px 8px !important;
    }
}

/* ═══════════════════════════════════════════
   TOUCH DEVICE ENHANCEMENTS
   ═══════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    .ng-action-btn {
        width: 38px;
        height: 38px;
    }

    [class*="-tool-btn"] {
        width: 38px;
        height: 38px;
    }

    /* Dropdowns: larger items */
    .rfb-check-item {
        padding: 10px 14px;
    }

    /* Grid filter inputs taller */
    [class*="-grid-filter"] {
        padding: 7px 8px;
        font-size: 14px;
    }

    /* Buttons easier to tap */
    .ng-btn-primary,
    .ng-btn-outline {
        padding: 12px 20px;
        min-height: 44px;
    }

    .rsh-btn {
        min-height: 40px;
    }

    /* Scrollbar thin on mobile */
    [class*="-table-wrapper"] {
        scrollbar-width: thin;
    }
    [class*="-table-wrapper"]::-webkit-scrollbar {
        height: 4px;
    }
    [class*="-table-wrapper"]::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 4px;
    }
}