/* ===== Velonic-inspired palette ===== */
:root{
  --primary:#6658dd;      /* velonic purple */
  --primary-600:#584acc;
  --sidebar:#313a46;      /* dark slate */
  --sidebar-hr:#3f4954;
  --bg:#f5f6fa;           /* light page bg */
  --card:#ffffff;
  --muted:#6c757d;
  --text:#273444;
  --success:#1abc9c;
  --warning:#f7b84b;
  --danger:#fa5c7c;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:"Oswald",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg);
}

/* ===== Layout ===== */
.vl-body{display:flex; min-height:100vh;}

/* Sidebar */
.vl-sidebar{
  width:240px; background:var(--sidebar); color:#fff; flex-shrink:0;
  display:flex; flex-direction:column;
}
.vl-brand{
  display:flex; align-items:center; gap:10px;
  padding:18px 18px; border-bottom:1px solid var(--sidebar-hr);
}
.vl-brand .logo{
  width:36px;height:36px;border-radius:10px;background:var(--primary);
  display:inline-block;
}
.vl-brand .title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;       /* всичко в един ред */
  overflow:hidden;          /* няма пренасяне */
  text-overflow:ellipsis;   /* ако стане прекалено дълго - ... */
}

.vl-nav{list-style:none;margin:10px 0 0 0; padding:0; flex:1; overflow-y:auto}
.vl-nav li{margin:0}
.vl-nav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; color:#cfd6df; text-decoration:none; font-size:14px; letter-spacing:.3px;
  transition:background .2s,color .2s;
}
.vl-nav a:hover{ background:#2a333d; color:#fff; }
.vl-nav a.active{ background:#262e37; color:#fff; }
.vl-nav .sep{ margin:10px 0; height:1px; background:var(--sidebar-hr); border:0 }

/* Content */
.vl-main{flex:1; display:flex; flex-direction:column; min-width:0}
.vl-topbar{
  background:#fff; border-bottom:1px solid #eaecef; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.vl-topbar .left{display:flex; align-items:center; gap:12px}
.vl-topbar .ttl{ font-size:18px; font-weight:600 }
.vl-topbar .addr{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px }

.vl-content{ padding:18px; }

/* Cards */
.card{
  background:var(--card); border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06); padding:16px;
}
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.card h3{ margin:0 0 8px 0; font-weight:600 }

/* Badges/labels */
.badge{display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px}
.badge.success{ background:rgba(26,188,156,.12); color:var(--success) }
.badge.warn{ background:rgba(247,184,75,.16); color:var(--warning) }
.badge.danger{ background:rgba(250,92,124,.14); color:var(--danger) }

/* Tables */
.table{width:100%; border-collapse:collapse}
.table th,.table td{ padding:10px 12px; border-bottom:1px solid #eef0f3; text-align:left; font-size:14px }
.table th{ background:#fafbff; font-weight:600 }

/* Forms & Buttons */
.input, select, .btn{
  font:inherit; padding:10px 12px; border:1px solid #e2e5ea; border-radius:8px; width:100%;
}
.btn{ background:var(--primary); color:#fff; border:none; cursor:pointer;
  text-transform:uppercase; min-width:90px; height:calc(2em + .75rem + 2px) }
.btn:hover{ background:var(--primary-600) }
.btn.secondary{ background:#495057 }

/* Utilities */
.m0{margin:0} .mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}

/* Footer */
.site-footer{ margin-top:24px; padding:18px; text-align:center; color:#8898aa }

/* Responsive */
@media (max-width:1000px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:720px){
  .vl-sidebar{
    position:fixed;
    top:0; left:0; bottom:0;
    width:240px;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:1050; /* <-- sidebar винаги най-отгоре */
  }
  .vl-sidebar.open{ transform:translateX(0); }

  .vl-topbar .menu-btn{ display:inline-block; cursor:pointer; }
  .vl-topbar .menu-btn .bar{
    width:20px; height:2px; background:#333;
    display:block; margin:4px 0;
  }

  .vl-main{ margin-left:0; }
  .cards{ grid-template-columns:1fr; }
}

/* ===== Glassmorphism Login ===== */
.login-glass{
  min-height:100svh;
  margin:0; padding:0;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(102,88,221,.35), transparent 60%),
    radial-gradient(900px 500px at 90% 90%, rgba(26,188,156,.25), transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:"Oswald",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.glass-wrap{ width:100%; padding:24px; display:flex; justify-content:center; }
.glass-card{
  width:100%; max-width:420px;
  padding:22px 22px 18px;
  border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color:#e9eef6;
}
.glass-brand{ text-align:center; margin-bottom:8px; }
.glass-brand .brand-title{ font-size:26px; font-weight:700; letter-spacing:1px; }
.glass-brand .brand-sub{ margin-top:4px; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:#cfd6df; }

.glass-heading{ margin:8px 0 4px 0; font-size:20px; text-align:center; font-weight:600; color:#ffffff; }
.glass-subtitle{ margin:0 0 12px 0; font-size:13px; text-align:center; color:#d6dce5; }

.glass-error{
  background:rgba(250,92,124,.14);
  border:1px solid rgba(250,92,124,.35);
  color:#ffd1d8;
  padding:10px 12px;
  border-radius:12px;
  text-align:center;
  margin:0 0 12px 0;
}

.glass-form{ display:grid; gap:12px; }
.glass-form label{ font-size:14px; color:#e7edf7; display:block; }
.glass-form .input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.08);
  color:#fff;
  outline:none;
}
.glass-form .input::placeholder{ color:#dbe2ea; opacity:.8; }
.glass-form .input:focus{
  border-color: rgba(102,88,221,.75);
  box-shadow: 0 0 0 3px rgba(102,88,221,.25);
}

.actions{ display:flex; justify-content:flex-end; }
.btn{
  background:#6658dd; border:none; color:#fff; cursor:pointer;
  text-transform:uppercase; min-width:90px; height:calc(2em + .75rem + 2px);
  padding:10px 16px; border-radius:14px; letter-spacing:.6px;
  box-shadow: 0 10px 30px rgba(102,88,221,.35);
}
.btn:hover{ background:#584acc; }
                         /* === Mobile table → stacked cards (no horizontal scroll) === */
@media (max-width: 576px){
  table.responsive-stack {
    border: 0;
  }
  table.responsive-stack thead {
    display: none; /* скриваме заглавията на колони */
  }
  table.responsive-stack, 
  table.responsive-stack tbody, 
  table.responsive-stack tr, 
  table.responsive-stack td {
    display: block;
    width: 100%;
  }
  table.responsive-stack tr {
    background: var(--card);
    border: 1px solid #eef0f3;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.04);
    margin-bottom: 10px;
    padding: 6px 6px;
  }
  table.responsive-stack td {
    border: none;
    border-bottom: 1px solid #f2f3f6;
    position: relative;
    padding: 10px 12px 10px 44%;
    min-height: 42px;
  }
  table.responsive-stack td:last-child {
    border-bottom: none;
  }
  table.responsive-stack td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36%;
    font-weight: 600;
    color: #6c757d;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Бутоните да не се разтягат на 100% */
  table.responsive-stack .btn {
    width: auto;
    min-width: 0;
  }
}
/* ==== Mobile sidebar + overlay fix ==== */
@media (max-width: 720px){
  .vl-sidebar{
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 260px; max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1050; /* над съдържанието */
  }
  .vl-sidebar.open{ transform: translateX(0); }
  .vl-topbar .menu-btn{ display:inline-block; }
}
.vl-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  z-index: 1045; /* малко под sidebar */
}
.vl-overlay.show{ display: block; }
body.noscroll{ overflow: hidden; }

/* Бургер стилизиране */
.menu-btn{
  background: transparent; border: 0; padding: 6px 8px; cursor: pointer;
}
.menu-btn .bar{
  width: 22px; height: 2px; background: #333; display: block; margin: 4px 0;
}
.btn-wide-200 {
  width:200px;
  text-align:center;
}
.btn-square {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}