/* =========================================================
   Randexx • UniLab Panel — PRO UI (Light + Dark)
   ========================================================= */

/* -------------------------
   THEME TOKENS
------------------------- */
:root{
  /* Brand */
  --rx-navy:#1F2B65;
  --rx-blue:#315CB0;
  --rx-cyan:#5BADE5;
  --rx-gold:#E4B442;
  --rx-wordmark:#0C548D;

  /* Light */
  --bg:#F5F7FB;
  --card:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --border:#E6ECF5;

  --shadow-sm: 0 6px 18px rgba(15,23,42,.06);
  --shadow:    0 12px 30px rgba(15,23,42,.10);
  --shadow-lg: 0 18px 48px rgba(15,23,42,.14);

  --radius:16px;
  --radius-sm:12px;

  --success-bg:#DCFCE7;
  --success-tx:#166534;
  --danger-bg:#FEE2E2;
  --danger-tx:#991B1B;

  --focus: 0 0 0 4px rgba(91,173,229,.22);

  --field-bg: rgba(255,255,255,.98);
  --field-border: var(--border);
  --field-shadow: 0 10px 22px rgba(15,23,42,.06);

  /* layout */
  --max:1180px;
  --header-h:74px;
}

/* Dark */
:root[data-theme="dark"]{
  --bg:#0B1220;
  --card: rgba(255,255,255,.06);
  --text:#EAF0FF;
  --muted: rgba(234,240,255,.68);
  --border: rgba(234,240,255,.10);

  --shadow-sm: 0 10px 26px rgba(0,0,0,.35);
  --shadow:    0 16px 38px rgba(0,0,0,.42);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.50);

  --success-bg: rgba(34,197,94,.14);
  --success-tx: #9FF2C1;

  --danger-bg: rgba(239,68,68,.16);
  --danger-tx: #FFB4B4;

  --focus: 0 0 0 4px rgba(91,173,229,.18);

  --field-bg: rgba(255,255,255,.06);
  --field-border: rgba(234,240,255,.12);
  --field-shadow: 0 18px 40px rgba(0,0,0,.28);
}

/* -------------------------
   BASE
------------------------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(91,173,229,.14), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(228,180,66,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color: inherit; }
.muted{ color: var(--muted); }

h1,h2,h3,h4{ letter-spacing:.2px; margin:0; }
p{ margin:0; }
hr{ border:none; border-top:1px solid var(--border); margin:14px 0; }

/* -------------------------
   HEADER
------------------------- */
header{
  position:sticky;
  top:0;
  z-index:40;
  color:#fff;
  height: var(--header-h);
  background:
    radial-gradient(900px 400px at 10% -40%, rgba(91,173,229,.45), transparent 65%),
    radial-gradient(900px 400px at 100% 0%, rgba(228,180,66,.20), transparent 55%),
    linear-gradient(90deg, var(--rx-navy), var(--rx-wordmark));
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.header-inner{
  max-width:var(--max);
  margin:0 auto;
  height: var(--header-h);
  padding:0 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 180px;
}
.brand-logo{
  height:30px;
  width:auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
.brand .title{
  font-weight:900;
  letter-spacing:.2px;
  font-size:15px;
  opacity:.95;
}
.top-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.top-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  transition: all .16s ease;
}
.top-nav a:hover{
  background:rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.top-nav a.lang-active{
  background:rgba(228,180,66,.22);
  border-color: rgba(228,180,66,.35);
}

.icon-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: all .16s ease;
}
.icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.16); }

