/* main.css — SKY GLASS MINIMAL
   Все дизайн-токены — в _tokens.css (загружается раньше).
*/

*{ box-sizing: border-box; }
html, body{ height: 100%; }

/* Единый шрифт — перебиваем Bootstrap и Tailwind */
html, body,
input, button, select, textarea, optgroup,
a, p, span, div, h1, h2, h3, h4, h5, h6,
label, li, td, th, caption, legend, figcaption {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Тёмная тема — перекрашиваем фон и навигацию */
html.dark-theme body {
  background: var(--bg-base);
  color: var(--text-primary);
}
html.dark-theme .sidebar { background: var(--sidebar-bg) !important; }
html.dark-theme .topbar  { background: var(--topbar-bg) !important; }
html.dark-theme .side-link { color: var(--text-primary) !important; }
html.dark-theme .side-link:hover { background: rgba(255,255,255,.07) !important; }
html.dark-theme .sidebar-menu {
  background: rgba(20,28,50,.60) !important;
  border-color: var(--glass-border) !important;
}
html.dark-theme .map-sidebar {
  background: rgba(20,28,50,.60) !important;
  border-color: var(--glass-border) !important;
}
html.dark-theme .event-item {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--glass-border) !important;
}

body{
  margin: 0;
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  overflow-x: hidden;
  overflow-y: auto;

  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);

  background:
    radial-gradient(1100px 600px at 18% 0%, rgba(58,160,255,.20), transparent 62%),
    radial-gradient(900px 560px at 88% 12%, rgba(108,220,255,.16), transparent 60%),
    linear-gradient(180deg, var(--sky-0), var(--sky-1));
}

a{ color: inherit; text-decoration: none; }
::selection{ background: rgba(58,160,255,.22); }

/* =========================================================
   TOPBAR (video + glass)
========================================================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 2000;

  height: var(--topbar-h);
  display: flex;
  align-items: center;

  padding: 0 18px;

  border-bottom: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 18px 40px rgba(11,18,32,.10);

  overflow: hidden;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  background: rgba(255,255,255,.14);
}

.topbar-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.topbar-video{
  position: absolute;
  top: 50%;
  left: 50%;

  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

  transform: translate(-50%, -50%);
  object-fit: cover;

  opacity: .92;
  filter: saturate(1.05) contrast(1.10) brightness(.78);
}

.topbar-glass{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    radial-gradient(900px 240px at 16% 25%, rgba(58,160,255,.16), transparent 62%),
    radial-gradient(760px 220px at 88% 18%, rgba(108,220,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  mix-blend-mode: screen;
  opacity: .95;
}

.topbar-left{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand{ display:flex; align-items:center; gap:10px; }

.brand-title{
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}

/* =========================================================
   APP SHELL
   ВАЖНО: сами колонки — БЕЗ фона/бордера, чтобы не было “перегородок”
========================================================= */
.app-shell{
  flex: 1;
  min-height: 0;

  display: grid;
  grid-template-columns: var(--left-w) 1fr;
}

/* =========================================================
   LEFT SIDEBAR WRAPPER (НЕ рисуем панель!)
   Это просто контейнер. Вся красота — в .sidebar-menu
========================================================= */
.sidebar{
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));

  padding: var(--gap);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sidebar-head{
  padding: 6px 4px 12px;
}

.sidebar-title{
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: rgba(11,18,32,.92);
}

/* ===== LEFT NAV CARD (единственная “панель” слева) ===== */
.sidebar-menu{
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 12px;
  border-radius: var(--radius2);

  background: linear-gradient(180deg, rgba(58,160,255,.14), rgba(255,255,255,.40));
  border: 1px solid var(--panelBlueBorder);
  box-shadow: 0 12px 22px rgba(11,18,32,.06);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.side-link{
  height: var(--btn-h);
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 0 12px;
  border-radius: var(--radius);

  border: 1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.32);

  color: rgba(11,18,32,.78);
  font-weight: 800;

  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.side-link:hover{
  background: rgba(58,160,255,.14);
  border-color: rgba(58,160,255,.22);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(11,18,32,.08);
}

.side-link.active{
  background: rgba(58,160,255,.18);
  border-color: rgba(58,160,255,.26);
  color: rgba(11,18,32,.92);
}

.side-ico{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,18,32,.08);
}

