:root {
  --bg:       #07070d;
  --surface:  #0e0e1a;
  --magenta:  #ff0080;
  --cyan:     #00f5ff;
  --yellow:   #ffe600;
  --white:    #f0f0f0;
  --dim:      #5a5a7a;
  --glow-m:   0 0 8px #ff0080, 0 0 24px #ff008066;
  --glow-c:   0 0 8px #00f5ff, 0 0 24px #00f5ff55;
  --glow-y:   0 0 8px #ffe600, 0 0 24px #ffe60055;
}

.admin-body {
  display: block;
  min-height: 100vh;
  background: #060610;
  font-family: 'Share Tech Mono', monospace;
}

/* SIDEBAR */
.admin-sidebar {
  width: 220px;
  background: #0a0a18;
  border-right: 2px solid #ff008060;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 50;
  overflow-y: auto;
}

.sidebar-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--magenta);
  text-shadow: var(--glow-m);
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid #ff008025;
  display: block;
  margin-bottom: 0.75rem;
}

.sidebar-nav { display:flex; flex-direction:column; }

.sidebar-link {
  display: block;
  padding: 0.65rem 1.5rem;
  font-size: 0.75rem;
  color: var(--dim);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.15s, background 0.15s;
}

.sidebar-link:hover, .sidebar-link.active {
  color: var(--cyan);
  background: rgba(0,245,255,0.06);
}

.sidebar-link.active { border-left: 2px solid var(--cyan); }

.sidebar-super { color: #b06fff; }
.sidebar-super:hover, .sidebar-super.active { color: #b06fff; background: rgba(176,111,255,0.08); }

.sidebar-logout { color: #ff4444; margin-top: auto; }
.sidebar-logout:hover { background: rgba(255,68,68,0.08); }

.sidebar-divider {
  height: 1px;
  background: #ffffff10;
  margin: 0.5rem 1.5rem;
}

/* MAIN AREA */
.admin-main {
  margin-left: 220px;
  min-height: 100vh;
  display: block;
  position: relative;
}

.admin-topbar {
  background: #0a0a18;
  border-bottom: 1px solid #ff008025;
  padding: 0 2rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1em;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--dim);
}

.topbar-username { color: var(--white); }

.badge-super {
  background: #9b59b6;
  color: #fff;
  font-size: 0.6rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}

.admin-content {
  padding: 2rem;
}

/* DASHBOARD CARDS */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 1.25rem;
}

.dash-card {
  background: #0e0e1a;
  border: 1px solid #ffffff10;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  display: block;
}

.dash-card:hover { border-color: var(--cyan); box-shadow: 0 0 16px #00f5ff22; }

.dash-card-super { border-top: 2px solid #9b59b6; }
.dash-card-super:hover { border-color: #9b59b6; box-shadow: 0 0 16px #9b59b622; }

.dash-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }

.dash-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 0.4rem;
}

.dash-desc { font-size: 0.72rem; color: var(--dim); line-height: 1.5; }

/* FORMS */
.form-section {
  background: #0e0e1a;
  border: 1px solid #ffffff0a;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 1.25rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.72rem;
  color: var(--dim);
  letter-spacing: 0.1em;
  margin-bottom: 0.35rem;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
  width: 100%;
  background: #060610;
  border: 1px solid #ffffff15;
  color: var(--white);
  padding: 0.6rem 0.75rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s;
  max-width: 560px;
}

.form-group input:focus,
.form-group textarea:focus { border-color: var(--cyan); }

.form-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--dim);
}

.form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--magenta);
}

/* Inline add form */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
  background: #0e0e1a;
  border: 1px solid #ffffff0a;
  padding: 1.25rem;
}

.inline-form input {
  background: #060610;
  border: 1px solid #ffffff15;
  color: var(--white);
  padding: 0.55rem 0.75rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  outline: none;
  flex: 1;
  min-width: 140px;
}

.inline-form input:focus { border-color: var(--cyan); }

.stacked-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  background: #0e0e1a;
  border: 1px solid #ffffff0a;
  padding: 1.25rem;
  max-width: 700px;
}

.stacked-form input,
.stacked-form textarea {
  background: #060610;
  border: 1px solid #ffffff15;
  color: var(--white);
  padding: 0.55rem 0.75rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  outline: none;
  width: 100%;
}

.stacked-form input:focus,
.stacked-form textarea:focus { border-color: var(--cyan); }

.form-row { display:flex; gap:0.75rem; flex-wrap:wrap; }
.form-row input { flex:1; min-width:160px; }

/* TABLE */
.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 1rem;
}

.admin-table thead tr {
  background: #0a0a18;
  border-bottom: 1px solid #ff008030;
}

.admin-table th {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
}

.admin-table tbody tr {
  border-bottom: 1px solid #ffffff08;
}

