/* ============================================================
   MyFleetBoard — Main Stylesheet
   Color palette:
     Primary green (lighter): #6BA855
     Secondary green (darker): #377A2A
     Darkest green (hover/deep accent): #24421B
     Background: #FFFFFF
     Surface: #F5F5F5
     Text: #1A1A1A
     Border: #E0E0E0
============================================================ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #FFFFFF;
    color: #1A1A1A;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: #377A2A; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Legacy top navbar — used ONLY by guest_portal.php's own standalone
   nav (not includes/header.php, which uses the sidebar/topbar shell below) ── */
.navbar {
    background: #FFFFFF;
    border-bottom: 1px solid #E0E0E0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}
.nav-link {
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1A1A1A;
    white-space: nowrap;
    position: relative;
    transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: #F5F5F5; text-decoration: none; }
.nav-link.active { background: #E8F5EE; color: #377A2A; }
.nav-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.nav-username {
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
}
.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1A1A1A;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 768px) {
    .nav-hamburger { display: flex; }
    .nav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid #E0E0E0;
        padding: 0.75rem 1.25rem;
        gap: 0.25rem;
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        z-index: 99;
    }
    .nav-menu.open { display: flex; }
    .nav-inner { position: relative; }
    .nav-user {
        margin-left: 0;
        padding-top: 0.5rem;
        border-top: 1px solid #E0E0E0;
        margin-top: 0.25rem;
        flex-wrap: wrap;
    }
}

/* ── Sidebar + Topbar shell ── */
.shell { display: flex; min-height: 100vh; }

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e53935;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Sidebar (auto-hidden drawer at all screen sizes) */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    position: fixed;
    top: 0;
    left: -260px;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 4px 0 16px rgba(0,0,0,0.12);
    border-right: 1px solid #E0E0E0;
    transition: left 0.18s;
}
.sidebar.open { left: 0; }
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 95;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.5rem 1rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #E0E0E0;
    cursor: pointer;
}
.sidebar-logo svg { width: 26px; height: 26px; flex-shrink: 0; }
.sidebar-logo .wordmark {
    font-family: 'Arial Narrow', 'Segoe UI', sans-serif;
    font-weight: 700; font-size: 1rem; letter-spacing: 0.005em; text-transform: uppercase;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.sidebar-link {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    color: #377A2A;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.sidebar-link:hover { background: rgba(55,122,42,0.08); color: #24421B; text-decoration: none; }
.sidebar-link.active { background: #377A2A; color: #fff; }
.sidebar-link .ic { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.55; flex-shrink: 0; }
.sidebar-link.active .ic { opacity: 1; }

/* Main column */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: #FFFFFF;
    border-bottom: 1px solid #E0E0E0;
    padding: 0.9rem 2rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    position: sticky; top: 0; z-index: 5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.hamburger { display: block; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #1A1A1A; }
.topbar-client-logo { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; }
.topbar-client-logo img { height: 38px; width: auto; display: block; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-user { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; position: relative; }
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #377A2A; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}
.topbar-user-info { line-height: 1.25; }
.topbar-user-name { font-size: 0.82rem; font-weight: 600; color: #1A1A1A; }
.topbar-user-role { font-size: 0.72rem; color: #6b7c72; text-transform: capitalize; }
.user-menu {
    position: absolute; top: calc(100% + 0.5rem); right: 0;
    min-width: 160px; background: #FFFFFF; border: 1px solid #E0E0E0;
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    padding: 0.4rem; display: none; flex-direction: column; gap: 0.15rem; z-index: 20;
}
.user-menu.open { display: flex; }
.user-menu a, .user-menu-logout {
    display: block; width: 100%; text-align: left; padding: 0.55rem 0.7rem; border-radius: 6px;
    font-size: 0.85rem; color: #1A1A1A; text-decoration: none;
    background: none; border: none; font: inherit; cursor: pointer;
}
.user-menu a:hover, .user-menu-logout:hover { background: #F5F5F5; text-decoration: none; }

@media (max-width: 780px) {
    .topbar { padding: 0.8rem 1.1rem; }
    .topbar-client-logo img { height: 30px; }
}

/* ── Main Content ── */
.main-content {
    flex: 1;
    max-width: none;
    margin: 0 auto;
    width: 100%;
    padding: 1.25rem;
}

/* ── Footer ── */
.site-footer {
    border-top: 1px solid #E0E0E0;
    background: #F5F5F5;
}
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    font-size: 0.8rem;
    color: #777;
    text-align: center;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-height: 44px;
    white-space: nowrap;
    text-decoration: none;
    touch-action: manipulation;
}

.btn-primary {
    background: #6BA855;
    color: #fff;
    border-color: #6BA855;
}
.btn-primary:hover { background: #3d9d6e; border-color: #3d9d6e; text-decoration: none; color: #fff; }

.btn-secondary {
    background: #377A2A;
    color: #fff;
    border-color: #377A2A;
}
.btn-secondary:hover { background: #24421B; border-color: #24421B; text-decoration: none; color: #fff; }

.btn-outline {
    background: transparent;
    color: #377A2A;
    border-color: #377A2A;
}
.btn-outline:hover { background: #E8F5EE; text-decoration: none; color: #377A2A; }

.btn-danger {
    background: #e53935;
    color: #fff;
    border-color: #e53935;
}
.btn-danger:hover { background: #c62828; border-color: #c62828; text-decoration: none; color: #fff; }

.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 36px; }
.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.75rem; min-height: 30px; }

/* ── Forms ── */
.form-group { margin-bottom: 1.1rem; }
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: #333;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #1A1A1A;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 44px;
}
.form-control:focus {
    outline: none;
    border-color: #6BA855;
    box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.15);
}
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }

.form-hint { font-size: 0.8rem; color: #777; margin-top: 0.25rem; }

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }

/* ── Alerts ── */
.alert {
    padding: 0.85rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border-left: 4px solid transparent;
}
.alert-success { background: #E8F5EE; border-color: #6BA855; color: #1b5e35; }
.alert-error   { background: #FDECEA; border-color: #e53935; color: #7f1919; }
.alert-warning { background: #FFF8E1; border-color: #FFC107; color: #7a5700; }
.alert-info    { background: #E3F2FD; border-color: #2196F3; color: #0d3c61; }

/* ── Cards ── */
.card {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}
.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1A1A1A;
}
.card-body { padding: 1.25rem; }

/* ── Stat Cards ── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.stat-card-value {
    font-size: 2rem;
    font-weight: 800;
    color: #377A2A;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.stat-card-label {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.stat-card-warn { border-color: rgba(255,107,0,0.35); background: rgba(255,107,0,0.07); }
.stat-card-warn .stat-card-value { color: #cc5500; }
.stat-card-danger { border-color: rgba(211,47,47,0.35); background: rgba(211,47,47,0.07); }
.stat-card-danger .stat-card-value { color: #c62828; }

/* ── Portlets ── */
.portlet-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* .portlet/.kiosk-portlet are the outer grid: a .pgrid-* modifier class (see
   "Portlet grid column templates" below) sets grid-template-columns once,
   and every descendant down to each row's individual fields inherits those
   same column tracks via CSS Subgrid — see the chain below. This keeps the
   header row and every data row's columns aligned AND sized to their real
   content (the widest value in a column, across the header and every row,
   determines that column's width), instead of a fixed/guessed width. */
.portlet {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
    width: 100%;
    display: grid;
}
.portlet > .portlet-header { grid-column: 1 / -1; }

.portlet-header {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #E0E0E0;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.portlet-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #377A2A;
}

/* Subgrid chain: .portlet-col-headers and .portlet-body both span every
   column track and pass them down unchanged (grid-template-columns:subgrid)
   so their own children size against the SAME tracks as everything else in
   this portlet. */
.portlet > .portlet-col-headers,
.portlet > .portlet-body,
.kiosk-portlet > .portlet-col-headers,
.kiosk-portlet > .portlet-body {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}
.portlet-body {
    height: auto;
    overflow: visible;
}
.portlet-body > .portlet-empty,
.portlet-body > .portlet-no-results {
    grid-column: 1 / -1;
}

/* Portlet rows — .portlet-row is itself a subgrid pass-through so its
   .portlet-row-summary child can subgrid one level further down. */
.portlet-body > .portlet-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    border-bottom: 1px solid #E0E0E0;
    cursor: pointer;
    transition: background 0.1s;
}
.portlet-row:last-child { border-bottom: none; }
.portlet-row:hover .portlet-row-summary { background: #F5F5F5; }

.portlet-row-summary {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding: 0.7rem 1.1rem;
    display: grid;
    align-items: start;
    gap: 0.75rem;
    transition: background 0.1s;
}
.portlet-row-summary .expand-icon {
    text-align: center;
    color: #aaa;
    font-size: 0.75rem;
    transition: transform 0.2s;
}
.portlet-row.expanded .expand-icon { transform: rotate(180deg); }

.portlet-row-detail {
    grid-column: 1 / -1;
    min-width: 0;
    display: none;
    padding: 0.85rem 1.1rem;
    background: #FAFAFA;
    border-top: 1px solid #E0E0E0;
}
.portlet-row.expanded .portlet-row-detail { display: block; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem 1rem;
}
.detail-item { font-size: 0.85rem; }
.detail-label { font-weight: 600; color: #555; display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3px; }
.detail-value { color: #1A1A1A; }

.detail-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.4rem 0 0;
    margin-top: 0.4rem;
    border-top: 1px solid #E0E0E0;
}

.portlet-empty {
    padding: 1.5rem 1.1rem;
    text-align: center;
    color: #aaa;
    font-size: 0.875rem;
}

/* Summary fields in portlet rows — width now comes from the parent grid's
   track definitions (see "Portlet grid column templates" below), not from
   these classes. min-width:0 lets a track's explicit width win over intrinsic
   content size (the standard grid-blowout fix). */
.portlet-field { font-size: 0.875rem; min-width: 0; overflow: hidden; overflow-wrap: break-word; }
.portlet-field-wide { min-width: 0; }
.portlet-field strong { font-weight: 600; }
.portlet-field .label { font-size: 0.75rem; color: #888; display: block; }

/* Truncate to N lines with an ellipsis instead of wrapping indefinitely —
   used where a summary column previews long free text (full text still
   available in the row's expanded detail panel). */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Page Header ── */
.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.page-title { font-size: 1.4rem; font-weight: 700; }

/* ── Filter Bar ── */
.filter-bar {
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}
.filter-bar .form-group { margin-bottom: 0; }
.filter-bar .form-label { font-size: 0.78rem; }
.filter-bar .form-control { min-height: 38px; font-size: 0.875rem; }

/* ── Tables ── */
.table-wrapper { overflow-x: auto; border-radius: 8px; border: 1px solid #E0E0E0; }
table.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.875rem;
}
table.data-table th {
    background: #F5F5F5;
    padding: 0.7rem 0.9rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #555;
    border-bottom: 2px solid #E0E0E0;
    white-space: nowrap;
}
table.data-table td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid #E0E0E0;
    vertical-align: middle;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: #F9F9F9; }

.actions-cell { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }

/* ── Mobile card layout for tables ── */
@media (max-width: 640px) {
    .table-wrapper { border: none; }
    table.data-table, table.data-table thead, table.data-table tbody,
    table.data-table th, table.data-table td, table.data-table tr { display: block; }

    table.data-table thead tr { position: absolute; top: -9999px; left: -9999px; }

    table.data-table tbody tr {
        border: 1px solid #E0E0E0;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    table.data-table td {
        border-bottom: 1px solid #F0F0F0;
        padding: 0.55rem 0.9rem;
        display: flex;
        gap: 0.5rem;
    }
    table.data-table td:last-child { border-bottom: none; }

    table.data-table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #777;
        min-width: 120px;
        flex-shrink: 0;
    }

    .actions-cell { flex-direction: row; }
}

/* ── Modal ── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-overlay.open { display: flex; }

.modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalIn 0.15s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

.modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title { font-weight: 700; font-size: 1rem; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #777;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.1s;
}
.modal-close:hover { color: #1A1A1A; }
.modal-body { padding: 1.25rem; }
.modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: #fff;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #E0E0E0;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* ── Auth pages (login/register) ── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F5;
    padding: 1rem;
}
.auth-card {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 2rem;
    width: 100%;
    max-width: 420px;
}
.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.logo-icon { width: 36px; height: 24px; }
.logo-text { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.3px; }
.logo-myfleet { color: #6BA855; }
.logo-board { color: #377A2A; }
.auth-logo .logo-icon { width: 44px; height: 30px; }
.auth-logo .logo-text { font-size: 1.5rem; font-weight: 800; }

.auth-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; text-align: center; }
.auth-footer-link { text-align: center; font-size: 0.875rem; margin-top: 1rem; color: #555; }

/* ── Dashboard ── */
.dashboard-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin: 1.5rem 0 0.75rem;
}

/* ── Utility ── */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.text-muted { color: #888; }
.text-small { font-size: 0.8rem; }
.text-center { text-align: center; }
.d-flex { display: flex; }
.gap-1 { gap: 0.5rem; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-100 { width: 100%; }

/* Inline edit row highlight */
.row-editing { background: #FFFDE7 !important; }

/* ── Contact type tabs ── */
.type-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.tab-btn {
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}
.tab-btn:hover { background: #F5F5F5; text-decoration: none; color: #333; }
.tab-btn.active { background: #377A2A; color: #fff; border-color: #377A2A; }

/* ── Contact type badges ── */
.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.type-badge-carrier  { background: #E8F5EE; color: #377A2A; }
.type-badge-vendor   { background: #E3F2FD; color: #1565C0; }
.type-badge-internal { background: #FFF8E1; color: #E65100; }
.type-badge-customer { background: #F3E5F5; color: #6A1B9A; }

/* ── Responsive Breakpoints ── */
@media (max-width: 1000px) {
    .portlet-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .portlet-grid { grid-template-columns: 1fr; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); }

    .form-row { flex-direction: column; }
    .form-row .form-group { min-width: unset; }

    .filter-bar { flex-direction: column; }
    .filter-bar .form-group { width: 100%; }

    .modal { max-width: 100%; }

    .auth-card { padding: 1.5rem 1.25rem; }

    /* Restore full touch-target height for small buttons on mobile */
    .btn-xs { min-height: 44px; padding: 0.2rem 0.75rem; }
}

@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .btn { font-size: 0.85rem; }
    .site-cards-grid { grid-template-columns: 1fr; }
}

/* ── Import Panel ── */
.import-panel {
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.import-panel h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    color: #1A1A1A;
}
.import-panel .upload-hint {
    font-size: 0.8rem;
    color: #777;
    margin-top: 0.4rem;
}
.import-summary {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.import-stat {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}
.import-stat strong { display: block; font-size: 1.4rem; font-weight: 700; }
.import-stat.is-new   strong { color: #377A2A; }
.import-stat.is-skip  strong { color: #777; }
.import-stat.is-warn  strong { color: #E65100; }
.import-stat.is-error strong { color: #C62828; }

/* Conflict cards */
.conflict-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0; }

.conflict-card {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-left: 4px solid #E65100;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}
.conflict-card .conflict-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}
.comparison-table th {
    text-align: left;
    padding: 0.2rem 0.5rem;
    background: #F5F5F5;
    font-weight: 600;
    color: #555;
}
.comparison-table td { padding: 0.2rem 0.5rem; }
.diff-row td { background: #FFF8E1; }
.diff-row td:first-child { color: #888; }

.conflict-card label { font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }

/* Error rows table */
.error-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 0.5rem; }
.error-table th { background: #F5F5F5; padding: 0.3rem 0.5rem; text-align: left; font-weight: 600; color: #555; }
.error-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #F0F0F0; }
.error-table tr:last-child td { border-bottom: none; }

/* Result banner */
.import-result {
    background: #E8F5EE;
    border: 1px solid #6BA855;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
.import-result h2 { font-size: 1rem; font-weight: 600; color: #377A2A; margin-bottom: 0.5rem; }
.import-result .import-summary { margin: 0.5rem 0 0; }

/* ── OOS Completed Row (full table in oos.php) ── */
.oos-completed-row td {
    background: #E8F5EE;
    padding: 0.45rem 1rem;
    border-bottom: 1px solid #C8E6C9;
}
.completed-row-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.completed-row-inner .cr-truck {
    font-weight: 700;
    font-size: 0.9rem;
}
.completed-status-badge {
    display: inline-flex;
    align-items: center;
    background: #377A2A;
    color: #fff;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.completed-time-label {
    color: #555;
    font-size: 0.82rem;
}

/* ── OOS Completed Row in portlet (dashboard / kiosk) ── */
.portlet-row-completed {
    background: #E8F5EE;
    border-left: 3px solid #6BA855;
}
.portlet-row-completed .portlet-row-summary {
    cursor: default;
    padding: 0.45rem 1rem;
}
.portlet-row-completed .portlet-row-summary:hover {
    background: transparent;
}

/* ── Kiosk Display Page ── */
.kiosk-page {
    background: #FFFFFF;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #1A1A1A;
}
.kiosk-header {
    background: #377A2A;
    color: #fff;
    padding: 0.9rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.kiosk-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.kiosk-logo-text { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.kiosk-site-name { font-size: 1.1rem; opacity: 0.85; padding-left: 0.75rem; border-left: 1px solid rgba(255,255,255,0.4); }
.kiosk-clock     { font-size: 1rem; font-weight: 600; white-space: nowrap; opacity: 0.95; text-align: right; }

.kiosk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    padding: 1.25rem;
    flex: 1;
    align-content: start;
}
@media (max-width: 1200px) {
  .kiosk-grid {
    grid-template-columns: 1fr;
  }
}

.kiosk-portlet {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
}
.kiosk-portlet > .kiosk-portlet-header { grid-column: 1 / -1; }
.kiosk-portlet-header {
    background: #F5F5F5;
    border-bottom: 2px solid #6BA855;
    padding: 0.7rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1A1A1A;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kiosk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.kiosk-table th {
    text-align: left;
    padding: 0.5rem 1rem;
    background: #FAFAFA;
    font-weight: 600;
    color: #555;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #E0E0E0;
}
.kiosk-table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #F0F0F0;
    vertical-align: middle;
}
.kiosk-table tr:last-child td { border-bottom: none; }
.kiosk-table tr.kiosk-completed-row td {
    background: #E8F5EE;
    border-bottom: 1px solid #C8E6C9;
}
.kiosk-empty {
    padding: 1.5rem 1.25rem;
    color: #aaa;
    font-size: 0.9rem;
    text-align: center;
}

.kiosk-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    color: #999;
    border-top: 1px solid #E0E0E0;
    background: #FAFAFA;
}

/* Kiosk status badges */
.kiosk-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}
.kiosk-status-pending    { background: #F5F5F5; color: #555; }
.kiosk-status-progress   { background: #FFF3E0; color: #FF6B00; }
.kiosk-status-vendor     { background: #F5F5F5; color: #9E9E9E; }
.kiosk-status-completed  { background: #E8F5EE; color: #377A2A; }

/* Error/inactive screen */
.kiosk-error {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAFA;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.kiosk-error-card {
    text-align: center;
    max-width: 400px;
    padding: 3rem 2rem;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
}
.kiosk-error-card h1 { font-size: 1.4rem; color: #1A1A1A; margin-bottom: 0.75rem; }
.kiosk-error-card p  { color: #777; font-size: 0.95rem; }

/* ── Truck autocomplete ── */
.ac-wrapper {
    position: relative;
}
.ac-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #6BA855;
    border-top: none;
    border-radius: 0 0 6px 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 264px;
    overflow-y: auto;
    z-index: 300;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ac-item {
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F0F0F0;
    color: #1A1A1A;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover,
.ac-item.ac-active  { background: #E8F5EE; color: #377A2A; }
.ac-no-results {
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
}
/* ── Inline form field errors ── */
.field-error {
    font-size: 0.8rem;
    color: #C62828;
    margin-top: 0.2rem;
    min-height: 1em;
}


/* ── Read-only completed record notice ── */
.readonly-notice {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: rgba(46, 125, 82, 0.08);
    border: 1px solid rgba(46, 125, 82, 0.25);
    color: #377A2A;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.ac-field-error {
    font-size: 0.8rem;
    color: #C62828;
    margin-top: 0.25rem;
    display: none;
}
.ac-field-error.visible { display: block; }

/* ── Site Tabs ── */
.site-tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 0.75rem;
    margin-bottom: 0.5rem;
    scrollbar-width: thin;
}
.site-tab {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    background: #fff;
    color: #555;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.site-tab:hover { background: #E8F5EE; border-color: #6BA855; color: #377A2A; }
.site-tab.active { background: #6BA855; border-color: #6BA855; color: #fff; font-weight: 600; }

/* ── Portlet column headers (sort bar) ──
   grid-template-columns:subgrid (set above, alongside .portlet-body) is what
   actually aligns these columns with every row's — see "Portlet grid column
   templates" below for where the tracks themselves are defined. ── */
.portlet-col-headers {
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 1.1rem;
    background: #F7F9F8;
    border-bottom: 1px solid #E8EDE9;
}
.pch {
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pch-expand { }
.pch-wide { }
.sortable-pch {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.sortable-pch:hover { color: #377A2A; }
.sortable-pch::after { content: ' ↕'; opacity: 0.4; font-size: 0.7rem; }
.sortable-pch.pch-asc::after  { content: ' ↑'; opacity: 1; color: #6BA855; }
.sortable-pch.pch-desc::after { content: ' ↓'; opacity: 1; color: #6BA855; }

/* ── Content-type tabs (shared standard — maintenance.php, parts_library.php) ── */
.ref-tabs {
    display: flex;
    border-bottom: 2px solid #E0E0E0;
    margin-bottom: 1.25rem;
    gap: 0;
    flex-wrap: wrap;
}
.ref-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.55rem 1.4rem;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    color: #777;
    transition: color 0.15s;
}
.ref-tab:hover { color: #333; }
.ref-tab.active { color: #377A2A; border-bottom-color: #377A2A; }

/* ── Portlet header bar: Add button (left), search + filter (right) ──
   Same box treatment as .portlet-header — sits inside .portlet, as its
   first child, so it reads as the portlet's own title bar. ── */
.portlet-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #E0E0E0;
    background: #F5F5F5;
}
.portlet-search-wrap { display: flex; align-items: center; gap: 0.5rem; position: relative; margin-left: auto; }
.portlet-search-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    font-size: 0.85rem;
    width: 220px;
    max-width: 45vw;
}
.portlet-filter-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    color: #555;
    flex-shrink: 0;
    position: relative;
}
.portlet-filter-btn:hover { background: #F5F5F5; }
.portlet-filter-btn.has-filters { border-color: #377A2A; color: #377A2A; }
.portlet-filter-menu {
    position: absolute; top: calc(100% + 0.4rem); right: 0;
    background: #fff; border: 1px solid #E0E0E0; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    padding: 1rem; min-width: 240px; display: none; z-index: 20;
}
.portlet-filter-menu.open { display: block; }
.portlet-filter-menu .form-group:last-child { margin-bottom: 0; }
.portlet-no-results { padding: 1.5rem; text-align: center; color: #aaa; display: none; }

/* ── Tiered responsive columns (progressive hide, no live measurement) ──
   Summary field of a given tier hides below its breakpoint; the matching
   .detail-t* twin in the expanded detail panel shows ONLY below that same
   breakpoint — together exactly one copy is ever visible, so a column
   moves from the row into the expand panel as the page narrows without
   ever duplicating. ── */
@media (max-width: 1700px) { .col-t4 { display: none; } }
@media (max-width: 1500px) { .col-t5 { display: none; } }
@media (max-width: 1300px) { .col-t1 { display: none; } }
@media (max-width: 1100px) { .col-t2 { display: none; } }
@media (max-width: 900px)  { .col-t3 { display: none; } }
.detail-t1, .detail-t2, .detail-t3, .detail-t4, .detail-t5 { display: none; }
@media (max-width: 1700px) { .detail-t4 { display: block; } }
@media (max-width: 1500px) { .detail-t5 { display: block; } }
@media (max-width: 1300px) { .detail-t1 { display: block; } }
@media (max-width: 1100px) { .detail-t2 { display: block; } }
@media (max-width: 900px)  { .detail-t3 { display: block; } }

/* ── Portlet grid column templates (2026-08-14, content-based via Subgrid 2026-08-14) ──
   Applied to the OUTER .portlet/.kiosk-portlet element only (its
   .portlet-col-headers, .portlet-body, each .portlet-row, and each
   .portlet-row-summary all inherit these same tracks via subgrid — see the
   chain defined above). Every column is minmax(0, auto): its BASE width is
   the actual widest content in that column across the header AND every row
   (same as max-content would give), but — unlike max-content, which is
   explicitly exempt from Grid's stretch behavior — a track whose max sizing
   function is the `auto` keyword DOES absorb leftover space when the grid is
   wider than its content needs, distributing it across all `auto` tracks.
   That's what makes columns actually fill the portlet on a wide screen
   instead of bunching to the left with dead space after them. The `0`
   minimum still lets it shrink safely to 0 on a narrow screen — mobile-safe
   at any width, no separate breakpoint needed for the non-tiered shapes
   below. Do not swap this back to max-content — that's the exact bug this
   comment is warning about (reported 2026-08-15, columns correctly sized
   but not growing to fill the portlet).

   Most shapes only need a generic "how many columns" class — content-based
   sizing means it doesn't matter what TYPE of data is in a column (a date
   column and a status column both just size to their own content), so the
   same .pgrid-3col/.pgrid-4col serve every 3- or 4-column portlet site-wide. */
.pgrid-3col { grid-template-columns: repeat(3, minmax(0,auto)) 24px; }
.pgrid-4col { grid-template-columns: repeat(4, minmax(0,auto)) 24px; }

/* maintenance.php Maintenance Records — identical on single-site and All
   Sites (2026-08-15: Site moved into the Asset # sub-line, same as every
   other portlet, instead of being its own column):
   Date / Asset # / Status / RO # / Reason / Est. Return / Technician / Parts / Notes
   Tiers out narrowest-first: Technician(t1) -> Est. Return(t2) -> Reason(t3)
   -> Parts(t5) -> Notes(t4, needs the most room, since it's the least
   critical at-a-glance field). Status never tiers. Each step just adds one
   more track as room allows.

   Reason, Parts, and Notes are all free text (or a list rendered as text),
   so instead of minmax(0,auto) — which sizes a column to whatever its
   longest uninterrupted content needs, making short values in that same
   column look like they have almost no gap after them, since the box
   shrinks down to hug short content too (2026-08-15) — they use a TRUE
   fixed 220px (not a minmax cap): the column always reserves the full
   220px regardless of content length, so the gap after it is always the
   same, and text wraps within it. These 3 columns never appear below their
   tier's breakpoint, so there's no mobile-shrink-safety reason for them to
   be flexible the way every other (auto) column needs to be. */
.pgrid-maint-records { grid-template-columns: repeat(4, minmax(0,auto)) 24px; }
@media (min-width: 901px)  { .pgrid-maint-records { grid-template-columns: minmax(0,auto) minmax(0,auto) minmax(0,auto) minmax(0,auto) 220px 24px; } }
@media (min-width: 1101px) { .pgrid-maint-records { grid-template-columns: minmax(0,auto) minmax(0,auto) minmax(0,auto) minmax(0,auto) 220px minmax(0,auto) 24px; } }
@media (min-width: 1300px) { .pgrid-maint-records { grid-template-columns: minmax(0,auto) minmax(0,auto) minmax(0,auto) minmax(0,auto) 220px minmax(0,auto) minmax(0,auto) 24px; } }
@media (min-width: 1500px) { .pgrid-maint-records { grid-template-columns: minmax(0,auto) minmax(0,auto) minmax(0,auto) minmax(0,auto) 220px minmax(0,auto) minmax(0,auto) 220px 24px; } }
@media (min-width: 1700px) { .pgrid-maint-records { grid-template-columns: minmax(0,auto) minmax(0,auto) minmax(0,auto) minmax(0,auto) 220px minmax(0,auto) minmax(0,auto) 220px 220px 24px; } }

/* maintenance.php Outside Vendor: Date Sent / Asset # / Location / Reason /
   Expected Return — only Expected Return tiers (t1). Reason is free text,
   same treatment as Reason on Maintenance Records: a true fixed 220px
   (not a minmax cap, so it always reserves the full width regardless of
   content) plus matching right-padding on the field itself (see the
   portlet-field style="padding-right:24px" in maintenance.php). */
.pgrid-ov { grid-template-columns: minmax(0,auto) minmax(0,auto) minmax(0,auto) 220px 24px; }
@media (min-width: 1300px) { .pgrid-ov { grid-template-columns: minmax(0,auto) minmax(0,auto) minmax(0,auto) 220px minmax(0,auto) 24px; } }

/* ── Sortable table headers ── */
.sortable-th { white-space: nowrap; }
.sortable-th .sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.sortable-th .sort-link:hover { color: #377A2A; }
.sort-arrow { font-size: 0.8rem; color: #6BA855; }

/* ── Carrier credentials box ── */
.carrier-credentials {
    background: #E8F5EE;
    border: 1px solid #6BA855;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}
.creds-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.creds-label { font-weight: 600; color: #377A2A; min-width: 70px; }
.creds-value { background: #fff; padding: 0.2rem 0.5rem; border-radius: 4px; border: 1px solid #cde9d8; font-family: monospace; font-size: 0.95rem; }
.creds-note { margin-top: 0.6rem; font-size: 0.8rem; color: #777; }

/* ── PM carrier display (read-only) ── */
.pm-carrier-display { background: #F7F9F8; color: #555; cursor: default; }

/* ── Carrier login active badge ── */
.carrier-login-active { font-size: 0.75rem; color: #6BA855; font-weight: 600; white-space: nowrap; }

/* ── Settings page ── */
.settings-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.settings-field { display: flex; flex-direction: column; gap: 0.25rem; }
.settings-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #888; }
.settings-value { font-size: 0.95rem; color: #1A1A1A; }
.settings-admin-note { font-size: 0.82rem; color: #999; margin-top: 0.25rem; }
.settings-pw-form { max-width: 480px; }

/* ── Shared status badge base ── */
.status-badge,
.pm-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; white-space: nowrap; }

/* PM badge color variants */
.pm-badge-scheduled     { background: rgba(255,255,255,0.9); color: #555;    border: 1px solid #ccc; }
.pm-badge-in-progress   { background: rgba(249,168,37,0.2);  color: #b37a00; border: 1px solid rgba(249,168,37,0.4); }
.pm-badge-reschedule    { background: rgba(255,107,0,0.15);  color: #cc5500; border: 1px solid rgba(255,107,0,0.3); }
.pm-badge-completed     { background: rgba(46,125,82,0.15);  color: #377A2A; border: 1px solid rgba(46,125,82,0.3); }
.pm-badge-not-scheduled { background: rgba(158,158,158,0.15);color: #666;    border: 1px solid rgba(158,158,158,0.3); }
.pm-badge-past-due      { background: rgba(211,47,47,0.15);  color: #c62828; border: 1px solid rgba(211,47,47,0.3); }

/* Maintenance badge color variants */
.maint-badge-pending    { background: rgba(255,255,255,0.9); color: #555;    border: 1px solid #ccc; }
.maint-badge-progress   { background: rgba(249,168,37,0.2);  color: #b37a00; border: 1px solid rgba(249,168,37,0.4); }
.maint-badge-poa-active { background: rgba(249,168,37,0.15); color: #9a6800; border: 1px solid rgba(249,168,37,0.3); }
.maint-badge-poa-oos    { background: rgba(211,47,47,0.15);  color: #c62828; border: 1px solid rgba(211,47,47,0.3); }
.maint-badge-vendor     { background: rgba(158,158,158,0.15);color: #666;    border: 1px solid rgba(158,158,158,0.3); }
.maint-badge-pr-active  { background: rgba(46,125,82,0.15);  color: #1b5e20; border: 1px solid rgba(46,125,82,0.3); }
.maint-badge-pr-oos     { background: rgba(183,28,28,0.15);  color: #b71c1c; border: 1px solid rgba(183,28,28,0.3); }
.maint-badge-completed  { background: rgba(46,125,82,0.15);  color: #377A2A; border: 1px solid rgba(46,125,82,0.3); }

/* Secondary badges — Additional Work / Off Site (below the primary status badge) */
.aw-badge, .os-badge { background: rgba(255,255,255,0.9); color: #555; border: 1px solid #ccc; margin-top: 0.3rem; }

/* ── PM scheduling conflict warning ── */
.pm-conflict-box {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: #FF6B00;
    line-height: 1.45;
}
.pm-conflict-box ul { margin: 0.1rem 0 0 1.1rem; padding: 0; }
.pm-conflict-box li { margin-bottom: 0.15rem; }

/* ── Maintenance status left-edge bars (portlet rows) ── */
.portlet-row.maint-pending    { border-left: 5px solid #E0E0E0; }
.portlet-row.maint-progress   { border-left: 5px solid #FF6B00; }
.portlet-row.maint-poa-active { border-left: 5px solid #F9A825; }
.portlet-row.maint-poa-oos    { border-left: 5px solid #D32F2F; }
.portlet-row.maint-vendor     { border-left: 5px solid #9E9E9E; }
.portlet-row.maint-completed  { border-left: 5px solid #377A2A; }

/* Maintenance status left-edge bars (data-table rows, desktop) */
tr.maint-pending > td:first-child    { box-shadow: inset 5px 0 0 #E0E0E0; }
tr.maint-progress > td:first-child   { box-shadow: inset 5px 0 0 #FF6B00; }
tr.maint-poa-active > td:first-child { box-shadow: inset 5px 0 0 #F9A825; }
tr.maint-poa-oos > td:first-child    { box-shadow: inset 5px 0 0 #D32F2F; }
tr.maint-vendor > td:first-child     { box-shadow: inset 5px 0 0 #9E9E9E; }
tr.maint-completed > td:first-child  { box-shadow: inset 5px 0 0 #377A2A; }

/* Mobile card layout — border-left on tr */
@media (max-width: 640px) {
    table.data-table tbody tr.maint-pending    { border-left: 5px solid #E0E0E0; }
    table.data-table tbody tr.maint-progress   { border-left: 5px solid #FF6B00; }
    table.data-table tbody tr.maint-poa-active { border-left: 5px solid #F9A825; }
    table.data-table tbody tr.maint-poa-oos    { border-left: 5px solid #D32F2F; }
    table.data-table tbody tr.maint-vendor     { border-left: 5px solid #9E9E9E; }
    table.data-table tbody tr.maint-completed  { border-left: 5px solid #377A2A; }
}

/* ── Updated kiosk status badges for new status names ── */
.kiosk-status-poa-active { background: #FFF8E1; color: #F9A825; }
.kiosk-status-poa-oos    { background: #FDECEA; color: #D32F2F; }

/* ── Responsive font scaling ── */
@media (max-width: 640px) {
    html { font-size: 13px; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    html { font-size: 14px; }
}
@media (min-width: 1025px) {
    html { font-size: 15px; }
}

/* ── Modal delete zone ── */
.modal-delete-zone {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #F5F5F5;
    display: flex;
    justify-content: flex-start;
}

/* ── Admin section tabs ── */
.admin-tab-bar {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #E8F5EE;
    margin-bottom: 1rem;
}
.admin-tab {
    padding: 0.5rem 1.1rem;
    border: none
    background: none;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9rem;
    border-radius: 4px 4px 0 0;
}
.admin-tab:hover { color: #377A2A; background: #F5FAF7; }
.admin-tab.active { color: #377A2A; border-bottom-color: #6BA855; font-weight: 600; }
/* ── Maintenance status color bars ── */

.portlet-row { position:relative; }

/* ── Admin sidebar site context ── */
.sidebar-site-ctx {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.sidebar-site-name { font-weight: 600; color: #24421B; font-size: 0.85rem; letter-spacing: 0.02em; }
.sidebar-site-back {
    font-size: 0.75rem;
    color: #377A2A;
    text-decoration: none;
    white-space: nowrap;
}
.sidebar-site-back:hover { text-decoration: underline; }

/* ── Site overview page ── */
.overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
}
.site-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.site-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 1.25rem;
    background: #fff;
    border: 1.5px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 120px;
}
.site-card:hover {
    border-color: #6BA855;
    box-shadow: 0 2px 10px rgba(46,125,82,0.15);
}
.site-card-code {
    font-size: 1.55rem;
    font-weight: 700;
    color: #377A2A;
    letter-spacing: 0.03em;
    margin-bottom: 0.35rem;
}
.site-card-name {
    font-size: 0.83rem;
    color: #777;
    text-align: center;
}
.site-card-address {
    font-size: 0.75rem;
    color: #aaa;
    text-align: center;
    margin-top: 0.2rem;
}
.site-cards-empty {
    padding: 2.5rem;
    text-align: center;
    color: #999;
    background: #F5F5F5;
    border-radius: 8px;
    font-size: 0.95rem;
}

/* ── Pass Down card ──────────────────────────────────────────── */
.pd-card {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    margin-bottom: 1.2rem;
    overflow: hidden;
}
.pd-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background: #F5F5F5;
    border-bottom: 1px solid #E0E0E0;
    transition: background 0.15s;
}
.pd-card-header:hover { background: #EFEFEF; }
.pd-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #377A2A;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pd-unread-badge {
    background: #E53935;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    line-height: 1.5;
}
.pd-card-toggle {
    font-size: 0.75rem;
    color: #888;
    transition: transform 0.2s;
}
.pd-card.open .pd-card-toggle { transform: rotate(180deg); }
.pd-card-body { display: none; padding: 1rem; }
.pd-card.open .pd-card-body { display: block; }
.pd-messages { max-height: 320px; overflow-y: auto; margin-bottom: 1rem; }
.pd-messages-empty { color: #999; font-size: 0.88rem; padding: 0.5rem 0; }
.pd-message {
    padding: 0.55rem 0;
    border-bottom: 1px solid #F0F0F0;
}
.pd-message:last-child { border-bottom: none; }
.pd-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}
.pd-author {
    font-weight: 600;
    font-size: 0.83rem;
    color: #333;
}
.pd-site-tag {
    font-size: 0.75rem;
    background: #E8F0FE;
    color: #3F51B5;
    border-radius: 4px;
    padding: 1px 5px;
}
.pd-time {
    font-size: 0.75rem;
    color: #999;
}
.pd-edited { font-style: italic; }
.pd-body {
    font-size: 0.88rem;
    color: #444;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.pd-actions {
    margin-top: 0.25rem;
    display: flex;
    gap: 0.75rem;
}
.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: #377A2A;
    cursor: pointer;
    text-decoration: underline;
}
.btn-link:hover { color: #1B5E3A; }
.pd-compose { border-top: 1px solid #E8E8E8; padding-top: 0.85rem; }
.pd-compose-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.pd-compose textarea {
    flex: 1;
    min-width: 180px;
    min-height: 60px;
    resize: vertical;
    font-size: 0.88rem;
}
.pd-compose select { font-size: 0.88rem; }
.pd-compose-actions { display: flex; gap: 0.5rem; align-items: center; }
.pd-edit-form { margin-top: 0.4rem; }
.pd-edit-form textarea {
    width: 100%;
    min-height: 52px;
    resize: vertical;
    font-size: 0.88rem;
}
.pd-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.3rem; }

/* ── Future Maintenance section (maintenance.php) ────────────── */
.fm-section { margin-top: 2rem; }
.fm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.fm-section-title {
    font-size: 1.4rem;
    font-weight: 700;
}