/* ===== GLOBAL SAFETY ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ===== BASE THEME ===== */
body {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  min-height: 100vh;
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
}

.glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ===== SIDEBAR BASE ===== */
.sidebar {
  width: 260px;
  min-width: 260px;
  height: 100vh;
  flex-shrink: 0;
  top: 0;
}

/* Desktop only behavior */
@media (min-width: 769px) {
  .sidebar {
    position: sticky;
  }
}

/* Sidebar links */
.sidebar a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 6px;
}

.sidebar a:hover {
  background: rgba(255,255,255,0.15);
}

/* ===== TOPBAR ===== */
.topbar {
  padding: 15px;
  margin-bottom: 20px;
}

/* ===== CARDS ===== */
.card {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
}

/* ===== CONTENT WIDTH (DESKTOP ONLY) ===== */
@media (min-width: 769px) {
  .content {
    width: calc(100% - 260px);
  }
}

/* ===== MOBILE FIX (FINAL & CORRECT) ===== */
@media (max-width: 768px) {

  /* Sidebar hidden by default */
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    width: 260px;
    z-index: 1001;
    transition: left .3s ease;
  }

  body.sidebar-open .sidebar {
    left: 0;
  }

  /* Backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1000;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }

  /* Topbar fixed */
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    margin: 0;
    border-radius: 0 0 14px 14px;
  }

  /* Content full width */
  .content {
    width: 100% !important;
    margin-left: 0 !important;
    padding-top: 90px !important;
    height: 100vh;
    overflow-y: auto;
  }
}