/* ===========================================================================
   AZTÖR CRM — MOBILE RESPONSIVE LAYER  v3
   ---------------------------------------------------------------------------
   Plain CSS loaded directly from public/css/ — no build step required.
   Loads AFTER the Vite bundle so these rules win without !important.

   SECTIONS:
     1. Tables → Cards  (phones)
     2. KPI cards
     3. Forms, filters, action bars
     4. Page chrome / headings
     5. Tablets
     6. Print
     7. Quotation / Invoice line-items editor
     8. Sticky save bar
     9. Deal workflow tracker
    10. Deal page — Approval Pipeline (2-col grid on mobile)
    11. Deal page — Related Records (mobile card layout)
    12. Deal page — header meta grid
    13. Modals on mobile
    14. Portal responsive tweaks
    15. Button touch targets
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. TABLES → CARDS  (phones only)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .az-table-wrap.az-stacked {
        overflow-x: visible;
        margin-left: 0;
        margin-right: 0;
        border: 0;
        background: transparent;
    }

    .az-table:not(.az-table-scroll),
    .az-table:not(.az-table-scroll) tbody,
    .az-table:not(.az-table-scroll) tr,
    .az-table:not(.az-table-scroll) td {
        display: block;
        width: auto;
    }

    .az-table:not(.az-table-scroll) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .az-table:not(.az-table-scroll) tbody tr {
        background: #fff;
        border: 1px solid #e6eaf2;
        border-radius: 14px;
        margin-bottom: 12px;
        padding: 4px 2px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    }

    .az-table:not(.az-table-scroll) tbody tr:last-child { margin-bottom: 0; }
    .az-table:not(.az-table-scroll) tbody tr:hover { background: #fff; }

    .az-table:not(.az-table-scroll) tbody { border: 0; }
    .az-table:not(.az-table-scroll) tbody > :not([hidden]) ~ :not([hidden]) {
        border-top-width: 0;
    }

    .az-table:not(.az-table-scroll) tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        padding: 9px 14px;
        white-space: normal;
        text-align: right;
        border-bottom: 1px solid #f1f4f9;
        word-break: break-word;
    }

    .az-table:not(.az-table-scroll) tbody td:last-child { border-bottom: 0; }

    .az-table:not(.az-table-scroll) tbody td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #64748b;
        padding-top: 2px;
    }

    .az-table:not(.az-table-scroll) tbody td[data-label=""]::before,
    .az-table:not(.az-table-scroll) tbody td:not([data-label])::before {
        content: none;
    }

    .az-table:not(.az-table-scroll) tbody td[data-label=""],
    .az-table:not(.az-table-scroll) tbody td:not([data-label]) {
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
    }

    .az-table:not(.az-table-scroll) tbody td:first-child {
        background: #f8fafc;
        border-radius: 12px 12px 0 0;
        font-weight: 600;
        font-size: 15px;
    }

    .az-table:not(.az-table-scroll) tbody td[colspan] {
        justify-content: center;
        text-align: center;
        background: transparent;
        font-weight: 400;
    }
    .az-table:not(.az-table-scroll) tbody td[colspan]::before { content: none; }

    .az-table-scroll { min-width: 640px; }
    .az-table-scroll tbody td:first-child,
    .az-table-scroll thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        box-shadow: 1px 0 0 #e6eaf2;
    }
    .az-table-scroll thead th:first-child { background: #f8fafc; }
}


/* ---------------------------------------------------------------------------
   2. KPI CARDS — stop clipping values
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .az-kpi p.truncate {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .az-kpi .text-2xl {
        font-size: 1.15rem;
        line-height: 1.3;
        word-break: break-word;
    }

    .az-kpi { padding: 12px 12px 12px 14px; }
}

@media (min-width: 380px) and (max-width: 767px) {
    .az-kpi .text-2xl { font-size: 1.3rem; }
}


/* ---------------------------------------------------------------------------
   3. FORMS, FILTERS AND ACTION BARS
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .az-card form .grid,
    .az-filters .grid {
        grid-template-columns: 1fr;
    }

    .az-actions,
    .az-card-head .flex,
    .az-page-head .flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    .az-btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .az-btn-primary.az-btn-block { width: 100%; }

    /* Prevent iOS Safari zoom on focus */
    .az-input,
    .az-select,
    textarea.az-input,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }
}