.theme-icon{
  width:18px; height:18px;
  display:block;
  background:#fff;
  mask-size: contain;
  mask-repeat:no-repeat;
  mask-position:center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .theme-icon{
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0-16h0Zm0 20h0ZM4.22 4.22h0Zm15.56 15.56h0ZM2 12h0Zm20 12h0ZM4.22 19.78h0Zm15.56-15.56h0Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0-16h0Zm0 20h0ZM4.22 4.22h0Zm15.56 15.56h0ZM2 12h0Zm20 12h0ZM4.22 19.78h0Zm15.56-15.56h0Z'/%3E%3C/svg%3E");
}

/* -------------------------
   APP LAYOUT
------------------------- */
.app-shell{
  display:flex;
  gap:18px;
  max-width:var(--max);
  margin:0 auto;
  padding:18px 16px 28px;
}
.main{ flex:1; min-width:0; }
.wrap{ margin: 6px auto; }

/* -------------------------
   SIDEBAR
------------------------- */
.sidebar{
  width:270px;
  position:sticky;
  top: calc(var(--header-h) + 8px);
  align-self:flex-start;
}
.sidebar-card{
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(91,173,229,.10), transparent 60%),
    radial-gradient(520px 220px at 90% 20%, rgba(228,180,66,.08), transparent 60%),
    var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
}
.sidebar-title{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:2px 0 10px;
  color: rgba(15,23,42,.70);
}
:root[data-theme="dark"] .sidebar-title{ color: rgba(234,240,255,.72); }

.side-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  font-weight:900;
  margin-bottom:8px;
  border:1px solid transparent;
  transition: all .16s ease;
}
.side-link .ico{ width:18px; height:18px; opacity:.9; }
.side-link:hover{
  background: rgba(91,173,229,.10);
  border-color: rgba(91,173,229,.18);
  transform: translateY(-1px);
}
.side-link.active{
  background:
    radial-gradient(600px 180px at 20% 0%, rgba(91,173,229,.18), transparent 65%),
    rgba(49,92,176,.12);
  border:1px solid rgba(49,92,176,.25);
  box-shadow: 0 10px 22px rgba(49,92,176,.14);
}
.sidebar-foot{
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(100,116,139,.25);
  background: rgba(255,255,255,.55);
}
:root[data-theme="dark"] .sidebar-foot{
  background: rgba(255,255,255,.03);
  border-color: rgba(234,240,255,.12);
}

/* -------------------------
   CARDS / GRID
------------------------- */
.card{
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(91,173,229,.10), transparent 55%),
    var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.section-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.section-title h2{ font-size:18px; }

.row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.row > .card{ flex:1; min-width:240px; }

/* KPI */
.kpi-tile{ position:relative; overflow:hidden; }
.kpi-tile::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width:180px;
  height:180px;
  background: radial-gradient(circle at 30% 30%, rgba(91,173,229,.28), transparent 60%);
  transform: rotate(18deg);
  pointer-events:none;
}
.kpi-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: var(--muted);
}
.kpi-value{
  font-size:32px;
  font-weight:950;
  margin-top:6px;
}
.kpi-hint{
  margin-top:6px;
  font-size:13px;
  color: var(--muted);
}

/* -------------------------
   BUTTONS
------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(49,92,176,.25);
  background:
    radial-gradient(900px 250px at 20% 0%, rgba(91,173,229,.25), transparent 60%),
    linear-gradient(180deg,#315CB0,#1F2B65);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  transition: all .16s ease;
  box-shadow: 0 10px 22px rgba(31,43,101,.18);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 30px rgba(31,43,101,.22); }
.btn:active{ transform: translateY(0px) scale(.99); }

.btn-ghost{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.btn-ghost:hover{ background: rgba(255,255,255,.16); box-shadow:none; }

.btn-soft{
  background: rgba(255,255,255,.10);
  color: var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}
.btn-soft:hover{ background: rgba(91,173,229,.10); }

.btn:disabled, button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* -------------------------
   FORMS
------------------------- */
label{
  font-weight:900;
  font-size:13px;
  margin-top:10px;
  display:block;
  color: rgba(15,23,42,.85);
}
:root[data-theme="dark"] label{ color: rgba(234,240,255,.82); }

input, select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--field-border);
  background: var(--field-bg);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
  font-size:14px;
  box-shadow: var(--field-shadow);
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(91,173,229,.55);
  box-shadow: var(--focus);
  transform: translateY(-1px);
}

