/* ======================================================================
   APP - consolidated styles (CLEAN)
   Source: merged from styles.css, dashboard.css, digital_signage.css,
           login.css, sub_navigation.css
   ====================================================================== */

/* ===== Tokens (Light) ===== */
:root{
  /* Typography */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --fs-base: 13px;
  --fs-sm: 11px;
  --lh: 1.45;

  /* Layout */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --shadow-2: 0 12px 34px rgba(16,24,40,.14), 0 2px 8px rgba(16,24,40,.10);

  /* Palette (modern slate/indigo) */
  --bg: #f6f7fb;
  --bg-elev: #ffffff;
  --bg-muted: #eef2f7;

  --text: #0f172a;
  --text-muted: #475569;
  --border: rgba(15, 23, 42, .14);

    --accent: #004088;          /* core blue (logo) */
    --accent-2: #04AADB;        /* cyan (logo) */
  --accent-warm: #E06712;     /* orange (logo) */

  /* Actions (used in signage upload cards) */
  --action: #002a4f;
  --action-hover: #001f3a;

  /* Status */
  --success: #16a34a;
  --warn:    #b45309;
  --danger:  #c43131;

  /* Component sizing */
  --icon-col: 44px;
  --gap: 10px;
  --btn-h: 34px;
}


/* ===== Reset / base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
:focus{outline:none}
:focus-visible{
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  border-radius:var(--radius-sm);
}

/* ===== Utilities ===== */
.hr{height:1px;background:var(--border);border:0;margin:.75rem 0}
.muted{color:var(--text-muted)}

/* ======================================================================
   Components (shared)
   ====================================================================== */

/* Card */
.card{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}
.card-body{padding:12px}
.card-header{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  font-weight:700;
  color:var(--text);
}

/* Buttons (GLOBAL, single source of truth) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:var(--btn-h);
  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
  transition:transform .08s ease, filter .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--accent);
  color:#fff;
}
.btn-primary:hover{filter:brightness(1.2)}
.btn-secondary{
  background:color-mix(in srgb, var(--accent) 10%, var(--bg-elev));
  color:var(--text);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
}
.btn-secondary:hover{background:color-mix(in srgb, var(--accent) 14%, var(--bg-elev))}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}
.btn-ghost:hover{background:color-mix(in srgb, var(--bg-muted) 70%, transparent)}
.btn-danger{
  background:color-mix(in srgb, var(--danger) 16%, var(--bg-elev));
  border-color:color-mix(in srgb, var(--danger) 45%, var(--border));
  color:var(--danger);
}
.btn-danger:hover{background:color-mix(in srgb, var(--danger) 22%, var(--bg-elev))}

/* Forms (GLOBAL defaults) */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea{
  width:100%;
  padding:.55rem .7rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-elev);
  color:var(--text);
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
textarea{min-height:84px; resize:vertical}
input::placeholder, textarea::placeholder{color:color-mix(in srgb, var(--text-muted) 65%, transparent)}
input:focus, select:focus, textarea:focus{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-elev);
}
.table thead th{
  background:color-mix(in srgb, var(--bg-muted) 75%, var(--bg-elev));
  font-weight:700;
  color:var(--text);
}
.table th,.table td{
  padding:10px 12px;
  font-size:.92rem;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.table tbody tr:hover{background:color-mix(in srgb, var(--bg-muted) 55%, var(--bg-elev))}

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:0 6px; height:18px;
  border:1px solid var(--border);
  border-radius:2px;
  font-size:11px;
  color:var(--text-muted);
  background:var(--bg-muted);
}
.badge.success{
  color:var(--success);
  border-color:color-mix(in srgb,var(--success) 40%, transparent);
  background:color-mix(in srgb,var(--success) 12%, transparent);
}
.badge.warn{
  color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 40%, transparent);
  background:color-mix(in srgb,var(--warn) 12%, transparent);
}
.badge.danger{
  color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 40%, transparent);
  background:color-mix(in srgb,var(--danger) 12%, transparent);
}
.badge.info{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 40%, transparent);
  background:color-mix(in srgb,var(--accent) 12%, transparent);
}

/* ======================================================================
   Layout - Sidebar / Content / Icon toolbar
   ====================================================================== */

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:220px;
  background:var(--bg-elev);
  color:var(--text);
  padding:.75rem;
  border-right:1px solid var(--border);
  z-index:1000;
}

.sidebar .logo{
  margin-bottom:1rem;
  font-size:1rem;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:.02em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:6px;
}

.sidebar .logo img{
  max-width:100%;
  height:auto;
  display:block;
}

.sidebar ul{ list-style:none; padding:0; margin:0; }
.sidebar li{ margin-bottom:.5rem; }

.sidebar a{
  color:var(--text);
  text-decoration:none;
  display:block;
  padding:.35rem .5rem;
  border-radius:var(--radius-sm);
  font-size:.9rem;
  transition:background .12s ease, border-color .12s ease;
}
.sidebar a:hover{ background:var(--bg-muted); }
.sidebar a.active{
  background:color-mix(in srgb,var(--accent) 12%, var(--bg-elev));
  border:1px solid color-mix(in srgb,var(--accent) 40%, var(--border));
}

.sidebar .sb-link{
  display:flex;
  align-items:center;
  justify-content:left;   /* horizontal zentriert */
  gap:8px;                  /* Abstand Icon / Text */
  text-align:center;
}

.sidebar .sb-link img{
  width:16px;
  height:16px;
  display:block;
}