/* ---------------------------------------------------------------------------
   4. PAGE CHROME
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

    h1, h2, .az-page-title {
        word-break: break-word;
        hyphens: auto;
    }

    .az-page-title { font-size: 1.4rem; line-height: 1.25; }

    .az-card-pad { padding: 14px; }

    body { overflow-x: hidden; }

    main { padding-bottom: 84px; }

    .az-dl { grid-template-columns: 1fr; }
    .az-dl dt { margin-top: 10px; }
}


/* ---------------------------------------------------------------------------
   5. TABLETS
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .az-table tbody td,
    .az-table thead th { padding-left: 12px; padding-right: 12px; }

    .az-table { font-size: 13px; }

    .az-table-wrap { overflow-x: auto; }
    .az-table thead th:first-child,
    .az-table tbody td:first-child {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 1;
    }
    .az-table thead th:first-child { background: #f8fafc; }
}


/* ---------------------------------------------------------------------------
   6. PRINT
   --------------------------------------------------------------------------- */
@media print {
    .az-table, .az-table tbody, .az-table tr, .az-table td { display: revert; }
    .az-table thead { position: static; width: auto; height: auto; clip: auto; }
    .az-table tbody td::before { content: none; }
}


/* ===========================================================================
   7. QUOTATION / INVOICE EDIT FORM — line items on mobile
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {

    #itemsTable { display: block; width: 100%; }
    #itemsTable thead { display: none; }
    #itemsTable tbody { display: block; }

    #itemsTable tbody tr.js-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
        position: relative;
        border: 1px solid #e6eaf2;
        border-radius: 14px;
        padding: 38px 12px 14px;
        margin-bottom: 14px;
        background: #fff;
    }

    #itemsTable tbody td { display: block; padding: 0; border: 0; }

    #itemsTable tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #64748b;
    }

    #itemsTable tbody td.js-num {
        position: absolute;
        top: 10px;
        left: 12px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #eef2f7;
        font-size: 11px;
        font-weight: 700;
        color: #475569;
    }
    #itemsTable tbody td.js-num::before { content: none; }

    #itemsTable tbody td:nth-child(2) { grid-column: 1 / -1; }

    #itemsTable tbody td:nth-last-child(3) { grid-column: 1 / -1; }

    #itemsTable tbody td:last-child {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    #itemsTable tbody td:last-child::before { content: none; }

    #itemsTable tbody td:nth-last-child(2) {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    #itemsTable tbody td:nth-last-child(2)::before { margin-bottom: 0; }

    #itemsTable input,
    #itemsTable select { width: 100%; }

    #itemsTable .text-right { text-align: left; }

    #itemsTable { min-width: 0; }
    .az-items-wrap { overflow-x: visible !important; }
}


/* ===========================================================================
   8a. AZ-SAVE-BAR BASE STYLES
   =========================================================================== */
.az-save-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 72px;
    z-index: 999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 10px 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,.12);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* ===========================================================================
   8. STICKY SAVE BAR — mobile
   =========================================================================== */
@media (max-width: 1023px) {

    .az-save-bar,
    form .fixed.inset-x-0.bottom-0 {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
        flex-wrap: wrap;
    }

    .az-save-bar .az-btn-primary,
    form .fixed.inset-x-0.bottom-0 .az-btn-primary {
        flex: 1 1 auto;
        min-height: 46px;
    }

    .az-save-bar .ml-auto,
    form .fixed.inset-x-0.bottom-0 .ml-auto {
        margin-left: 0;
        flex: 1 0 100%;
        order: -1;
        text-align: right;
        font-size: 13px;
    }

    body.az-has-savebar main { padding-bottom: 170px; }
}

/* Desktop save bar */
@media (min-width: 1024px) {
    .az-save-bar {
        bottom: 0 !important;
        padding-left: 17rem !important;
        padding-right: 24px;
        flex-wrap: nowrap;
        gap: 12px;
    }
    .az-save-bar .az-btn-primary {
        flex: 0 0 auto !important;
        min-width: auto !important;
    }
    .az-save-bar .az-btn {
        flex: 0 0 auto;
    }
    body.az-has-savebar main { padding-bottom: 72px; }
}


/* ===========================================================================
   9. DEAL WORKFLOW TRACKER
   --------------------------------------------------------------------------- */
.az-tracker-track {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
}

.az-tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 84px;
    position: relative;
    text-align: center;
    padding: 0 4px;
}

.az-tracker-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: #e6eaf2;
    z-index: 0;
}

.az-tracker-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.az-tracker-label {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
    max-width: 84px;
}

@media (max-width: 767px) {
    .az-tracker-track {
        flex-direction: column;
        align-items: stretch;
        overflow-x: visible;
    }

    .az-tracker-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        flex: none;
        padding: 8px 0;
    }

    .az-tracker-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 34px;
        left: 13px;
        right: auto;
        width: 2px;
        height: calc(100% - 6px);
        background: #e6eaf2;
    }

    .az-tracker-label {
        margin-top: 0;
        margin-left: 12px;
        max-width: none;
        font-size: 13px;
    }
}


