/*
  BKAStudios Admin Theme (admin.css)
  Scope: standalone admin center @ admin.bkastudios.de
  Design: Dark, glassy, neon-accent (BKA purple/cyan)
  Author: BKAStudios
*/

/* =============================
   1) CSS Reset & Base Tokens
   ============================= */
:root{
  /* Brand */
  --brand:#8b5cf6;          /* purple */
  --brand-2:#a78bfa;        /* light purple */
  --brand-cyan:#22d3ee;     /* cyan accent */

  /* Surfaces */
  --bg-0:#0b0815;           /* page */
  --bg-1:#0f0a1e;           /* panels */
  --panel:rgba(15,12,31,.82);
  --panel-2:rgba(18,15,36,.86);

  /* Text */
  --text:#e6e8ff;
  --muted:#a9afd1;

  /* Lines & Shadows */
  --line:#2a2546;
  --shadow-soft:0 10px 40px rgba(139,92,246,.20);
  --shadow-strong:0 30px 120px rgba(139,92,246,.22), 0 8px 28px rgba(0,0,0,.5);

  /* Radii & Sizes */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --nav-h:64px;

  /* States */
  --ok:#10b981;       /* green */
  --warn:#f59e0b;     /* amber */
  --danger:#ef4444;   /* red */
  --info:#38bdf8;     /* sky */
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
  font-size:16px; line-height:1.6; color:var(--text);
  background:
    radial-gradient(1200px 800px at 60% -10%, rgba(139,92,246,.10), rgba(124,58,237,.04) 70%, transparent 100%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  background-attachment: fixed;
}

img{max-width:100%; height:auto;}
button, input, select, textarea{font:inherit; color:inherit}
:focus{outline:none}
:focus-visible{box-shadow:0 0 0 3px rgba(139,92,246,.35); border-radius:8px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* =============================
   2) Typography & Inline Elements
   ============================= */
.muted{color:var(--muted)}

h1,h2,h3,h4,h5{margin:0 0 .5em; font-weight:800; color:#eef}
h1{font-size:clamp(32px,3.8vw,42px)}
h2{font-size:clamp(24px,3vw,28px)}
h3{font-size:clamp(18px,2.4vw,22px)}

p{margin:.6em 0}
small{font-size:.88em; color:var(--muted)}
strong,b{font-weight:800}
u,ins{text-decoration:underline}
i,em{font-style:italic}
hr{border:0; height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); margin:18px 0}

/* Links */
a{color:var(--brand); text-decoration:none; font-weight:650; position:relative; transition:color .25s}
a::after{content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-cyan)); border-radius:4px; transition:width .25s}
a:hover{color:var(--brand-cyan)}
a:hover::after{width:100%}

/* Utility font-size + color */
.fs-12{font-size:12px} .fs-14{font-size:14px} .fs-18{font-size:18px}
.text-ok{color:var(--ok)} .text-warn{color:var(--warn)} .text-danger{color:var(--danger)} .text-info{color:var(--info)}

/* =============================
   3) Layout Shell (header / sidebar)
   ============================= */
.app{min-height:100vh; display:grid; grid-template-rows: var(--nav-h) 1fr}
.app-header{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,12,31,.72), rgba(18,15,36,.66));
  backdrop-filter: blur(8px) saturate(130%);
}
.brand{display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:rgba(255,255,255,.02)}
.brand .logo{width:22px; height:22px; border-radius:6px; background:conic-gradient(from 220deg,var(--brand),var(--brand-cyan),var(--brand-2),var(--brand)); box-shadow:0 0 18px rgba(167,139,250,.35)}

.app-body{display:grid; grid-template-columns: 260px 1fr; gap:14px; padding:14px;}
@media (max-width: 1024px){ .app-body{grid-template-columns: 1fr} .sidebar{position:sticky; top:calc(var(--nav-h) + 8px)} }

