/* ─── RESET & BASE ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:         #4A8C1C;
  --green-light:   #EAF3DE;
  --green-dark:    #2F5C0E;
  --green-mid:     #3d7518;
  --green-btn:     #5BA620;
  --green-sidebar: #f7f9f4;
  --amber:         #C17D00;
  --amber-light:   #FDF3DC;
  --red:           #C0392B;
  --red-light:     #FDECEA;
  --blue:          #1A6FA8;
  --blue-light:    #E3F0FB;
  --purple:        #6B4FAA;
  --purple-light:  #F0EBFF;
  --teal:          #0D7A6E;
  --teal-light:    #E0F5F2;
  --orange:        #D4600A;
  --orange-light:  #FEF0E6;
  --gray-50:       #F8F9FA;
  --gray-100:      #F1F3F5;
  --gray-200:      #E9ECEF;
  --gray-300:      #DEE2E6;
  --gray-400:      #CED4DA;
  --gray-500:      #ADB5BD;
  --gray-600:      #6C757D;
  --gray-700:      #495057;
  --gray-800:      #343A40;
  --gray-900:      #212529;
  --text:          #1a1a1a;
  --text-muted:    #6C757D;
  --text-light:    #9ca3af;
  --border:        #E9ECEF;
  --border-dark:   #DEE2E6;
  --bg:            #F4F6F8;
  --surface:       #ffffff;
  --radius:        8px;
  --radius-lg:     12px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.06);
  --shadow:        0 2px 8px rgba(0,0,0,.08);
  --shadow-md:     0 4px 16px rgba(0,0,0,.10);
}
html{overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;
     color:var(--text);background:var(--bg);line-height:1.5;overflow-x:hidden;max-width:100vw}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

/* ─── LAYOUT ───────────────────────────────────────────── */
.layout{display:flex;min-height:100vh}
.sidebar{width:215px;background:var(--green-sidebar);
         border-right:1px solid #dde8d4;
         display:flex;flex-direction:column;flex-shrink:0;
         position:fixed;top:0;left:0;height:100vh;z-index:100}
.main{flex:1;margin-left:215px;display:flex;flex-direction:column;min-height:100vh}

