/* ═══════════════════════════════════════════════════
   PROPTECH — Responsive Mobile-First
   Approche : styles de base = mobile, @media min-width pour desktop
   Breakpoints :
     sm  >= 576px  (phone landscape)
     md  >= 768px  (tablet)
     lg  >= 992px  (laptop)
     xl  >= 1200px (desktop)
   ═══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   HAMBURGER BUTTON (visible par defaut, masque en desktop)
══════════════════════════════════════════════ */

.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 768px) {
    .hamburger-btn { display: none; }
}

/* ══════════════════════════════════════════════
   MOBILE NAV DRAWER
══════════════════════════════════════════════ */

.mobile-nav-drawer {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--bg-topbar);
    border-bottom: 2px solid var(--primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    padding: 8px 0;
    max-height: calc(100vh - 52px);
    overflow-y: auto;
}

.mobile-nav-drawer.open { display: block; }

.mobile-nav-drawer .mobile-tab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.75);
    font-family: var(--font-ui);
    font-size: 13px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.mobile-nav-drawer .mobile-tab-item:hover,
.mobile-nav-drawer .mobile-tab-item.active {
    background: rgba(255,255,255,0.07);
    color: #fff;
    border-left-color: var(--primary-bright);
}

.mobile-nav-drawer .mobile-tab-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: var(--primary-bright);
}

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(0,0,0,0.4);
}
.mobile-overlay.open { display: block; }

/* ══════════════════════════════════════════════
   TOP BAR — Mobile-first
══════════════════════════════════════════════ */

/* Base = mobile */
.topbar {
    padding: 0 var(--sp-3);
    gap: var(--sp-3);
    height: 52px;
}

.topbar .cmd-search {
    flex: 1;
    max-width: none;
}

.topbar .cmd-search input { font-size: 13px; }

.topbar .user-name,
.topbar .clock,
.topbar #liveClock { display: none; }

.top-right {
    gap: var(--sp-2);
    flex-shrink: 0;
}
.top-right .dim { display: none; }

/* Tab bar masque sur mobile */
.tab-bar { display: none !important; }

/* Status bar masque sur mobile */
.statusbar { display: none !important; }

/* Tablette */
@media (min-width: 768px) {
    .topbar {
        padding: 0 var(--sp-4);
        gap: var(--sp-3);
        height: auto;
    }

    .topbar .cmd-search { max-width: 280px; flex: none; }
    .topbar .brand .brand-sub { display: none; }
    .topbar .user-name, .topbar .dim { font-size: 13px; display: inline; }
    .topbar .clock, .topbar #liveClock { display: inline; }
    .top-right .dim { display: inline; }

    .tab-bar {
        display: flex !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        padding: 0 var(--sp-2);
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-item { white-space: nowrap; flex-shrink: 0; }

    .statusbar {
        display: flex !important;
        padding: 0 var(--sp-4);
    }
}

/* Desktop */
@media (min-width: 992px) {
    .topbar { padding: 0 var(--sp-5); }
    .topbar .cmd-search { max-width: 400px; }
    .topbar .brand .brand-sub { display: inline; }

    .tab-bar { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════ */

.main-content {
    padding: var(--sp-3);
    padding-bottom: 72px; /* espace pour bottom nav */
}

.legal-footer-fixed { display: none; }

@media (min-width: 768px) {
    .main-content { padding: var(--sp-4); padding-bottom: var(--sp-4); }
    .legal-footer-fixed { display: block; }
}

/* ══════════════════════════════════════════════
   PANELS & GRIDS — Mobile-first
══════════════════════════════════════════════ */

/* Base = mobile : 1 colonne */
.g-2, .g-3, .g-4 {
    grid-template-columns: 1fr !important;
}

.panel { margin-bottom: var(--sp-3); }
.panel-head { flex-wrap: wrap; gap: var(--sp-2); }

.panel-head .time-bar {
    overflow-x: auto;
    scrollbar-width: none;
}
.panel-head .time-bar::-webkit-scrollbar { display: none; }

/* Tablette : 2 colonnes */
@media (min-width: 768px) {
    .g-2 { grid-template-columns: 1fr 1fr !important; }
    .g-3 { grid-template-columns: 1fr 1fr !important; }
    .g-4 { grid-template-columns: 1fr 1fr !important; }
}

/* Desktop : colonnes natives */
@media (min-width: 992px) {
    .g-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .g-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ══════════════════════════════════════════════
   KPI CARDS — Mobile-first
   Mobile: 2 colonnes empilees
   Tablette: 2x2
   Desktop: 4 en ligne
══════════════════════════════════════════════ */

.card-grid, .kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--sp-2);
}

.kpi-card, .card { padding: var(--sp-3); }
.kpi-value { font-size: 20px !important; }
.kpi-label { font-size: 13px !important; }

@media (max-width: 400px) {
    .card-grid, .kpi-row { grid-template-columns: 1fr !important; }
}

@media (min-width: 768px) {
    .kpi-value { font-size: 24px !important; }
    .kpi-label { font-size: 14px !important; }
}

@media (min-width: 992px) {
    .card-grid, .kpi-row {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--sp-3);
    }
    .kpi-card, .card { padding: var(--sp-4); }
}

/* ══════════════════════════════════════════════
   TABLEAUX — Mobile: scroll horizontal + 1ere colonne fixe
══════════════════════════════════════════════ */

.panel-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tbl {
    min-width: 600px;
    font-size: 13px;
}

.tbl th, .tbl td {
    padding: 6px 8px;
    white-space: nowrap;
}

/* Premiere colonne fixe sur mobile */
.tbl th:first-child, .tbl td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
}