.sidebar{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
}
.sidebar .section{padding:10px 10px 12px}
.sidebar .section-title{margin:8px 8px 6px; font-weight:800; color:#eceaff; font-size:.95rem}
.sidebar a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin:6px 6px; border-radius:12px;
  color:var(--text); border:1px solid var(--line); background:rgba(255,255,255,.02);
  transition: background .18s, border-color .18s, transform .12s;
}
.sidebar a:hover{background:rgba(139,92,246,.10); border-color:rgba(139,92,246,.35); transform:translateY(-1px)}
.sidebar a.active{background:linear-gradient(180deg, rgba(139,92,246,.23), rgba(124,58,237,.18)); border-color:#3a2f62}

.content{min-width:0}
.container{max-width:1920px; margin:0 auto; padding:0 8px 60px}

/* =============================
   4) Cards & Panels
   ============================= */
.card{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow:var(--shadow-strong); overflow:hidden;
}
.card-header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.card-title{margin:0; font-weight:800}
.card-sub{color:var(--muted); font-size:.95rem}
.card-body{padding:16px}
.card-footer{padding:12px 16px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end}

/* =============================
   5) Buttons
   ============================= */
.btn{--btn-bg:rgba(255,255,255,.03); --btn-bd:var(--line); --btn-fg:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:var(--r-pill); border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg); font-weight:750; cursor:pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(139,92,246,.18)}
.btn:disabled{opacity:.6; cursor:not-allowed; filter:saturate(.7)}

