/* ═══════════════════════════════════════════════════════════════════════════
   mobile-responsive.css  —  Global Mobile Responsiveness Layer
   Loaded after app.css and all other sheets so it wins specificity battles.

   Structure
   ─────────
   § 1  Global baseline (all screen sizes)
   § 2  Tablet  ≤ 900 px
   § 3  Mobile  ≤ 600 px
   § 4  Small mobile ≤ 400 px
   § 5  Opt-in card-view tables  (.table-cards)
   § 6  Print baseline
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   § 1  GLOBAL BASELINE  (every viewport)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Universal box-sizing so padding never causes overflow */
*,
*::before,
*::after { box-sizing: border-box; }

/* Images never overflow their container */
img,
video,
iframe,
object,
embed {
    max-width: 100%;
    height: auto;
}

/* Prevent absolute-position elements from creating stray horizontal scrollbars */
html, body {
    overflow-x: hidden;
}

/* ── Touch targets ──────────────────────────────────────────────────────── */
/* Apple HIG and Material Design both specify 44 px as the minimum tappable
   area.  We achieve this without breaking the visual size of small buttons by
   using min-height + padding rather than setting an explicit height. */

.btn,
button,
[role="button"],
.nav-link,
.page-link,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Exceptions: tiny icon-only buttons inside tables that must stay compact */
.btn-xs,
.btn.btn-xs { min-height: 32px; }

/* Form controls: generous hit area */
.form-control,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    min-height: 44px;
}

textarea { min-height: 80px !important; }

/* Checkboxes / radios: larger hit zone without changing visual size */
input[type="checkbox"],
input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