.content{
  margin-left:220px;
  padding:1rem;
  min-height:100vh;
  background:var(--bg);
}
.content header{margin-bottom:1rem; border-bottom:1px solid var(--border)}
.content h1{font-size:1.25rem; font-weight:700; color:var(--text)}
.content p{color:var(--text-muted)}
section{margin-top:1rem}

.icon-nav{
  background:var(--bg-elev);
  padding:.75rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-1);
}
.icon-nav ul{list-style:none; display:flex; gap:1rem; align-items:center}
.icon-nav li{display:inline-block}
.icon-nav img{width:28px;height:28px;display:block;opacity:.9}
.icon-nav a{display:inline-block; transition:transform .1s ease, filter .1s ease}
.icon-nav a:hover{transform:translateY(-1px); filter:brightness(1.02)}

@media (max-width:960px){
  .sidebar{position:sticky; top:0; height:auto; width:100%; border-right:0; border-bottom:1px solid var(--border)}
  .content{margin-left:0}
}

/* Mobile: nur Navigation ausblenden, Logos bleiben */
@media (max-width: 900px){
  .sidebar{
    width:100%;
    left:0;
    right:0;
    padding:.75rem 1rem;
    display:flex;
    justify-content:center;
  }
  .sidebar nav{ display:none; }
  .sidebar .logo{
    margin:0;
    justify-content:center;
    width:100%;
  }
  .sidebar .logo img{ max-width:120px; }
  .content{ margin-left:0 !important; }
}


/* ======================================================================
   Sidebar Mobile Header (Logo links, User+Logout rechts)
   ====================================================================== */

.sb-mobilebar{
  display:none; /* default: aus */
}

@media (max-width: 768px){
  /* Sidebar wird im Mobile typischerweise oben "Header-artig" */
  .sb-mobilebar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:.6rem .7rem;
    border-bottom:1px solid var(--border);
    background:var(--bg-elev);
  }

  .sb-mobile-logo{
    width:140px;
    height:70px;
    display:block;
    object-fit:contain;
  }

  .sb-mobile-user{
    display:flex;
    align-items:center;
    gap:10px;
  }

  /* Meta etwas kompakter */
  .sb-mobilebar .sb-user-meta{
    display:flex;
    flex-direction:column;
    line-height:1.1;
    text-align:right;
  }
  .sb-mobilebar .sb-user-label{
    font-size:.72rem;
    color:var(--text-muted);
    font-weight:700;
  }
  .sb-mobilebar .sb-user-name{
    font-size:.9rem;
    font-weight:800;
    max-width:160px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Logout Button bleibt wie gehabt, nur sicher sauber aligned */
  .sb-mobilebar .sb-logout{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .sb-mobilebar .sb-logout img{
    width:26px;
    height:26px;
    display:block;
  }

  /* Desktop-Teile im Mobile ausblenden */
  .sidebar .logo{ display:none; }       /* grosses Logo */
  .sidebar .sb-footer{ display:none; }  /* User + powered by unten */
}

@media (max-width: 768px){
  .sb-mobilebar{
    border-bottom:none !important;
  }
}

/* ======================================================================
   Sub Navigation - compact icon buttons
   ====================================================================== */

.subbar-buttons{
  margin-top:.25rem;
  display:flex;
  gap:.25rem;
  flex-wrap:wrap;
}
.subbar-buttons a{
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-elev);
  box-shadow:var(--shadow-1);
  transition:transform .12s ease, filter .12s ease, background .12s ease;
}
.subbar-buttons a:hover{
  background:color-mix(in srgb, var(--bg-muted) 55%, var(--bg-elev));
  transform:translateY(-1px);
  filter:brightness(1.05);
}
.subbar-buttons img{
  width:20px;
  height:20px;
  display:block;
  opacity:.9;
}


/* ======================================================================
   Mobile Move-Up Button
   ====================================================================== */

.move-up-btn{
  position:fixed;
  right:14px;
  bottom:14px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--bg-elev);
  border:1px solid var(--border);
  box-shadow:var(--shadow-2);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:999;
}

.move-up-btn img{
  width:36px;
  height:36px;
}

/* sichtbar */
.move-up-btn.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.move-up-btn{
  transform:translateY(6px);
}
.move-up-btn.is-visible{
  transform:translateY(0);
}

/* nur Mobile */
@media (min-width: 769px){
  .move-up-btn{ display:none; }
}




/* ======================================================================
   Dashboard - Quicklinks & Panels
   ====================================================================== */

.dashboard .quicklinks{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-start;
  align-items:flex-start;
  margin:1rem 0;
}