.btn-primary{--btn-bg:linear-gradient(180deg, rgba(167,139,250,.20), rgba(124,58,237,.15)); --btn-bd:#3a2f62; --btn-fg:#fff}
.btn-ghost{--btn-bg:transparent}
.btn-outline{--btn-bg:transparent; --btn-bd:#3a2f62}
.btn-danger{--btn-bg:linear-gradient(180deg, rgba(239,68,68,.2), rgba(239,68,68,.12)); --btn-bd:#7a2631}
.btn-ok{--btn-bg:linear-gradient(180deg, rgba(16,185,129,.22), rgba(16,185,129,.12)); --btn-bd:#1f5c4e}
.btn-sm{padding:8px 12px; font-size:.92rem}
.btn-lg{padding:12px 18px; font-size:1.02rem}
.btn-icon{padding:8px; width:36px; height:36px}

/* Button group */
.btn-group{display:inline-flex; border-radius:var(--r-pill); overflow:hidden}
.btn-group .btn{border-radius:0}
.btn-group .btn:first-child{border-top-left-radius:var(--r-pill); border-bottom-left-radius:var(--r-pill)}
.btn-group .btn:last-child{border-top-right-radius:var(--r-pill); border-bottom-right-radius:var(--r-pill)}

/* =============================
   6) Forms (inputs, selects, checkboxes, switches)
   ============================= */
.form{display:grid; gap:12px}
.form-row{display:grid; gap:12px}
@media (min-width:720px){ .form-row.cols-2{grid-template-columns:1fr 1fr} .form-row.cols-3{grid-template-columns:1fr 1fr 1fr} }

.label{font-size:.9rem; color:var(--muted); font-weight:700; margin-bottom:6px}
.input,.select,.textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.02); color:var(--text);
  transition:border .2s, box-shadow .2s, background .2s;
}
.textarea{min-height:110px; resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:#3a2f62; box-shadow:0 0 0 4px rgba(167,139,250,.12), 0 10px 24px rgba(139,92,246,.15)}
.input[readonly]{opacity:.8}

/* input group */
.input-group{display:flex; align-items:stretch}
.input-group > .addon{display:inline-flex; align-items:center; padding:0 12px; border:1px solid var(--line); border-right:0; border-radius:12px 0 0 12px; background:rgba(255,255,255,.03)}
.input-group > .input{border-radius:0 12px 12px 0}

/* checkbox & radio */
.check{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.check input{appearance:none; width:18px; height:18px; border-radius:6px; border:1px solid var(--line); background:rgba(255,255,255,.02); display:inline-grid; place-items:center; transition:all .18s}
.check input::after{content:""; width:10px; height:10px; border-radius:3px; transform:scale(0); background:linear-gradient(180deg,var(--brand),var(--brand-cyan)); transition:transform .18s}
.check input:checked{border-color:#3a2f62; box-shadow:0 0 0 2px rgba(139,92,246,.25)}
.check input:checked::after{transform:scale(1)}

.radio input{border-radius:999px}
.radio input::after{border-radius:999px}

/* switch */
.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer}
.switch input{appearance:none; width:42px; height:24px; border-radius:999px; background:#2b2744; border:1px solid var(--line); position:relative; transition:all .22s}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.25); transition:transform .22s}
.switch input:checked{background:linear-gradient(90deg,var(--brand),var(--brand-cyan)); border-color:#3a2f62}
.switch input:checked::after{transform:translateX(18px)}

/* validation */
.is-invalid{border-color:rgba(239,68,68,.65)}
.form-hint{font-size:.85rem; color:var(--muted)}
.form-error{margin-top:6px; padding:8px 10px; border-radius:10px; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.35); color:#ffb4b4}

/* =============================
   7) Tables
   ============================= */
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); box-shadow:var(--shadow-soft)}
.table{width:100%; border-collapse:collapse; min-width:680px}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left}
.table thead th{background:rgba(255,255,255,.04); color:#eef; position:sticky; top:0}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.table.striped tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
.table.compact th,.table.compact td{padding:8px 10px}

.status-dot{display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px}
.status-ok{background:var(--ok)} .status-warn{background:var(--warn)} .status-danger{background:var(--danger)}

/* =============================
   8) Tabs & Breadcrumbs & Badges
   ============================= */
.tabs{display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line); margin-bottom:12px}
.tab{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; background:rgba(255,255,255,.02); color:var(--muted); font-weight:700; cursor:pointer}
.tab.active{color:#fff; background:linear-gradient(180deg, rgba(139,92,246,.22), rgba(124,58,237,.16)); border-color:#3a2f62}

.breadcrumbs{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.95rem}
.breadcrumbs a{color:var(--muted)}

.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--r-pill); border:1px solid #352b63; background:rgba(139,92,246,.12); font-size:.85rem; color:#e6e4ff}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--r-pill); border:1px solid var(--line); background:rgba(255,255,255,.04)}

/* =============================
   9) Alerts & Toasts
   ============================= */
.alert{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03)}
.alert.ok{border-color:#1f5c4e; background:linear-gradient(180deg, rgba(16,185,129,.12), rgba(16,185,129,.06))}
.alert.info{border-color:#1a3d4d; background:linear-gradient(180deg, rgba(34,211,238,.12), rgba(34,211,238,.06))}
.alert.warn{border-color:#4b3b22; background:linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.06))}
.alert.danger{border-color:#7a2631; background:linear-gradient(180deg, rgba(239,68,68,.12), rgba(239,68,68,.06))}

.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:rgba(12,10,20,.92); color:var(--text); padding:10px 14px; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transition:opacity .25s}
.toast.show{opacity:1}

/* =============================
   10) Modal (generic)
   ============================= */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .24s, visibility .24s}
.modal[aria-hidden="false"]{opacity:1; visibility:visible}
.modal-bg{position:absolute; inset:0; background:rgba(6,5,12,.6); backdrop-filter:blur(10px)}
.modal-box{position:relative; width:min(720px,94vw); border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow:var(--shadow-strong)}
.modal-close{position:absolute; right:10px; top:8px; width:34px; height:34px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted); border-radius:10px; cursor:pointer}

/* =============================
   11) Auth / Login Page helpers
   ============================= */
.page-auth{display:grid; place-items:center; min-height:calc(100vh - var(--nav-h)); padding:30px 14px}
.auth-card{width:min(460px, 94vw);}
.auth-card .card-body{display:grid; gap:12px}
.auth-brand{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:8px}
.auth-brand .logo{
   width:100px; 
   height:100px; 
   border-radius:8px; 
   background:conic-gradient(from 220deg,var(--brand),var(--brand-cyan),var(--brand-2),var(--brand));
   background-image: url(https://bkastudios.de/img/logo.png);
   background-size: cover;
}

/* =============================
   12) Grid helpers
   ============================= */
.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){ .grid.cols-4{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .grid.cols-2,.grid.cols-3{grid-template-columns:1fr} }

/* =============================
   13) Scrollbars (WebKit + Firefox)
   ============================= */
/***** WebKit *****/
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25); border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,.4)}
*::-webkit-scrollbar-track{background:transparent}

/***** Firefox *****/
*{scrollbar-color: rgba(139,92,246,.28) transparent; scrollbar-width: thin}

/* =============================
   14) Helpers (spacing, flex, hide)
   ============================= */
.mt-0{margin-top:0} .mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px}
.mb-0{margin-bottom:0} .mb-8{margin-bottom:8px} .mb-12{margin-bottom:12px} .mb-16{margin-bottom:16px}
.p-0{padding:0} .p-8{padding:8px} .p-12{padding:12px} .p-16{padding:16px} .p-20{padding:20px}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .gap-8{gap:8px} .gap-12{gap:12px}
.hide{display:none !important}

