/* NG-FO Design System — single source of truth */
:root{
  --brand-navy:#0F2942; --brand-navy-2:#16324F;
  --accent:#12B5B0; --accent-hover:#0E9A96; --accent-ink:#04342C;
  --surface-0:#F4F6F8; --surface-1:#FFFFFF; --surface-2:#FFFFFF;
  --text-primary:#0F2942; --text-secondary:#5B6B7A; --text-muted:#8494A3;
  --border:rgba(15,41,66,.10); --border-strong:rgba(15,41,66,.18);
  --shadow-float:0 4px 16px rgba(15,41,66,.14);
  --st-plan:#378ADD; --st-ongoing:#BA7517; --st-done:#1D9E75; --st-cancel:#A32D2D;
  --radius:8px; --radius-card:12px;
  --font-ui:"Inter","Source Sans Pro",system-ui,-apple-system,sans-serif;
}
:root[data-theme="dark"]{
  --surface-0:#0B1620; --surface-1:#132433; --surface-2:#1A2E40;
  --text-primary:#E8EEF4; --text-secondary:#9FB2C4; --text-muted:#6E8296;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --shadow-float:0 4px 16px rgba(0,0,0,.45);
}
body,.content-wrapper{font-family:var(--font-ui);}
/* App shell (map page) */
.ng-app{display:flex;height:100vh;height:100dvh;overflow:hidden;background:var(--surface-0);}
.ng-rail{width:60px;flex-shrink:0;background:var(--brand-navy);display:flex;flex-direction:column;
  align-items:center;padding:12px 0;gap:4px;}