/* Standard Quicklink (150x150) */
.quicklink{
  width:150px;
  height:150px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-1);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--text);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.quicklink:hover{
  transform:translateY(-2px);
  background:var(--bg-muted);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
}
.quicklink img{width:48px;height:48px;margin-bottom:6px;opacity:.9}
.quicklink span{
  font-size:.8rem;
  font-weight:600;
  color:var(--text);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Group-Wrapper aus dem PHP: <div class="quicklinkgroup"> */
/* Group-Wrapper: optisch wie normale 150x150 Kachel,
   darf aber nach rechts wachsen (ohne Panel-Look) */
.quicklinkgroup{
  flex:0 0 auto;
  width:max-content;
  height:150px;

  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;

  display:flex;
  align-items:center;
}


/* Mini-Quicklinks Block bekommt die Kachel-Optik */
.miniquicklinks{
  display:grid;

  grid-template-rows:repeat(2, 70px);
  grid-auto-flow:column;
  grid-auto-columns:70px;

  gap:12px;

  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;

  width:max-content;
  height:auto;
}


/* Mini-Quicklinks: 2 Zeilen, Spalten wachsen nach rechts
   Reihenfolge: 1 links oben, 2 links unten, 3 rechts oben, 4 rechts unten, 5 naechste Spalte rechts oben ...
*/

/* Mini-Cards */
.miniquicklink{
  width:70px;
  height:70px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow-1);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--text);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.miniquicklink:hover{
  transform:translateY(-2px);
  background:var(--bg-muted);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
}
.miniquicklink img{
  width:26px;
  height:26px;
  margin-bottom:4px;
  opacity:.9;
}
.miniquicklink span{
  font-size:.65rem;
  font-weight:600;
  max-width:62px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width: 768px){

  /* Dashboard: statt Flex -> Grid, damit alles sauber nach unten "stoesst" */
  .dashboard .quicklinks{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
    justify-content:stretch;
  }

  /* grosse Kacheln sollen im Grid die volle Spaltenbreite nutzen */
  .quicklink{
    width:100%;
  }

  /* Deklarationen / Preislisten (die grossen) wirken besser, wenn sie 2 Spalten einnehmen */
  .quicklink[href*="signage_declaration.php"],
  .quicklink[href*="signage_pricing.php"]{
    grid-column: 1 / -1;  /* volle Breite */
  }

  /* Gruppe: nicht mehr max-content, sondern normal ins Grid einpassen */
  .quicklinkgroup{
    width:100%;
    height:auto;
    justify-content:stretch;
  }

  /* Mini-Cards: auf Mobile als Grid in 3 Spalten, bricht sauber nach unten */
  .miniquicklinks{
    width:100%;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow:row;
    grid-auto-columns:auto;
    gap:10px;
  }

  /* Mini-Cards fuellen die Spaltenbreite */
  .miniquicklink{
    width:100%;
  }
}


/* Panels */
.panel{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-1);
}
.panel-header{padding:.6rem .8rem; border-bottom:1px solid var(--border); font-weight:600}
.panel-body{padding:.6rem .8rem}
.panel-footer{padding:.5rem .8rem; border-top:1px solid var(--border)}

.quicklink .ql-img{
  width:48px;
  height:48px;
  display:block;
  margin:0 auto 6px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

@media (max-width: 768px){
  .dashboard .quicklinks{
    justify-content:center;
  }
}


/* ======================================================================
   Digital Signage - Upload cards + toast
   ====================================================================== */

.upload-section{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:12px;
  padding:12px;
}

.week-title{
  grid-column:1/-1;
  font:700 .95rem/1.2 var(--font-sans);
  color:#334155;
  margin:.2rem 0;
}
.week-separator{
  grid-column:1/-1;
  height:0;
  border-top:2px dashed #e2e8f0;
  margin:.2rem 0 .5rem;
}

.upload-box{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:10px;

  display:grid;
  grid-template-columns:var(--icon-col) 1fr;
  grid-template-rows:auto auto auto;
  column-gap:var(--gap);
  row-gap:var(--gap);
  align-items:start;

  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh);
  color:var(--text);
}

.upload-box.today{
  border:2px solid color-mix(in srgb, var(--success) 60%, var(--border));
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--success) 6%, transparent),
      color-mix(in srgb, var(--success) 6%, transparent)
    ) var(--bg-elev);
}
.upload-box.past{
  background:color-mix(in srgb, var(--bg-muted) 55%, var(--bg));
  border-color:color-mix(in srgb, var(--border) 85%, #fff);
}

/* Icon links */
.xls-icon{
  grid-column:1;
  grid-row:1 / span 3;
  width:32px;
  height:32px;
  margin:0 auto;
  display:block;
  opacity:.95;
}
.no-file{opacity:.35; cursor:default}

.upload-box h3{
  grid-column:2;
  grid-row:1;
  margin:0;
  font-weight:700;
  font-size:.98rem;
  color:var(--text);
}
.date-label{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  align-self:center;
  margin-left:8px;
  font-weight:600;
  font-size:.85rem;
  color:var(--text-muted);
}

.status-icon{position:absolute; top:8px; right:8px; width:13px; height:13px}

/* File input */
.file-input{display:none}
.file-label{
  grid-column:2;
  grid-row:2;
  width:100%;
  height:var(--btn-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--action);
  color:#fff;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .16s ease, transform .06s ease;
}
.file-label:hover{background:var(--action-hover)}
.file-label:active{transform:translateY(1px)}
.file-input:valid + .file-label{background:color-mix(in srgb, var(--accent-warm) 92%, black)}
.file-input:valid + .file-label:hover{background:color-mix(in srgb, var(--accent-warm) 80%, black)}

/* Controls row */
.controls{
  grid-column:2;
  grid-row:3;
  display:grid;
  gap:var(--gap);
  width:100%;
  grid-template-columns:1fr;
}
.controls:has(.delete-btn){grid-template-columns:1fr var(--btn-h)}
.controls .control-form{display:contents}

.upload-btn,.delete-btn{
  height:var(--btn-h);
  border:0;
  border-radius:var(--radius);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--action);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease, transform .06s ease;
}
.upload-btn{width:100%}
.controls:not(:has(.delete-btn)) .upload-btn{grid-column:1 / -1}
.upload-btn:hover,.delete-btn:hover{background:var(--action-hover)}
.upload-btn:active,.delete-btn:active{transform:translateY(1px)}