/* =============================
   15) Toast Positions (optional)
   ============================= */
.toast.top{top:22px; bottom:auto}
.toast.right{left:auto; right:22px; transform:none}
.toast.left{left:22px; transform:none}

/* =============================
   16) Login error / message (ready for JS)
   ============================= */
.login-error{display:none; margin-top:8px; padding:10px 12px; border-radius:12px; background:rgba(255,80,80,.08); border:1px solid rgba(255,80,80,.25); color:#ff9d9d; font-size:14px}
.login-error.show{display:block}

/* =============================
   17) Tables: empty state
   ============================= */
.empty{display:grid; place-items:center; padding:26px; color:var(--muted)}

/* =============================
   18) Code blocks (for logs)
   ============================= */
.code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.92rem; line-height:1.5; background:#0f0c1f; border:1px solid var(--line); border-radius:12px; padding:10px 12px; overflow:auto}

/* =============================
   19) Footer
   ============================= */
.footer{color:var(--muted); font-size:12px; text-align:center; padding:20px 12px 44px; border-top:1px solid var(--line)}

/* End of admin.css */



/* ===== Select (Einzeilig & Multiple) ===== */
.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 100%;
  min-height: 44px;
  padding: 10px 42px 10px 14px;            /* Platz rechts für Chevron */
  font: inherit;
  color: #E9E7F7;
  background:
    linear-gradient(180deg, #191624, #0f0d1a) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)) border-box;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 30px rgba(0,0,0,.25);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  cursor: pointer;

  /* Chevron als SVG-Background (hell-lila) */
}

.select:hover {
  border-color: rgba(255,255,255,.16);
}

.select:focus {
  outline: none;
  border-color: #7A5CFF;
  box-shadow:
    0 0 0 3px rgba(122,92,255,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.select:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Multiple / size>1 */
.select[multiple], .select[size] {
  padding-right: 14px;              /* ohne Chevron bei Multiple */
  min-height: 120px;
  background-image: none;
  cursor: default;
}

/* Optionen (Hinweis: nicht jeder Browser stylt die Dropdown-Popup-Liste komplett) */
.select option,
.select optgroup {
  background-color: #0f0d1a;
  color: #E9E7F7;
}

.select option:checked {
  background-color: #2a2144;        /* markierte Option */
  color: #fff;
}

.select option:disabled {
  color: #8b87a3;
}

/* Kleinere Variante, falls gebraucht */
.select.select-sm {
  min-height: 36px;
  padding: 6px 38px 6px 12px;
  border-radius: 10px;
  font-size: .95rem;
  background-position: right 10px center;
  background-size: 16px 16px;
}

/* Select in Input-Gruppen (falls Button daneben) */
.input-group > .select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .btn + .select,
.input-group > .select + .btn {
  margin-left: -1px; /* Nahtlos aneinander */
}