select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(100,116,139,.9) 50%),
    linear-gradient(135deg, rgba(100,116,139,.9) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}

/* Password toggle */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:48px; }
.pw-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  height:36px;
  width:36px;
  border-radius:12px;
  border:1px solid rgba(49,92,176,.22);
  background:rgba(49,92,176,.08);
  cursor:pointer;
}
.pw-eye{
  display:block;
  width:18px;
  height:18px;
  margin:0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.5A2.5 2.5 0 1 0 12 9a2.5 2.5 0 0 0 0 5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.5A2.5 2.5 0 1 0 12 9a2.5 2.5 0 0 0 0 5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.85;
}
.pw-toggle.is-on{
  background:rgba(228,180,66,.18);
  border-color: rgba(228,180,66,.35);
}

/* -------------------------
   TABLES
------------------------- */
.table-wrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background: rgba(255,255,255,.85);
}
:root[data-theme="dark"] table{ background: rgba(255,255,255,.04); }

thead th{
  position:sticky;
  top:0;
  z-index:1;
  padding:12px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
  background:
    radial-gradient(1000px 250px at 20% 0%, rgba(91,173,229,.18), transparent 55%),
    rgba(49,92,176,.08);
  color: rgba(15,23,42,.78);
  border-bottom:1px solid var(--border);
}
:root[data-theme="dark"] thead th{ color: rgba(234,240,255,.78); }

tbody td{
  padding:12px;
  border-bottom:1px solid rgba(230,236,245,.85);
}
:root[data-theme="dark"] tbody td{ border-bottom:1px solid rgba(234,240,255,.08); }

tbody tr:nth-child(even){ background: rgba(245,247,251,.55); }
:root[data-theme="dark"] tbody tr:nth-child(even){ background: rgba(255,255,255,.02); }
tbody tr:hover{ background: rgba(91,173,229,.08); }
tbody tr:last-child td{ border-bottom:none; }

/* badges */
.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  border:1px solid rgba(228,180,66,.35);
  background:rgba(228,180,66,.14);
  color:#7A5200;
}
.badge-low{
  border-color: rgba(220,38,38,.28);
  background: rgba(220,38,38,.10);
  color: #7f1d1d;
}
:root[data-theme="dark"] .badge-low{ color:#FFB4B4; }

/* alerts */
.success{
  background:var(--success-bg);
  color:var(--success-tx);
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(22,101,52,.14);
}
.error{
  background:var(--danger-bg);
  color:var(--danger-tx);
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(153,27,27,.14);
}

/* -------------------------
   AUTH / LOGIN (SINGLE SOURCE OF TRUTH)
------------------------- */
.auth{
  min-height: calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px 40px;
}

/* the professional “glass” card */
.auth-card{
  width:100%;
  max-width: 520px;
  padding: 26px 24px 22px;
  border-radius: 20px;
  border:1px solid var(--border);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(91,173,229,.18), transparent 55%),
    radial-gradient(700px 220px at 85% 20%, rgba(228,180,66,.14), transparent 60%),
    var(--card);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.auth-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* subtle glow border */
.auth-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg, rgba(91,173,229,.25), rgba(49,92,176,.18), rgba(228,180,66,.18));
  filter: blur(26px);
  opacity: .55;
  z-index:0;
  pointer-events:none;
}
.auth-card > *{ position:relative; z-index:1; }

.auth-head{
  text-align:center;
  margin-bottom:14px;
}

/* IMPORTANT: LOGO SIZE — this is the one that matters */
.auth-logo{
  display:block;
  margin: 0 auto 16px;
  height: 135px;       /* <-- visible & professional */
  max-height: 135px;   /* <-- do NOT set smaller than height */
  max-width: 520px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22));
  transition: transform .25s ease, filter .25s ease;
}
.auth-card:hover .auth-logo{
  transform: scale(1.04);
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.30));
}

