/* =========================================================
   Jupiter UI – Complete CSS (Light + Vyzor-like Dark)
   ========================================================= */
/*----------- Fnts --------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ---------- Light Theme (Default) ---------- */
:root{
  /* Ebenen */
  --app-bg:#f6f7fb;       /* Body-Hintergrund */
  --rail-bg:#f8f9fd;      /* linke Icon-Rail */
  --sidebar-bg:#f8f9fd;   /* Sidebar */
  --surface:#f8f9fd;      /* Karten/App-Bar */
  --main-bg:#ffffff;      /* optionales Sheet */

  /* Linien / Text */
  --border:#eef0f4;
  --text:#0f172a;
  --muted:#6b7280;

  /* Brand */
  --primary:#7c3aed;
  --primary-10:#f6f0ff;
  --accent:#a78bfa;

  /* Effekte */
  --ring: rgba(124,58,237,.25);
  --shadow:0 6px 18px rgba(17,24,39,.06);

  /* Layout-Variablen */
  --rail:64px;
  --sidebar-open:260px;      /* fixe Breite der Sidebar (sichtbar) */
  --sidebar:260px;           /* aktuelle Breite (collapsed = 0) */
  --gap-left:40px;           /* Abstand zwischen Sidebar und Main */

  --right-open:320px;        /* Breite der rechten Spalte wenn sichtbar */
  --right:320px;             /* aktuelle Right-Breite (unter 1200px = 0) */
}

/* ---------- Dark Theme Overrides (Vyzor-like) ---------- */
html[data-theme="dark"]{
  /* Ebenen */
  --app-bg:#0f1321;
  --rail-bg:#13182a;
  --sidebar-bg:#161b2e;
  --surface:#1a2034;
  --main-bg:#1a2034;

  /* Linien / Text */
  --border:#2a3150;
  --text:#e7e9f4;
  --muted:#a5aec9;

  /* Brand */
  --primary:#8b5cf6;
  --primary-10:#2a2150;
  --accent:#bba6ff;

  /* Effekte */
  --ring: rgba(139,92,246,.35);
  --shadow:0 10px 30px rgba(0,0,0,.55);
}

/* =========== States =========== */
/* Sidebar collapsed -> links frei */
html[data-sidebar="collapsed"]{ --sidebar:0px; }
/* <1200px: rechte Spalte weg */
@media (max-width:1199.98px){ :root{ --right:0px; } }

/* =========================================================
   Base
   ========================================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--app-bg); color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-family: "Roboto", sans-serif;
}
body a {
    text-decoration: none;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
.btn:focus,.form-control:focus,.input-group-text:focus{box-shadow:0 0 0 .2rem var(--ring)}
.text-muted{color:var(--muted)!important}

/* =========================================================
   App-Bar (vollbreit)
   ========================================================= */
.j-appbar{
  position:fixed; left:0; right:0; top:0; height:78px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  z-index:4000;
  padding:16px 24px;
}
.j-appbar .inner{width:100%; display:flex; align-items:center; gap:12px}
.j-appbar .search{flex:1; max-width:520px}
@supports (backdrop-filter: blur(6px)){
  html[data-theme="dark"] .j-appbar{
    background:rgba(26,32,52,.9);
    backdrop-filter: blur(6px);
  }
}

/* =========================================================
   Linke Rail
   ========================================================= */