/* ===========================================================================
   10. DEAL PAGE — APPROVAL PIPELINE
   ---------------------------------------------------------------------------
   PROBLEM (Screenshot 1):
   The pipeline grid has `grid gap-2 sm:grid-cols-2 lg:grid-cols-4`.
   On a phone (<640px) this becomes 1 column — 7 cards stacked vertically,
   each taking 100% width. The cards are small enough (just icon + label +
   status dot) that 2 columns fit perfectly on a 375px phone.
   =========================================================================== */

/* Force 2 columns on all phones — the cards are compact enough */
@media (max-width: 639px) {
    .az-pipeline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* On very small phones (< 375px) keep 2 columns but reduce padding */
@media (max-width: 374px) {
    .az-pipeline-grid > div {
        padding: 8px !important;
    }
    .az-pipeline-grid .text-xs {
        font-size: 11px;
    }
}


/* ===========================================================================
   11. DEAL PAGE — RELATED RECORDS
   ---------------------------------------------------------------------------
   PROBLEM (Screenshots 2 & 3):
   Each record row is:
     [LABEL w-28] [badge] [number/text] [ml-auto buttons...]

   On mobile this wraps badly because:
   - The label is `w-28 shrink-0` (7rem fixed) — takes ~112px
   - Badge + number text takes remaining space on line 1
   - `ml-auto` buttons have no space so they wrap to a new flex line
   - That new line has no context — orphaned buttons below the text

   FIX:
   Below 640px, switch each row to a 2-row card:
   - Row 1: label (left) + badge (right)
   - Row 2: record number/name (left) + action buttons (right, wrapping)
   This keeps context while giving buttons full width to work with.
   =========================================================================== */

@media (max-width: 639px) {
    /* Each related record row */
    .az-related-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 6px 8px !important;
        padding: 12px 14px !important;
        align-items: start !important;
    }

    /* Label: top-left — wider on mobile since no competition for space */
    .az-related-label {
        grid-column: 1;
        grid-row: 1;
        width: auto !important;      /* remove fixed w-28 */
        font-size: 11px !important;
        color: #64748b;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-weight: 700;
        align-self: center;
    }

    /* Badge/status — top-right */
    .az-related-status {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0 !important;
        align-self: center;
        justify-self: end;
    }

    /* Record number/title — bottom-left (spans both columns if no actions) */
    .az-related-value {
        grid-column: 1;
        grid-row: 2;
        font-size: 13px;
        color: #071426;
        align-self: start;
    }

    /* Action buttons — bottom, full row, wrap naturally */
    .az-related-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-left: 0 !important;  /* remove ml-auto */
        margin-top: 4px;
    }

    /* Make every action button in related records a proper tap target */
    .az-related-actions .az-btn,
    .az-related-actions .az-btn-sm {
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
    }

    /* Inline forms inside related actions should stretch too */
    .az-related-actions form.inline {
        display: contents;
    }
    .az-related-actions form.inline .az-btn,
    .az-related-actions form.inline .az-btn-sm {
        flex: 1 1 auto;
    }
}


/* ===========================================================================
   12. DEAL PAGE — HEADER META GRID
   ---------------------------------------------------------------------------
   The `dl` grid in the deal header uses `grid-cols-2 gap-x-4 gap-y-3`
   with `sm:grid-cols-3 lg:grid-cols-4`. On a narrow phone the 2-column
   layout means each cell gets only ~150px, and longer values like
   "New Installation" or "Residential Building" truncate/overflow.
   Drop to 2 columns but give values more room to wrap.
   =========================================================================== */

@media (max-width: 479px) {
    .az-deal-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px !important;
    }

    .az-deal-meta dt {
        font-size: 11px !important;
    }

    .az-deal-meta dd {
        font-size: 13px !important;
        word-break: break-word;
    }
}


/* ===========================================================================
   13. MODALS ON MOBILE
   ---------------------------------------------------------------------------
   Modals with `max-w-md` can still overflow on a 375px phone when the
   content has wide inputs. Clamp the modal to the viewport and make it
   scrollable if the content is taller than the screen.
   =========================================================================== */

