*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;background:#F7F7F7;color:#183032;display:flex;flex-direction:column;height:100vh}

/* ── TOPBAR ── */
#topbar{height:52px;min-height:52px;flex-shrink:0;background:#183032;display:flex;align-items:center;padding:0 16px;gap:4px;z-index:100}
#topbar .logo{color:#D8EFDF;font-weight:700;font-size:15px;letter-spacing:.02em;margin-right:16px;display:flex;align-items:center;gap:8px}
#topbar .logo img{height:30px;width:auto}
#topbar nav{display:flex;align-items:center;gap:2px;flex:1}
#topbar nav a{color:rgba(255,255,255,.5);text-decoration:none;font-size:12.5px;padding:5px 11px;border-radius:6px;white-space:nowrap;transition:all .12s}
#topbar nav a:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
#topbar nav a.active{background:rgba(216,239,223,.13);color:#D8EFDF;font-weight:500}
.t-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.tstat{text-align:right}
.tstat-l{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.04em}
.tstat-v{font-size:13px;font-weight:600;color:#fff}
.tsep{width:1px;height:20px;background:rgba(255,255,255,.1)}
.trial-badge{background:#e9c46a;color:#6b4200;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.av-btn{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#52b788,#2a9d8f);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;cursor:pointer;border:1.5px solid rgba(255,255,255,.2)}

/* ── APP BODY ── */
#app{flex:1;display:flex;overflow:hidden;min-height:0}

/* ── SIDEBAR ── */
#sidebar{width:200px;min-width:200px;max-width:200px;background:#183032;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06);overflow:hidden}
.s-user{padding:16px 12px 14px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.s-av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#52b788,#2a9d8f);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.s-name{font-size:12.5px;font-weight:700;color:#fff;letter-spacing:.01em}
.s-btns{display:flex;flex-direction:column;gap:5px;width:100%}
.s-btn{font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer;border:none;font-family:inherit;width:100%;text-align:center}
.s-btn.trial{background:#52b788;color:#fff}
.s-btn.profile{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2)}
#snav{flex:1;overflow-y:auto;padding:4px 0;min-height:0}
#snav::-webkit-scrollbar{width:3px}
#snav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.ni{display:flex;align-items:center;padding:7px 14px;color:rgba(255,255,255,.55);font-size:12.5px;cursor:pointer;border-left:2px solid transparent;user-select:none;white-space:nowrap;transition:background .1s,color .1s}
.ni:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.9)}
.ni.active{background:rgba(216,239,223,.08);color:#D8EFDF;border-left-color:#52b788;font-weight:500}
.ni.sub{padding-left:26px;font-size:12px;color:rgba(255,255,255,.42)}
.ni.sub:hover{color:rgba(255,255,255,.75)}
.ni.sub.active{color:#D8EFDF;border-left-color:#52b788}
.ni .badge{margin-left:auto;font-size:10px;font-weight:700;padding:1px 5px;border-radius:9px;min-width:16px;text-align:center}
.badge-r{background:#e76f51;color:#fff}
.badge-y{background:#e9c46a;color:#6b4200}
.badge-g{background:#52b788;color:#fff}


/* ── MAIN CONTENT ── */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative}

/* ── PAGES ── */
.page{display:none;flex-direction:column;flex:1;overflow:hidden;min-height:0;visibility:hidden;pointer-events:none}
.page.active{display:flex;visibility:visible;pointer-events:auto}

/* Page header */
.ph-bar{height:4px;background:linear-gradient(90deg,#52b788,#2a9d8f);flex-shrink:0}
.ph{background:#fff;border-bottom:1px solid rgba(24,48,50,.09);padding:0 22px;flex-shrink:0;overflow:hidden}
.ph-top{display:flex;align-items:center;justify-content:space-between;padding:12px 0 10px;gap:12px}
.ph-title{font-size:19px;font-weight:700;color:#183032}
.ph-sub{font-size:11px;color:#aaa;margin-top:2px}
.ph-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ph-stats{display:flex;gap:20px;margin-right:auto;margin-left:16px}
.ps-l{font-size:10px;color:#bbb;letter-spacing:.04em;text-transform:uppercase}
.ps-v{font-size:15px;font-weight:700;color:#183032;margin-top:1px}
.ph-tabs{display:flex;background:#183032;margin:0 -22px;padding:0 22px;overflow-x:auto;flex-shrink:0}
.ph-tabs::-webkit-scrollbar{display:none}
.ptab{padding:9px 14px;font-size:12.5px;color:rgba(255,255,255,.45);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .12s}
.ptab:hover{color:rgba(255,255,255,.8)}
.ptab.active{color:#D8EFDF;border-bottom-color:#52b788;font-weight:500}

/* Page body */
.pb{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 22px;background:#F7F7F7;min-height:0}
.pb::-webkit-scrollbar{width:4px}
.pb::-webkit-scrollbar-thumb{background:rgba(24,48,50,.12);border-radius:4px}
.pb-white{flex:1;overflow-y:auto;background:#fff;min-height:0}

/* Common components */
.card{background:#fff;border-radius:10px;padding:16px 18px;border:1px solid rgba(24,48,50,.07);margin-bottom:14px}
.card-title{font-size:13px;font-weight:600;color:#183032;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:6px;font-size:12.5px;font-weight:500;cursor:pointer;border:none;font-family:inherit;transition:opacity .12s;white-space:nowrap}
.btn:hover{opacity:.85}
.btn-g{background:#3a9d6e;color:#fff}
.btn-o{background:rgba(24,48,50,.08);color:#183032;border:1px solid rgba(24,48,50,.13)}
.btn-d{background:#e76f51;color:#fff}
.btn-sm{padding:4px 10px;font-size:11.5px}
.sq-btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);padding:5px 11px;border-radius:6px;font-size:11.5px;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap}
.sq-btn.primary{background:#52b788;border-color:#52b788;color:#fff}
.sq-btn.ol{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.7)}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-size:10.5px;font-weight:600;color:#aaa;letter-spacing:.05em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid rgba(24,48,50,.08)}
.tbl th[data-sort]:hover{color:#183032;background:rgba(24,48,50,.04)}.tbl th[data-sort] .sort-arrow{font-size:9px;opacity:.6}
.tbl td{padding:9px 10px;border-bottom:1px solid rgba(24,48,50,.05);color:#333}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#f9fafb}
.bdg{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}
.bdg-g{background:#e6f4ed;color:#1a6b3e}
.bdg-r{background:#fce8e4;color:#b91c1c}
.bdg-y{background:#fef3c7;color:#92400e}
.bdg-b{background:#e0f2fe;color:#075985}
.bdg-i{background:#ede9fe;color:#4c1d95}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mc{background:#fff;border-radius:10px;padding:14px 16px;border:1px solid rgba(24,48,50,.07);position:relative;overflow:hidden}
.mc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#52b788;border-radius:10px 10px 0 0}
.mc.y::before{background:#e9c46a}
.mc.r::before{background:#e76f51}
.mc.b::before{background:#2a9d8f}
.mc-l{font-size:11px;color:#999;margin-bottom:4px}
.mc-v{font-size:22px;font-weight:700;color:#183032}
.mc-s{font-size:11px;color:#bbb;margin-top:3px}

/* List header bar */
.list-hdr{background:#383838;padding:7px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.list-hdr-left{display:flex;align-items:center;gap:10px;flex:1}
.list-hdr-right{display:flex;align-items:center;gap:7px}
.list-category{font-size:13px;font-weight:500;color:rgba(255,255,255,.8)}
.search-wrap{position:relative;display:flex;align-items:center}
.search-input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;padding:4px 28px 4px 10px;border-radius:5px;font-size:12px;font-family:inherit;outline:none;width:180px}
.search-input::placeholder{color:rgba(255,255,255,.35)}
.search-icon{position:absolute;right:8px;color:rgba(255,255,255,.4);font-size:12px;pointer-events:none}
.pg-arrow{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:16px;padding:0 3px}
.page-count{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.5);font-size:12px}
.page-count select{background:#505050;color:#fff;border:1px solid #555;padding:2px 5px;font-size:11px;font-family:inherit;border-radius:3px}
.page-count select option{background:#fff;color:#183032}
.filter-input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);padding:4px 8px;border-radius:5px;font-size:12px;font-family:inherit}
.filter-input option{background:#fff;color:#183032}
.list-hdr select option{background:#fff;color:#183032}

/* Form elements */
.fg{margin-bottom:12px}
.fl{font-size:12px;font-weight:500;color:#555;margin-bottom:4px;display:block}
.fi{width:100%;padding:7px 10px;border:1px solid rgba(24,48,50,.15);border-radius:6px;font-size:12.5px;font-family:inherit;color:#183032;background:#fff;outline:none}
.fi:focus{border-color:#52b788}

/* Modal */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;align-items:center;justify-content:center}
.mo.open{display:flex}
.modal{background:#fff;border-radius:10px;width:480px;max-width:96vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.22)}
.modal-lg{width:640px}
.mh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(24,48,50,.09)}
.mh-title{font-size:15px;font-weight:700;color:#183032}
.mh-close{background:none;border:none;font-size:20px;cursor:pointer;color:#aaa;line-height:1;padding:0 4px}
.mh-close:hover{color:#333}
.mb{padding:18px;overflow-y:auto;flex:1}
.mf{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid rgba(24,48,50,.09)}

/* Alert items */
.ai{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(24,48,50,.05)}
.ai:last-child{border-bottom:none}
.ai-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
.ai-ico.g{background:#e6f4ed;color:#1a6b3e}
.ai-ico.y{background:#fef3c7;color:#92400e}
.ai-ico.r{background:#fce8e4;color:#b91c1c}

/* Progress bar */
.prog{height:5px;background:rgba(24,48,50,.08);border-radius:3px;overflow:hidden;margin-top:3px}
.prog-f{height:100%;border-radius:3px;background:#52b788}
.prog-f.r{background:#e76f51}
.prog-f.y{background:#e9c46a}

@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.page.active .pb,.page.active .pb-white{animation:fi .15s ease}


/* Dashboard stats layout */
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.stat-card { background:#fff; border-radius:10px; padding:14px 16px; border:1px solid rgba(24,48,50,.07); }



#chart-overview-line{max-height:120px}
#chart-flights-month{max-height:160px}
#chart-hours-aircraft{max-height:160px}

/* ── READ-ONLY MODE (no admin login) ────────────────────────────── */
/* ── GRANULAR PERMISSIONS ──────────────────────────────────────── */
body.avl-no-add .sq-btn.primary { display: none !important; }
body.avl-no-add [onclick*="openModal('mo-add"],
body.avl-no-add [onclick*="saveDrone"], body.avl-no-add [onclick*="saveBattery"],
body.avl-no-add [onclick*="saveEquipment"], body.avl-no-add [onclick*="saveProject"],
body.avl-no-add [onclick*="saveMission"], body.avl-no-add [onclick*="saveFlight"],
body.avl-no-add [onclick*="saveInspection"], body.avl-no-add [onclick*="saveMaintenance"],
body.avl-no-add [onclick*="saveDocument"], body.avl-no-add [onclick*="saveTraining"],
body.avl-no-add [onclick*="savePersonnel"], body.avl-no-add [onclick*="saveCustomer"],
body.avl-no-add [onclick*="saveIncident"], body.avl-no-add [onclick*="go('add-"] {
  pointer-events: none !important; opacity: 0.25 !important;
}
body.avl-no-edit [onclick*="editRecord"], body.avl-no-edit [onclick*="editFlight"],
body.avl-no-edit [onclick*="editMission"], body.avl-no-edit [onclick*="openEditDrone"],
body.avl-no-edit [onclick*="openEditBattery"], body.avl-no-edit [onclick*="openEditCustomer"],
body.avl-no-edit [onclick*="openEditIncident"], body.avl-no-edit [onclick*="openEditMaintenance"],
body.avl-no-edit [onclick*="markMaintenanceDone"], body.avl-no-edit [onclick*="performInspection"],
body.avl-no-edit [onclick*="saveSettings"], body.avl-no-edit [onclick*="saveOrgProfile"] {
  pointer-events: none !important; opacity: 0.25 !important;
}
body.avl-no-delete [onclick*="delete"], body.avl-no-delete [onclick*="Delete"] {
  pointer-events: none !important; opacity: 0.25 !important;
}
/* avl-readonly = all three combined (backward compat) */
body.avl-readonly .sq-btn.primary { display: none !important; }
body.avl-readonly [onclick*="delete"], body.avl-readonly [onclick*="Delete"],
body.avl-readonly [onclick*="editRecord"], body.avl-readonly [onclick*="editFlight"],
body.avl-readonly [onclick*="editMission"], body.avl-readonly [onclick*="openEditDrone"],
body.avl-readonly [onclick*="openEditBattery"], body.avl-readonly [onclick*="openEditCustomer"],
body.avl-readonly [onclick*="openEditIncident"], body.avl-readonly [onclick*="openEditMaintenance"],
body.avl-readonly [onclick*="markMaintenanceDone"], body.avl-readonly [onclick*="performInspection"],
body.avl-readonly [onclick*="openModal('mo-add"],
body.avl-readonly [onclick*="saveDrone"], body.avl-readonly [onclick*="saveBattery"],
body.avl-readonly [onclick*="saveEquipment"], body.avl-readonly [onclick*="saveProject"],
body.avl-readonly [onclick*="saveMission"], body.avl-readonly [onclick*="saveFlight"],
body.avl-readonly [onclick*="saveInspection"], body.avl-readonly [onclick*="saveMaintenance"],
body.avl-readonly [onclick*="saveDocument"], body.avl-readonly [onclick*="saveTraining"],
body.avl-readonly [onclick*="savePersonnel"], body.avl-readonly [onclick*="saveCustomer"],
body.avl-readonly [onclick*="saveIncident"], body.avl-readonly [onclick*="saveSettings"],
body.avl-readonly [onclick*="saveOrgProfile"] {
  pointer-events: none !important; opacity: 0.25 !important;
}

/* ── CLICKABLE ROWS — hover effect ──────────────────────────────── */
tr[style*="cursor:pointer"]:hover td { background: rgba(42,157,143,.04) !important; }
div[style*="cursor:pointer"]:hover { box-shadow: 0 2px 8px rgba(24,48,50,.08) !important; }

/* ================================================================
   RESPONSIVE — Mobile & Tablet
   ================================================================ */

/* Hamburger button — hidden on desktop */
#mobile-menu-btn{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:4px 8px;margin-right:4px;line-height:1}

/* Sidebar overlay for mobile */
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199}
#sidebar-overlay.active{display:block}

/* ── TABLET (≤1024px) ───────────────────────────────────────────── */
@media (max-width:1024px) {
  .t-right .tstat:nth-child(n+3),.t-right .tsep:nth-child(n+3){display:none}
  #sidebar{width:180px;min-width:180px;max-width:180px}
  .ph-stats{display:none}
  .grid3{grid-template-columns:1fr 1fr;gap:10px}
  .ph-top{flex-wrap:wrap;gap:8px}
}

/* ── MOBILE (≤768px) ────────────────────────────────────────────── */
@media (max-width:768px) {
  html,body{overflow:auto;height:auto}
  body{display:block;height:auto;min-height:100vh}
  
  /* Topbar */
  #mobile-menu-btn{display:block}
  #topbar{height:48px;min-height:48px;padding:0 10px;gap:2px}
  #topbar .logo{font-size:14px;margin-right:8px}
  #topbar nav{display:none}
  .t-right{gap:6px}
  .t-right .tstat{display:none}
  .t-right .tsep{display:none}
  .t-right .tstat:nth-child(1){display:block}
  .trial-badge{display:none}

  /* App layout — stack vertically */
  #app{display:flex;flex-direction:column;overflow:auto;min-height:calc(100vh - 48px)}

  /* Sidebar — hidden by default, slides in as overlay */
  #sidebar{position:fixed;left:-260px;top:48px;bottom:0;width:250px;min-width:250px;max-width:250px;z-index:200;transition:left .25s ease;overflow-y:auto}
  #sidebar.mobile-open{left:0}

  /* Main takes full width */
  #main{flex:1;width:100%;overflow:auto;display:flex;flex-direction:column}
  .page{overflow:auto;visibility:hidden;pointer-events:none}
  .page.active{display:flex;flex-direction:column;visibility:visible;pointer-events:auto}

  /* Page header */
  .ph{padding:0 14px}
  .ph-top{padding:10px 0 8px;flex-wrap:wrap}
  .ph-title{font-size:17px}
  .ph-actions{width:100%}
  .ph-actions .sq-btn{flex:1;text-align:center;justify-content:center}
  .ph-stats{display:none}
  .ph-tabs{margin:0 -14px;padding:0 14px;gap:0}
  .ptab{font-size:11.5px;padding:8px 10px}

  /* Content area */
  .pb{padding:12px 14px}
  
  /* Grids collapse */
  .grid2{grid-template-columns:1fr;gap:10px}
  .grid3{grid-template-columns:1fr;gap:10px}

  /* Cards */
  .card{padding:14px;margin-bottom:10px}
  .card-title{font-size:12.5px}

  /* Tables — horizontal scroll wrapper */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:580px}

  /* Dark list headers */
  .list-hdr{padding:6px 10px;flex-wrap:wrap;gap:6px}
  .list-category{font-size:12px}
  .search-input{width:140px;font-size:11px;padding:4px 24px 4px 8px}

  /* Buttons — larger touch targets */
  .btn{padding:8px 14px;font-size:12.5px}
  .btn-sm{padding:6px 10px;font-size:11px}
  .sq-btn{padding:7px 12px;font-size:11px}

  /* Forms — larger inputs */
  .fi{padding:9px 10px;font-size:13px}

  /* Modals — full width */
  .modal{width:96vw !important;max-width:96vw !important;max-height:92vh !important;border-radius:8px}
  .mh{padding:12px 14px}
  .mh-title{font-size:14px}
  .mb{padding:14px !important}
  .mf{padding:10px 14px;gap:8px;flex-wrap:wrap}
  .mf .btn{flex:1;justify-content:center;text-align:center}

  /* Sidebar user section */
  .s-user{padding:12px 14px}
  .s-btns{flex-direction:column;gap:4px}

  /* Sidebar nav items */
  #snav .ni{padding:8px 14px;font-size:12.5px}
  #snav .ni.sub{padding-left:24px}

  /* Dashboard grid */
  .dash-grid{grid-template-columns:1fr !important}

  /* Flight map */
  #fmap-mapbox{height:280px !important}
}

/* ── SMALL PHONE (≤480px) ───────────────────────────────────────── */
@media (max-width:480px) {
  #topbar{padding:0 8px}
  #topbar .logo{font-size:13px;margin-right:4px}
  .t-right .tstat{display:none !important}
  .t-right .tsep{display:none !important}
  
  .ph-top{padding:8px 0}
  .ph-title{font-size:15px}
  .pb{padding:10px 10px}
  
  .card{padding:12px;border-radius:8px}
  
  .modal{width:100vw !important;max-width:100vw !important;border-radius:0;max-height:100vh !important}
  .mo.open{align-items:flex-end}
  
  .list-hdr{padding:4px 8px}
  .search-input{width:110px}
  
  #fmap-mapbox{height:220px !important}
  
  /* Stack form grids that were 2-col inline */
  .grid2[style*="margin-bottom"]{grid-template-columns:1fr}
}

/* ── SIDEBAR CLOSE ON NAV (mobile) ──────────────────────────────── */
/* When a user taps a sidebar nav item on mobile, close the sidebar */

/* ── Dashboard flight path drone pulse ───────────────────────────── */
@keyframes pulse-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2);opacity:0}}