.side-ico i{
  font-size: var(--icon);
  line-height: 1;
  color: rgba(11,18,32,.78);
}

.side-link.danger:hover{
  background: rgba(11,18,32,.06);
  border-color: rgba(11,18,32,.10);
}

/* =========================================================
   CONTENT (map canvas)
========================================================= */
.content{
  position: relative;
  min-height: 0;

  padding: var(--gap);
  height: calc(100vh - var(--topbar-h));
}

/* keep leaflet under UI */
.leaflet-container,
.leaflet-pane,
.leaflet-map-pane{ z-index: 0; }

/* MAP (рамка карты — главный элемент) */
.map{
  position: absolute;
  top: var(--gap);
  left: var(--gap);
  bottom: var(--gap);
  right: calc(var(--gap) + var(--right-w) + var(--gap));

  border-radius: var(--radius2);
  overflow: hidden;

  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--shadow);

  outline: 10px solid rgba(255,255,255,.35);
  outline-offset: -10px;

  z-index: 1;
}

/* =========================================================
   RIGHT SIDEBAR WRAPPER (НЕ рисуем панель!)
   Это просто фикс-контейнер. Вся красота — в “карточке” внутри.
   Чтобы не красить пустоту до низа — делаем max-height и fit-content.
========================================================= */
.map-sidebar{
  position: fixed;
  top: calc(var(--topbar-h) + var(--gap));
  right: var(--gap);

  width: var(--right-w);

  /* ВАЖНО: не тянем до низа, чтобы не было “простыни” */
  max-height: calc(100vh - var(--topbar-h) - (var(--gap) * 2));
  overflow-y: auto;

  padding: 0;              /* нет фона — значит и padding тут не нужен */
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  z-index: 50;
}

/* прокрутка аккуратная */
.map-sidebar::-webkit-scrollbar{ width: 10px; }
.map-sidebar::-webkit-scrollbar-thumb{
  background: rgba(11,18,32,.10);
  border-radius: 999px;
}
.map-sidebar::-webkit-scrollbar-track{ background: transparent; }

/* ===== RIGHT PANEL CARD (единственная “панель” справа) =====
   У тебя в HTML нет обёртки — поэтому мы “карточим” ВСЁ содержимое
   через внутренний слой-подложку: добавляем padding + фон прямо на .map-sidebar
   НО без растягивания до низа (max-height выше решает).
*/
.map-sidebar{
  padding: 12px;
  border-radius: var(--radius2);

  background: linear-gradient(180deg, rgba(58,160,255,.14), rgba(255,255,255,.40));
  border: 1px solid var(--panelBlueBorder);
  box-shadow: 0 12px 22px rgba(11,18,32,.06);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* section headers inside right card */
.map-sidebar .sidebar-title,
.map-sidebar h2,
.map-sidebar h3,
.map-sidebar h4{
  margin: 0;
  padding: 6px 2px 10px;

  font-size: 12px;
  font-weight: 850;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,18,32,.52);

  border-bottom: 1px solid rgba(11,18,32,.08);
}

/* buttons = EXACT same vibe as left nav items */
.map-sidebar .btn,
.map-sidebar button.btn{
  height: var(--btn-h);
  width: 100%;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 12px;
  margin: 0;

  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.60);

  background: rgba(255,255,255,.32);
  color: rgba(11,18,32,.86);

  font-weight: 850;
  cursor: pointer;

  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.map-sidebar .btn:hover{
  background: rgba(58,160,255,.14);
  border-color: rgba(58,160,255,.22);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(11,18,32,.08);
}

