/* PPMS Custom Styles */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.2rem;
}

.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 0.5rem;
}

.card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    font-weight: 600;
}

/* Sticky sidebar wrapper */
.sticky-wrapper { position: sticky; top: 16px; z-index: 1020; }
/* Ensure the map containers can layer above or below as needed */
#viewDiv, #dashMap { position: relative; z-index: 1030; }
#viewDiv .esri-view, #dashMap .esri-view { z-index: 1031 !important; }

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-select:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Login page styles */
.bg-light {
    background-color: #f8f9fa !important;
}

.min-vh-100 {
    min-height: 100vh;
}

/* Map container */
#viewDiv, #dashMap {
    border-radius: 0.375rem;
}

/* Status roadmap */
.badge {
    font-size: 0.875rem;
    min-width: 120px;
    text-align: center;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
}

.badge.bg-success {
    background-color: #28a745 !important;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529;
}

/* Chart container */
canvas {
    max-width: 100%;
    height: auto;
}

/* Field Engineer form */
#checklist .card {
    border: 1px solid #dee2e6;
    transition: all 0.2s ease-in-out;
}

#checklist .card:hover {
    border-color: #28a745;
    box-shadow: 0 0.25rem 0.5rem rgba(40, 167, 69, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }
    
    .btn-group .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
    
    #checklist .col-md-4 {
        margin-bottom: 1rem;
    }
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Message alerts */
.alert {
    border-radius: 0.375rem;
}

/* Table styles for reports */
.table {
    font-size: 0.875rem;
}