.admin-table tbody tr:hover { background: #0e0e1a55; }

.admin-table td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

.admin-table td input[type="text"],
.admin-table td input[type="url"],
.admin-table td input[type="password"],
.admin-table td input[type="number"] {
  background: #060610;
  border: 1px solid #ffffff10;
  color: var(--white);
  padding: 0.4rem 0.5rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  width: 100%;
  min-width: 100px;
  outline: none;
}

.admin-table td textarea {
  background: #060610;
  border: 1px solid #ffffff10;
  color: var(--white);
  padding: 0.4rem 0.5rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  width: 100%;
  min-width: 180px;
  outline: none;
  resize: vertical;
}

.admin-table td input:focus,
.admin-table td textarea:focus { border-color: var(--cyan); }

.action-btns { display:flex; gap:0.4rem; align-items:center; }

.btn-sm {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.7rem;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s;
}

.btn-sm.btn-cyan   { color:var(--cyan);   border-color:var(--cyan);   }
.btn-sm.btn-cyan:hover   { background:var(--cyan);   color:var(--bg); }
.btn-sm.btn-yellow { color:var(--yellow); border-color:var(--yellow); }
.btn-sm.btn-yellow:hover { background:var(--yellow); color:var(--bg); }
.btn-sm.btn-danger { color:#ff4444;       border-color:#ff4444;       }
.btn-sm.btn-danger:hover { background:#ff4444; color:#fff; }

/* ALERTS */
.alert {
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  border: 1px solid;
  letter-spacing: 0.05em;
}

.alert-success { border-color: var(--cyan); color: var(--cyan); background: rgba(0,245,255,0.06); }
.alert-error   { border-color: #ff4444;     color: #ff4444;     background: rgba(255,68,68,0.06); }

/* LOGIN PAGE */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-card {
  background: #0e0e1a;
  border: 1px solid #ff008030;
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--glow-m);
}

.login-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--magenta);
  text-shadow: var(--glow-m);
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
  text-align: center;
}

.login-sub {
  font-size: 0.65rem;
  color: var(--dim);
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 1.75rem;
  text-transform: uppercase;
}

.login-card .form-group label { color: var(--dim); font-size: 0.72rem; letter-spacing: 0.1em; display:block; margin-bottom:0.3rem; }
.login-card .form-group { margin-bottom: 1rem; }

.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%;
  background: #060610;
  border: 1px solid #ffffff20;
  color: var(--white);
  padding: 0.65rem 0.75rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  outline: none;
}

.login-card input:focus { border-color: var(--magenta); }

.login-back {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.7rem;
  color: var(--dim);
  text-decoration: none;
  letter-spacing: 0.1em;
}

.login-back:hover { color: var(--cyan); }

/* SUPER ADMIN INFO BLOCK */
.super-badge-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid #9b59b630;
  background: rgba(155,89,182,0.06);
  font-size: 0.78rem;
  color: #c0a0e0;
}
.admin-table td {
  color: var(--white);
}
.login-card button[type="submit"] {
  width: 100%;
  background: transparent;
  border: 2px solid var(--magenta);
  color: var(--magenta);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 0.85rem;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: var(--glow-m);
  transition: all 0.2s;
}

.login-card button[type="submit"]:hover {
  background: var(--magenta);
  color: var(--bg);
  box-shadow: 0 0 30px #ff0080;
}
button[type="submit"].btn,
button[type="submit"].btn-magenta,
button[type="submit"].btn-cyan,
button[type="submit"].btn-yellow {
  cursor: pointer;
}

/* Default all unclassed submit buttons to match theme */
.admin-content button[type="submit"]:not(.btn-sm):not([class*="btn"]) {
  background: transparent;
  border: 2px solid var(--magenta);
  color: var(--magenta);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: var(--glow-m);
  transition: all 0.2s;
}

.admin-content button[type="submit"]:not(.btn-sm):not([class*="btn"]):hover {
  background: var(--magenta);
  color: var(--bg);
  box-shadow: 0 0 30px #ff0080;
}

.btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  display: inline-block;
}

.btn-magenta { color:var(--magenta); border-color:var(--magenta); box-shadow:var(--glow-m); }
.btn-magenta:hover { background:var(--magenta); color:var(--bg); box-shadow:0 0 30px #ff0080; }

.btn-cyan { color:var(--cyan); border-color:var(--cyan); box-shadow:var(--glow-c); }
.btn-cyan:hover { background:var(--cyan); color:var(--bg); box-shadow:0 0 30px #00f5ff; }

.btn-yellow { color:var(--yellow); border-color:var(--yellow); box-shadow:var(--glow-y); }
.btn-yellow:hover { background:var(--yellow); color:var(--bg); box-shadow:0 0 30px #ffe600; }

@media (max-width: 768px) {
  .admin-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    top: auto; left: auto; bottom: auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.5rem;
    border-right: none;
    border-bottom: 1px solid #ff008040;
  }

  .sidebar-logo {
    width: 100%;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #ff008025;
    margin-bottom: 0;
    font-size: 0.75rem;
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .sidebar-link {
    padding: 0.4rem 0.75rem;
    font-size: 0.65rem;
  }

  .sidebar-divider { display: none; }

  .admin-main {
    margin-left: 0;
  }

  .admin-topbar {
    padding: 0 1rem;
    height: 48px;
  }

  .topbar-title { font-size: 0.7rem; }

  .admin-content { padding: 1rem; }

  .dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }

  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-form input { min-width: unset; }

  .admin-table { font-size: 0.7rem; }

  .badge-super { display: none; }
}

@media (max-width: 768px) {
  .admin-table thead { display: none; }

  .admin-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ffffff15;
    padding: 0.75rem;
    background: #0e0e1a;
  }

  .admin-table td {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border: none;
  }

  .admin-table td::before {
    content: attr(data-label);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    color: var(--dim);
    text-transform: uppercase;
    min-width: 70px;
    flex-shrink: 0;
  }

  .admin-table td input[type="text"],
  .admin-table td input[type="url"],
  .admin-table td input[type="number"],
  .admin-table td input[type="password"],
  .admin-table td textarea {
    min-width: unset;
    flex: 1;
  }

  .action-btns {
    justify-content: flex-start;
    padding-top: 0.25rem;
  }
}