@media (max-width: 639px) {

    /* Full-screen overlay: already `p-4` so the modal insets 16px each side */
    .fixed.inset-0.z-50 > .max-w-md,
    .fixed.inset-0.z-50 > .max-w-lg,
    .fixed.inset-0.z-50 > .max-w-xl {
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modal form padding: full on desktop, tighter on phone */
    .fixed.inset-0.z-50 > div > form.p-5 {
        padding: 14px !important;
    }
}


/* ===========================================================================
   14. PORTAL TWEAKS
   ---------------------------------------------------------------------------
   The portal layout is already good. These are small gap fixes.
   =========================================================================== */

/* Portal cards — stack actions on phone */
@media (max-width: 639px) {
    .p-card { padding: 14px !important; }

    /* Portal quote accept/reject buttons should be full-width on mobile */
    .p-quote-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .p-quote-actions a,
    .p-quote-actions button,
    .p-quote-actions form {
        width: 100% !important;
    }
    .p-quote-actions form button {
        width: 100% !important;
    }
}


/* ===========================================================================
   15. BUTTON TOUCH TARGETS
   ---------------------------------------------------------------------------
   Small .az-btn-sm buttons are 32px tall on desktop. On mobile, anything
   under 44px fails Apple HIG / WCAG 2.5.5. Raise the floor on phones.
   =========================================================================== */

@media (max-width: 767px) {
    .az-btn-sm {
        min-height: 38px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}


/* ===========================================================================
   16. DEAL — NEXT ACTION + BLOCKERS CARDS
   ---------------------------------------------------------------------------
   On mobile these cards need the heading and text in a better layout.
   The "Go" button should sit below the action text, not beside it, so
   a long action string like "Prepare Quotation for ASD Installation" does
   not push the button off-screen.
   =========================================================================== */

@media (max-width: 639px) {
    .az-next-action-card {
        padding: 14px !important;
    }
    .az-next-action-card .az-action-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .az-next-action-card .az-action-row .az-btn {
        width: 100% !important;
    }

    .az-blockers-card ul {
        padding-left: 0 !important;
    }
    .az-blockers-card li {
        padding: 6px 0 !important;
        border-bottom: 1px solid rgba(220,38,38,.1);
        font-size: 13px !important;
    }
    .az-blockers-card li:last-child { border-bottom: 0; }
}


/* ===========================================================================
   17. TOPBAR ON MOBILE
   ---------------------------------------------------------------------------
   The topbar has search icon, bell icon, avatar — these can cluster at
   a narrow width. Give each a proper touch target.
   =========================================================================== */

@media (max-width: 767px) {
    /* Topbar action icons */
    header a, header button {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ===========================================================================
   18. BREADCRUMB OVERFLOW
   ---------------------------------------------------------------------------
   Long breadcrumb strings like "AZD-2026-00012 > Quotations > AZQ-2026-00044"
   overflow on a 375px screen. Allow wrapping.
   =========================================================================== */

@media (max-width: 639px) {
    nav[aria-label="Breadcrumb"] {
        white-space: normal !important;
        flex-wrap: wrap !important;
        font-size: 12px !important;
    }
}


/* ===========================================================================
   19. DEAL PAGE — FINANCIAL SUMMARY SIDEBAR
   ---------------------------------------------------------------------------
   On mobile the 3-column grid becomes 1 column and the financial sidebar
   drops below the main content (correct). But the material summary grid
   inside uses grid-cols-2 which is fine, just needs smaller text.
   =========================================================================== */

@media (max-width: 639px) {
    .az-material-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .az-material-summary > div {
        padding: 10px !important;
    }
    .az-material-summary dt {
        font-size: 11px !important;
    }
    .az-material-summary dd {
        font-size: 16px !important;
    }
}


/* ===========================================================================
   20. DEAL — ACTION BUTTONS IN @section('actions')
   ---------------------------------------------------------------------------
   The page-head actions area wraps buttons and can push headings off screen.
   On mobile, wrap buttons gracefully.
   =========================================================================== */

@media (max-width: 639px) {
    /* The flex row that holds page-level action buttons */
    .mb-5.flex.flex-wrap.items-end.justify-between > div:last-child {
        width: 100%;
        justify-content: flex-end;
    }
}


/* ===========================================================================
   21. INSPECTION / JCR CHECKLIST ITEMS
   ---------------------------------------------------------------------------
   The checklist pill buttons (Good / Fair / Poor / Faulty / Not Working / N/A)
   are rendered as inline-flex buttons. On a 375px phone they wrap poorly
   if the font size is too large. Also the save bar overlaps the last item.
   (Screenshot 5 shows save bar cutting over the last visible checklist section)

   The `style="height:130px"` spacer below the save bar in the blade views
   is already 130px — but the save bar is 60px tall + bottom-nav 56px = 116px.
   On phones with a home indicator that's another ~34px = 150px total.
   The spacer needs to be at least 160px.
   =========================================================================== */

@media (max-width: 767px) {
    /* Ensure the spacer div at the bottom of forms is always tall enough */
    .az-form-spacer {
        height: 170px !important;
        display: block;
    }

    /* Checklist pill buttons: smaller on phone so they fit in a row */
    .az-checklist-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .az-checklist-pills button {
        min-height: 36px !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
        flex: 1 1 auto;
    }
}



/* ===========================================================================
   17. BUTTON STYLES (v4) — every .az-btn looks like a button
   ---------------------------------------------------------------------------
   A plain .az-btn (no colour variant) had no background and no border, so
   "Create quote", "Add equipment", "Apply", "Cancel", "Edit"... showed as
   bare text, most visibly on phones. Give it the outline look, and define
   the variants the templates use but the bundle never shipped
   (sm / dark / secondary / success). Buttons that already carry their own
   bg-* utility keep it.
   =========================================================================== */
.az-btn:where(:not(.az-btn-primary, .az-btn-navy, .az-btn-accent, .az-btn-danger, .az-btn-dark,
               .az-btn-ghost, .az-btn-success, [class^="bg-"], [class*=" bg-"])) {
    background-color: #fff;
    border: 1px solid #d5dce6;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}
.az-btn:where(:not(.az-btn-primary, .az-btn-navy, .az-btn-accent, .az-btn-danger, .az-btn-dark,
               .az-btn-ghost, .az-btn-success, [class^="bg-"], [class*=" bg-"])):hover {
    background-color: #f5f8fc;
    border-color: #b9c4d3;
}
.az-btn-dark {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.75rem; padding: .625rem 1rem; border-radius: .75rem;
    font-size: .875rem; font-weight: 600;
    background-color: #071426; color: #fff; border: 1px solid #071426;
}
.az-btn-dark:hover { background-color: #123b70; }
.az-btn-success {
    background-color: #16a34a; color: #fff; border: 1px solid #16a34a;
}
.az-btn-sm {
    min-height: 2.25rem; padding: .375rem .75rem; font-size: .8125rem; border-radius: .625rem;
}
.az-btn[disabled], .az-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ===========================================================================
   18. MOBILE LAYOUT SAFETY NET (v4)
   =========================================================================== */
@media (max-width: 767px) {
    /* Nothing may push the page sideways; wide tables/editors scroll inside. */
    html, body { overflow-x: hidden; }
    main, #p-main { min-width: 0; max-width: 100%; }
    .az-card { min-width: 0; }
    img, svg, video, canvas { max-width: 100%; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
    .az-card table:not(.az-table) { display: block; max-width: 100%; overflow-x: auto; }
    input, select, textarea { max-width: 100%; }
    .grid { min-width: 0; }

    /* Button rows wrap instead of overflowing; related-record actions stack. */
    .az-related-actions, .az-page-head .flex, .az-card-head .flex { flex-wrap: wrap; }
    .az-related-actions { width: 100%; margin-left: 0 !important; justify-content: stretch; }
    .az-related-actions > .az-btn, .az-related-actions > a, .az-related-actions > form { flex: 1 1 45%; }
    .az-related-actions > form > .az-btn { width: 100%; }

    /* Long words / emails / numbers break instead of overflowing. */
    .az-card, td, dd, p, h1, h2, h3 { overflow-wrap: anywhere; }
}


/* ===========================================================================
   19. SHARED CONTENT SYSTEM (v5) — one alignment/typography language
   ---------------------------------------------------------------------------
   Root causes fixed here (not per-page patches):
   a) Every .az-table cell was white-space:nowrap (bundle rule), so item
      descriptions, subjects, notes and addresses could never wrap: tables
      grew wider than their card, and descriptions ran into Qty/Price.
   b) Card headers use 20px (p-5) side padding but table cells use 16px, so
      "Lines", "Activity" etc. sat 4px right of the table text below them —
      the "content shifted left" look. First/last cells now match p-5.
   c) Multi-line text (descriptions/notes/scope/address) collapsed its line
      breaks. .az-desc keeps the stored line breaks and wraps long words.
   =========================================================================== */

/* c) Descriptions, notes, scope, remarks, addresses */
.az-desc {
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.55;
}
p.az-desc, span.az-desc, dd.az-desc, div.az-desc { max-width: 78ch; }

/* a) Table cells wrap unless the template explicitly asked for nowrap
      (numbers, dates, money, status). */
.az-table tbody td:not(.whitespace-nowrap) { white-space: normal; }
.az-table thead th { white-space: nowrap; }
.az-table td.text-right, .az-table th.text-right { white-space: nowrap; }
/* Text columns with descriptions get room; number columns stay compact. */
.az-table td:has(> .az-desc), .az-table td.az-desc,
.az-table td:has(> p + p), .az-table td:has(> .font-medium + .text-xs) {
    min-width: 12rem;
}
@media (min-width: 1440px) {
    .az-table td:has(> .az-desc), .az-table td.az-desc,
    .az-table td:has(> p + p), .az-table td:has(> .font-medium + .text-xs) { min-width: 16rem; }
}
/* Money/qty columns: compact, right aligned, never wrapped */
.az-table td.text-right, .az-table th.text-right { padding-left: .75rem; padding-right: .75rem; }
/* Rows with multi-line descriptions: numbers line up with the item name */
.az-table tbody tr:has(.az-desc) > td,
.az-table tbody tr:has(td > .font-medium + .text-xs) > td { vertical-align: top; }
.az-table td p + p, .az-table td .font-medium + .text-xs { margin-top: .125rem; }
/* "#" column: no big gap after the number */
.az-table th.w-8, .az-table td:first-child:has(> :only-child:empty) { width: 2.5rem; }
.az-table th.w-8 { padding-right: .25rem; }

/* b) Table edges line up with card headers (p-5 = 1.25rem) */
@media (min-width: 768px) {
    .az-card .az-table th:first-child, .az-card .az-table td:first-child,
    .az-table-wrap .az-table th:first-child, .az-table-wrap .az-table td:first-child { padding-left: 1.25rem; }
    .az-card .az-table th:last-child, .az-card .az-table td:last-child,
    .az-table-wrap .az-table th:last-child, .az-table-wrap .az-table td:last-child { padding-right: 1.25rem; }
}

/* Every table scrolls inside its own box, never the page. */
.az-card > .overflow-x-auto, .az-table-wrap { max-width: 100%; }

/* Phone cards: description cells read top-to-bottom, left aligned,
   instead of being squeezed into a right-aligned 60% column. */
@media (max-width: 767px) {
    .az-table:not(.az-table-scroll) tbody td:has(> .az-desc),
    .az-table:not(.az-table-scroll) tbody td.az-desc,
    .az-table:not(.az-table-scroll) tbody td:has(> .font-medium + .text-xs),
    .az-table:not(.az-table-scroll) tbody td:has(> p + p) {
        display: block;
        text-align: left;
    }
    .az-table:not(.az-table-scroll) tbody td:has(> .az-desc)::before,
    .az-table:not(.az-table-scroll) tbody td.az-desc::before,
    .az-table:not(.az-table-scroll) tbody td:has(> .font-medium + .text-xs)::before,
    .az-table:not(.az-table-scroll) tbody td:has(> p + p)::before {
        display: block;
        margin-bottom: 4px;
    }
    .az-table td { min-width: 0 !important; }

    /* KPI numbers shrink instead of overflowing 2-column KPI grids */
    .az-kpi-value { font-size: clamp(1.05rem, 5.2vw, 1.5rem); overflow-wrap: anywhere; }
}

/* Tablets: 3/4-column grids step down so cards are not squeezed. */
@media (min-width: 768px) and (max-width: 1023px) {
    .md\:grid-cols-4:not(.az-keep-cols):not(:has(> [class*="col-span-"])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Laptops (1024–1439): the 3-column show-page layout (2/3 + 1/3) keeps its
   side column readable. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .lg\:grid-cols-4:not(.az-keep-cols):not(:has(> [class*="col-span-"])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Large monitors: keep content at a readable width, centred in the area
   right of the sidebar, instead of stretching to 2560px. */
@media (min-width: 1800px) {
    .az-main { max-width: 1720px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* Page header: title + subtitle stay together; actions wrap under on phones */
.az-main > .mb-5.flex > div:first-child { min-width: 0; }
.az-main > .mb-5.flex h1 { overflow-wrap: anywhere; line-height: 1.25; }
@media (max-width: 639px) {
    .az-main > .mb-5.flex { align-items: flex-start; }
    .az-main > .mb-5.flex > div:last-child:not(:first-child) { width: 100%; }
}

/* Focus visibility (keyboard users) */
.az-btn:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #2563eb; outline-offset: 2px;
}

/* Any .az-table whose parent is not already a scroll box scrolls inside
   that parent on tablet/desktop — wide tables never push the page. */
@media (min-width: 768px) {
    :where(div, section, form):has(> table.az-table) { overflow-x: auto; max-width: 100%; }
}

/* Grid/flex children may shrink below their content's width (the CSS
   default "min-width:auto" let one wide table stretch a whole column past
   the screen at tablet sizes). */
.grid > *, .az-card { min-width: 0; }

/* ===========================================================================
   20. HEADER ALIGNMENT FOLLOWS ITS COLUMN (v6)
   ---------------------------------------------------------------------------
   The bundle's `.az-table thead th { text-align:left }` is more specific
   than the `text-right` / `text-center` utilities the templates put on the
   header cells, so every numeric heading (Sites, Contacts, Deals, Amount,
   Total…) sat on the left while its numbers sat on the right. The header now
   honours its own alignment class, and uses the same side padding as the
   cells below so the heading ends exactly where the numbers end.
   =========================================================================== */
.az-table thead th.text-right  { text-align: right; }
.az-table thead th.text-center { text-align: center; }
.az-table thead th.text-left   { text-align: left; }
.az-table td.text-center, .az-table th.text-center { padding-left: .75rem; padding-right: .75rem; }

/* ===========================================================================
   21. PHONE CARDS & PIPELINE BOARD (v7)
   ---------------------------------------------------------------------------
   a) List cards (Leads, Deals, Customers…): a cell holding two pieces of
      information (e.g. "Lakshmi Menon" + "Lakshmi Menon Trading LLC · Dubai",
      or "Sliding Gate" + "Repair and Maintenance") laid them side by side in
      a squeezed row. The cell is now a 2-column grid: label on the left,
      every value stacked neatly on the right.
   b) Deals pipeline on phones: columns were a sideways-scrolling strip with
      half-visible columns. Stages now stack top-to-bottom at full width and
      empty stages are hidden (each card still has its stage dropdown).
   =========================================================================== */
@media (max-width: 767px) {
    .az-table:not(.az-table-scroll) tbody td[data-label]:not([data-label=""]):not(:has(> .az-desc)):not(.az-desc) {
        display: grid;
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 2px;
        align-items: start;
    }
    .az-table:not(.az-table-scroll) tbody td[data-label]:not([data-label=""]):not(:has(> .az-desc)):not(.az-desc)::before {
        grid-column: 1;
        grid-row: 1 / span 12;
    }
    .az-table:not(.az-table-scroll) tbody td[data-label]:not([data-label=""]):not(:has(> .az-desc)):not(.az-desc) > * {
        grid-column: 2;
        justify-self: end;
        text-align: right;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .az-table:not(.az-table-scroll) tbody td[data-label]:not([data-label=""]):not(:has(> .az-desc)):not(.az-desc) > .flex {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    #board { flex-direction: column; overflow-x: visible; gap: 12px; }
    #board > section { width: 100%; flex-shrink: 1; }
    #board > section:not(:has(article)) { display: none; }
    #board .js-drop { min-height: 0; overflow: visible; }
}


/* ===========================================================================
   22. MOBILE 100% PASS (v8)
   =========================================================================== */

/* Checkboxes / radios: comfortable to tap everywhere */
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 767px) {
    input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}

@media (max-width: 767px) {
    /* ---- a) Filter bars: search/text/date full width, dropdowns two per row ---- */
    form[method="GET"].flex > label, form[method="GET"] .flex > label,
    form[method="get"].flex > label {
        flex: 1 1 calc(50% - .75rem);
        min-width: 0;
    }
    form[method="GET"] label:has(> input[type="search"]), form[method="GET"] label:has(> input[name="q"]),
    form[method="GET"] label:has(> input[type="text"]), form[method="GET"] label:has(input[type="search"]),
    form[method="GET"] label:has(input[name="q"]) {
        flex-basis: 100% !important;
    }
    form[method="GET"] input:not([type="checkbox"]):not([type="radio"]), form[method="GET"] select { width: 100%; min-width: 0; }
    form[method="GET"] label:has(> input[type="checkbox"]), form[method="GET"] label:has(> input[type="radio"]) {
        flex: 1 1 100% !important; display: flex; align-items: center; gap: 10px; min-height: 40px;
    }

    /* ---- b) Document line editors (invoice, PO, requests, JCR materials…):
             each line becomes a card, every box full size with its label ---- */
    form table:has(:is(input, select, textarea)[name*="]["]) { display: block; width: 100%; }
    form table:has(:is(input, select, textarea)[name*="]["]) thead { display: none; }
    form table:has(:is(input, select, textarea)[name*="]["]) tbody { display: block; }
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #e3e8ef;
        border-radius: 12px;
    }
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr > td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        border: 0 !important;
    }
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr > td:has(:is(input, select)[name$="[item_name]"]),
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr > td:has([name$="[description]"]),
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr > td:has([name$="[inventory_item_id]"]),
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr > td:has([name$="[remarks]"]),
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr > td:has([name$="[specification]"]),
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr > td:has(textarea),
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr > td:has(.js-del),
    form table:has(:is(input, select, textarea)[name*="]["]) tbody tr > td[colspan] {
        grid-column: 1 / -1;
    }
    form table:has(:is(input, select, textarea)[name*="]["]) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px;
    }
    form table:has(:is(input, select, textarea)[name*="]["]) td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #64748b;
    }
    /* Remove-line buttons: a real button, not a tiny ✕ */
    form table button[class*="js-del"], form table button[class*="js-remove"], form table button.js-rm {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        min-height: 40px; min-width: 40px; padding: 0 14px;
        border: 1px solid #fecaca; border-radius: 10px; color: #b91c1c; background: #fff;
        font-size: 14px; font-weight: 600;
    }
    form table button[class*="js-del"]::after { content: "Remove line"; }
    form table tbody tr > td:has(button[class*="js-del"]) { text-align: right !important; grid-column: 1 / -1; }

    /* Stand-alone text links (Back to…, Forgot?, names in cards): 36px tap area */
    main a:not(.az-btn):not(.block):not(.flex):not(.inline-flex):not(p a):not(li a):not(span a) {
        display: inline-flex; align-items: center; min-height: 36px; min-width: 2.25rem;
    }
    /* Expand/collapse rows (details > summary), text buttons, board cards */
    main summary { min-height: 40px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
    main button:not(.az-btn):not([class*="js-del"]) { min-height: 36px; }
    form table td > button:not(.az-btn) { min-height: 40px; min-width: 40px; }
    #board article a, #board a.block { display: block; padding: 6px 0; }
    #board select { min-height: 40px; }
    .az-table:not(.az-table-scroll) tbody td a:not(.az-btn) { min-height: 36px; min-width: 2.75rem; display: inline-flex; align-items: center; }

    /* ---- c) Settings menu: one scrollable row of tabs instead of a full screen of links ---- */
    nav.az-card.h-fit {
        display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto;
        padding: 8px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    nav.az-card.h-fit::-webkit-scrollbar { display: none; }
    nav.az-card.h-fit > a, nav.az-card.h-fit > * > a {
        flex: 0 0 auto; white-space: nowrap; border-radius: 999px !important;
        padding: 8px 14px !important; min-height: 38px;
    }
    nav.az-card.h-fit > :not(a):not(div):not(ul), nav.az-card.h-fit > hr, nav.az-card.h-fit > div:empty { display: none; }
    nav.az-card.h-fit > div:not(:empty), nav.az-card.h-fit > ul { display: contents; }
    nav.az-card.h-fit svg { display: none; }

    /* ---- d) Two-part rows (name + badges | phone + buttons) wrap instead of squeezing ---- */
    .az-card .flex.items-center.justify-between:has(> :nth-child(3)),
    .az-card li.flex, .az-card > div > .flex.gap-3:has(.az-btn) { flex-wrap: wrap; }
    .az-card .flex > .min-w-0.flex-1 { min-width: 9rem; }

    /* ---- e) Small text never below 11px on phones ---- */
    .text-\[10px\] { font-size: 11px !important; }

    /* ---- f) Links inside table cards: bigger tap area ---- */
}

/* ---- g) KPI amounts: never broken in the middle of a number ---- */
.az-kpi-value { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 767px) {
    .az-kpi-value { font-size: clamp(1rem, 4.6vw, 1.5rem); overflow-wrap: normal; }
}

/* ===========================================================================
   23. QA CHECKLIST ITEMS (v9)
   =========================================================================== */
/* iOS zooms the page when a focused field's text is under 16px: keep 16px on phones */
@media (max-width: 767px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}
/* Catalogue / autocomplete dropdowns never wider than the screen */
@media (max-width: 400px) {
    .js-catalogue-results, [class*="min-w-[320px]"] { min-width: 0 !important; max-width: calc(100vw - 24px) !important; }
}
/* Phone landscape (short height): fixed bars stay compact so fields remain visible */
@media (max-height: 480px) and (orientation: landscape) {
    .az-save-bar { padding-top: .35rem !important; padding-bottom: .35rem !important; }
    .az-bottom-nav, nav.fixed.bottom-0 { display: none !important; }
    main.az-main { padding-bottom: 5rem !important; }
}
/* Print: real tables again, never the phone card layout */
@media print {
    .az-table thead { position: static !important; clip: auto !important; width: auto !important; height: auto !important; display: table-header-group !important; }
    .az-table tbody tr { display: table-row !important; border: 0 !important; padding: 0 !important; }
    .az-table tbody td { display: table-cell !important; }
    .az-table tbody td::before { content: none !important; }
    table.az-edit-table tbody tr { display: table-row !important; }
    table.az-edit-table tbody td { display: table-cell !important; }
    aside, .az-bottom-nav, .az-save-bar, header.sticky { display: none !important; }
}
/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Deals board never widens the page (landscape phones / small tablets) */
#board { max-width: 100%; }
.az-main:has(#board) { overflow-x: clip; }
@media (max-width: 1023px) { html, body { overflow-x: hidden; } }

/* ===========================================================================
   24. ACCESSIBILITY – WCAG AA contrast (v10, from axe-core scan)
   =========================================================================== */
aside .text-slate-500 { color: #94a3b8; }            /* sidebar group headings on navy: 3.9 → 7.4:1 */
.az-section-title { color: #4b5a6e; }                 /* grey headings on page background: 4.4 → 6.6:1 */
.text-az-success { color: #15803d; }                  /* green amounts on white: 3.3 → 5.0:1 */
.text-az-warning { color: #b45309; }
.text-az-muted { color: #5b6477; }