.tbl .col-hide-mobile { display: none; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: left;
    margin-bottom: 8px;
}

.dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    margin-top: 8px;
}

.dataTables_wrapper .dataTables_info {
    float: none;
    text-align: center;
}

@media (min-width: 768px) {
    .tbl { min-width: auto; font-size: 14px; }
    .tbl th, .tbl td { padding: 8px 12px; }
    .tbl th:first-child, .tbl td:first-child { position: static; }
    .tbl .col-hide-mobile { display: table-cell; }

    .dataTables_wrapper .dataTables_length { float: left; }
    .dataTables_wrapper .dataTables_filter { float: right; }
    .dataTables_wrapper .dataTables_paginate { float: right; }
    .dataTables_wrapper .dataTables_info { float: left; }
}

/* ══════════════════════════════════════════════
   CARTE LEAFLET — Mobile: pleine largeur, boutons overlay
══════════════════════════════════════════════ */

#map, .leaflet-container {
    height: 60vh !important;
    min-height: 300px;
}

.leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 18px !important;
}

#map-panel, .map-container {
    height: 60vh;
    min-height: 300px;
}

@media (min-width: 768px) {
    #map, .leaflet-container { height: 50vh; min-height: 300px; }
    .leaflet-control-zoom a {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 14px !important;
    }
}

@media (min-width: 992px) {
    #map, .leaflet-container { height: auto !important; }
}

/* ══════════════════════════════════════════════
   FORMULAIRES — Mobile: pleine largeur, touch targets 44px
══════════════════════════════════════════════ */

.form-row, .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3);
}

.form-group { margin-bottom: var(--sp-3); }

.form-control, .form-select,
input[type="text"], input[type="email"],
input[type="number"], input[type="password"],
select, textarea {
    font-size: 16px; /* evite zoom iOS */
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
}

.btn-form-row {
    flex-direction: column;
    gap: var(--sp-2);
}

.btn-form-row .btn, .btn-form-row button { width: 100%; }

@media (min-width: 768px) {
    .form-row, .form-grid-2 { grid-template-columns: 1fr 1fr !important; }
    .form-control, .form-select,
    input[type="text"], input[type="email"],
    input[type="number"], input[type="password"],
    select, textarea {
        font-size: inherit;
        min-height: auto;
        padding: inherit;
    }
    .btn-form-row { flex-direction: row; }
    .btn-form-row .btn, .btn-form-row button { width: auto; }
}

/* ══════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════ */

.modal-dialog {
    margin: var(--sp-3);
    max-width: none !important;
}

.modal-body { padding: var(--sp-4); }

.modal-fullscreen-mobile .modal-dialog { margin: 0; height: 100%; }
.modal-fullscreen-mobile .modal-content { border-radius: 0; height: 100%; }