.delete-btn{width:var(--btn-h)}
.delete-btn img{width:18px;height:18px;filter:brightness(0) invert(1);pointer-events:none}

/* Past disables actions */
.upload-box.past .file-label,
.upload-box.past .upload-btn,
.upload-box.past .delete-btn{
  background:#9aa5ad;
  color:#f7fafc;
  cursor:not-allowed;
  filter:none;
  transform:none;
}

/* Toast */
.toast{
  position:fixed;
  inset:auto auto 16px 50%;
  transform:translateX(-50%) scale(.98);
  z-index:9999;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  color:#fff;
  font-size:.95rem;
  line-height:1.3;
  font-weight:600;
  pointer-events:none;
  opacity:0;
  animation:toast-life 3s ease-in-out forwards;
}
.toast img{width:26px;height:26px;filter:brightness(0) invert(1)}
.toast--success{background:var(--success)}
.toast--delete{background:var(--accent-warm)}
@keyframes toast-life{
  0%{opacity:0; transform:translateX(-50%) scale(.94)}
  15%{opacity:1; transform:translateX(-50%) scale(1)}
  85%{opacity:1}
  100%{opacity:0; transform:translateX(-50%) scale(.98)}
}

@media (max-width:420px){
  .upload-section{grid-template-columns:1fr}
  :root{ --btn-h:30px; --icon-col:40px; --gap:8px }
}

/* Loader / progress (no global .btn override!) */
.loader{margin:1rem 0; display:flex; align-items:center; gap:.75rem}
.loader-text{font-size:.95rem; color:var(--text-muted)}

.progress{
  position:relative;
  width:260px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(180deg,#f2f4f7,#e9edf3);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.progress .bar{
  position:absolute;
  left:-40%;
  top:0;
  height:100%;
  width:40%;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 15%, transparent),
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 15%, transparent)
  );
  animation:indeterminate 1.2s infinite ease-in-out;
}
@keyframes indeterminate{
  0%{left:-40%; width:40%}
  50%{left:20%; width:60%}
  100%{left:100%; width:40%}
}

.result{
  display:none;
  margin-top:1rem;
  padding:1rem;
  background:#0f172a;
  color:#e2e8f0;
  border-radius:.75rem;
  font-family:ui-monospace, Menlo, Consolas, monospace;
  white-space:pre-wrap;
  word-break:break-word;
  box-shadow:0 6px 18px rgba(2,6,23,.25);
}

/* ======================================================================
   Login
   ====================================================================== */

.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  padding:1rem;
}
.login-box{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  padding:2rem;
  width:100%;
  max-width:420px;
}
.login-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
}
.login-header img{height:80px;width:auto}

.login-box h1{
  margin:.5rem 0;
  font-size:1.5rem;
  text-align:center;
}
.subtitle{
  text-align:center;
  color:var(--text-muted);
  margin-bottom:1.5rem;
}
.error-box{
  background:#ffe5e5;
  color:#b30000;
  border:1px solid #ffb3b3;
  border-radius:var(--radius-sm);
  padding:.75rem;
  margin-bottom:1rem;
  font-size:.9rem;
}
.login-form{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.login-form label{font-size:.9rem; color:var(--text)}
.login-form input{
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:1rem;
}
.form-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.85rem;
  margin-top:.5rem;
}
.form-options a{
  text-decoration:none;
  color:var(--accent);
}
.form-options a:hover{text-decoration:underline}

.btn-login{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  padding:.75rem;
  font-size:1rem;
  cursor:pointer;
  margin-top:1rem;
  transition:background .2s ease;
}
.btn-login:hover{
  background:color-mix(in srgb, var(--accent) 80%, black);
}

/* ======================================================================
   Breadcrumb
   ====================================================================== */

.bc{ margin: 6px 0 10px 0; }
.bc__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.bc__item{ display:flex; align-items:center; gap:8px; min-width:0; }
.bc__link{
  text-decoration:none;
  font-weight:800;
  opacity:.7;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  border-radius:10px;
  padding:6px 8px;
}
.bc__link:hover{ opacity:1; text-decoration:underline; }
.bc__sep{ opacity:.45; font-weight:900; user-select:none; }
.bc__current{
  font-weight:900;
  opacity:.95;
  white-space:nowrap;
  border-radius:10px;
  padding:6px 8px;
  background: rgba(0,0,0,.04);
}
@media (max-width: 520px){
  .bc__link, .bc__current{ padding:5px 7px; font-size:.95em; }
}

/* ======================================================================
   Benutzerverwaltung / Admin Tools (system_users.php etc.)
   ====================================================================== */

.usr-wrap{ display: grid; gap: 18px; }
.usr-card{ margin: 0; }

/* Flash */
.usr-flash{
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-weight: 800;
}
.usr-ok   { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25); }
.usr-err  { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); }
.usr-info { background: rgba(79,70,229,.06); border-color: rgba(79,70,229,.28); }
.usr-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* Master note */
.usr-note{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(148,163,184,.08);
}
.usr-note-title{ font-weight: 900; margin-bottom: 4px; }
.usr-note-text{ opacity: .8; font-weight: 700; font-size: 12px; }