/* icons */
.map-sidebar .btn i,
.map-sidebar .btn svg{
  width: var(--icon);
  height: var(--icon);
  font-size: var(--icon);
  line-height: 1;
}

/* optional: make primary actions slightly stronger but still “glass” */
.map-sidebar .btn-create{
  background: rgba(58,160,255,.22);
  border-color: rgba(58,160,255,.26);
  color: rgba(11,18,32,.92);
}
.map-sidebar .btn-chats{
  background: rgba(43,111,255,.16);
  border-color: rgba(43,111,255,.22);
  color: rgba(11,18,32,.92);
}
.map-sidebar .btn-filter{
  background: rgba(255,255,255,.32);
  border-color: rgba(255,255,255,.60);
}

/* lists inside right */
.events-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.event-item{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.28);
  padding: 12px;

  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.event-item:hover{
  background: rgba(58,160,255,.10);
  border-color: rgba(58,160,255,.18);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(11,18,32,.08);
}

.event-link{
  display: inline-block;
  font-weight: 850;
  font-size: 14px;
  color: rgba(43,111,255,.95);
}
.event-link:hover{ text-decoration: underline; }

/* =========================================================
   UNAUTH — login / register pages
========================================================= */
.unauth{
  flex: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.auth-card{
  width: min(440px, 100%);

  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58));
  border: 1px solid rgba(255,255,255,.74);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  padding: 30px 30px 26px;
}

.auth-card h2{
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(11,18,32,.94);
}

.auth-card .subtitle{
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: 750;
  color: rgba(11,18,32,.50);
}

/* Django form paragraph wrappers */
.auth-card p{ margin-bottom: 14px; }
.auth-card p:last-of-type{ margin-bottom: 0; }

.auth-card label{
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(11,18,32,.56);
}

.auth-card input[type=text],
.auth-card input[type=password],
.auth-card input[type=email]{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.80);
  color: rgba(11,18,32,.92);
  font-size: 14px;
  font-weight: 750;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.auth-card input:focus{
  border-color: rgba(58,160,255,.45);
  box-shadow: 0 0 0 4px rgba(58,160,255,.14);
  background: rgba(255,255,255,.94);
}

.auth-card button[type=submit]{
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(58,160,255,1), rgba(108,220,255,1));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  transition: transform .14s, filter .14s, box-shadow .14s;
}
.auth-card button[type=submit]:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 28px rgba(58,160,255,.18);
}

.auth-divider{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: rgba(11,18,32,.36);
  font-size: 12px;
  font-weight: 850;
}
.auth-divider::before,
.auth-divider::after{
  content:'';
  flex:1;
  height: 1px;
  background: rgba(11,18,32,.10);
}

.auth-google-btn{
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  color: rgba(11,18,32,.86);
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
  transition: transform .14s, background .14s, border-color .14s, box-shadow .14s;
}
.auth-google-btn:hover{
  background: rgba(58,160,255,.08);
  border-color: rgba(58,160,255,.22);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(11,18,32,.10);
}

.auth-footer{
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 750;
  color: rgba(11,18,32,.54);
}
.auth-footer a{
  color: rgba(43,111,255,.90);
  font-weight: 900;
  text-decoration: none;
}
.auth-footer a:hover{ text-decoration: underline; }

.auth-card ul.errorlist{
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
}
.auth-card ul.errorlist li{
  font-size: 12px;
  color: rgba(200,40,40,.90);
  font-weight: 850;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 768px){
  :root{
    --topbar-h: 68px;
    --right-w: 0px;
  }

  .app-shell{ grid-template-columns: 1fr; }
  .sidebar{ display: none; }

  .content{
    height: calc(100vh - var(--topbar-h));
    padding: 10px;
  }

  .map{
    right: 10px;
    inset: 10px;
    outline-width: 8px;
  }

  .map-sidebar{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;

    width: auto;
    max-height: 46vh;
  }
}