.auth-title{
  font-size:20px;
  font-weight:950;
  letter-spacing:.2px;
}
.auth-sub{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
}

.auth-form{ margin-top: 10px; }
.auth-submit{
  width:100%;
  justify-content:center;
  margin-top: 14px;
}
.auth-meta{
  margin-top:10px;
  font-size:12px;
}
.auth-footer{
  margin-top:16px;
  font-size:12px;
  text-align:center;
}

/* -------------------------
   UTIL
------------------------- */
.input-sm{
  width:120px !important;
  padding:9px 10px !important;
  border-radius:12px !important;
  font-size:13px !important;
  box-shadow:none !important;
}
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.btn-sm{
  padding:9px 12px;
  border-radius:12px;
  font-size:13px;
}

/* -------------------------
   MOBILE
------------------------- */
@media(max-width:980px){
  .sidebar{ display:none; }
  .app-shell{ display:block; padding-top:12px; }
  .header-inner{ max-width:100%; }
  .card{ padding:16px; }
  .top-nav{ gap:8px; }
}
/* =========================
   Dashboard: Layout helpers
   ========================= */
.page-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.toolbar{
  display:flex;
  gap:12px;
  align-items:end;
}

.control{ min-width: 240px; }

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}

@media(max-width: 980px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 520px){
  .kpi-grid{ grid-template-columns: 1fr; }
}

.kpi .kpi-inner{
  display:flex;
  align-items:center;
  gap:12px;
}

.kpi-ico{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-weight:950;
  color:#fff;
  background: linear-gradient(180deg, var(--rx-blue), var(--rx-navy));
  box-shadow: 0 12px 22px rgba(15,23,42,.12);
}

.panel-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media(max-width: 980px){
  .panel-grid{ grid-template-columns: 1fr; }
}

.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.panel-title h3, .panel-head .panel-title{ margin:0; }
.panel-sub{ margin:6px 0 0; font-size:13px; }

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(49,92,176,.18);
  background: rgba(49,92,176,.10);
}
.pill-low{
  border-color: rgba(220,38,38,.28);
  background: rgba(220,38,38,.10);
  color: #7f1d1d;
}
:root[data-theme="dark"] .pill-low{ color:#FFB4B4; }

/* Clickable rows */
.clickable-row{ cursor:pointer; }
.clickable-row:hover td{ background: rgba(91,173,229,.08); }
:root[data-theme="dark"] .clickable-row:hover td{ background: rgba(91,173,229,.12); }

.row-link{
  color: inherit;
  text-decoration:none;
  font-weight: 900;
}
.row-link:hover{ text-decoration: underline; }

.cell-title{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}

/* Low stock row tint */
tr.is-low td{
  background: rgba(220,38,38,.06);
}
:root[data-theme="dark"] tr.is-low td{
  background: rgba(239,68,68,.10);
}

/* =========================
   Mini Chart
   ========================= */
.mini-chart{
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background: rgba(255,255,255,.55);
}
:root[data-theme="dark"] .mini-chart{ background: rgba(255,255,255,.04); }

.mini-chart-bars{
  height:120px;
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:10px;
  align-items:end;
  padding:8px 6px 2px;
}

.mini-bar{
  border-radius:12px;
  background:
    radial-gradient(420px 120px at 20% 0%, rgba(91,173,229,.35), transparent 60%),
    linear-gradient(180deg, rgba(49,92,176,.95), rgba(31,43,101,.92));
  border:1px solid rgba(49,92,176,.22);
  box-shadow: 0 10px 18px rgba(31,43,101,.12);
  transition: transform .15s ease, filter .15s ease;
  min-height:6px;
}
.mini-bar:hover{ transform: translateY(-2px); filter: brightness(1.05); }

.mini-chart-axis{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:10px;
  font-size:11px;
  text-align:center;
}
.mini-tick{ opacity:.85; }
/* =========================
   HEADER (FINAL) — Logo like Login (balanced)
   ========================= */

/* Header bleibt wie gehabt – falls du ihn schon drin hast, musst du den Block nicht doppeln.
   Wichtig ist vor allem: die Logo-Regeln unten. */

header{
  position:sticky;
  top:0;
  z-index:40;
  color:#fff;
  height: var(--header-h);
  background:
    radial-gradient(900px 400px at 10% -40%, rgba(91,173,229,.45), transparent 65%),
    radial-gradient(900px 400px at 100% 0%, rgba(228,180,66,.20), transparent 55%),
    linear-gradient(90deg, var(--rx-navy), var(--rx-wordmark));
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.header-inner{
  max-width:var(--max);
  margin:0 auto;
  height: var(--header-h);
  padding:0 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 180px;
}

/* ✅ LOGO SIZE — matches the “login feel”: neat + professional, not huge */
header .brand img,
header .brand .brand-logo{
  height:135px;       /* <- “wie im Login”-Balance im Header */
  max-height:135px;
  width:auto;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}

/* Optional: wenn du den Titel daneben hast */
.brand .title{
  font-weight:900;
  letter-spacing:.2px;
  font-size:15px;
  opacity:.95;
}

/* Top nav bleibt */
.top-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

.top-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  transition: all .16s ease;
}

.top-nav a:hover{
  background:rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.top-nav a.lang-active{
  background:rgba(228,180,66,.22);
  border-color: rgba(228,180,66,.35);
}

/* Dark mode button */
.icon-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: all .16s ease;
}

.icon-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
}