/* ─── SIDEBAR ──────────────────────────────────────────── */
.sidebar-logo{padding:18px 16px 14px;border-bottom:1px solid #dde8d4}
.logo-text{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px;color:var(--green-dark)}
.logo-text i{color:var(--green-btn);font-size:19px}
.logo-sub{font-size:10px;color:var(--green-mid);margin-top:2px;opacity:.7}
.sidebar-nav{padding:10px 8px;flex:1;overflow-y:auto;min-height:0}
.nav-section-label{font-size:9.5px;color:var(--green-mid);padding:12px 10px 3px;
                   letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.8}
.ni{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:var(--radius);
    font-size:12.5px;color:var(--green-dark);cursor:pointer;transition:all .15s;
    position:relative;text-decoration:none!important;margin-bottom:1px;font-weight:500}
.ni:hover{background:rgba(74,140,28,.12);color:var(--green-dark)}
.ni.active{background:var(--green-btn);color:#fff;font-weight:600;
           box-shadow:0 2px 6px rgba(91,166,32,.35)}
.ni i{font-size:16px;flex-shrink:0;color:var(--green-mid)}
.ni.active i{color:#fff}
.ni:hover i{color:var(--green-dark)}
.nav-spacer{display:none}
.sidebar-user{padding:10px 8px;border-top:1px solid #dde8d4}
.user-row{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:var(--radius)}
.av{width:30px;height:30px;border-radius:50%;background:var(--green-btn);
    display:flex;align-items:center;justify-content:center;font-size:10px;
    font-weight:700;color:#fff;flex-shrink:0}
.un{font-size:12px;font-weight:600;color:var(--green-dark)}
.ur{font-size:10px;color:var(--green-mid);opacity:.8}
.logout-btn{margin-left:auto;color:var(--green-mid);font-size:16px;display:flex;align-items:center}
.logout-btn:hover{color:var(--red)}
.msg-badge{background:var(--red);color:#fff;font-size:9px;font-weight:700;
           padding:1px 5px;border-radius:10px;margin-left:auto}

/* ─── TOPBAR ───────────────────────────────────────────── */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);
        padding:0 24px;height:58px;display:flex;align-items:center;
        justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:50;
        box-shadow:var(--shadow-sm)}
.page-title{font-size:15px;font-weight:700;color:var(--text)}
.topbar-sub{font-size:11px;color:var(--text-muted);margin-top:1px}
.topbar-actions{display:flex;align-items:center;gap:8px}

/* ─── CONTENT ──────────────────────────────────────────── */
.content{padding:20px 24px;flex:1}

/* ─── BUTTONS ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
     border-radius:var(--radius);font-size:12.5px;font-weight:500;cursor:pointer;
     border:1px solid var(--border-dark);background:var(--surface);color:var(--text);
     transition:all .15s;text-decoration:none!important}
.btn:hover{background:var(--gray-100)}
.btn-primary{background:var(--green-btn);color:#fff;border-color:var(--green-btn)}
.btn-primary:hover{background:var(--green-mid)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn-sm{padding:4px 10px;font-size:11.5px}
.btn i{font-size:14px}

/* ─── PAGE HEADER SECTION ──────────────────────────────── */
.page-section-header{
  background:linear-gradient(135deg,var(--green-light) 0%,#d4ecbf 100%);
  border:1px solid #dde8d4;border-radius:var(--radius-lg);
  padding:18px 22px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between}
.page-section-header.blue{
  background:linear-gradient(135deg,var(--blue-light) 0%,#cce3f5 100%);
  border-color:#b3d4ee}
.page-section-header.amber{
  background:linear-gradient(135deg,var(--amber-light) 0%,#fae8c0 100%);
  border-color:#f0d090}
.page-section-header.purple{
  background:linear-gradient(135deg,var(--purple-light) 0%,#e2d9f8 100%);
  border-color:#c9bced}
.page-section-header.teal{
  background:linear-gradient(135deg,var(--teal-light) 0%,#c4ece7 100%);
  border-color:#9dd8d1}
.page-section-header.red{
  background:linear-gradient(135deg,var(--red-light) 0%,#fad5d1 100%);
  border-color:#f0b8b2}
.psh-title{font-size:17px;font-weight:700;margin-bottom:3px}
.psh-sub{font-size:12px;opacity:.75}

/* ─── CARDS ────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;
      box-shadow:var(--shadow-sm)}
.card-header{padding:13px 18px;border-bottom:1px solid var(--border);
             display:flex;align-items:center;justify-content:space-between;
             background:var(--gray-50)}
.card-header.green{background:var(--green-light);border-bottom-color:#dde8d4}
.card-header.blue{background:var(--blue-light);border-bottom-color:#b3d4ee}
.card-header.amber{background:var(--amber-light);border-bottom-color:#f0d090}
.card-header.purple{background:var(--purple-light);border-bottom-color:#c9bced}
.card-header.teal{background:var(--teal-light);border-bottom-color:#9dd8d1}
.card-header.red{background:var(--red-light);border-bottom-color:#f0b8b2}
.card-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.card-title i{font-size:15px;color:var(--text-muted)}
.card-body{padding:18px}
.card-footer{padding:12px 18px;background:var(--gray-50);border-top:1px solid var(--border);
             display:flex;align-items:center;justify-content:space-between;font-size:12px}

/* ─── INFO TILES (farbige Datenkacheln) ─────────────────── */
.info-tiles{display:grid;gap:12px;margin-bottom:16px}
.info-tiles.cols-2{grid-template-columns:1fr 1fr}
.info-tiles.cols-3{grid-template-columns:1fr 1fr 1fr}
.info-tiles.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
.tile{padding:14px 16px;border-radius:var(--radius);border:1px solid}
.tile-green{background:var(--green-light);border-color:#dde8d4}
.tile-blue{background:var(--blue-light);border-color:#b3d4ee}
.tile-amber{background:var(--amber-light);border-color:#f0d090}
.tile-red{background:var(--red-light);border-color:#f0b8b2}
.tile-purple{background:var(--purple-light);border-color:#c9bced}
.tile-teal{background:var(--teal-light);border-color:#9dd8d1}
.tile-gray{background:var(--gray-100);border-color:var(--border-dark)}
.tile-orange{background:var(--orange-light);border-color:#f5c49a}
.tile-label{font-size:9.5px;font-weight:700;text-transform:uppercase;
            letter-spacing:.07em;opacity:.7;margin-bottom:5px}
.tile-green .tile-label{color:var(--green-dark)}
.tile-blue .tile-label{color:var(--blue)}
.tile-amber .tile-label{color:var(--amber)}
.tile-red .tile-label{color:var(--red)}
.tile-purple .tile-label{color:var(--purple)}
.tile-teal .tile-label{color:var(--teal)}
.tile-gray .tile-label{color:var(--gray-600)}
.tile-orange .tile-label{color:var(--orange)}
.tile-value{font-size:15px;font-weight:700;line-height:1.3}
.tile-green .tile-value{color:var(--green-dark)}
.tile-blue .tile-value{color:var(--blue)}
.tile-amber .tile-value{color:var(--amber)}
.tile-red .tile-value{color:var(--red)}
.tile-purple .tile-value{color:var(--purple)}
.tile-teal .tile-value{color:var(--teal)}
.tile-gray .tile-value{color:var(--gray-800)}
.tile-orange .tile-value{color:var(--orange)}
.tile-sub{font-size:11px;opacity:.7;margin-top:3px}
.tile-green .tile-sub{color:var(--green-dark)}
.tile-blue .tile-sub{color:var(--blue)}

/* ─── STAT CARDS ───────────────────────────────────────── */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
      padding:18px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.stat-green::before{background:var(--green-btn)}
.stat-amber::before{background:var(--amber)}
.stat-red::before{background:var(--red)}
.stat-blue::before{background:var(--blue)}
.stat-purple::before{background:var(--purple)}
.stat-teal::before{background:var(--teal)}
.stat-label{font-size:10px;color:var(--text-muted);margin-bottom:8px;
            display:flex;align-items:center;gap:5px;text-transform:uppercase;
            letter-spacing:.06em;font-weight:600}
.stat-label i{font-size:13px}
.stat-value{font-size:22px;font-weight:700;line-height:1.2}
.stat-sub{font-size:11px;color:var(--text-muted);margin-top:5px;display:flex;align-items:center;gap:5px}

/* ─── GRID ─────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ─── TABLE ────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{font-size:11px;font-weight:700;color:var(--text-muted);
             padding:9px 14px;border-bottom:2px solid var(--border);
             text-align:left;white-space:nowrap;background:var(--gray-50);
             letter-spacing:.04em;text-transform:uppercase}
table.tbl td{padding:10px 14px;border-bottom:1px solid var(--border);
             font-size:12.5px;vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr:hover td{background:var(--green-light)}
table.tbl .actions{display:flex;gap:6px;justify-content:flex-end}

/* ─── BADGES ───────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;
       border-radius:20px;font-size:10.5px;font-weight:600;white-space:nowrap}
.badge i{font-size:10px}
.badge-green{background:var(--green-light);color:var(--green-dark)}
.badge-amber{background:var(--amber-light);color:var(--amber)}
.badge-red{background:var(--red-light);color:var(--red)}
.badge-blue{background:var(--blue-light);color:var(--blue)}
.badge-gray{background:var(--gray-100);color:var(--gray-600)}
.badge-purple{background:var(--purple-light);color:var(--purple)}
.badge-teal{background:var(--teal-light);color:var(--teal)}

/* ─── FORMS ────────────────────────────────────────────── */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--gray-700);margin-bottom:5px}
.form-control{width:100%;padding:8px 11px;border:1px solid var(--border-dark);
              border-radius:var(--radius);font-size:13px;background:var(--surface);
              color:var(--text);transition:border .15s}
.form-control:focus{outline:none;border-color:var(--green-btn);
                    box-shadow:0 0 0 3px rgba(91,166,32,.12)}
.form-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.form-row.cols-3{grid-template-columns:1fr 1fr 1fr}
select.form-control{cursor:pointer}
textarea.form-control{min-height:90px;resize:vertical}

/* ─── ALERTS ───────────────────────────────────────────── */
.alert{padding:11px 16px;border-radius:var(--radius);font-size:12.5px;margin-bottom:14px;
       display:flex;align-items:flex-start;gap:8px;border-left:3px solid}
.alert i{font-size:16px;flex-shrink:0;margin-top:1px}
.alert-success{background:var(--green-light);color:var(--green-dark);border-color:var(--green-btn)}
.alert-danger {background:var(--red-light);color:var(--red);border-color:var(--red)}
.alert-warning{background:var(--amber-light);color:var(--amber);border-color:var(--amber)}
.alert-info   {background:var(--blue-light);color:var(--blue);border-color:var(--blue)}

/* ─── LIST ROWS ────────────────────────────────────────── */
.list-row{display:flex;align-items:center;justify-content:space-between;
          padding:11px 18px;border-bottom:1px solid var(--border)}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:var(--green-light)}
.list-left{display:flex;align-items:center;gap:10px}
.list-icon{width:34px;height:34px;border-radius:var(--radius);
           display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.icon-green{background:var(--green-light);color:var(--green-dark)}
.icon-amber{background:var(--amber-light);color:var(--amber)}
.icon-red{background:var(--red-light);color:var(--red)}
.icon-blue{background:var(--blue-light);color:var(--blue)}
.icon-gray{background:var(--gray-100);color:var(--gray-600)}
.icon-purple{background:var(--purple-light);color:var(--purple)}
.icon-teal{background:var(--teal-light);color:var(--teal)}
.list-primary{font-weight:600;font-size:12.5px;margin-bottom:1px}
.list-secondary{font-size:11px;color:var(--text-muted)}
.list-value{font-weight:600;font-size:12.5px;text-align:right}

/* ─── METER GRID ───────────────────────────────────────── */
.meter-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.meter-cell{padding:14px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.meter-cell:nth-child(3n){border-right:none}
.meter-cell:nth-last-child(-n+3){border-bottom:none}
.meter-icon-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.meter-icon-row i{font-size:17px}
.meter-name{font-size:10px;color:var(--text-muted);font-weight:600;
            text-transform:uppercase;letter-spacing:.04em}
.meter-val{font-size:20px;font-weight:700;margin-bottom:2px}
.meter-date{font-size:11px;color:var(--text-muted)}

/* ─── MESSAGES ─────────────────────────────────────────── */
.msg-bubble{max-width:78%;padding:11px 15px;border-radius:12px;font-size:12.5px;line-height:1.6}
.msg-bubble.sent{background:var(--green-light);color:var(--green-dark);
                 align-self:flex-end;border-bottom-right-radius:3px}
.msg-bubble.recv{background:var(--gray-100);color:var(--text);
                 align-self:flex-start;border-bottom-left-radius:3px}
.msg-meta{font-size:10px;color:var(--text-muted);margin-top:4px}

/* ─── MODAL ────────────────────────────────────────────── */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);
                z-index:200;align-items:center;justify-content:center}
.modal-backdrop.open{display:flex}
.modal{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:520px;
       box-shadow:var(--shadow-md)}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);
              display:flex;align-items:center;justify-content:space-between;
              background:var(--green-light)}
.modal-title{font-size:14px;font-weight:700;color:var(--green-dark)}
.modal-close{cursor:pointer;color:var(--green-mid);font-size:22px;line-height:1}
.modal-body{padding:20px}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);
              display:flex;justify-content:flex-end;gap:8px;background:var(--gray-50)}

/* ─── UTILITY ──────────────────────────────────────────── */
.text-muted{color:var(--text-muted)}
.text-green{color:var(--green-dark)}
.text-red{color:var(--red)}
.text-amber{color:var(--amber)}
.text-right{text-align:right}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.mb-0{margin-bottom:0}
.mb-16{margin-bottom:16px}
.mt-16{margin-top:16px}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-8{gap:8px}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}
.empty-state i{font-size:36px;margin-bottom:10px;display:block;opacity:.35}

/* ─── DOKUMENT VIEWER MODAL ────────────────────────────── */
.doc-viewer-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);
  z-index:300;align-items:center;justify-content:center;padding:16px}
.doc-viewer-backdrop.open{display:flex}
.doc-viewer-box{background:var(--surface);border-radius:var(--radius-lg);
  width:100%;max-width:1100px;height:calc(100vh - 32px);
  display:flex;flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.4);overflow:hidden}
.doc-viewer-header{padding:13px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--green-light);flex-shrink:0;min-height:54px}
.doc-viewer-title{font-size:14px;font-weight:600;color:var(--green-dark);
  display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;max-width:600px}
.doc-viewer-title i{font-size:18px;flex-shrink:0}
.doc-viewer-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.doc-viewer-body{flex:1;overflow:hidden;background:#525659;display:flex;
  align-items:center;justify-content:center}
.doc-viewer-body iframe{width:100%;height:100%;border:none;display:block}
.doc-viewer-body img{max-width:100%;max-height:100%;object-fit:contain;padding:24px;
  background:#525659}
.doc-viewer-body .doc-no-preview{text-align:center;padding:60px;color:#ccc}
.doc-viewer-body .doc-no-preview i{font-size:64px;display:block;margin-bottom:16px;opacity:.5}
.list-row.clickable{cursor:pointer}
.list-row.clickable:hover{background:var(--green-light)}



/* ─── MOBILE RESPONSIVE ─────────────────────────────────── */

/* Kein horizontales Scrollen - GLOBAL */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
.main { overflow-x: hidden; }
.content { overflow-x: hidden; }

@media (max-width: 768px) {

  /* Sidebar: versteckt, von links einschieben */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 200; width: 215px;
    box-shadow: none;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }

  /* Overlay */
  .sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 199;
  }
  .sidebar-overlay.mobile-open { display: block; }

  /* Main: volle Breite */
  .main { margin-left: 0; width: 100%; }

  /* Hamburger sichtbar */
  .hamburger {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer; margin-right: 8px;
    flex-shrink: 0;
  }
  .hamburger i { font-size: 20px; color: var(--green-dark); }

  /* Content */
  .content {
    padding: 12px 10px 80px;
    width: 100%;
    overflow-x: hidden;
  }

  /* Topbar */
  .topbar { padding: 0 10px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn { padding: 5px 8px; font-size: 11px; }

  /* Alle Grids → eine Spalte */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Info-Tiles: max 2 Spalten */
  .info-tiles { grid-template-columns: 1fr 1fr !important; }
  .info-tiles.cols-3, .info-tiles.cols-4 { grid-template-columns: 1fr 1fr !important; }

  /* Form rows */
  .form-row, .form-row.cols-3 { grid-template-columns: 1fr !important; }

  /* Dokumente: eine Spalte */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tabellen scrollen */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  table.tbl { min-width: 500px; }

  /* Cards */
  .card { margin-bottom: 10px; }

  /* Stat grid */
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-value { font-size: 17px; }

  /* Page section header */
  .page-section-header { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* Flex between */
  .flex-between { flex-wrap: wrap; gap: 8px; }

  /* Viewer Modal */
  .doc-viewer-backdrop { padding: 0; }
  .doc-viewer-box { height: 100vh; border-radius: 0; max-width: 100%; }
  .doc-viewer-header { flex-wrap: wrap; gap: 4px; padding: 10px; }
  .doc-viewer-actions { flex-wrap: wrap; gap: 4px; }
  .doc-viewer-actions .btn { padding: 4px 8px; font-size: 11px; }

  /* Modals */
  .modal-backdrop { padding: 8px; align-items: flex-end; }
  .modal { max-width: 100% !important; width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

  /* Buttons */
  .btn { padding: 7px 10px; }
  .btn-sm { padding: 4px 8px; font-size: 11px; }

  /* Mobile Bottom Nav */
  .mobile-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 198;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
    safe-area-inset-bottom: env(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-nav a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8px 2px 6px;
    font-size: 10px; font-weight: 500;
    color: var(--text-muted);
    text-decoration: none !important;
    position: relative;
    border-top: 2px solid transparent;
    transition: all .15s;
    min-width: 0;
  }
  .mobile-nav a.active {
    color: var(--green-btn);
    border-top-color: var(--green-btn);
  }
  .mobile-nav a i { font-size: 20px; margin-bottom: 2px; display: block; }
  .mobile-nav .mnav-badge {
    position: absolute; top: 4px; right: calc(50% - 16px);
    background: var(--red); color: #fff;
    font-size: 8px; font-weight: 700;
    padding: 1px 4px; border-radius: 10px; min-width: 14px;
    text-align: center;
  }

  /* PWA Install Button */
  .pwa-install-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--green-btn); color: #fff;
    border: none; border-radius: var(--radius);
    padding: 7px 12px; font-size: 12px; font-weight: 600;
    cursor: pointer;
  }
}

/* Desktop */
@media (min-width: 769px) {
  .hamburger { display: none !important; }
  .mobile-nav { display: none !important; }
  .sidebar-overlay { display: none !important; }
  .pwa-install-btn { display: none; }
}