/* Create form grid */
.usr-grid{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}
.usr-field{ grid-column: span 4; min-width: 0; }
.usr-field-sm{ grid-column: span 2; }
.usr-actions{
  grid-column: span 12;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.usr-label{
  display: block;
  font-weight: 900;
  opacity: .78;
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: .2px;
}
.usr-hint{
  opacity: .65;
  font-size: 12px;
  font-weight: 700;
}

/* Table */
.usr-tablewrap{ overflow: auto; }
.usr-row-inactive{ opacity: .55; }

.usr-email{ width: 100%; min-width: 220px; }
.usr-role, .usr-active{ width: auto; min-width: 120px; }
.usr-th-actions{ width: 360px; }

.usr-btnrow{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.usr-inline{ margin: 0; display: inline-flex; }

/* Permissions Accordion */
.usr-details{ display:block; }
.usr-summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.usr-summary::-webkit-details-marker{ display:none; }
.usr-summary-spacer{ flex: 1 1 auto; }
.usr-summary-hint{
  opacity: .65;
  font-weight: 800;
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* Panel */
.usr-perm-panel{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(148,163,184,.06);
}
.usr-perm-empty{ font-weight: 800; opacity: .75; }
.usr-perm-form{ margin: 0; }

/* Kategorie */
.usr-perm-cat{ margin-top: 12px; }
.usr-perm-cat:first-child{ margin-top: 0; }

.usr-perm-cat-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.usr-perm-cat-title{
  font-weight: 950;
  font-size: 12px;
  opacity: .75;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  background: rgba(255,255,255,.03);
}

.usr-perm-cat-actions{ display: flex; gap: 6px; }

/* Mini Buttons */
.usr-mini-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
  opacity: .85;
  cursor: pointer;
}
.usr-mini-btn:hover{ opacity: 1; }

/* Liste */
.usr-perm-list{ display: grid; gap: 6px; }

.usr-perm-row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}
.usr-perm-check{ margin-top: 2px; }
.usr-perm-rowtext{ display: grid; gap: 1px; line-height: 1.15; }
.usr-perm-rowtitle{ font-weight: 900; font-size: 13px; }
.usr-perm-rowsub{ opacity: .65; font-weight: 700; font-size: 12px; }

/* Actions */
.usr-perm-actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1100px){
  .usr-field{ grid-column: span 6; }
  .usr-field-sm{ grid-column: span 3; }
}
@media (max-width: 700px){
  .usr-grid{ grid-template-columns: 1fr; }
  .usr-field, .usr-field-sm, .usr-actions{ grid-column: auto; }
  .usr-th-actions{ width: auto; }
  .usr-role, .usr-active{ min-width: 100px; }
}

/* Admin Tools Inputs (scoped, overrides GLOBAL inputs only inside .usr-form) */
.usr-form input[type="text"],
.usr-form input[type="email"],
.usr-form input[type="password"],
.usr-form input[type="number"],
.usr-form select,
.usr-form textarea{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: inherit;
  font-weight: 700;
  outline: none;
  box-sizing: border-box;
}
.usr-form input::placeholder,
.usr-form textarea::placeholder{
  opacity: .55;
  font-weight: 700;
}
.usr-form input:focus,
.usr-form select:focus,
.usr-form textarea:focus{
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}
.usr-form select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(148,163,184,.9) 50%),
    linear-gradient(135deg, rgba(148,163,184,.9) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 12px) 19px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.usr-table .usr-email{
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
}
.usr-table .usr-name{ width: 100%; min-width: 220px; }
/* Admin Tools Inputs: auch ohne type */
.usr-form input,
.usr-form select,
.usr-form textarea{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: inherit;
  font-weight: 700;
  outline: none;
  box-sizing: border-box;
}
.sidebar .sb-sep{
  height:1px;
  background:var(--border);
  margin:.6rem 0;
  border-radius:999px;
}

/* Sidebar: footer user + logout bottom */
.sidebar{
  display:flex;
  flex-direction:column;
}

.sidebar .sb-nav{
  flex:1 1 auto;
}

.sidebar .sb-footer{
  margin-top:auto;
  padding-top:.75rem;
}

.sidebar .sb-user{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
}

.sidebar .sb-user-label{
  font-size:11px;
  font-weight:800;
  opacity:.7;
  letter-spacing:.2px;
}

.sidebar .sb-user-name{
  font-size:13px;
  font-weight:900;
  line-height:1.1;
}

.sidebar .sb-logout{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: rgba(255,255,255,.03);
  transition:transform .12s ease, filter .12s ease, background .12s ease;
}
.sidebar .sb-logout:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  background: rgba(255,255,255,.06);
}
.sidebar .sb-logout img{
  width:18px;
  height:18px;
  display:block;
  opacity:.9;
}
/* Mini Branding unter Logout */
.sb-brand--mini{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:12px;
  font-size:.68rem;
  font-weight:600;
  opacity:.55;
}

.sb-brand--mini img{
  width:16px;
  height:16px;
  object-fit:contain;
}





/* ========== System Settings ========== */

.set-wrap{
  display:grid;
  gap:14px;
}

.set-card .card-body{
  display:grid;
  gap:12px;
}

.set-sub{
  opacity:.75;
  line-height:1.35;
}

.set-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.set-tile{
  display:block;
  text-decoration:none;
  color:var(--text);
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 12px;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.set-tile:hover{
  background:var(--bg-muted);
  border-color:rgba(255,255,255,.14);
  transform: translateY(-1px);
}

.set-tile-title{
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:4px;
}

.set-tile-desc{
  opacity:.78;
  line-height:1.35;
  margin-bottom:8px;
}

.set-tile-meta{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.85rem;
  opacity:.65;
}

.set-hint{
  opacity:.7;
  font-size:.92rem;
}

.set-flash{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color: rgba(22,101,52,.95); /* dunkles Gruen, sehr gut lesbar */
  font-weight:700;
}

.set-err{
  border:1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: rgba(127,29,29,.95); /* dunkles Rot, gut lesbar */
  font-weight:700;
}



/* ========== Site Security Inline Edit ========== */
.ss-select,
.ss-input{
  width:100%;
  min-height:32px;
  padding:.28rem .45rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-size:.92rem;
}

.ss-input{ max-width:520px; }

.ss-select:focus,
.ss-input:focus{
  outline:none;
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}

/* kleine, neutrale Checkbox (ohne fettes Styling) */
.ss-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
}
.ss-check input{
  width:18px;
  height:18px;
}