/* ── Word wrap in tables & labels ───────────────────────────────────────── */
/* Prevents Hebrew long words / concatenated strings from overflowing cells */
.table td,
.table th {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Labels in forms */
label,
.control-label,
.form-group label {
    word-break: break-word;
    white-space: normal;
}

/* ── Fluid inputs inside Bootstrap grid columns ─────────────────────────── */
/* Inputs should never overflow their column, no matter how narrow */
.form-control,
select.form-control,
textarea.form-control {
    max-width: 100%;
}

/* ── Modal baseline ─────────────────────────────────────────────────────── */
/* Allow modal-dialog to respect very narrow viewports */
.modal-dialog {
    margin: 0.5rem auto;
    max-width: min(100% - 1rem, 600px);
}

/* Modal body scroll so content is always reachable on small screens */
.modal-body {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Horizontal scroll — make EVERY bare table safe even without the wrapper */
/* If a table is NOT inside .table-responsive, wrap its overflow here */
table:not(.sa-table):not([class*="fc-"]):not([class*="grid"]) {
    max-width: 100%;
}

/* ── Scroll hint: subtle gradient shows there is content to the left ─────── */
.table-responsive {
    position: relative;
    -webkit-overflow-scrolling: touch;
    /* Subtle left-edge shadow when scrollable */
    background-image:
        linear-gradient(to right,  #fff 30%,  rgba(255,255,255,0)),
        linear-gradient(to left,   #fff 30%,  rgba(255,255,255,0)),
        radial-gradient(farthest-side at 0   50%, rgba(0,0,0,.08), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 3rem 100%, 3rem 100%, 1rem 100%, 1rem 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ── Sidebar RTL fix ────────────────────────────────────────────────────── */
/* The sidebar uses a left-side sticky layout.  On mobile we must ensure the
   content area starts at the top, not beside a collapsed sidebar. */
@media (max-width: 767px) {
    .sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
    }
    app {
        flex-direction: column !important;
    }
    /* Give mobile sidebar enough room without cutting off nav items */
    .sidebar .nav {
        max-height: 60vh !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 2  TABLET  (≤ 900 px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* ── Content padding: keep edges breathing room ─────────────────────── */
    .main > div {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ── Page header: stack title + actions on two lines ────────────────── */
    .page-header-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .page-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    /* ── Table: tighten cell padding to gain column space ───────────────── */
    .table td,
    .table th {
        padding: 0.55rem 0.65rem !important;
        font-size: 0.82rem !important;
    }

    .table thead th {
        font-size: 0.72rem !important;
        padding: 0.55rem 0.65rem !important;
        /* Keep nowrap only on desktop — allow wrap on tablet */
        white-space: normal !important;
    }

    /* ── Dashboard summary cards: 2-column grid ─────────────────────────── */
    .row.dashboard-cards-row > [class*="col-md-3"],
    .row.dashboard-cards-row > [class*="col-md-4"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ── Saas cards: keep useful layout ─────────────────────────────────── */
    .saas-card {
        padding: 1rem 1.1rem !important;
    }

    /* ── Modal width ─────────────────────────────────────────────────────── */
    .modal-dialog {
        max-width: 95vw !important;
        margin: 0.5rem auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 3  MOBILE  (≤ 600 px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

    /* ── Edge padding: never let content touch screen edges ─────────────── */
    .main > div {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        padding-top: 0.75rem !important;
    }

    .content,
    .container-fluid,
    .container {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

    .card-body {
        padding: 0.85rem 0.9rem !important;
    }

    /* ── Typography scale-down ──────────────────────────────────────────── */
    h1.page-title { font-size: 1.05rem !important; }
    h2, .h2        { font-size: 1.15rem !important; }
    h3, .h3        { font-size: 1rem    !important; }

    /* ── Buttons: ensure they wrap in action bars ────────────────────────── */
    .page-header-actions .btn,
    .card-header .btn,
    .btn-toolbar .btn {
        font-size: 0.78rem !important;
        padding: 0.42rem 0.75rem !important;
    }

    /* If a row contains multiple buttons, allow them to wrap */
    .d-flex.gap-2,
    .d-flex.flex-row {
        flex-wrap: wrap !important;
    }

    /* ── Full-width inputs ───────────────────────────────────────────────── */
    .form-control,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    .blazored-typeahead input,
    .input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Form rows: force single-column stacking */
    .form-row,
    .row.form-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .form-row > [class*="col-"],
    .row.form-row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Input groups: keep them in a row (prefix + input) */
    .input-group { flex-wrap: nowrap !important; }
    .input-group .form-control { width: auto !important; flex: 1 !important; }

    /* ── Table: very tight on mobile ─────────────────────────────────────── */
    .table td,
    .table th {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.78rem !important;
        min-width: 60px;
    }

    /* ── Fixed-width image thumbnails — cap at 80px, never overflow ─────── */
    .table td img,
    .table-responsive img {
        max-width: 60px !important;
        height: auto !important;
        border-radius: 6px;
    }

    /* Avatar / icon columns: keep compact but don't let them shrink to 0 */
    .table .avatar-col { min-width: 40px; max-width: 50px; }

    /* Description / name columns: take remaining space */
    .table .name-col,
    .table .desc-col { min-width: 120px; }

    /* Action column: minimum usable width */
    .table .td-actions { min-width: 80px; }

    /* ── Always show td-actions on mobile (hover-only is unusable on touch) */
    tr .td-actions > * { opacity: 1 !important; }

    /* ── Modals: bottom sheet, single scroll on .modal-content (footer always in scroll flow) ─ */
    .modal-dialog {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        min-height: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        pointer-events: auto !important;
    }

    .modal-dialog .modal-content {
        margin-top: auto !important;
    }

    .modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        max-height: min(95vh, calc(100dvh - env(safe-area-inset-bottom, 0px))) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .modal-body {
        max-height: none !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .modal-header,
    .modal-footer {
        flex-shrink: 0 !important;
    }

    /* ── Pagination: tighter spacing ─────────────────────────────────────── */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 2px; }
    .page-link  { padding: 0.35rem 0.6rem !important; font-size: 0.78rem !important; }

    /* ── Card headers: remove excessive padding ──────────────────────────── */
    .card-header:not(.card-header-icon) {
        padding: 0.75rem 1rem !important;
    }

    /* ── Hide non-essential columns with utility class ───────────────────── */
    /* Add class .d-mobile-none to <th>/<td> pairs in razor files to hide them on mobile */
    .d-mobile-none { display: none !important; }

    /* ── RTL: ensure page container respects direction ───────────────────── */
    .container, .container-fluid, .main > div {
        direction: rtl;
    }

    /* ── VehicleID plate: scale down ─────────────────────────────────────── */
    .VehicleID {
        font-size: 0.8rem;
        height: 24px;
        padding-top: 2px;
    }

    /* ── Scanner container: full-width on mobile ─────────────────────────── */
    .scanner-container {
        max-width: 100% !important;
        margin: 10px 0 !important;
        border-radius: 12px;
    }

    /* ── Route map: shorter on mobile ────────────────────────────────────── */
    #route-map { min-height: 300px !important; }

    /* ── Saas metric cards: smaller padding, larger text is fine ─────────── */
    .saas-card {
        padding: 0.85rem 1rem !important;
    }

    .metric-value { font-size: 0.875rem !important; }

    /* ── Page-content-card inner padding ────────────────────────────────── */
    .page-content-card { padding: 0.75rem 0.85rem; }

    /* ── AIAssistantWidget: ensure widget panel doesn't overflow ─────────── */
    .ai-panel,
    [class*="ai-assistant"],
    [class*="ai-widget"] {
        max-width: calc(100vw - 1rem) !important;
        right: 0.5rem !important;
        left: 0.5rem !important;
    }

    /* ── Flex action bars: vertical stack on mobile ──────────────────────── */
    .sa-toolbar,
    .filter-bar,
    .action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .sa-toolbar .btn,
    .filter-bar .btn,
    .action-bar .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 4  SMALL MOBILE  (≤ 400 px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {

    /* ── Minimal edge padding ────────────────────────────────────────────── */
    .main > div {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }

    /* ── Buttons: shrink label, not the touch target ─────────────────────── */
    .btn {
        font-size: 0.74rem !important;
        padding: 0.38rem 0.6rem !important;
        min-height: 44px;     /* keep touch target */
    }

    /* ── Table: absolute minimum cell padding ────────────────────────────── */
    .table td,
    .table th {
        padding: 0.3rem 0.38rem !important;
        font-size: 0.74rem !important;
    }

    /* ── Card bodies ─────────────────────────────────────────────────────── */
    .card-body { padding: 0.6rem 0.7rem !important; }

    /* ── Modal: full screen with small radius ────────────────────────────── */
    .modal-content {
        border-radius: 8px 8px 0 0 !important;
    }

    /* ── Pagination: show only prev/next on tiny screens ─────────────────── */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child) {
        display: none;
    }

    /* ── Long entity names: always truncate cleanly ──────────────────────── */
    .nav-entity-name { max-width: 140px; }

    /* ── Saas summary cards: single column ───────────────────────────────── */
    .sa-cards {
        grid-template-columns: 1fr !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 5  OPT-IN CARD-VIEW TABLES  (.table-cards)
   ═══════════════════════════════════════════════════════════════════════════

   Apply class="table table-cards" to any <table> to enable the card layout
   on mobile (≤ 600 px).  Also add data-label="Column Name" to each <td>.

   Example:
     <table class="table table-cards">
       <thead><tr><th>שם</th><th>כמות</th></tr></thead>
       <tbody>
         <tr>
           <td data-label="שם">ישראל</td>
           <td data-label="כמות">5</td>
         </tr>
       </tbody>
     </table>
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block !important;
        width: 100% !important;
    }

    /* Hide the original thead */
    .table-cards thead { display: none !important; }

    /* Each row becomes a card */
    .table-cards tbody tr {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }

    /* Each cell: label (from data-label) + value side by side */
    .table-cards td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.2rem !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 0.82rem;
        min-width: unset !important;
        text-align: left;
    }

    .table-cards td:last-child { border-bottom: none !important; }

    /* RTL-aware label using the data-label attribute */
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        flex-shrink: 0;
        margin-left: 0.5rem;   /* gap between label and value in RTL */
        text-align: right;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 6  PRINT BASELINE
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    /* Hide navigation chrome */
    .sidebar, .top-row, .navbar-toggler, .btn, .td-actions { display: none !important; }

    /* Full-width content */
    .main > div { padding: 0 !important; }
    .main { width: 100%; }

    /* Tables: always show all columns in print */
    .table-responsive { overflow: visible !important; }
    .table { font-size: 10pt; }

    /* No shadows or card borders in print */
    .card, .saas-card, .action-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 7  HELPER UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide on mobile (add to <th> AND corresponding <td> in razor) */
@media (max-width: 600px) { .col-mobile-hide { display: none !important; } }

/* Show only on mobile */
@media (min-width: 601px) { .col-mobile-only { display: none !important; } }

/* Min-width helpers for table columns */
.col-num    { min-width: 60px;  width: 60px;  }   /* ID / number column */
.col-date   { min-width: 90px;  width: 90px;  }   /* date column */
.col-amount { min-width: 80px;  width: 80px;  }   /* currency column */
.col-name   { min-width: 140px; }                 /* entity/item name — expands */
.col-actions{ min-width: 90px;  width: 90px;  text-align: center; }

/* Fluid max-width for container images in list-card views */
.img-thumb {
    width:  60px !important;
    height: 60px !important;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Action button visibility: always visible on touch devices */
@media (hover: none) {
    tr .td-actions > * { opacity: 1 !important; }
}