.table th {
    background-color: #f8f9fa;
    border-top: none;
    font-weight: 600;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Hide Esri attribution */
.esri-attribution {
    display: none !important;
}

/* Hide Esri powered by text */
.esri-attribution__sources,
.esri-attribution__powered-by {
    display: none !important;
}

/* Force ArcGIS popup to appear as floating card over the map with close button */
.esri-popup {
    position: absolute !important;
    z-index: 10000 !important;
}
.esri-popup__main-container {
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
}
/* Header styling to match requested UI */
.esri-popup__header {
    background-color: #1f4668 !important;
    color: #fff !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
.esri-popup__header-title {
    color: #fff !important;
    font-weight: 700 !important;
}
.esri-popup__header-title::before {
    content: 'LIVE';
    display: inline-block;
    margin-right: 8px;
    background: #e63946;
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
}
.esri-popup__content {
    font-size: 14px !important;
    line-height: 1.5 !important;
}
/* Prevent docking at bottom; ensure it stays top-right */
.esri-popup--docked,
.esri-popup--dock-bottom,
.esri-popup--dock-top,
.esri-popup--dock-bottom-center,
.esri-popup--dock-bottom-left,
.esri-popup--dock-bottom-right {
    position: absolute !important;
    bottom: auto !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    transform: none !important;
}

/* Hide the dock toggle to avoid re-docking */
.esri-popup__button.esri-popup__button--dock { display: none !important; }

/* Slightly wider content */
.esri-popup__main-container { max-width: 380px !important; }

/* KPI cards */
.kpi-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    height: 100%;
}
.kpi-card.kpi-animate { transition: transform .2s ease, box-shadow .2s ease; }
.kpi-card.kpi-animate:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.kpi-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:#f1f5f9; color:#1f2937; margin-bottom:6px; animation: kpiPulse 2.8s infinite; }
.kpi-icon i { font-size: 18px; }
@keyframes kpiPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(22,163,74,.25);} 50%{ box-shadow:0 0 0 10px rgba(22,163,74,0);} }
.kpi-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
}
.kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}
.kpi-mini { font-size: 12px; color: #6b7280; font-weight: 600; }
.kpi-green .kpi-value { color: #198754; }
.kpi-teal .kpi-value { color: #0ea5b7; }
.kpi-navy .kpi-value { color: #101e8e; }
.kpi-blue .kpi-value { color: #4c7dff; }
.kpi-progress { background: linear-gradient(180deg,#ffffff 0%,#f8fafb 100%); }

/* Status tables responsiveness and layout fix */
.status-table { table-layout: fixed; width: 100%; }
.status-table th, .status-table td { word-wrap: break-word; white-space: normal; }
.status-table thead th { position: sticky; top: 0; z-index: 1; }
.status-table tbody tr:nth-child(odd) td { background: #f6fffb; }
.status-table tbody tr:nth-child(even) td { background: #ffffff; }
.status-table tbody td { vertical-align: middle; }

@media (max-width: 992px) {
    .status-table th:nth-child(1), .status-table td:nth-child(1) { width: 50%; }
    .status-table th:nth-child(2), .status-table td:nth-child(2),
    .status-table th:nth-child(3), .status-table td:nth-child(3) { width: 25%; }
}

/* Donut left alignment and tighter spacing */
.donut-left { display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; }
.donut-left #doughnutChart { margin-left: 0 !important; }
.donut-left #donutLegend { justify-content:flex-start !important; }

/* Donut visuals */
#doughnutChart { box-shadow: inset 0 0 0 14px #ffffff; }
.donut-center { position:absolute; inset:26%; background:white; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
/* Ensure mini map has fixed height and visible */
#miniMapWrapper { min-height: 170px; }
#dashMap { min-height: 160px; }
.donut-percent { font-size: 28px; font-weight: 800; color: #111827; line-height: 1; }
.donut-sub { font-size: 12px; color: #6b7280; font-weight: 700; margin-top: 4px; }
.donut-pill { background:#eef2ff; color:#111827; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:700; }

/* KPI neutral pill for inline numbers */
.kpi-pill { background:#e9ecef; color:#111827; border-radius:8px; padding:2px 8px; font-weight:800; }
.kpi-pill-success { background:#d1fae5; color:#065f46; }

/* ============================================================
   MOBILE & TABLET RESPONSIVE CSS
   Breakpoints: ≤576px (phone), ≤768px (tablet), ≤992px (md)
   ============================================================ */

/* --- Tables: always scrollable on mobile --- */
.table-responsive-force {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    display: none;
    margin-bottom: 4px;
}

/* --- Tab bars: scrollable on mobile --- */
.nav-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.nav-tabs-scroll::-webkit-scrollbar { display: none; }
.nav-tabs-scroll .nav-link {
    white-space: nowrap;
}

/* --- Map containers --- */
.map-mobile-hint {
    display: none;
    font-size: 0.72rem;
    color: #64748b;
    text-align: center;
    padding: 4px 0;
}

/* --- Phase KPI Cards base fix --- */
.phase-kpi-card {
    cursor: pointer;
}

/* ===================== ≤992px (tablets, small laptops) ===================== */
@media (max-width: 992px) {
    /* Main content reduced padding */
    .container-fluid.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Status table columns */
    .status-table th:nth-child(1), .status-table td:nth-child(1) { width: 45%; }
    .status-table th:nth-child(2), .status-table td:nth-child(2),
    .status-table th:nth-child(3), .status-table td:nth-child(3) { width: 27%; }

    /* KPI icon size */
    .kpi-value { font-size: 22px; }

    /* Donut chart */
    #doughnutChart { max-width: 180px !important; }
}

/* ===================== ≤768px (tablets portrait) ===================== */
@media (max-width: 768px) {
    /* Table scroll hint visible */
    .table-scroll-hint { display: block; }

    /* KPI cards 2-col grid */
    .kpi-value { font-size: 20px; }
    .kpi-label { font-size: 11px; }

    /* Map height on mobile */
    #viewDiv, #dashMap { min-height: 220px !important; height: 220px !important; }
    #miniMapWrapper { min-height: 130px; }

    /* ArcGIS widget sizes */
    .esri-zoom { zoom: 1.2; }

    /* Donut centered */
    .donut-left { align-items: center; }
    .donut-left #doughnutChart { margin: 0 auto !important; }
    .donut-left #donutLegend { justify-content: center !important; }

    /* Sticky sidebar: disable on mobile (becomes full-width non-sticky) */
    .sticky-wrapper { position: static; top: auto; }

    /* Phase KPI cards 2-col */
    .phase-kpi-card { padding: 14px 12px; }

    /* Reduce section block body padding */
    .sectional-block .block-body { padding: 0.75rem; }

    /* Scope tabs scrollable */
    #scopeTabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    #scopeTabs::-webkit-scrollbar { display: none; }
    #scopeTabs .nav-link { white-space: nowrap; font-size: 0.78rem; padding: 6px 10px; }

    /* Map mobile hint */
    .map-mobile-hint { display: block; }

    /* Modal full-width on tablet */
    .modal-dialog { margin: 0.5rem; }
    .modal-dialog-lg { max-width: 98vw; }

    /* Block header text */
    .sectional-block .block-header { font-size: 0.82rem; padding: 0.6rem 1rem; }

    /* Charts smaller */
    canvas { max-height: 240px; }

    /* Notification dropdown already handled in base_admin */

    /* Gov footer stack */
    .gov-footer-grid { flex-direction: column; text-align: center; gap: 6px; }
    .gov-footer-left, .gov-footer-right, .gov-footer-center { justify-content: center; }

    /* Header compact */
    .gov-dashboard-header { height: auto; min-height: 56px; }
    .brand-full, .brand-department { display: none; }
    .header-brand-link img { height: 38px; }
    .brand-acronym { font-size: 1.05rem; }
}

/* ===================== ≤576px (phones) ===================== */
@media (max-width: 576px) {
    /* Tightest padding */
    .container-fluid.px-4 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .container-fluid.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

    /* Main content top/bottom margin */
    .container-fluid.my-4 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }

    /* Dashboard title + button: stack */
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    /* All modals: full-screen */
    .modal-dialog {
        margin: 0;
        max-width: 100vw;
        min-height: 100vh;
    }
    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    /* KPI value font */
    .kpi-value { font-size: 18px; }
    .kpi-card { padding: 10px 12px; }

    /* Tables: ensure horizontal scroll */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { font-size: 0.78rem; }
    .table th, .table td { padding: 6px 6px; white-space: nowrap; }

    /* Status table */
    .status-table { font-size: 0.75rem; }
    .status-table th, .status-table td { padding: 5px 6px; }

    /* Select dropdowns full-width */
    .form-select { font-size: 0.88rem; }

    /* Buttons full width stacked */
    .btn-group-mobile { display: flex; flex-direction: column; gap: 8px; }
    .btn-group-mobile .btn { width: 100%; }

    /* Map height phone */
    #viewDiv, #dashMap { min-height: 190px !important; height: 190px !important; }

    /* Phase KPI cards 1 per row on very small */
    .row.g-4 .col-md-6.col-lg-3 { flex: 0 0 50%; max-width: 50%; }

    /* Scope tabs */
    #scopeTabs .nav-link { font-size: 0.72rem; padding: 5px 8px; }

    /* Block header */
    .sectional-block .block-header { font-size: 0.78rem; }

    /* Card body padding */
    .card-body { padding: 0.75rem; }

    /* Charts smaller on phone */
    canvas { max-height: 180px; }

    /* Hide secondary text in header */
    .profile-info { display: none !important; }
    .header-utility { gap: 8px; }

    /* Nav links bigger tap targets */
    .nav-item-link { min-height: 44px; padding: 10px 12px; font-size: 0.82rem; }

    /* Admin dashboard title */
    h4.fw-bold { font-size: 1.1rem; }
    h5.fw-bold { font-size: 0.95rem; }

    /* Footer stack */
    .gov-footer { padding: 10px 0; }
    .gov-footer-grid { flex-direction: column; text-align: center; gap: 4px; font-size: 0.72rem; }
    .gov-footer-left, .gov-footer-right, .gov-footer-center { justify-content: center; flex-wrap: wrap; }

    /* Loader title */
    .loader-title { font-size: 1.4rem; }
    .loader-subtitle { font-size: 0.82rem; }
}

/* ===================== Touch targets ===================== */
@media (hover: none) and (pointer: coarse) {
    /* Bigger touch targets for all clickable items */
    .nav-item-link { min-height: 44px; }
    .btn { min-height: 40px; }
    .form-select, .form-control { min-height: 42px; font-size: 16px; } /* 16px prevents iOS zoom */
    .utility-icon-btn { width: 44px; height: 44px; }
}