.ng-rail-brand{width:36px;height:36px;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:19px;text-decoration:none;}
.ng-rail-item{width:44px;height:44px;border-radius:10px;color:#8FA6BC;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;text-decoration:none;font-size:9px;transition:background .18s,color .18s;}
.ng-rail-item i{font-size:19px;}
.ng-rail-item:hover{background:var(--brand-navy-2);color:#CFE0EE;text-decoration:none;}
.ng-rail-item.active{background:var(--accent);color:#fff;}
.ng-rail-spacer{margin-top:auto;}
.ng-main{flex:1;display:flex;flex-direction:column;min-width:0;}
/* Top bar */
.ng-topbar{height:56px;flex-shrink:0;background:var(--surface-2);border-bottom:.5px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 16px;}
.ng-proj{display:flex;align-items:center;gap:8px;background:var(--surface-0);border:.5px solid var(--border);
  border-radius:var(--radius);padding:4px 10px;}
.ng-proj select{border:none;background:transparent;color:var(--text-primary);font-weight:600;min-width:170px;outline:none;}
.ng-chip{display:flex;align-items:center;gap:6px;padding:5px 11px;background:var(--surface-0);
  border-radius:var(--radius);font-size:13px;color:var(--text-secondary);white-space:nowrap;}
.ng-topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
/* Map + overlays */
.ng-map-wrap{flex:1;position:relative;min-height:0;}
.ng-map-wrap #map{position:absolute;inset:0;height:100%!important;width:100%;}
.ng-overlay{position:absolute;z-index:600;background:var(--surface-2);border:.5px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow-float);}
.ng-overlay-tools{top:14px;left:14px;display:flex;flex-direction:column;overflow:hidden;}
.ng-overlay-tools button{width:40px;height:40px;border:none;background:transparent;color:var(--text-secondary);
  border-top:.5px solid var(--border);cursor:pointer;}
.ng-overlay-tools button:first-child{border-top:none;}
.ng-overlay-tools button:hover{background:var(--surface-0);color:var(--text-primary);}
.ng-overlay-tools button.active{background:var(--accent);color:#fff;}
.ng-overlay-layers{top:14px;right:14px;padding:10px 12px;width:170px;max-height:70%;overflow:auto;}
.ng-fab{height:48px;border:none;border-radius:24px;
  background:var(--accent);color:#fff;padding:0 20px;display:flex;align-items:center;gap:8px;font-size:14px;
  font-weight:600;box-shadow:var(--shadow-float);cursor:pointer;}
.ng-fab:hover{background:var(--accent-hover);}
/* Shared components (secondary pages) */
.ng-page{background:var(--surface-0);color:var(--text-primary);min-height:100vh;font-family:var(--font-ui);}
.ng-card{background:var(--surface-1);border:.5px solid var(--border);border-radius:var(--radius-card);padding:16px 20px;}
.ng-btn{border:.5px solid var(--border-strong);background:var(--surface-2);color:var(--text-secondary);
  border-radius:var(--radius);height:34px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;cursor:pointer;text-decoration:none;transition:background .15s;}
.ng-btn:hover{background:var(--surface-0);color:var(--text-primary);text-decoration:none;}
.ng-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.ng-btn-primary:hover{background:var(--accent-hover);color:#fff;}
.ng-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;}
.ng-badge-plan{background:rgba(55,138,221,.14);color:var(--st-plan);}
.ng-badge-ongoing{background:rgba(186,117,23,.16);color:var(--st-ongoing);}
.ng-badge-done{background:rgba(29,158,117,.16);color:var(--st-done);}
.ng-badge-cancel{background:rgba(163,45,45,.14);color:var(--st-cancel);}
.ng-badge-muted{background:var(--surface-0);color:var(--text-muted);}
.ng-badge-info{background:rgba(69,183,209,.16);color:#2C88A6;}
[data-theme="dark"] .ng-badge-info{color:#7CC7DE;}
/* Theme-aware overrides for AdminLTE bits still on screen (modals/tables) */
[data-theme="dark"] .modal-content,[data-theme="dark"] .card{background:var(--surface-1);color:var(--text-primary);}
[data-theme="dark"] .table{color:var(--text-primary);}
[data-theme="dark"] .table td,[data-theme="dark"] .table th{border-color:var(--border);}
/* DataTables controls in dark mode */
[data-theme="dark"] .dataTables_wrapper{color:var(--text-secondary);}
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input{background:var(--surface-0);color:var(--text-primary);border:.5px solid var(--border);border-radius:6px;}
[data-theme="dark"] .dataTables_wrapper .paginate_button{background:var(--surface-2)!important;color:var(--text-secondary)!important;border-color:var(--border)!important;}
[data-theme="dark"] .dataTables_wrapper .paginate_button.current{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;}
[data-theme="dark"] .dataTables_wrapper .paginate_button:hover{background:var(--surface-0)!important;color:var(--text-primary)!important;border-color:var(--border-strong)!important;}
[data-theme="dark"] .page-item.disabled .page-link{background:var(--surface-2);border-color:var(--border);color:var(--text-muted);}
/* Modals / dropdowns / form controls in dark mode */
[data-theme="dark"] .dropdown-menu{background:var(--surface-2);color:var(--text-primary);border-color:var(--border);}
[data-theme="dark"] .dropdown-item{color:var(--text-primary);}
[data-theme="dark"] .dropdown-item:hover,[data-theme="dark"] .dropdown-item:focus{background:var(--surface-0);color:var(--text-primary);}
[data-theme="dark"] .dropdown-header{color:var(--text-muted);}
[data-theme="dark"] .dropdown-divider{border-color:var(--border);}
[data-theme="dark"] .modal-header,[data-theme="dark"] .modal-footer{border-color:var(--border);}
[data-theme="dark"] .close{color:var(--text-primary);text-shadow:none;}
[data-theme="dark"] .form-control{background:var(--surface-0);color:var(--text-primary);border-color:var(--border);}
[data-theme="dark"] .form-control:focus{background:var(--surface-0);color:var(--text-primary);border-color:var(--accent);box-shadow:none;}
[data-theme="dark"] .custom-select,[data-theme="dark"] select.form-control{background:var(--surface-0);color:var(--text-primary);}
/* Retint AdminLTE primary blue to brand teal for CTA consistency (modals, buttons) */
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover,.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled):active{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;box-shadow:none;}
.modal-header.bg-primary,.card-primary:not(.card-outline)>.card-header{background:var(--brand-navy)!important;color:#fff!important;}
.text-primary{color:var(--accent)!important;}
a{color:var(--accent);}
a:hover{color:var(--accent-hover);}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}
/* Responsive: rail -> bottom bar on narrow screens */
@media (max-width:640px){
  .ng-app{flex-direction:column-reverse;}
  .ng-rail{width:100%;height:60px;flex-direction:row;justify-content:space-around;padding:0;}
  .ng-rail-brand,.ng-rail-spacer{display:none;}
  /* Map page: keep FAB above the bottom nav bar; declutter top bar */
  .ng-fab{bottom:76px!important;}
  .ng-chip{display:none;}
  .ng-topbar{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ng-proj select{min-width:120px;}
  .ng-overlay-layers{max-width:46%;}
  /* Secondary pages: let slim headers wrap instead of clipping */
  .ng-content{padding:14px;}
}