/* ============================================================================
   PCC Terminal — Mobile fixes (phone-only, ≤767px)
   ----------------------------------------------------------------------------
   Loaded only when $mobileFixesEnabled is true in src/Template/Layout/user.ctp.
   Every visual rule is gated by @media (max-width: 767px) so iPad / iPad Mini
   portrait (768px) and up are unaffected even when the file is loaded.
   The role-aware rules near the bottom apply at all widths by design
   (defense-in-depth — the server should only emit one set of role buttons,
   but if it ever emitted both, these would still hide the wrong ones).

   Source of truth: the four approved test files
     login-mobile-test.html
     project-detail-mobile-test.html
     projects-index-mobile-test.html
     cutsheet-mobile-test.html
   The `html.fix-on` selector used in those test files has been stripped
   here — gating is now via @media query alone.
   ============================================================================ */


/* ============================================================
   ROW EDIT DRAWER — markup is in the page at all widths,
   but only shown on phone widths via the media query below.
   The base rules here keep the drawer hidden everywhere by default.
   ============================================================ */
.row-drawer-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
}
.row-drawer {
    display: none;
    position: fixed;
    top: 0; right: 0;
    /* iOS Safari: 'bottom: 0' sits behind the bottom toolbar in portrait.
       Use the small-viewport unit (svh) which excludes browser chrome,
       with a vh fallback for browsers that don't support svh. */
    bottom: 0;
    height: 100vh;
    height: 100svh;
    width: 92vw; max-width: 480px;
    background: #fff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    flex-direction: column;
    box-shadow: -4px 0 16px rgba(0,0,0,0.2);
    overscroll-behavior: contain;
}

.drawer-header {
    flex: 0 0 auto;
    background: #1a2733;
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
}
.drawer-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    width: 44px; height: 44px;
    cursor: pointer;
    padding: 0;
    flex: 0 0 44px;
}
.drawer-close:active { background: rgba(255,255,255,0.12); border-radius: 4px; }
.drawer-title {
    font-size: 22px;
    font-weight: 600;
    flex: 1;
}
.drawer-title small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    padding-bottom: 24px;
}
.drawer-section { margin-bottom: 22px; }
.drawer-section + .drawer-section {
    border-top: 1px solid #e5e8ec;
    padding-top: 18px;
}
.drawer-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7888;
    margin-bottom: 6px;
}
.drawer-readonly {
    font-size: 17px;
    color: #1a2733;
    line-height: 1.4;
    word-wrap: break-word;
}
.drawer-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    font-size: 20px;
    font-weight: 500;
    border: 2px solid #c5cdd6;
    border-radius: 6px;
    background: #fff;
    color: #1a2733;
    -webkit-appearance: none;
    appearance: none;
}
.drawer-input:focus {
    outline: 0;
    border-color: #22a7f0;
    box-shadow: 0 0 0 3px rgba(34,167,240,0.18);
}
.drawer-textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 14px;
    font-size: 16px;
    border: 2px solid #c5cdd6;
    border-radius: 6px;
    color: #1a2733;
    font-family: inherit;
    resize: vertical;
    -webkit-appearance: none;
}
.drawer-textarea:focus {
    outline: 0;
    border-color: #22a7f0;
    box-shadow: 0 0 0 3px rgba(34,167,240,0.18);
}
.drawer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.drawer-inch-readout {
    background: #eef6fb;
    border: 1px solid #cfe5f3;
    border-radius: 6px;
    padding: 10px 14px;
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.drawer-inch-readout .label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2c5878;
}
.drawer-inch-readout .value {
    font-size: 22px;
    font-weight: 700;
    color: #1a4d6e;
}
.drawer-photo-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.drawer-photo-row .btn {
    flex: 1 1 auto;
    min-height: 48px;
    font-size: 15px;
    border: 0;
    color: #fff;
    border-radius: 4px;
    padding: 10px 12px;
    cursor: pointer;
}
.drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.drawer-actions .btn-primary {
    background: #00a65a; color: #fff;
    border: 0; border-radius: 4px;
    min-height: 56px;
    font-size: 20px; font-weight: 600;
    cursor: pointer;
}
.drawer-actions .btn-secondary {
    background: #5e738b; color: #fff;
    border: 0; border-radius: 4px;
    min-height: 48px;
    font-size: 17px;
    cursor: pointer;
}
.drawer-actions .btn-warning {
    background: #f0ad4e; color: #1a2733;
    border: 0; border-radius: 4px;
    min-height: 56px;
    font-size: 18px; font-weight: 600;
    cursor: pointer;
}
.drawer-footer {
    flex: 0 0 auto;
    border-top: 1px solid #e5e8ec;
    /* Generous bottom padding so the buttons clear the iOS toolbar
       even when env(safe-area-inset-bottom) reports 0 (which it does
       in some Safari modes despite the toolbar still being visible). */
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
    background: #f7f9fb;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.drawer-footer button {
    min-height: 50px;
    border: 0;
    border-radius: 4px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}
