/* app.css - glass admin theme with dark mode vars */

/* reset-ish */
*,
*::before,
*::after {
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -moz-osx-font-smoothing:grayscale;
  margin:0;
}

/* light mode vars */
:root{
  --bg-gradient-start:#f0f9ff;
  --bg-gradient-end:#ffffff;

  --glass-bg:rgba(255,255,255,.6);
  --glass-border:rgba(15,23,42,.18);
  --glass-shadow:0 30px 60px rgba(15,23,42,.15);

  --text-primary:#0f172a;
  --text-secondary:#475569;
  --text-dim:#94a3b8;

  --panel-bg:#ffffff;
  --panel-border:rgba(15,23,42,.16);

  --ocean-start:#e0f2fe;
  --ocean-end:#ffffff;

  --map-stroke:rgba(15,23,42,.4);

  --country-base:#94a3b8;
  --country-hover-active:#4ade80;
  --country-hover-inactive:#f87171;
}

/* dark mode vars override */
body.dark{
  --bg-gradient-start:#0f172a;
  --bg-gradient-end:#1e293b;

  --glass-bg:rgba(15,23,42,.6);
  --glass-border:rgba(255,255,255,.35);
  --glass-shadow:0 30px 60px rgba(0,0,0,.6);

  --text-primary:#f8fafc;
  --text-secondary:#cbd5e1;
  --text-dim:#64748b;

  --panel-bg:rgba(15,23,42,.8);
  --panel-border:rgba(255,255,255,.28);

  --ocean-start:#1e293b;
  --ocean-end:#0f172a;

  --map-stroke:rgba(148,163,184,.4);

  --country-base:#475569;
}

/* base body bg */
body.bgApp{
  background:radial-gradient(circle at 50% 0%,var(--bg-gradient-start)0%,var(--bg-gradient-end)70%);
  color:var(--text-primary);
  min-height:100vh;
  display:block;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  line-height:1.5;
  font-size:16px;
  position:relative;
}

/* layout shell */
.layoutShell{
  display:flex;
  flex-wrap:nowrap;
  min-height:100vh;
  max-width:1600px;
  margin:0 auto;
  padding:1rem;
  gap:1rem;
  position:relative;
}

/* sidebar */
.sidebar{
  width:240px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:1rem;
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
  position:relative;
  z-index:1000;
  color:var(--text-primary);
}
.sidebarHeader{
  padding:1rem;
  border-bottom:1px solid var(--panel-border);
  display:flex;
  align-items:flex-start;
  gap:.75rem;
}
.brandIcon{
  width:2.5rem;
  height:2.5rem;
  border-radius:.75rem;
  background:#2563eb;
  color:#fff;
  font-weight:600;
  font-size:.875rem;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.brandIcon img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:.75rem;
}
.brandText .name{
  font-weight:600;
  font-size:.875rem;
  line-height:1.25rem;
  color:var(--text-primary);
}
.brandText .sub{
  font-size:.7rem;
  line-height:1rem;
  color:var(--text-secondary);
}
.sidebarNav{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.navItem{
  font-size:.8rem;
  line-height:1rem;
  padding:.5rem .75rem;
  border-radius:.5rem;
  color:var(--text-primary);
  background:transparent;
  border:1px solid transparent;
  display:block;
  text-decoration:none;
}
.navItem:hover{
  background:rgba(0,0,0,.05);
}
body.dark .navItem:hover{
  background:rgba(255,255,255,.07);
}
.navItem.active{
  background:rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.4);
  color:#2563eb;
  font-weight:500;
}
.sidebarFooter{
  margin-top:auto;
  padding:1rem;
  font-size:.7rem;
  line-height:1rem;
  color:var(--text-secondary);
  border-top:1px solid var(--panel-border);
  word-break:break-word;
}

/* overlay for mobile sidebar */
.sidebarOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:900;
}

/* main area */
.mainArea{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:1rem;
  max-height:calc(100vh - 2rem);
  overflow:hidden;
  position:relative;
}