/* optional, falls du es noch nicht hast */
.usr-td-center{ text-align:center; }
.usr-th-center{ text-align:center; }

/* ========== JSON Verwaltung (PHP Generatoren) ========== */
.json-wrap{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:12px;
  align-items:start;
}

.json-list{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow:hidden;
}

.json-item{
  display:block;
  padding:.5rem .6rem;
  text-decoration:none;
  color: var(--text);
  border-bottom:1px solid var(--border);
  font-size:.92rem;
}
.json-item:last-child{ border-bottom:none; }
.json-item:hover{ background: var(--bg-muted); }

.json-item.is-active{
  background: rgba(59,130,246,.12);
  border-bottom-color: rgba(59,130,246,.20);
}

.json-file{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.json-view{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow:hidden;
}

.json-empty{
  padding:12px;
  opacity:.75;
}

.json-error{
  padding:12px;
  border-radius:12px;
  background: rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.25);
  font-weight:700;
  margin:12px;
}

.json-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}

.json-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.json-code{
  margin:0;
  padding:12px;
  max-height: 62vh;
  overflow:auto;
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.9rem;
  line-height:1.35;
}

.json-copyhint{
  margin:10px 12px 12px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(34,197,94,.25);
  background: rgba(34,197,94,.10);
  font-weight:700;
  width:fit-content;
}

@media (max-width: 900px){
  .json-wrap{ grid-template-columns: 1fr; }
  .json-code{ max-height: 52vh; }
}
.json-debug{
  margin:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(245,158,11,.25);
  background: rgba(245,158,11,.08);
}
.json-debug pre{ margin:8px 0 0; max-height:220px; overflow:auto; }
.json-debug code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.88rem;
  line-height:1.35;
}




@media (max-width: 768px){
  body::after{
    content:"";
    display:block;
    height: calc(90px + env(safe-area-inset-bottom));
  }
}


/* ======================================================================
   CoreORDER – Bread (coreorder_bread.php) – CLEAN compact list
   ====================================================================== */

.co-wrap{ display:grid; gap:14px; }

/* 2 Spalten */
.co-grid{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) minmax(520px, 2fr);
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .co-grid{ grid-template-columns: 1fr; }
}

/* Header in Cards */
.co-cardhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.co-h2{ font-weight:950; }
.co-meta{ opacity:.7; font-weight:800; }

/* Messages */
.co-msg{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
  font-weight:800;
  margin-bottom:12px;
}
.co-msg--ok{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25); }
.co-msg--err{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); }
.co-msg--warn{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); }

/* Form */
.co-form{ display:grid; gap:10px; }
.co-col{ display:grid; gap:6px; }
.co-label{
  font-size:12px;
  font-weight:900;
  opacity:.80;
  letter-spacing:.02em;
  text-transform: uppercase;
}
.co-input{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--bg-elev);
  font-weight:700;
  outline:none;
}
.co-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:2px;
}
.co-hint{ opacity:.65; font-weight:800; font-size:12px; }

/* ======================================================================
   LIST – compact grid (60/60/60 + flex + actions)
   ====================================================================== */

.co-table{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-elev);
  overflow:hidden; /* nur fuer Radius, kein clipping mehr weil grid passt */
}

.co-row{
  padding:10px 14px;
  background:transparent;
}
.co-row + .co-row{ border-top:1px solid rgba(0,0,0,.06); }

.co-row--head{
  background: rgba(0,0,0,.02);
  padding-top:12px;
  padding-bottom:8px;
}

/* Grid: 60 | 60 | desc-flex | 60 | actions */
.co-gridrow{
  display:grid;
  grid-template-columns: 60px 60px minmax(180px, 1fr) 60px minmax(220px, 320px);
  gap:10px;
  align-items:center;
}

/* Head cells */
.co-headcell{
  font-weight:900;
  opacity:.7;
  font-size:12px;
  letter-spacing:.02em;
  text-transform: uppercase;
}
.co-headcell--right{ text-align:right; }

/* Zellen */
.co-cell--status,
.co-cell--article,
.co-cell--sort{
  font-weight:800;
  white-space:nowrap;
}
.co-cell--desc{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.co-cell--actions{ justify-self:end; }

/* Actions: nie abgeschnitten, duerfen umbrechen */
.co-action{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  white-space:normal;
}
.co-action .btn,
.co-action a.btn,
.co-action button.btn{
  display:inline-flex;
  width:auto !important; /* gegen globale width:100% */
  white-space:nowrap;
}

/* Inline form */
.co-inline{ margin:0; display:inline-flex; }

/* Mobile: Rows werden untereinander, Labels sichtbar */
.co-label2{
  display:none;
  font-size:12px;
  font-weight:900;
  opacity:.70;
  letter-spacing:.02em;
  text-transform: uppercase;
  margin-bottom:6px;
}

@media (max-width: 900px){
  .co-row--head{ display:none; }

  .co-gridrow{
    grid-template-columns: 1fr;
    gap:12px;
    align-items:stretch;
  }

  .co-label2{ display:block; }

  .co-cell--desc{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  .co-cell--actions{ justify-self:start; }
  .co-action{ justify-content:flex-start; }
}



/* ======================================================================
   USERS (system_users.php) – FINAL CSS Block (clean, no duplicates)
   - Module row + tools header (1 line)
   - User list selected state (badges calm)
   - Modal (pages + create user + profile + password)
   - Profile modal layout + action bars
   ====================================================================== */

/* -----------------------------
   Module list row
------------------------------ */
.usr-modrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.usr-modrow:last-child{ border-bottom:0; }

.usr-modrow-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* -----------------------------
   Module header tools (one line)
------------------------------ */
.usr-modtools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  min-width:0;
}

.usr-modtools #modSearch{
  width:260px;
  min-width:160px;
  flex: 1 1 220px;
}