@media (min-width: 768px) {
    .modal-dialog { margin: 1.75rem auto; max-width: 500px !important; }
    .modal-fullscreen-mobile .modal-dialog { margin: 1.75rem auto; height: auto; }
    .modal-fullscreen-mobile .modal-content { border-radius: var(--r-2); height: auto; }
}

/* ══════════════════════════════════════════════
   CHARTS
══════════════════════════════════════════════ */

canvas { max-height: 220px !important; }
.chart-container { position: relative; height: 200px; }

@media (min-width: 768px) {
    canvas { max-height: none !important; }
    .chart-container { height: auto; }
}

/* ══════════════════════════════════════════════
   NOTIFICATIONS PANEL
══════════════════════════════════════════════ */

#notifPanel {
    position: fixed !important;
    top: 52px !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 60vh !important;
    z-index: 9999 !important;
}

@media (min-width: 768px) {
    #notifPanel {
        left: auto !important;
        width: 360px !important;
    }
}

/* ══════════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════════ */

.auth-container, .login-box, .register-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--sp-4);
    padding: var(--sp-5);
    border-radius: var(--r-2);
}

@media (min-width: 768px) {
    .auth-container, .login-box, .register-box {
        max-width: 420px !important;
        margin: var(--sp-6) auto;
    }
}

/* ══════════════════════════════════════════════
   BILLING PAGE
══════════════════════════════════════════════ */

.pricing-cards {
    flex-direction: column !important;
    align-items: stretch;
    gap: var(--sp-4);
}

.pricing-card { max-width: 100% !important; }

@media (min-width: 768px) {
    .pricing-cards { flex-direction: row !important; }
    .pricing-card { max-width: 320px !important; }
}

/* ══════════════════════════════════════════════
   UPGRADE BANNER
══════════════════════════════════════════════ */

#upgradeBanner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--sp-2) !important;
    padding: 8px 12px !important;
}

#upgradeBanner > div:first-child { font-size: 13px; }

@media (min-width: 768px) {
    #upgradeBanner {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--sp-3) !important;
        padding: 8px 16px !important;
    }
    #upgradeBanner > div:first-child { font-size: inherit; }
}

/* ══════════════════════════════════════════════
   TOUCH TARGETS — WCAG 44px min (devices tactiles)
══════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tab-item { min-height: 44px; padding: 8px 14px; }

    .t-btn { min-width: 44px; min-height: 44px; font-size: 14px; }

    .btn-amber, .btn-ghost, button[onclick] {
        min-height: 44px;
        min-width: 44px;
    }

    .recherche-stab { min-height: 44px; padding: 10px 16px !important; }

    .input-term, .label-term + input,
    .label-term + select, select.input-term {
        min-height: 44px;
        font-size: 14px;
    }
}

/* ══════════════════════════════════════════════
   TABLET — Font sizes
══════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 991px) {
    .panel-title { font-size: 14px; }
    .panel-body { font-size: 14px; }
    .label-term { font-size: 13px; }
    .empty-state { font-size: 14px; }
}

/* ══════════════════════════════════════════════
   BOTTOM NAV MOBILE
══════════════════════════════════════════════ */

.bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--bg-topbar, #0D1117);
    border-top: 1px solid var(--edge, #1E2D3D);
    height: 60px;
    padding: 4px 0 env(safe-area-inset-bottom, 0);
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
    .bottom-nav { display: none; }
}

/* Masquer le footer legal sur mobile pour eviter chevauchement avec bottom-nav */
@media (max-width: 767px) {
    .legal-footer { display: none !important; }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--t3, #556577);
    transition: color 0.15s;
    min-width: 56px;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item i { font-size: 20px; line-height: 1; }

.bottom-nav-item span {
    font-family: var(--font-term, 'Courier New', monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.bottom-nav-item.active { color: var(--amber, #F0B429); }
.bottom-nav-item:active { transform: scale(0.92); }

/* ══════════════════════════════════════════════
   GLOSSARY TOOLTIP
══════════════════════════════════════════════ */

.term-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--amber, #F0B429);
    color: #000;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    text-decoration: none;
    line-height: 1;
}