/* top bar (header) */
.topBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.25rem .75rem;
  border-bottom:1px solid var(--panel-border);
}
.pageTitle{
  font-size:1rem;
  font-weight:600;
  line-height:1.5rem;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.burgerBtn{
  display:none;
  background:rgba(0,0,0,.05);
  border:1px solid var(--panel-border);
  border-radius:.5rem;
  padding:.4rem .5rem;
  line-height:1;
  font-size:.8rem;
  font-weight:500;
  color:var(--text-primary);
}

/* user box / theme toggle */
.userBox{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.7rem;
  line-height:1rem;
  color:var(--text-secondary);
}
.userAvatarCircle{
  width:2rem;
  height:2rem;
  border-radius:9999px;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  color:var(--text-primary);
  font-size:.7rem;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.userAvatarCircle img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:9999px;
}
.themeToggleBtn{
  font-size:.7rem;
  line-height:1rem;
  padding:.4rem .5rem;
  border-radius:.5rem;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  color:var(--text-secondary);
}

/* page main content */
.mainContent{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:1rem 1.25rem 2rem;
  position:relative;
}

/* glass card */
.cardGlass{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:1rem;
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(12px);
}

/* welcome popup */
.welcomeOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.welcomeModal{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  border-radius:1rem;
  padding:1rem 1.25rem;
  width:100%;
  max-width:20rem;
  color:var(--text-primary);
  text-align:center;
}
.welcomeTitle{
  font-size:1rem;
  font-weight:600;
  line-height:1.5rem;
  color:var(--text-primary);
  margin-bottom:.5rem;
}
.welcomeText{
  font-size:.8rem;
  line-height:1rem;
  color:var(--text-secondary);
  margin-bottom:.75rem;
}

/* buttons */
.btnPrimary{
  background:#2563eb;
  color:#fff;
  font-weight:500;
  border-radius:.5rem;
  padding:.5rem .75rem;
  border:1px solid rgba(37,99,235,.5);
}
.btnPrimary:hover{
  background:#1d4ed8;
}
.btnGreen{
  background:#22c55e;
  color:#fff;
  font-weight:500;
  border-radius:.5rem;
  padding:.5rem .75rem;
  border:1px solid rgba(34,197,94,.4);
}
.btnGreen:hover{
  background:#16a34a;
}
.btnGray{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  color:var(--text-secondary);
  font-weight:500;
  border-radius:.5rem;
  padding:.5rem .75rem;
}
.btnGray:hover{
  background:rgba(0,0,0,.05);
}

/* text helpers driven by CSS vars */
.textPrimary{
  color:var(--text-primary);
}
.textSecondary{
  color:var(--text-secondary);
}
.textDim{
  color:var(--text-dim);
}
.statNumber{
  font-size:1.125rem;
  line-height:1.5rem;
  font-weight:600;
  color:var(--text-primary);
}
.statLabel{
  font-size:.8rem;
  line-height:1rem;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:.5rem;
}
.smallInfo{
  font-size:.7rem;
  line-height:1rem;
  color:var(--text-secondary);
}
.sectionCardTitle{
  font-size:.8rem;
  line-height:1rem;
  font-weight:600;
  color:var(--text-primary);
}
.sectionCardHint{
  font-size:.7rem;
  line-height:1rem;
  color:var(--text-secondary);
}

/* form styles */
.formLabel{
  font-size:.7rem;
  line-height:1rem;
  font-weight:500;
  color:var(--text-primary);
  margin-bottom:.25rem;
  display:block;
}
.inputText,
.selectField{
  width:100%;
  border:1px solid var(--panel-border);
  background:var(--panel-bg);
  color:var(--text-primary);
  border-radius:.5rem;
  font-size:.8rem;
  line-height:1rem;
  padding:.5rem .75rem;
}
input[type=file].fileField{
  font-size:.7rem;
  line-height:1rem;
  color:var(--text-secondary);
}

/* table styles */
.tableWrapper{
  border:1px solid var(--panel-border);
  border-radius:.75rem;
  overflow-x:auto;
}
.tableHeaderRow{
  background:rgba(0,0,0,.03);
}
body.dark .tableHeaderRow{
  background:rgba(255,255,255,.05);
}
.tableHeaderCell{
  font-size:.7rem;
  line-height:1rem;
  font-weight:600;
  color:var(--text-primary);
  text-align:left;
  padding:.5rem .75rem;
  white-space:nowrap;
}
.tableRow{
  border-top:1px solid var(--panel-border);
}
.tableCell{
  font-size:.7rem;
  line-height:1rem;
  color:var(--text-secondary);
  padding:.5rem .75rem;
  vertical-align:top;
}

/* badges */
.badgeOpen{
  background:#2563eb;
  color:#fff;
  font-size:.65rem;
  line-height:1rem;
  border-radius:.375rem;
  padding:.25rem .5rem;
  font-weight:500;
  display:inline-block;
}
.badgeClosed{
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:.65rem;
  line-height:1rem;
  border-radius:.375rem;
  padding:.25rem .5rem;
  font-weight:500;
  display:inline-block;
}
body.dark .badgeClosed{
  background:rgba(255,255,255,.15);
}

/* progress bar */
.progressTrack{
  background:rgba(0,0,0,.08);
  border-radius:.5rem;
  overflow:hidden;
  height:.5rem;
}
body.dark .progressTrack{
  background:rgba(255,255,255,.1);
}
.progressBar{
  background:#2563eb;
  height:100%;
}

/* tooltip for map hover */
.mapTooltip{
  position:absolute;
  z-index:3000;
  pointer-events:none;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:.5rem;
  font-size:.7rem;
  line-height:1rem;
  color:var(--text-primary);
  padding:.25rem .5rem;
  white-space:nowrap;
}

/* responsive: mobile sidebar */
@media(max-width:1024px){
  .sidebar{
    position:fixed;
    top:1rem;
    bottom:1rem;
    left:1rem;
    width:16rem;
    transform:translateX(-110%);
    transition:transform .2s ease;
    z-index:1000;
  }
  .sidebar.sidebar--open{
    transform:translateX(0);
  }
  .sidebarOverlay.hidden{
    display:none;
  }
  .burgerBtn{
    display:inline-flex;
  }
  .topBar{
    position:sticky;
    top:0;
  }
  .layoutShell{
    padding-top:3rem;
  }
}

/* login page helpers */
.loginBg{
  background:radial-gradient(circle at 50% 0%,var(--bg-gradient-start)0%,var(--bg-gradient-end)70%);
}
.loginCard{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:1rem;
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(12px);
  width:100%;
  max-width:24rem;
}
.loginLogo{
  width:3rem;
  height:3rem;
  border-radius:.75rem;
  margin:0 auto .5rem;
  background:#2563eb;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:1rem;
}

/* global "no shadows" kill switch */
.noShadows *{
  box-shadow:none !important;
}