.usr-modtools .btn{
  flex:0 0 auto;
  white-space:nowrap;
}

@media (max-width: 900px){
  .usr-modtools{ flex-wrap:wrap; }
  .usr-modtools #modSearch{
    flex:1 1 100%;
    width:100%;
    min-width:0;
  }
}

/* -----------------------------
   User list selected styling
------------------------------ */
.usr-useritem.is-selected{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev)) !important;
}

.usr-useritem.is-selected .badge.success,
.usr-useritem.is-selected .badge.danger,
.usr-useritem.is-selected .badge.info,
.usr-useritem.is-selected .badge{
  background: color-mix(in srgb, var(--bg) 70%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
  color: var(--text);
  opacity: .92;
}

.usr-useritem:hover{
  background: color-mix(in srgb, var(--bg-elev) 92%, var(--accent) 4%);
}

/* -----------------------------
   Modal (shared)
------------------------------ */
.usr-modal-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.45);
  z-index: 9999;
}
.usr-modal-backdrop.open{ display:flex; }

.usr-modal{
  width:min(980px, 100%);
  max-height: calc(100vh - 36px);
  overflow:auto;
  border:1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.usr-modal-header{
  position:sticky;
  top:0;
  z-index:1;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(10px);
}

.usr-modal-body{ padding:14px; }

.usr-modal-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.usr-modal-search{ width:min(420px, 100%); }

.usr-modal-footer{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* -----------------------------
   Profile modal layout helpers
------------------------------ */
.usr-prof-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.usr-prof-actions-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}

.usr-prof-actions-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.usr-prof-actions-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.usr-prof-subnote{
  margin-top:10px;
  padding:10px 12px;
  border:1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  border-radius:12px;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
}

.usr-pass-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.usr-pass-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.usr-pass-row .usr-pass-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.usr-pass-row .usr-pass-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Responsive */
@media (min-width: 900px){
  .usr-prof-grid{
    grid-template-columns: 1fr 1fr;
    gap:14px;
  }
  .usr-prof-grid .usr-field[data-span="2"]{ grid-column: span 2; }
}

@media (max-width: 520px){
  .usr-prof-actions-bar{
    align-items:stretch;
  }
  .usr-prof-actions-right{
    width:100%;
    justify-content:flex-end;
  }
}
/* --- Passwort Modal Layout (clean) --- */
.usr-pass-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

/* Note: immer volle Breite, oberhalb der Actionbar */
.usr-pass-note{
  padding:10px 12px;
  border:1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  border-radius:12px;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  line-height:1.35;
}

/* Actionbar: alles auf einer Linie */
.usr-pass-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.usr-pass-actions-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.usr-pass-actions-left .usr-inline{
  margin:0;
}

/* Checkbox Label optisch sauber */
.usr-pass-actions-left label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

/* Button rechts */
.usr-pass-actions-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Mobile: Button unterhalb wenn zu eng */
@media (max-width: 520px){
  .usr-pass-actions{
    align-items:stretch;
  }
  .usr-pass-actions-right{
    width:100%;
    justify-content:flex-end;
  }
}






/* ======================================================================
   CoreMEAT - Stats (meat_stats.php)
   ====================================================================== */

.meatdash-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.meatdash-title{
  font-weight:950;
  font-size:1.05rem;
  letter-spacing:.01em;
}
.meatdash-sub{
  margin-top:4px;
  opacity:.75;
  font-weight:750;
  line-height:1.3;
}
.meatdash-actions{ display:flex; gap:10px; align-items:center; }

/* Filter row */
.meatstats-filters{
  display:grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap:10px;
  align-items:end;
}
.meatstats-fcol{ display:grid; gap:6px; }
.meatstats-label{
  font-size:12px;
  font-weight:900;
  opacity:.75;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.meatstats-factions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}
@media (max-width: 980px){
  .meatstats-filters{ grid-template-columns: 1fr 1fr; }
  .meatstats-factions{ justify-content:flex-start; }
}
@media (max-width: 520px){
  .meatstats-filters{ grid-template-columns: 1fr; }
}

/* KPI grid */
.meatstats-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){
  .meatstats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .meatstats-grid{ grid-template-columns: 1fr; }
}

.meatkpi{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-1);
  padding:12px;
}
.meatkpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.meatkpi-label{
  font-weight:900;
  opacity:.72;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:12px;
}
.meatkpi-value{
  font-weight:950;
  font-size:1.25rem;
  font-variant-numeric: tabular-nums;
}
.meatkpi-sub{
  margin-top:6px;
  opacity:.72;
  font-weight:750;
  line-height:1.25;
  font-size:.92rem;
}