.drawer-footer .btn-cancel { background: #e5e8ec; color: #1a2733; }
.drawer-footer .btn-save   { background: #001f3f; color: #fff; }


/* ============================================================
   ROLE-AWARE VISIBILITY (applies at all widths — defense in depth)
   The server only emits one set of role buttons per row, but if
   for any reason both were ever emitted these rules guarantee the
   correct set shows. The drawer's role-only sections also use
   these classes (.drawer-tech-only / .drawer-inspector-only).
   ============================================================ */
.role-inspector-cell-only { display: none !important; }
html.role-inspector .role-tech-cell-only { display: none !important; }
html.role-inspector .role-inspector-cell-only { display: inline-block !important; }

.drawer-inspector-only { display: none; }
.drawer-tech-only { display: flex; }
html.role-inspector .drawer-inspector-only { display: flex; }
html.role-inspector .drawer-tech-only { display: none; }
/* Inspector Notes is a section, not a flex column, so override: */
html.role-inspector .drawer-section.drawer-inspector-only { display: block; }


/* ============================================================
   THE CARDS VIEW (Projects Index) — hidden by default everywhere.
   Only shown by the @media block below. The existing 11-column
   table stays in the DOM and continues to render on iPad/desktop.
   ============================================================ */
.projects-cards { display: none; }


/* ============================================================================
   PHONE-ONLY OVERRIDES — everything below is gated by ≤767px.
   ============================================================================ */
@media (max-width: 767px) {

    /* ============================================================
       LOGIN PAGE — src/Template/Users/login.ctp
       Box becomes fluid full-width; fields and Login button bumped
       to 52–56px tall for gloved tap targets.
       ============================================================ */
    .login-box,
    .register-box {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 12px;
    }
    .login-box-body,
    .register-box-body {
        padding: 18px 16px 22px;
        border-radius: 6px;
    }
    .login-logo {
        margin: 8px 0 14px;
    }
    .login-logo img {
        max-width: 220px;
        width: 60%;
    }
    .login-box-msg,
    .register-box-msg {
        font-size: 19px;
        padding: 0 0 14px;
        line-height: 1.3;
    }
    .login-inner {
        width: 100%;
        max-width: 100%;
    }
    .login-box-body .form-control,
    .register-box-body .form-control {
        height: 52px;
        font-size: 17px;
        padding-left: 60px;
    }
    .login-box-body .form-control-feedback,
    .register-box-body .form-control-feedback {
        height: 52px;
        line-height: 52px;
        width: 48px;
        padding: 0 10px;
        font-size: 22px;
    }
    .login-btn .btn {
        height: 56px;
        font-size: 22px;
        font-weight: 600;
    }
    .login-box-body a.text-center {
        font-size: 14px;
        line-height: 1.4;
        padding: 14px 4px 4px;
    }


    /* ============================================================
       PROJECT DETAIL — src/Template/Projects/view.ctp
       Single-column layout with labels above values.
       Crew Sheet CSV links promoted to large primary buttons.
       Job Time Card table gets horizontal-scroll wrapper.
       ============================================================ */
    .content-wrapper { padding: 8px; }
    .content-header h1 { font-size: 22px; line-height: 1.3; }
    .box { padding: 12px; margin-bottom: 14px; }

    .technical_project_orange .col-md-6,
    .technical_project_orange .col-lg-6,
    .technical_project_orange .col-lg-12 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding: 0 4px;
        margin-bottom: 12px;
        line-height: 1.4;
    }
    .technical_project_orange label {
        float: none;
        clear: none;
        width: auto;
        text-align: left;
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7888;
        margin: 0 0 2px;
    }
    .technical_project_orange .col-md-6 > .col-lg-6,
    .technical_project_orange .col-lg-6 > .col-lg-6 {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        padding: 0 !important;
        font-size: 17px;
        color: #1a2733;
        font-weight: 500;
        line-height: 1.4;
        word-wrap: break-word;
    }
    .technical_project_orange h3 {
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #1a2733;
        margin: 20px 0 12px;
        padding: 8px 4px 6px;
        border-bottom: 2px solid #ebbc00;
    }
    .technical_project_orange h3:first-of-type {
        margin-top: 4px;
    }
    .technical_project_orange .col-md-6 .col-lg-6.pull-left,
    .technical_project_orange .col-md-6 > .col-lg-6.pull-left {
        display: block;
    }
    .heading-yellow {
        font-size: 22px;
        line-height: 1.3;
    }
    .project-notes-text {
        font-size: 15px;
        line-height: 1.55;
    }

    /* Job Time Card — header bar reflows. The table itself falls back to
       the global stacked-table rule (custom.css ~line 559) on phone, which
       is acceptable since this card is at the bottom of a long page and
       not field-critical. */
    .job-time-card h4 {
        font-size: 16px;
        padding: 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .job-time-card h4 .add-time {
        float: none;
        margin: 0;
        font-size: 13px;
        padding: 8px 14px;
        min-height: 36px;
    }

    /* Crew Sheet links (.cut-file) — primary action, full-width buttons.
       Map (.pdf-file) — secondary action, quieter style. */
    .technical_project_orange .col-md-6 > .col-lg-6 > .cut-file {
        display: block;
        width: 100%;
        background: #1f2b3d;
        color: #fff;
        text-decoration: none;
        padding: 14px 16px 14px 52px;
        margin: 0 0 10px 0;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        min-height: 56px;
        position: relative;
        box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    }
    .technical_project_orange .col-md-6 > .col-lg-6 > .cut-file:active {
        background: #2c3e50;
    }
    .technical_project_orange .col-md-6 > .col-lg-6 > .cut-file::before {
        content: "📄";
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        font-size: 22px;
    }
    .technical_project_orange .col-md-6 > .col-lg-6 > .cut-file::after {
        content: "Open Cut Sheet  ›";
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        opacity: 0.7;
        margin-top: 2px;
    }
    .technical_project_orange .col-md-6 > .col-lg-6 > .pdf-file {
        display: inline-flex;
        align-items: center;
        padding: 12px 16px 12px 44px;
        min-height: 48px;
        color: #1a2733;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        background: #f6f8fa;
        border: 1px solid #d2d6de;
        border-radius: 6px;
        position: relative;
    }
    .technical_project_orange .col-md-6 > .col-lg-6 > .pdf-file::before {
        content: "📕";
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        font-size: 20px;
    }


    /* ============================================================
       PROJECTS INDEX — src/Template/Projects/index.ctp
       Stack the top three boxes (Leaderboard / Awards / Notifications).
       Hide the 11-column table; show the cards block instead.
       ============================================================ */
    .content-header > .col-md-4 {
        flex: 0 0 100%;
        padding: 0;
        margin-bottom: 12px;
    }
    /* Hide Awards and Notifications on phone — Leaderboard (the first
       .col-md-4) is the only one we keep. Empty boxes wasted screen
       space and pushed project cards too far down. iPad unaffected. */
    .content-header > .col-md-4:nth-of-type(2),
    .content-header > .col-md-4:nth-of-type(3) {
        display: none;
    }
/* Hide the bottom-left time clock / timer widget on phone.
       iPad still shows it. */
    .timer-container {
        display: none !important;
    }
    .new-survey-form .box.clearfix { display: none; }
    .projects-cards {
        display: block;
        padding: 4px 0 12px;
    }

    .project-card {
        background: #fff;
        border-top: 3px solid #d2d6de;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
        margin-bottom: 14px;
        text-decoration: none;
        color: inherit;
        display: block;
        overflow: hidden;
    }
    .project-card:active { background: #f5f8fb; }

    .project-card-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px 10px;
        border-bottom: 1px solid #eef1f4;
    }
    .project-card-type {
        flex: 0 0 36px;
        height: 36px;
        border-radius: 100%;
        text-align: center;
        line-height: 36px;
        color: #fff;
        font-weight: 700;
        font-size: 18px;
    }
    .project-card-type.t-project { background: #008000; }
    .project-card-type.t-survey  { background: #ecbc00; }
    .project-card-type.t-demo    { background: #0096ff; }
    .project-card-type.t-need    { background: #00008b; }
    .project-card-property {
        flex: 1 1 auto;
        font-size: 18px;
        font-weight: 600;
        color: #1a2733;
        line-height: 1.25;
        word-wrap: break-word;
    }
    .project-card-priority {
        flex: 0 0 32px;
        height: 32px;
        border-radius: 4px;
        background: #ebbc00;
        color: #1a2733;
        font-weight: 700;
        font-size: 16px;
        text-align: center;
        line-height: 32px;
    }

    .project-card-meta {
        padding: 8px 14px 4px;
        font-size: 13px;
        color: #6b7888;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }
    .project-card-meta .pn { font-weight: 600; color: #1a2733; }

    .project-card-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
        background: #f6f8fa;
        border-top: 1px solid #eef1f4;
        border-bottom: 1px solid #eef1f4;
    }
    .project-card-stat {
        padding: 10px 8px;
        text-align: center;
        border-right: 1px solid #eef1f4;
    }
    .project-card-stat:last-child { border-right: 0; }
    .project-card-stat .stat-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7888;
        margin-bottom: 2px;
    }
    .project-card-stat .stat-value {
        font-size: 18px;
        font-weight: 700;
        color: #1a2733;
    }
    .project-card-stat.complete .stat-value { color: #008000; }

    .project-card-row {
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid #eef1f4;
        font-size: 14px;
        min-height: 44px;
    }
    .project-card-row:last-child { border-bottom: 0; }
    .project-card-row .icon { flex: 0 0 22px; font-size: 16px; }
    .project-card-row a {
        color: #3c8dbc;
        text-decoration: none;
        flex: 1 1 auto;
    }
    .project-card-row .label {
        flex: 0 0 auto;
        color: #6b7888;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-right: 6px;
    }
    .project-card-row .val {
        flex: 1 1 auto;
        color: #1a2733;
        word-wrap: break-word;
    }
    /* Contact phone is info-display only, NOT a tap target —
       avoids accidental calls from a tech in the field */
    .project-card-row .phone-text {
        flex: 1 1 auto;
        font-size: 16px;
        font-weight: 600;
        color: #1a2733;
        line-height: 24px;
    }


    /* ============================================================
       CUT SHEET — src/Template/Projects/cut_details.ctp
       Table escapes the global stacked-table rule and gets a
       dedicated horizontal-scroll wrapper (.cutsheet-hscroll).
       The first column (#) is sticky-left, with a soft shadow.
       Action buttons in the table are bumped to ≥44px tap targets.
       The per-row "edit" button opens the drawer (see mobile-fixes.js).
       ============================================================ */

    /* Page-level: nothing on phone is allowed to scroll horizontally
       except the cut sheet's dedicated wrapper. */
    html, body { overflow-x: hidden; }

    .supply-table {
        display: table;
        width: max-content;
        min-width: 100%;
        /* iOS Safari has a long-standing bug where position: sticky on
           table cells fails when the table uses border-collapse: collapse.
           Use 'separate' + zero spacing for visual parity. */
        border-collapse: separate;
        border-spacing: 0;
        margin: 0;
    }
    .supply-table thead { display: table-header-group; }
    .supply-table tbody { display: table-row-group; }
    .supply-table tr {
        display: table-row;
        margin: 0;
        border-bottom: 0;
    }
    .supply-table th,
    .supply-table td {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
        padding: 10px 8px;
        /* Borders only on right + bottom to avoid the doubled lines
           that 'border-collapse: separate' would otherwise produce. */
        border: 0 !important;
        border-right: 1px solid #3d8db8 !important;
        border-bottom: 1px solid #3d8db8 !important;
        white-space: nowrap;
        background: #fff;
    }
    .supply-table tr > th:first-child,
    .supply-table tr > td:first-child {
        border-left: 1px solid #3d8db8 !important;
    }
    .supply-table tr:first-child > th,
    .supply-table tr:first-child > td {
        border-top: 1px solid #3d8db8 !important;
    }
    .supply-table td:before { content: none; }
    .supply-table th {
        background: #22a7f0;
        color: #fff;
        font-size: 13px;
        text-transform: capitalize;
    }

    /* Dedicated horizontal scroll wrapper for the table only.
       The wrapper div is added in cut_details.ctp around the table. */
    .cutsheet-hscroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        position: relative;
        padding: 0;
        margin: 0;
    }

    /* Disable .add-scroll's overflow on phone — the table-only wrapper
       handles horizontal scroll now. .add-scroll's other children
       (tech buttons, stats, save/back) flow naturally at viewport width. */
    .add-scroll {
        overflow-x: visible;
        padding: 10px;
    }

    /* Sticky first column ONLY: # (hazard number).
       Pins to the .cutsheet-hscroll wrapper's left edge. */
    .supply-table th:nth-child(1),
    .supply-table td:nth-child(1) {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        min-width: 72px;
        font-size: 18px;
        font-weight: 600;
        box-shadow: 2px 0 4px rgba(0,0,0,0.12);
    }
    .supply-table th:nth-child(1) { z-index: 3; }
    .supply-table td:nth-child(1) input[type="checkbox"] {
        width: 22px;
        height: 22px;
        margin-left: 4px;
        vertical-align: middle;
    }

    /* Tap targets ≥44px on action buttons inside the table */
    .supply-table button,
    .supply-table .btn,
    .supply-table a.btn,
    .supply-table .btn-edit-grey,
    .supply-table .btn-replace,
    .supply-table .btn-done,
    .supply-table .btn-view,
    .supply-table .btn-delete-pic,
    .supply-table .btn-take-pic {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 15px;
        margin: 3px 0;
        display: inline-block;
    }

    /* Cursor hint that rows are tappable (drawer opens on edit-button tap) */
    .supply-table tbody tr { cursor: pointer; }


    /* ============================================================
       ROW EDIT DRAWER — phone-only display rules.
       The base drawer styles above keep it hidden everywhere;
       these rules turn it on at phone widths.
       ============================================================ */
    .row-drawer-backdrop { display: block; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
    .row-drawer { display: flex; }
    .row-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
    .row-drawer.open { transform: translateX(0); }

}
/* end @media (max-width: 767px) */