/* Mobile: Header etwas kompakter */
@media(max-width:520px){
  header .brand img,
  header .brand .brand-logo{
    height:24px;
    max-height:24px;
  }
  .brand .title{
    font-size:14px;
  }
}
/* Forms: grid like pro admin panels */
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.form-grid .form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form-grid .form-row:nth-child(1){ grid-column: 1 / -1; } /* name full width */

.form-actions{
  grid-column: 1 / -1;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 6px;
}

@media(max-width: 760px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* Danger card */
.danger-card{
  border-color: rgba(220,38,38,.22);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(239,68,68,.10), transparent 55%),
    var(--card);
}
:root[data-theme="dark"] .danger-card{
  border-color: rgba(239,68,68,.22);
}
/* Tooltip (hover preview) */
.rx-tooltip{
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 320px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow);
  pointer-events: none;
}
:root[data-theme="dark"] .rx-tooltip{
  background: rgba(15,23,42,.92);
  border-color: rgba(234,240,255,.12);
}

.rx-tip-title{
  font-weight: 950;
  margin-bottom: 6px;
}
.rx-tip-line{
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.rx-tip-line b{ color: var(--text); }

.rx-tip-badge{
  margin-top: 10px;
  display:inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(220,38,38,.28);
  background: rgba(220,38,38,.10);
  color: #7f1d1d;
}
:root[data-theme="dark"] .rx-tip-badge{ color:#FFB4B4; }

/* Focus highlight */
.focus-row td{
  outline: 2px solid rgba(91,173,229,.35);
  box-shadow: 0 0 0 6px rgba(91,173,229,.14);
}

/* Stock low banner (top) */
.rx-stock-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(220,38,38,.22);
  background: rgba(220,38,38,.08);
}
.rx-stock-banner-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.rx-stock-dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(220,38,38,.85);
  box-shadow: 0 0 0 6px rgba(220,38,38,.12);
}
:root[data-theme="dark"] .rx-stock-banner{
  background: rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.28);
}
/* =========================
   Header Alert (Low Stock)
   ========================= */
.header-alert{
  max-width: var(--max);
  margin: -6px auto 10px;
  padding: 0 18px;
}

.header-alert-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color:#fff;
  background: rgba(220,38,38,.18);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  transition: transform .16s ease, background .16s ease;
}

.header-alert-link:hover{
  transform: translateY(-1px);
  background: rgba(220,38,38,.24);
}