/* Section headers inside cards */
.meatstats-headrow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.meatstats-h2{ font-weight:950; font-size:1rem; }
.meatstats-hsub{ margin-top:3px; opacity:.7; font-weight:750; }
.meatstats-actions{ display:flex; gap:8px; align-items:center; }

/* Supplier bars */
.meatbars{ display:grid; gap:10px; }
.meatbar{
  display:grid;
  grid-template-columns: minmax(240px, 1fr) minmax(200px, 1fr);
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: color-mix(in srgb, var(--bg-muted) 35%, var(--bg-elev));
}
@media (max-width: 700px){
  .meatbar{ grid-template-columns: 1fr; }
}
.meatbar-name{ font-weight:950; }
.meatbar-meta{ margin-top:2px; opacity:.72; font-weight:750; font-variant-numeric: tabular-nums; }

.meatbar-track{
  width:100%;
  height:10px;
  border-radius:999px;
  background: color-mix(in srgb, var(--border) 40%, transparent);
  overflow:hidden;
}
.meatbar-fill{
  height:100%;
  border-radius:999px;
  background: color-mix(in srgb, var(--accent) 85%, black);
}

/* Pills + badges */
.meatpill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,03);
  font-weight:850;
  font-size:12px;
  margin-left:6px;
  opacity:.92;
}

.meatbadge{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,03);
  font-weight:900;
  font-size:12px;
  opacity:.9;
}
.meatbadge-ok{
  border-color: rgba(34,197,94,35);
  background: rgba(34,197,94,12);
}
.meatbadge-warn{
  border-color: rgba(245,158,11,35);
  background: rgba(245,158,11,12);
}

/* ======================================================================
   CoreMEAT - Dashboard Charts (SVG, no JS)
   ====================================================================== */

.meatdash-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){
  .meatdash-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .meatdash-grid{ grid-template-columns: 1fr; }
}

.meatdash-card .card-body{ padding:12px; }

.meatdash-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.meatdash-title{
  font-weight:700;
  letter-spacing:.01em;
  font-size:0.7rem;
}
.meatdash-kpi{
  margin-top:3px;
  font-weight:700;
  font-size:0.7rem;
  font-variant-numeric: tabular-nums;
}
.meatdash-actions{ display:flex; gap:8px; align-items:center; }
.meatdash-sub{
  margin-top:6px;
  opacity:.72;
  font-weight:650;
  line-height:1.25;
  font-size:0.7rem;
}

/* SVG chart styling */
.meatdash-chart{
  width:100%;
  height:180px;
  display:block;
}
.meatdash-svg-bg{
  fill: color-mix(in srgb, var(--bg-muted) 60%, var(--bg-elev));
  stroke: var(--border);
  stroke-width: 1;
}
.meatdash-svg-grid{
  stroke: color-mix(in srgb, var(--border) 70%, transparent);
  stroke-width: 1;
  opacity:.8;
}
.meatdash-svg-axis{
  fill: color-mix(in srgb, var(--text) 65%, transparent);
  font-size:11px;
  font-weight:800;
}
.meatdash-svg-empty{
  fill: color-mix(in srgb, var(--text) 60%, transparent);
  font-size:12px;
  font-weight:900;
}

/* Line + area */
.meatdash-svg-area{
  fill: color-mix(in srgb, var(--accent) 18%, transparent);
}
.meatdash-svg-line{
  fill:none;
  stroke: color-mix(in srgb, var(--accent) 85%, black);
  stroke-width: 2.5;
}
.meatdash-svg-dot{
  fill: color-mix(in srgb, var(--accent) 85%, black);
  opacity:.95;
}

/* Bars */
.meatdash-svg-bar{
  fill: color-mix(in srgb, var(--accent) 70%, black);
  opacity:.85;
}
.meatdash-svg-bar:hover{
  opacity:1;
}

.ms-subnav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin: 4px 0 10px 0;
}
.ms-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:900;
}
.ms-tab.is-active{
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* ======================================================================
   CoreMEAT - Dashboard Charts (Update: 4 Cards)
   ====================================================================== */

.meatdash-grid--4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px){
  .meatdash-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .meatdash-grid--4{ grid-template-columns: 1fr; }
}


/* ======================================================================
   CoreMEAT - Awards Tabelle fixierte Spalten
   ====================================================================== */

.meat-awards-table{
  table-layout: fixed;
  width: 100%;
}

.meat-awards-table .col-day{
  width: 170px;
}
.meat-awards-table .col-qty{
  width: 140px;
}
.meat-awards-table .col-unit{
  width: 160px;
}
.meat-awards-table .col-total{
  width: 150px;
}

/* Produkt + Details teilen den Rest */
.meat-awards-table .col-product,
.meat-awards-table .col-details{
  width: calc((100% - 620px) / 2);
}

.meat-awards-table th,
.meat-awards-table td{
  vertical-align: top;
}

.meat-awards-table .maw-day,
.meat-awards-table .maw-qty,
.meat-awards-table .maw-unit,
.meat-awards-table .maw-total{
  white-space: nowrap;
}

.meat-awards-table .maw-product{
  font-weight: 950;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.meat-awards-table .maw-details{
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px){
  .meat-awards-table .col-day{ width: 145px; }
  .meat-awards-table .col-qty{ width: 120px; }
  .meat-awards-table .col-unit{ width: 135px; }
  .meat-awards-table .col-total{ width: 125px; }

  .meat-awards-table .col-product,
  .meat-awards-table .col-details{
    width: calc((100% - 525px) / 2);
  }
}