/* ── Layout ── */
body {
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.flex-grow {
    flex: 1 0 auto;
}

/* ── Navbar ── */
.navbar {
    background: #16191c !important;
}

.navbar-brand {
    letter-spacing: 0.5px;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #ffc107 !important;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #ffc107 !important;
}

/* ── Footer ── */
footer {
    background: #16191c !important;
}

/* ── Dashboard card title icons ── */
.card-title i {
    font-size: 1.45rem;
    vertical-align: -0.15em;
}

/* ── Cards: gold left border, keep rounded corners + shadow ── */
.card {
    border-left: 4px solid #ffc107;
    border-top: 1px solid rgba(0,0,0,.1);
    border-right: 1px solid rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(0,0,0,.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.13) !important;
}

.card-header {
    background-color: #fff;
    border-bottom: 2px solid #ffc107;
    font-weight: 600;
}

/* ── Tables: dark header matching navbar/footer ── */
.table thead th {
    background-color: #16191c;
    color: #fff;
    border-color: #16191c;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* ── Column resize handle ── */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
    border-right: 2px solid transparent;
    transition: border-color 0.15s;
}
.col-resize-handle:hover {
    border-right-color: #ffc107;
}
body.col-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}
body.col-resizing .col-resize-handle {
    border-right-color: #ffc107;
}

/* ── Footer links ── */
footer a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* ── Form labels ── */
.form-label {
    font-weight: 600;
}

/* ── btn-warning hover (Bootstrap's default shift is too subtle) ── */
.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #000;
}

/* ── Logout button ── */
.btn-outline-light.btn-sm:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

/* ── Role badges ── */
.role-badge-traffic-warden   { background-color: #f59f00; color: #fff; }
.role-badge-customer-service { background-color: #1098ad; color: #fff; }
.role-badge-technician       { background-color: #37b24d; color: #fff; }
.role-badge-head-technician  { background-color: #3b5bdb; color: #fff; }
.role-badge-cash-collector   { background-color: #ae3ec9; color: #fff; }
.role-badge-manager          { background-color: #f03e3e; color: #fff; }

/* ── Map fullscreen modal ── */
.modal-map-expand .modal-dialog {
    margin: 4vh auto;
    max-width: 92vw;
    width: 92vw;
}
.modal-map-expand .modal-content {
    height: 90vh;
    display: flex;
    flex-direction: column;
}
.modal-map-expand .modal-body {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
}
.modal-map-expand .modal-body > div {
    height: 100%;
    border-radius: 0 0 0.375rem 0.375rem;
}

/* ══════════════════════════════════════
   RESPONSIVE / MOBILE
══════════════════════════════════════ */

/* Navbar: shrink logo + clean up collapsed menu on small screens */
@media (max-width: 991.98px) {
    .navbar-brand img { height: 28px !important; }

    /* Separate user info / logout from the nav links when collapsed */
    .navbar-nav.ms-auto {
        border-top: 1px solid rgba(255,255,255,.12);
        padding-top: 0.6rem;
        margin-top: 0.4rem;
        align-items: flex-start !important;
    }

    .navbar-nav.ms-auto .nav-item {
        width: 100%;
        margin-right: 0 !important;
    }

    .navbar-nav.ms-auto .navbar-text {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0;
    }

    .navbar-nav.ms-auto .btn {
        width: 100%;
        margin-top: 0.4rem;
        text-align: left;
    }
}

/* Page headers: allow action button to wrap below title on xs screens */
@media (max-width: 575.98px) {
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Cards: disable lift effect on touch-only devices */
@media (hover: none) {
    .card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Tables: smaller text on mobile so more fits before horizontal scroll */
@media (max-width: 767.98px) {
    .table { font-size: 0.78rem; }
    .table .badge { font-size: 0.68rem; }
    .table .btn-sm { font-size: 0.72rem; padding: 0.15rem 0.4rem; }
}

/* Hide lower-priority table columns on small phones */
@media (max-width: 575.98px) {
    .table .d-none-xs { display: none !important; }
}

/* Footer: stack the top row and hide tagline on mobile */
@media (max-width: 767.98px) {
    footer .col-auto.text-end { display: none !important; }
    footer .col-md-4.text-md-end { text-align: left !important; margin-top: 0.5rem; }
    footer .list-inline-item { display: block; margin-bottom: 0.25rem; }
    footer .list-inline-item.text-secondary { display: none; }
}

/* Tighter main container padding on very small screens */
@media (max-width: 575.98px) {
    main .container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    h2 { font-size: 1.4rem; }
}

/* ── Network frequency badges ── */
.badge-4g { background-color: #0d6efd; color: #fff; }
.badge-5g { background-color: #7c3aed; color: #fff; }

/* ── Machine number badge ── */
.badge-machine {
    background-color: #ffc107;
    color: #16191c;
}

/* ── Machine / issue status badges ── */
.badge-status-Active  { background-color: #198754; }
.badge-status-OOO     { background-color: #dc3545; }
.badge-status-Partly  { background-color: #fd7e14; }
.badge-status-Pending { background-color: #6c757d; }