.j-rail{
  position:fixed; left:0; bottom:0; top:78px;
  width:var(--rail); background:var(--rail-bg);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:12px 0; gap:8px;
  z-index:3500; /* Rail bleibt über der Sidebar */
}
.j-rail .logo{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800
}
.j-rail a{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#64748b;
}
.j-rail a.active{background:var(--primary-10); color:var(--primary)}
html[data-theme="dark"] .j-rail a{ color:#9aa3bd }

/* Optionaler Rail-Toggle */
.rail-toggle{
  width:44px; height:44px; margin:6px 0;
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); color:var(--text); background:transparent; cursor:pointer;
}
.rail-toggle:hover{ background:rgba(124,58,237,.08) }
html[data-theme="dark"] .rail-toggle:hover{ background:#232a46 }

/* =========================================================
   Sidebar (unter App-Bar) – SLIDE
   ========================================================= */
.j-sidebar{
  position:fixed; left:var(--rail); top:78px; bottom:0;
  width:var(--sidebar-open);
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  z-index:3000; padding:16px 16px 90px 16px; overflow-y:auto;

  /* Slide-Animation: wenn --sidebar=0 wird links ausgeblendet */
  transform: translateX(calc(var(--sidebar) - var(--sidebar-open)));
  transition: transform .25s ease;
}

/* Wenn Sidebar collapsed ist, nicht "unsichtbar" Klicks fressen */
html[data-sidebar="collapsed"] .j-sidebar{ pointer-events:none; }

.j-sidebar .title{
  font-size:.8rem; color:#94a3b8; letter-spacing:.08em;
  text-transform:uppercase; margin:10px 0;
}
html[data-theme="dark"] .j-sidebar .title{ color:#7e88a8 }
.j-sidebar .item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; color:var(--text);
}
.j-sidebar .item:hover,.j-sidebar .item.active{ background:rgba(124,58,237,.08) }
html[data-theme="dark"] .j-sidebar .item:hover,
html[data-theme="dark"] .j-sidebar .item.active{ background:#232a46 }

/* Kleiner Header-Bereich in der Sidebar für den Toggle */
.j-sidebar .top{
  display:flex; align-items:center; justify-content:flex-end;
  margin-bottom:10px;
}
.j-sidebar .top .toggle{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:transparent; color:var(--text);
}
.j-sidebar .top .toggle:hover{ background:rgba(124,58,237,.08) }
html[data-theme="dark"] .j-sidebar .top .toggle:hover{ background:#232a46 }

.j-sidebar .promo{position:sticky; bottom:10px}
aside.j-sidebar{overflow:hidden} /* scrollbars schön */

/* =========================================================
   Main + Right (Sheet)
   ========================================================= */
.j-main{
  /* dynamische Abstände */
  margin-left: calc(var(--rail) + var(--sidebar) + var(--gap-left)) !important;
  margin-right: 40px;
  margin-top: calc(78px + 24px) !important;
  margin-bottom: 40px !important;

  position:relative; z-index:1100;
  background:var(--main-bg);
  padding:2rem;
  border-radius:26px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  transition: margin-left .25s ease, margin-right .25s ease;
}
.j-right{
  position:fixed; top: calc(78px + 12px); right:20px; bottom:20px;
  width: var(--right-open);
  display:flex; flex-direction:column; gap:16px; z-index:1100;
}

/* =========================================================
   Karten / Sektionen
   ========================================================= */
.j-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.j-card .card-body{padding:18px}

/* =========================================================
   Kategorien & Ordner
   ========================================================= */
.j-cat{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.j-cat .c{grid-column:span 4; padding:18px; border-radius:16px; border:1px solid var(--border); background:#f5f2ff}
.j-cat .c.doc{background:#eaf8ff}
.j-cat .c.audio{background:#fff6e9}
html[data-theme="dark"] .j-cat .c{background:#1f2740; border-color:#2b3457}
html[data-theme="dark"] .j-cat .c.doc{background:#1d2741}
html[data-theme="dark"] .j-cat .c.audio{background:#2a2642}

.j-folders{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.j-folders .f{
  grid-column:span 4; padding:16px; border-radius:16px;
  border:1px solid var(--border); display:flex; justify-content:space-between; background:var(--surface)
}

/* =========================================================
   Storage Widget
   ========================================================= */
.j-storage .bar{height:8px;background:#edf0f4;border-radius:999px;overflow:hidden}
.j-storage .bar>span{display:block;height:100%;background:var(--primary);width:58%}
html[data-theme="dark"] .j-storage .bar{background:#232a46}

/* =========================================================
   Tabelle (Recent Files)
   ========================================================= */
.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{
  background:#fafbff; border-bottom:1px solid var(--border);
  font-weight:600; color:#475569
}
.table td, .table th{vertical-align:middle; padding:.85rem .75rem; border-top:1px solid var(--border)}
.table tbody tr:hover{background:#fafbff}
html[data-theme="dark"] .table thead th{
  background:#202742; color:#cfd6ee; border-bottom:1px solid var(--border)
}
html[data-theme="dark"] .table tbody tr{background:transparent; border-color:var(--border)}
html[data-theme="dark"] .table tbody tr:hover{background:#1f2745}
html[data-theme="dark"] .table .btn{border-color:#3a4370}
html[data-theme="dark"] .table .btn:hover{background:#2a3156}

/* =========================================================
   Form Controls / Buttons
   ========================================================= */
.form-control, .input-group-text{
  background:#fff; color:var(--text); border:1px solid var(--border)
}
.form-control::placeholder{color:#9aa3b2}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-group-text{
  background:#1e2540; color:var(--text); border:1px solid var(--border)
}
html[data-theme="dark"] .form-control::placeholder{color:#8f99ba}

.btn{border-color:var(--border)}
.btn.btn-outline-secondary{color:#334155; background:transparent}
.btn.btn-outline-secondary:hover{background:#f3f4f9}
html[data-theme="dark"] .btn.btn-outline-secondary{
  color:#cdd5f2; border-color:#3a4370; background:transparent
}
html[data-theme="dark"] .btn.btn-outline-secondary:hover{
  background:#272f53; border-color:#4a5382
}
.btn.btn-primary{background:var(--primary); border-color:var(--primary)}
.btn.btn-primary:hover{filter:brightness(1.06)}

/* Badges (optional) */
.badge{border-radius:10px; padding:.35rem .55rem}
html[data-theme="dark"] .badge{background:#2a3156; color:#cfd6ee}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1399.98px){
  .j-appbar .search{max-width:420px}
}
@media (max-width: 1199.98px){
  .j-right{display:none}
}
@media (max-width: 991.98px){
  .j-sidebar{display:none}
  .j-main{
    margin-left: var(--rail) !important;
    margin-right: 20px !important;
  }
}
@media (max-width: 575.98px){
  .j-main{
    margin-top: calc(78px + 16px) !important;
    margin-left: var(--rail) !important;
    margin-right: 12px !important;
    margin-bottom: 24px !important;
  }
  .j-appbar{padding:12px}
  .j-card .card-body{padding:14px}
}

/* right side */
/* ========== Right panel vars ========== */
:root{
  --right-open: 340px;      /* full width of the right panel */
  --right: var(--right-open);
}
/* collapsed state */
html[data-right="collapsed"]{ --right: 0px; }

/* make Main margin react to right panel width */
.j-main{
  /* replace your fixed right margin with the calc below */
  margin-right: calc(var(--right) + 34px);
  transition: margin .25s ease;
}

/* ========== Right slide-out ========== */
.j-right{
  position: fixed;
  top: calc(78px + 12px);
  right: 20px;
  bottom: 20px;
  width: var(--right-open);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1100;

  /* slide animation */
 transform: translateX(calc(var(--right-open) - var(--right)));
  transition: transform .25s ease;

  /* panel surface */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
}

/* small “handle” button inside the panel */
.j-right .right-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
.j-right .toggle{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:transparent;color:var(--text);
}
.j-right .toggle:hover{ background:rgba(124,58,237,.08) }
html[data-theme="dark"] .j-right .toggle:hover{ background:#232a46 }

/* Storage widget (reuse your previous rules) */
.j-storage .bar{height:8px;background:#edf0f4;border-radius:999px;overflow:hidden}
.j-storage .bar>span{display:block;height:100%;background:var(--primary);width:58%}
html[data-theme="dark"] .j-storage .bar{background:#232a46}

/* hide right panel on smaller screens – Main margin falls back automatically */
@media (max-width:1199.98px){
  :root{ --right: 0px !important; }
  .j-right{ display:none }
}

/* ===================== Storage panel ===================== */

/* Farben fürs Storage Widget */
:root{
  --stor-surface:#ffffff;
  --stor-border:#eef0f4;
  --stor-text:#0f172a;
  --stor-muted:#6b7280;
  --stor-doc:#ef3f8f;     /* pink für Documents */
  --stor-img:#22c55e;     /* grün für Images */
  --stor-med:#8b5cf6;     /* lila für Media */
  --stor-oth:#f59e0b;     /* orange für Other */
  --stor-unk:#94a3b8;     /* grau für Unknown */
  --stor-track:#e8ecf5;
}

html[data-theme="dark"]{
  --stor-surface:#161b2e;
  --stor-border:#262f4a;
  --stor-text:#e6e8ef;
  --stor-muted:#9aa3bd;
  --stor-track:#202742;
}

/* Karte */
.j-right .j-card.storage{
  background:var(--stor-surface);
  border:1px solid var(--stor-border);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  overflow:hidden;
}

/* ---------- Halb-Donut Gauge ---------- */
.j-storage-head{ padding:18px 18px 8px 18px; }
.j-gauge{
  position:relative; width:100%; height:120px;
  display:flex; align-items:center; justify-content:center;
}

/* SVG Pfade */
.gauge-svg{ width:100%; height:100%; }
.gauge-svg path{ fill:none; stroke-linecap:round; stroke-width:12; }
.g-bg  { stroke: var(--stor-track); }
.g-val { stroke: linear-gradient(#fff,#fff); } /* placeholder – wird unten per stroke gesetzt */

/* Fortschritt via Stroke-Length */
.j-gauge{
  /* Verhältnis (0..1): 0.88 = 88% genutzt */
  --gauge-ratio: 0.88;
  --circum: 125.66;            /* Pi * r (ungefähr für den Halbbogen) */
}
.g-val{
  stroke: url(#grad-stor);     /* Fallback wenn kein Paint-Server -> Farbe unten */
  stroke: #6d9bff;             /* fallback stroke */
  stroke-dasharray: calc(var(--circum)*var(--gauge-ratio)) var(--circum);
  transition: stroke-dasharray .6s ease;
}

/* Zentrum */
.g-center{
  position:absolute; inset:auto 0 16px 0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.g-center .bi{ font-size:18px; opacity:.9 }
.g-value{ font-weight:700; font-size:18px; color:var(--stor-text) }
.g-sub{ font-size:12px; color:var(--stor-muted) }

/* ---------- Liste & Bars ---------- */
.j-storage-list{ padding:8px 18px 16px 18px }
.j-srow{
  display:grid; grid-template-columns:22px 1fr auto; align-items:center;
  gap:10px; padding:12px 0; border-bottom:1px dashed var(--stor-border);
}
.j-srow:last-child{ border-bottom:none }
.j-srow .bi{ font-size:16px; opacity:.95 }

.j-sbar{
  height:6px; background:var(--stor-track);
  border-radius:999px; overflow:hidden; margin-top:6px;
}
.j-sbar > span{ display:block; height:100%; width:0; transition:width .6s ease }

/* Farbcodierung */
.j-srow.docs  .j-sbar > span{ background:var(--stor-doc) }
.j-srow.img   .j-sbar > span{ background:var(--stor-img) }
.j-srow.media .j-sbar > span{ background:var(--stor-med) }
.j-srow.other .j-sbar > span{ background:var(--stor-oth) }
.j-srow.unk   .j-sbar > span{ background:var(--stor-unk) }

/* Kopfzeile „Storage“ + Close-Pill */
.j-right .storage .card-title{
  padding:12px 18px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--stor-border);
}
.j-right .storage .pill{
  height:30px; min-width:30px; padding:0 10px;
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border:1px solid var(--stor-border); border-radius:999px; background:transparent;
  color:var(--stor-text); cursor:pointer;
}
.j-right .storage .pill:hover{ background:rgba(124,58,237,.08) }
html[data-theme="dark"] .j-right .storage .pill:hover{ background:#232a46 }

.file-wrap {
    max-width: 100% !important;
}