/* ---------------------------------------------------------------------------
   Yankee Logistics: the web portal's own styles. The tokens (yankee-tokens.css) and everything the portal shares
   with the mobile app (yankee.css: Bootstrap mapping, buttons, focus, cards, tables, status badges and job markers)
   load first, from Yankee.Clients.Shared. Reference: Documents/03-Architecture/design-system.
   --------------------------------------------------------------------------- */
html, body { font-family: var(--font-web); }

.content { padding-top: 1.25rem; }

.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Inactivity warning dialog (driven by idle.js — styled here so no inline styles are needed under CSP). */
.yk-idle-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.yk-idle-backdrop.show { display: flex; }
.yk-idle-dialog {
    background: var(--surface);
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
    width: min(22rem, calc(100vw - 2rem));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    border-top: 3px solid var(--brand-orange);
}
.yk-idle-dialog h2 {
    font-size: 1.05rem;
    margin: 0 0 .5rem;
    color: var(--brand-charcoal);
}
.yk-idle-dialog p {
    font-size: .9rem;
    color: var(--muted);
    margin: 0 0 1.1rem;
}
.yk-idle-dialog #yk-idle-count { color: var(--brand-orange-darker); }
.yk-idle-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

/* ── Phone-friendly polish (dispatcher on a phone browser) ─────────────────────── */
@media (max-width: 640.98px) {
    /* Denser, legible data tables; long addresses wrap instead of forcing a wide scroll. */
    .table { font-size: .82rem; }
    .table > :not(caption) > * > * { padding: .4rem .4rem; }
    .table td, .table th { vertical-align: middle; }

    /* Headings and page gutters scale down a touch. */
    h1.h3 { font-size: 1.35rem; }
    .content, article.content { padding-left: .85rem !important; padding-right: .85rem !important; }

    /* Toolbars (view toggles, filters, action rows) wrap cleanly and go full-bleed. */
    .btn-group { flex-wrap: wrap; }
    .btn-toolbar, .d-flex.gap-2 { flex-wrap: wrap; }

    /* The top bar stays on one line: keep Sign out, let the name ellipsize. */
    .top-row .top-user { overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }

    /* Keep the Actions column reachable while a wide data table scrolls sideways (the dispatcher's
       reschedule/cancel buttons live there). Direct-child selectors so nested sub-tables are untouched. */
    .table-responsive > .table > thead > tr > th:last-child,
    .table-responsive > .table > tbody > tr > td:last-child {
        position: sticky;
        right: 0;
        background: var(--surface);
        box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .18);
    }
}

/* Wide content (tables, the planner board) scrolls inside its own container, so the page body never does. */
.table-responsive { -webkit-overflow-scrolling: touch; }