.header-alert-dot{
  width:10px;height:10px;border-radius:999px;
  background: #ffb4b4;
  box-shadow: 0 0 0 6px rgba(239,68,68,.16);
}

.header-alert-count{
  margin-left:auto;
  font-weight:950;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  padding: 4px 10px;
  border-radius: 999px;
}

.header-alert-sub{
  opacity:.9;
  font-weight: 800;
  font-size: 12px;
}
/* =========================
   Stock: target scroll highlight
   ========================= */
.is-target td{
  outline: 2px solid rgba(91,173,229,.35);
  outline-offset: -2px;
}

.pulse td{
  animation: rxPulse 1.6s ease both;
}

@keyframes rxPulse{
  0%   { background: rgba(91,173,229,.18); }
  40%  { background: rgba(91,173,229,.10); }
  100% { background: transparent; }
}
/* 🔔 Header low stock badge */
.low-stock-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  color:#fff;
  background: rgba(239,68,68,.16);
  border:1px solid rgba(239,68,68,.28);
  transition: transform .16s ease, background .16s ease;
}
.low-stock-badge:hover{ background: rgba(239,68,68,.22); transform: translateY(-1px); }
.ls-dot{
  width:10px;height:10px;border-radius:999px;
  background:#EF4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.16);
}

/* 🧠 Focus highlight in stock table */
tr.is-focus td{
  outline: 2px solid rgba(91,173,229,.45);
  outline-offset: -2px;
  background: rgba(91,173,229,.08);
}
:root[data-theme="dark"] tr.is-focus td{
  background: rgba(91,173,229,.14);
  outline-color: rgba(91,173,229,.35);
}

/* 🧾 Hover preview tooltip */
.rx-tooltip{
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  pointer-events: none;
}
.rx-tip-title{
  font-weight: 950;
  margin-bottom: 6px;
}
.rx-tip-line{
  font-size: 13px;
  color: var(--text);
  opacity: .92;
}
.rx-tip-badge{
  display:inline-flex;
  margin-top:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  border:1px solid rgba(220,38,38,.28);
  background: rgba(220,38,38,.10);
  color: var(--danger-tx);
}
.rx-tip-hint{
  margin-top:8px;
  font-size:12px;
  color: var(--muted);
}
/* Header low-stock badge */
.rx-badge-link{ text-decoration:none; }
.rx-badge-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  border:1px solid rgba(220,38,38,.28);
  background: rgba(220,38,38,.12);
  color:#7f1d1d;
}
:root[data-theme="dark"] .rx-badge-pill{ color:#FFB4B4; }

/* Low-stock banner */
.rx-low-banner{
  max-width: var(--max);
  margin: 12px auto 0;
  padding: 0 16px;
}
.rx-low-banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-radius:16px;
  border:1px solid rgba(220,38,38,.22);
  background:
    radial-gradient(800px 220px at 15% 0%, rgba(239,68,68,.18), transparent 60%),
    rgba(255,255,255,.75);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .rx-low-banner-inner{
  background:
    radial-gradient(800px 220px at 15% 0%, rgba(239,68,68,.18), transparent 60%),
    rgba(255,255,255,.05);
}
.rx-low-banner.is-collapsed .rx-low-sub{ display:none; }
.rx-low-banner-left{ display:flex; align-items:center; gap:10px; }
.rx-low-dot{
  width:10px; height:10px; border-radius:999px;
  background:#ef4444;
  box-shadow: 0 0 0 6px rgba(239,68,68,.15);
}
.rx-low-title{ font-weight:950; }
.rx-low-sub{ color: var(--muted); font-size:13px; margin-top:2px; }
.rx-low-link{ font-weight:900; text-decoration:underline; }
.rx-low-banner-actions{ display:flex; gap:8px; align-items:center; }
.rx-low-btn{
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.35);
  color: var(--text);
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
}
:root[data-theme="dark"] .rx-low-btn{ background: rgba(255,255,255,.06); }
.rx-low-btn-x{ width:38px; text-align:center; }