/* ═══════════════════════════════════════════════════════════════
   TOOL-HUB – APP STYLES
   All structural CSS. Theme variables live in themes/default.css
   and themes/dark.css – do not redeclare them here.
   Load order: default.css → dark.css → app.css
═══════════════════════════════════════════════════════════════ */

/* Tool color palettes now live in themes/default.css and themes/dark.css */

/* ═══════════════════════════════════════════════════════════════
   FONTS
═══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu/ubuntu-v21-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu/ubuntu-v21-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu/ubuntu-v21-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu/ubuntu-v21-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }

body {
  background: var(--th-body-bg);
  color: var(--th-text);
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  min-height: 100vh;
  transition: background .3s, color .3s;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════ */
.th-wrapper { display:flex; min-height:100vh; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR  –  flat, white, left-border accent for active
═══════════════════════════════════════════════════════════════ */
.th-sidebar {
  width: 220px;
  min-height: 100vh;
  background: var(--th-sidebar-bg);
  backdrop-filter: blur(var(--th-sidebar-blur, 16px));
  -webkit-backdrop-filter: blur(var(--th-sidebar-blur, 16px));
  border-right: 1px solid var(--th-sidebar-bd);
  display: flex;
  flex-direction: column;
  position: fixed;
  top:0; left:0; bottom:0;
  z-index: 100;
  transition: width .2s, background .3s;
}

.th-logo {
  padding: 1.125rem 1.125rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--th-divider-hard);
}

.th-logo-icon {
  width: 28px; height: 28px;
  background: var(--tc-grad);
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.75rem;
  flex-shrink:0;
  box-shadow: 0 2px 8px var(--tc-mid);
  transition: background .4s, box-shadow .3s;
}

.th-logo-text { font-weight:700; font-size:.875rem; color:var(--th-text); letter-spacing:-.02em; }

.th-signet { max-width:28px; max-height:28px; object-fit:contain; display:block; }
[data-theme="dark"]  .th-signet-light { display:none; }
[data-theme="light"] .th-signet-dark  { display:none; }

.th-login-logo-img { max-height:48px; max-width:200px; object-fit:contain; display:block; margin:0 auto .25rem; }
[data-theme="dark"]  .th-login-logo-img.th-signet-light { display:none; }
[data-theme="light"] .th-login-logo-img.th-signet-dark  { display:none; }

.th-sidebar-credit {
  font-size:.6rem;
  color:var(--th-text-faint);
  text-align:center;
  padding:.4rem 1.125rem .125rem;
  letter-spacing:.02em;
}

.th-nav { padding:.625rem 0; flex:1; overflow-y:auto; }

.th-nav-label {
  font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--th-text-faint);
  padding:.75rem 1.125rem .25rem;
}

.th-nav-category {
  display:flex; align-items:center; gap:.35rem;
  font-size:.62rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--th-text-muted);
  padding:.5rem 1.125rem .2rem;
}
.th-nav-category .bi { font-size:.7rem; }
.sidebar-collapsed .th-nav-category { display:none; }

.th-nav-item {
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem 1rem .4rem .875rem;
  color: var(--th-text-muted);
  text-decoration:none;
  font-size:.825rem;
  font-weight:500;
  transition: color .12s, background .12s;
  cursor:pointer;
  position:relative;
  margin: 1px .5rem;
  border-radius: 7px;
}

.th-nav-item:hover {
  background: var(--th-row-hover);
  color: var(--th-text-2);
}

.th-nav-item.active {
  background: var(--tc-soft);
  color: var(--tc-text);
  font-weight:600;
}

.th-nav-item.active::before {
  content: '';
  position: absolute;
  left: -.5rem; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--tc);
  border-radius: 0 2px 2px 0;
}

.th-nav-dot {
  width:5px; height:5px; border-radius:50%;
  flex-shrink:0; margin-right:1px; opacity:.45;
  transition:opacity .2s;
}
.th-nav-item:hover .th-nav-dot,
.th-nav-item.active .th-nav-dot { opacity:1; }

.th-nav-item .bi { font-size:.9rem; flex-shrink:0; }

.th-nav-badge {
  margin-left:auto;
  background:var(--tc);
  color:#fff;
  font-size:.6rem; font-weight:700;
  padding:1px 5px; border-radius:20px;
  transition:background .3s;
}

.th-sidebar-footer {
  padding:.75rem 0;
  border-top:1px solid var(--th-divider-hard);
}

.th-user {
  display:flex; align-items:center; gap:.5rem;
  padding:.42rem 1.125rem;
  cursor:pointer;
  transition:background .12s;
  text-decoration:none;
  color:inherit;
}
.th-user:hover { background:var(--th-row-hover); text-decoration:none; }

.th-avatar {
  width:28px; height:28px;
  background:var(--tc-grad);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.6rem; font-weight:700;
  flex-shrink:0;
  box-shadow: 0 2px 6px var(--tc-mid);
  transition:background .4s, box-shadow .3s;
}

.th-user-name  { font-size:.775rem; font-weight:600; color:var(--th-text); line-height:1.2; }
.th-user-role  { font-size:.65rem; color:var(--th-text-muted); }

/* ═══════════════════════════════════════════════════════════════
   MAIN
═══════════════════════════════════════════════════════════════ */
.th-main { margin-left:220px; flex:1; display:flex; flex-direction:column; min-height:100vh; }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR  –  flat, white, thin border
═══════════════════════════════════════════════════════════════ */
.th-topbar {
  background: var(--th-topbar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--th-topbar-bd);
  padding: .6rem 1.5rem;
  display:flex; align-items:center; gap:.75rem;
  position:sticky; top:0; z-index:50;
  transition:background .3s;
}

.th-search { flex:1; max-width:280px; position:relative; }

.th-search input {
  width:100%;
  background:var(--th-input-bg);
  border:1px solid var(--th-input-bd);
  border-radius:7px;
  padding:.35rem .7rem .35rem 2rem;
  font-size:.8rem; color:var(--th-text);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.th-search input:focus { border-color:var(--tc); box-shadow:0 0 0 3px var(--tc-soft); }
.th-search input::placeholder { color:var(--th-text-faint); }
.th-search-icon { position:absolute; left:.575rem; top:50%; transform:translateY(-50%); color:var(--th-text-faint); font-size:.75rem; }

.th-topbar-right { display:flex; align-items:center; gap:.375rem; margin-left:auto; }

.th-icon-btn {
  width:30px; height:30px;
  border-radius:7px;
  border:1px solid var(--th-input-bd);
  background:transparent;
  color:var(--th-text-muted);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.85rem;
  transition:all .15s;
}
.th-icon-btn:hover { border-color:var(--tc); color:var(--tc); background:var(--tc-soft); }

.th-theme-sw {
  display:flex;
  background:var(--th-input-bg);
  border:1px solid var(--th-input-bd);
  border-radius:7px;
  padding:2px; gap:2px;
}
.th-t-btn {
  width:24px; height:24px;
  border-radius:5px; border:none;
  background:transparent; color:var(--th-text-muted);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.75rem; transition:all .15s;
}
.th-t-btn.active { background:var(--tc); color:#fff; transition:background .3s; }
.th-t-btn:not(.active):hover { background:var(--tc-soft); color:var(--tc); }

.th-lang-sw {
  height:30px;
  padding:0 24px 0 8px;
  border:1px solid var(--th-input-bd);
  border-radius:7px;
  background:var(--th-input-bg);
  color:var(--th-text);
  font-size:.75rem; font-weight:600;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
}
.th-lang-sw:focus { outline:none; border-color:var(--tc); box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 20%,transparent); }

/* ═══════════════════════════════════════════════════════════════
   CONTENT
═══════════════════════════════════════════════════════════════ */
.th-content { padding:1.75rem 1.5rem; flex:1; }

/* Welcome greeting (Personio style) */
.th-greeting {
  margin-bottom:1.75rem;
}
.th-greeting-sub  { font-size:.8rem; color:var(--th-text-muted); margin-bottom:.25rem; }
.th-greeting-head { font-size:1.625rem; font-weight:700; color:var(--th-text); letter-spacing:-.03em; line-height:1.1; }

/* Tool page header */
.th-page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.375rem; gap:1rem;
}
.th-page-title-wrap { display:flex; align-items:center; gap:.625rem; }

.th-page-icon {
  width:36px; height:36px; border-radius:10px;
  background:var(--tc-grad);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.95rem; flex-shrink:0;
  box-shadow: 0 3px 10px var(--tc-mid);
  transition:background .4s, box-shadow .3s;
}

.th-page-title { font-size:1.175rem; font-weight:700; color:var(--th-text); letter-spacing:-.025em; }
.th-page-sub   { font-size:.875rem; color:var(--th-text-muted); margin-top:.25rem; }

/* ═══════════════════════════════════════════════════════════════
   CARDS  –  flat white, subtle border, minimal shadow
═══════════════════════════════════════════════════════════════ */
.th-card {
  background: var(--th-card-bg);
  backdrop-filter: blur(var(--th-card-blur, 12px));
  -webkit-backdrop-filter: blur(var(--th-card-blur, 12px));
  border: 1px solid var(--th-card-bd);
  border-radius: 12px;
  box-shadow: var(--th-shadow-card, var(--th-shadow-sm));
  overflow: hidden;
  transition: background .3s, border-color .3s, box-shadow .2s;
}
.th-card:hover { box-shadow: var(--th-shadow); }

.th-card-header {
  padding:.875rem 1.125rem;
  border-bottom:1px solid var(--th-divider-hard);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.th-card-title { font-size:.825rem; font-weight:600; color:var(--th-text); }
.th-card-title-link { font-size:.8rem; font-weight:600; color:var(--tc); text-decoration:none; display:flex; align-items:center; gap:3px; }
.th-card-title-link:hover { text-decoration:underline; }

.th-card-body { padding:1.125rem; }

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════════════════════════════ */
.th-stat { display:flex; align-items:center; gap:.875rem; }

.th-stat-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.th-stat-icon.tool    { background:var(--tc-soft);        color:var(--tc); }
.th-stat-icon.success { background:var(--c-success-soft); color:var(--c-success); }
.th-stat-icon.warning { background:var(--c-warning-soft); color:var(--c-warning); }
.th-stat-icon.danger  { background:var(--c-danger-soft);  color:var(--c-danger); }

.th-stat-value { font-size:1.5rem; font-weight:700; color:var(--th-text); line-height:1; letter-spacing:-.04em; }
.th-stat-label { font-size:.725rem; color:var(--th-text-muted); margin-top:3px; }
.th-stat-delta { font-size:.68rem; font-weight:600; margin-top:3px; }
.th-stat-delta.up   { color:var(--c-success); }
.th-stat-delta.down { color:var(--c-danger); }

/* ═══════════════════════════════════════════════════════════════
   TABLE  –  Personio style: clean rows, no heavy borders
═══════════════════════════════════════════════════════════════ */
.th-table { width:100%; border-collapse:collapse; font-size:.8rem; }

.th-table th {
  padding:.5rem 1rem;
  text-align:left;
  font-size:.66rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--th-text-muted);
  border-bottom:1px solid var(--th-divider-hard);
  background:var(--th-body-bg);
}

.th-table td {
  padding:.7rem 1rem;
  border-bottom:1px solid var(--th-divider);
  color:var(--th-text-2);
  vertical-align:middle;
}

.th-table tr:last-child td { border-bottom:none; }
.th-table tbody tr:hover td { background:var(--th-row-hover); }

/* Person row (Personio inbox style) */
.th-list-item {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.8rem 1.125rem;
  border-bottom:1px solid var(--th-divider);
  cursor:pointer; transition:background .1s;
}
.th-list-item:last-child { border-bottom:none; }
.th-list-item:hover { background:var(--th-row-hover); }

.th-list-avatar {
  width:30px; height:30px; border-radius:50%;
  flex-shrink:0; object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:700; color:#fff;
}

.th-list-title  { font-size:.8rem; font-weight:500; color:var(--th-text); line-height:1.3; }
.th-list-sub    { font-size:.72rem; color:var(--th-text-muted); margin-top:1px; }
.th-list-due    { font-size:.7rem; font-weight:600; margin-top:2px; }
.th-list-due.soon     { color:var(--c-warning); }
.th-list-due.overdue  { color:var(--c-danger); }

/* ═══════════════════════════════════════════════════════════════
   BADGES  –  soft pills  (einzige Definition – keine Duplikate)
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.th-btn {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.35rem .8rem;
  border-radius:7px;
  font-size:.775rem; font-weight:600; line-height:1;
  font-family:inherit;
  border:none; cursor:pointer;
  transition:all .15s;
  text-decoration:none;
}
.th-btn-primary {
  background:var(--tc); color:#fff;
  box-shadow: 0 2px 8px var(--tc-mid);
  transition:background .3s, filter .15s, box-shadow .15s;
}
.th-btn-primary:hover { filter:brightness(1.07); box-shadow:0 4px 14px var(--tc-mid); }

.th-btn-ghost {
  background: var(--th-input-bg);
  color:var(--th-text-muted);
  border:1px solid var(--th-input-bd);
}
.th-btn-ghost:hover { background:var(--tc-soft); color:var(--tc); border-color:var(--tc); }

/* ═══════════════════════════════════════════════════════════════
   FORMS  –  Login & generic inputs
═══════════════════════════════════════════════════════════════ */
.th-login-page {
  display:none; min-height:100vh;
  background: var(--th-login-bg);
  align-items:center; justify-content:center;
  padding:2rem;
  position:relative; overflow:hidden;
}

/* ── Deko-Icons unten links, hinter der Card ── */
.th-login-deko {
  position:absolute;
  left:  calc(50% - 340px);
  bottom: calc(50% - 260px);
  width:280px; height:280px;
  pointer-events:none;
  z-index:0;
}
.th-login-deko i {
  position:absolute;
  color: var(--th-login-icon);
  filter: drop-shadow(0 0 24px var(--th-login-glow));
  line-height:1;
  animation: th-iconbob ease-in-out infinite;
}
.th-login-deko i:nth-child(1) { font-size:13rem; bottom:20px; left:0;      animation-duration:18s; }
.th-login-deko i:nth-child(2) { font-size:9rem;  bottom:0;    left:100px;  animation-duration:14s; animation-delay:-5s; }
.th-login-deko i:nth-child(3) { font-size:6rem;  bottom:140px;left:30px;   animation-duration:22s; animation-delay:-9s; }
@keyframes th-iconbob {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}

/* Card über den Deko-Icons */
.th-login-card { position:relative; z-index:1; }

.th-login-card {
  width:100%; max-width:360px;
  background:var(--th-card-bg);
  border:1px solid var(--th-card-bd);
  border-radius:12px;
  box-shadow:var(--th-shadow);
  padding:2rem;
}

.th-login-logo {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-bottom:1.5rem;
}
.th-login-logo-icon {
  width:34px; height:34px;
  background:var(--tc-grad);
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.95rem;
  transition:background .4s;
}
.th-login-logo-text { font-size:1rem; font-weight:700; color:var(--th-text); letter-spacing:-.02em; }

.th-form-group { margin-bottom:.875rem; }
.th-label { display:block; font-size:.74rem; font-weight:600; color:var(--th-text); margin-bottom:.3rem; }

.th-input {
  width:100%;
  background:var(--th-input-bg);
  border:1px solid var(--th-input-bd);
  border-radius:7px;
  padding:.45rem .75rem;
  font-size:.85rem; color:var(--th-text);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.th-input:focus { border-color:var(--tc); box-shadow:0 0 0 3px var(--tc-soft); }
.th-input::placeholder { color:var(--th-text-faint); }
.th-input-error { border-color:var(--c-danger) !important; }
.th-input-error:focus { box-shadow:0 0 0 3px var(--c-danger-soft) !important; }
.th-field-error { font-size:.72rem; color:var(--c-danger); margin-top:.25rem; }

.th-select {
  background:var(--th-input-bg);
  border:1px solid var(--th-input-bd);
  border-radius:7px;
  padding:.45rem .75rem;
  font-size:.85rem; color:var(--th-text);
  outline:none; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.th-select:focus { border-color:var(--tc); box-shadow:0 0 0 3px var(--tc-soft); }

.th-toggle:has(.th-toggle-track) input[type=checkbox] { display:none; }
.th-toggle-track {
  position:relative; display:inline-block;
  width:36px; height:20px; border-radius:10px;
  transition:background .18s; flex-shrink:0;
}
.th-toggle-thumb {
  position:absolute; top:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:left .18s;
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════════════ */
.th-alert {
  padding:.625rem .875rem;
  border-radius:8px;
  font-size:.8rem;
  margin-bottom:1rem;
  border:1px solid transparent;
}
.th-alert-danger  { background:var(--c-danger-soft);  color:var(--c-danger);  border-color:rgba(220,38,38,.2); }
.th-alert-success { background:var(--c-success-soft); color:var(--c-success); border-color:rgba(22,163,74,.2); }
.th-alert-warning { background:var(--c-warning-soft); color:var(--c-warning); border-color:rgba(217,119,6,.2); }
.th-alert-info    { background:var(--c-info-soft);    color:var(--c-info);    border-color:rgba(8,145,178,.2); }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════════════ */
.th-empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:4rem 2rem; gap:.5rem; text-align:center;
  color:var(--th-text-muted);
}
.th-empty-state .bi { font-size:2.5rem; color:var(--th-text-faint); margin-bottom:.375rem; }
.th-empty-state > div:not(.th-empty-sub) { font-size:.875rem; font-weight:500; color:var(--th-text); }
.th-empty-sub { font-size:.775rem; color:var(--th-text-muted); max-width:280px; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════════════════════════ */
.th-login-body .th-login-page { display:flex; }

.th-login-heading { text-align:center; margin-bottom:1.25rem; }
.th-login-title { font-size:1.0625rem; font-weight:700; color:var(--th-text); letter-spacing:-.02em; }
.th-login-sub   { font-size:.775rem; color:var(--th-text-muted); margin-top:.2rem; }

.th-login-footer { text-align:center; margin-top:1.25rem; font-size:.7rem; color:var(--th-text-faint); }

.th-link-sm { font-size:.73rem; font-weight:500; color:var(--tc); text-decoration:none; }
.th-link-sm:hover { text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════
   ERROR PAGES (403 / 404)
═══════════════════════════════════════════════════════════════ */
.th-error-page {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:60vh; text-align:center; padding:2rem; gap:.625rem;
}
.th-error-code  { font-size:4rem; font-weight:800; color:var(--tc); letter-spacing:-.05em; line-height:1; }
.th-error-title { font-size:1.125rem; font-weight:700; color:var(--th-text); }
.th-error-sub   { font-size:.825rem; color:var(--th-text-muted); max-width:340px; }
.th-error-back  { margin-top:.75rem; }

/* ═══════════════════════════════════════════════════════════════
   WIDGET GRID
═══════════════════════════════════════════════════════════════ */
.th-widget-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}

.th-widget-sm { grid-column: span 1; }
.th-widget-md { grid-column: span 2; }
.th-widget-lg { grid-column: span 4; }

@media (max-width: 1023px) {
  .th-widget-grid { grid-template-columns: repeat(2, 1fr); }
  .th-widget-md,
  .th-widget-lg   { grid-column: span 2; }
}

@media (max-width: 575px) {
  .th-widget-grid                              { grid-template-columns: 1fr; }
  .th-widget-sm, .th-widget-md, .th-widget-lg { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════════
   WIDGET CARDS – Header + per-Tool-Color
═══════════════════════════════════════════════════════════════ */
.th-widget-card { height: 100%; }
.th-widget-card[data-color="blue"]   { --wc: #2563eb; --wc-soft: rgba(37,99,235,.10); }
.th-widget-card[data-color="teal"]   { --wc: #0d9488; --wc-soft: rgba(13,148,136,.10); }
.th-widget-card[data-color="violet"] { --wc: #7c3aed; --wc-soft: rgba(124,58,237,.10); }
.th-widget-card[data-color="orange"] { --wc: #ea580c; --wc-soft: rgba(234,88,12,.10); }
.th-widget-card[data-color="rose"]   { --wc: #e11d48; --wc-soft: rgba(225,29,72,.10); }

.th-widget-header {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .875rem;
  border-bottom: 1px solid var(--th-divider-hard);
}

.th-widget-header-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wc-soft, var(--th-bg-soft));
  border-radius: var(--th-radius);
  font-size: .8rem;
  color: var(--wc, var(--th-text-muted));
  flex-shrink: 0;
}

.th-widget-header-title {
  flex: 1;
  font-size: .775rem;
  font-weight: 600;
  color: var(--th-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.th-widget-header-link {
  color: var(--th-text-muted);
  text-decoration: none;
  font-size: .72rem;
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-shrink: 0;
  transition: color .15s;
}

.th-widget-header-link:hover { color: var(--wc, var(--tc)); }

/* ═══════════════════════════════════════════════════════════════
   PALETTE PAGE
═══════════════════════════════════════════════════════════════ */
.th-palette-page {
  display:none; min-height:100vh;
  background:var(--th-body-bg); padding:2rem;
}

.palette-swatch {
  width:100%; height:76px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.8rem;
  cursor:pointer; transition:transform .15s, box-shadow .15s;
  position:relative; overflow:hidden;
  border:2px solid transparent;
}
.palette-swatch:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.palette-swatch.selected { border-color:#fff; box-shadow:0 0 0 3px var(--tc); }
.palette-swatch.selected::after { content:'✓'; position:absolute; right:10px; top:8px; font-size:.95rem; }

/* ═══════════════════════════════════════════════════════════════
   MOCKUP BAR
═══════════════════════════════════════════════════════════════ */
.mockup-bar {
  position:fixed; bottom:1.125rem; left:50%; transform:translateX(-50%);
  background:var(--th-card-bg);
  border:1px solid var(--th-card-bd);
  border-radius:12px;
  box-shadow:var(--th-shadow);
  padding:.35rem .45rem;
  display:flex; align-items:center; gap:.2rem;
  z-index:9999;
}
.mockup-label { font-size:.66rem; color:var(--th-text-faint); padding:0 .5rem 0 .25rem; border-right:1px solid var(--th-divider-hard); margin-right:.125rem; white-space:nowrap; }
.mockup-btn {
  padding:.275rem .7rem; border-radius:8px; border:none;
  font-size:.72rem; font-weight:600;
  cursor:pointer; color:var(--th-text-muted); background:transparent;
  transition:all .15s; white-space:nowrap;
}
.mockup-btn.active { background:var(--tc); color:#fff; transition:background .3s; }
.mockup-btn:not(.active):hover { background:var(--tc-soft); color:var(--tc); }

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--th-divider-hard); border-radius:10px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   Desktop  >= 992px : Sidebar always visible (210px)
   Tablet   768-991px: Sidebar icon-only (52px)
   Mobile   < 768px  : Sidebar hidden, burger overlay
═══════════════════════════════════════════════════════════════ */

/* ── Sidebar collapsed (icon-only) ── */
.sidebar-collapsed .th-sidebar { width:60px; }
.sidebar-collapsed .th-logo-text { display:none; }
.sidebar-collapsed .th-nav-label { display:none; }
.sidebar-collapsed .th-nav-item  { padding:.45rem 0; justify-content:center; gap:0; margin:1px .375rem; }
.sidebar-collapsed .th-nav-item span:not(.bi) { display:none; }
.sidebar-collapsed .th-nav-badge { display:none; }
.sidebar-collapsed .th-nav-dot   { display:none; }
.sidebar-collapsed .th-nav-item.active::before { display:none; }
.sidebar-collapsed .th-user-name,
.sidebar-collapsed .th-user-role { display:none; }
.sidebar-collapsed .th-user         { justify-content:center; padding:.45rem .375rem; }
.sidebar-collapsed .th-sidebar-credit { display:none; }
.sidebar-collapsed .th-main      { margin-left:60px; }

/* Tooltip on icon-only hover */
.sidebar-collapsed .th-nav-item { position:relative; }
.sidebar-collapsed .th-nav-item::after {
  content: attr(data-label);
  position:absolute; left:66px; top:50%; transform:translateY(-50%);
  background:var(--th-text); color:var(--th-body-bg);
  font-size:.72rem; font-weight:600;
  padding:3px 8px; border-radius:6px;
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .15s;
  z-index:200;
}
.sidebar-collapsed .th-nav-item:hover::after { opacity:1; }

/* ── Sidebar mobile overlay ── */
.sidebar-mobile-open .th-sidebar {
  width:210px;
  box-shadow:0 0 0 100vw rgba(0,0,0,.35);
  z-index:200;
}
.sidebar-mobile-open .th-logo-text,
.sidebar-mobile-open .th-nav-label,
.sidebar-mobile-open .th-nav-item span,
.sidebar-mobile-open .th-nav-badge,
.sidebar-mobile-open .th-nav-dot,
.sidebar-mobile-open .th-user-name,
.sidebar-mobile-open .th-user-role { display:flex !important; }
.sidebar-mobile-open .th-nav-item  { justify-content:flex-start; padding:.42rem 1.125rem .42rem 1rem; gap:.5rem; }
.sidebar-mobile-open .th-user      { justify-content:flex-start; }

/* Burger button – always in topbar, hidden on desktop */
.th-burger {
  width:30px; height:30px;
  border-radius:7px; border:1px solid var(--th-input-bd);
  background:transparent; color:var(--th-text-muted);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; font-size:.95rem;
  transition:all .15s; flex-shrink:0;
}
.th-burger:hover { background:var(--tc-soft); color:var(--tc); border-color:var(--tc); }

/* Responsive breakpoints */
@media (max-width:991px) {
  .th-sidebar { width:60px; }
  .th-main    { margin-left:60px; }
  .th-logo-text { display:none; }
  .th-nav-label { display:none; }
  .th-nav-category { display:none; }
  .th-nav-item  { padding:.45rem 0; justify-content:center; gap:0; margin:1px .375rem; }
  .th-nav-item > *:not(.bi) { display:none; }
  .th-nav-badge { display:none; }
  .th-nav-dot   { display:none; }
  .th-nav-item.active::before { display:none; }
  .th-user-name, .th-user-role { display:none; }
  .th-user { justify-content:center; padding:.45rem .375rem; }
  .th-sidebar-credit { display:none; }
  .th-burger { display:flex; }
}

/* Overlay für Mobile-Sidebar */
.th-sidebar-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:199;
}

@media (max-width:767px) {
  .th-sidebar {
    width:220px;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:200;
  }
  .th-main    { margin-left:0; }
  /* sidebar-collapsed darf auf Mobile das Layout nicht verschieben */
  .sidebar-collapsed .th-sidebar { width:220px; transform:translateX(-100%); }
  .sidebar-collapsed .th-main    { margin-left:0; }
  .th-sidebar .th-logo-text,
  .th-sidebar .th-nav-label,
  .th-sidebar .th-nav-category { display:flex; }
  .th-sidebar .th-nav-item  { padding:.42rem 1rem; justify-content:flex-start !important; gap:.5rem; margin:1px .5rem; }
  .th-sidebar .th-nav-item > * { display:flex !important; }
  .th-sidebar .th-nav-badge { display:flex !important; }
  .th-sidebar .th-nav-dot   { display:flex !important; }
  .th-sidebar .th-nav-item.active::before { display:block !important; }
  .th-sidebar .th-user-name,
  .th-sidebar .th-user-role { display:block !important; }
  .th-sidebar .th-user { justify-content:flex-start !important; padding:.42rem .625rem; }
  .sidebar-open .th-sidebar         { transform:translateX(0); }
  .sidebar-open .th-sidebar-overlay { display:block; }
  .th-content { padding:1.25rem 1rem; }
}

/* ── Mockup viewport simulation ── */
.viewport-sm .th-wrapper { max-width:375px; margin:0 auto; box-shadow:0 0 0 9999px var(--th-body-bg); }

/* ════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════ */
.th-badge {
  display:inline-flex; align-items:center;
  padding:.15rem .55rem; border-radius:999px;
  font-size:.72rem; font-weight:600; white-space:nowrap;
}
.th-badge-blue    { background:rgba(37,99,235,.1);  color:#2563eb; }
.th-badge-teal    { background:rgba(13,148,136,.1); color:#0d9488; }
.th-badge-green   { background:rgba(22,163,74,.1);  color:#16a34a; }
.th-badge-orange  { background:rgba(234,88,12,.1);  color:#ea580c; }
.th-badge-rose    { background:rgba(225,29,72,.1);  color:#e11d48; }
.th-badge-gray    { background:var(--th-bg-soft);   color:var(--th-text-muted); }
.th-badge-success { background:rgba(22,163,74,.1);  color:#16a34a; }
.th-badge-danger  { background:rgba(225,29,72,.1);  color:#e11d48; }
.th-badge-warning { background:rgba(234,88,12,.1);  color:#ea580c; }
.th-badge-muted   { background:var(--th-bg-soft);   color:var(--th-text-muted); }

/* ════════════════════════════════════════════════
   ALERTS
════════════════════════════════════════════════ */
.th-alert {
  padding:.75rem 1rem; border-radius:var(--th-radius);
  font-size:.875rem; margin-bottom:1rem;
}
.th-alert-success { background:rgba(22,163,74,.1);  color:#15803d; border:1px solid rgba(22,163,74,.2); }
.th-alert-danger  { background:rgba(220,38,38,.1);  color:#dc2626; border:1px solid rgba(220,38,38,.2); }

/* ════════════════════════════════════════════════
   TABLES
════════════════════════════════════════════════ */
.th-table-wrap { overflow-x:auto; }

/* ── Responsive Tables ───────────────────────────
   Strategie A: Spalten auf Mobile ausblenden
   Strategie B: Zeilen als Karten darstellen (th-table-stack)
   Dokumentation: docs/dev/UI_COMPONENTS.md
─────────────────────────────────────────────── */
@media (max-width:767px) {
  /* Strategie A */
  .th-col-mobile-hide { display:none; }

  /* Strategie B – Card-Transform */
  .th-table-stack thead { display:none; }

  .th-table-stack tbody tr {
    display:block;
    border:1px solid var(--th-border);
    border-radius:var(--th-radius);
    margin-bottom:.75rem;
    background:var(--th-card-bg);
    overflow:hidden;
  }

  .th-table-stack tbody td {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.6rem 1rem;
    border-bottom:1px solid var(--th-border);
    border-right:none;
    font-size:.8rem;
  }

  .th-table-stack tbody tr td:last-child { border-bottom:none; }

  .th-table-stack tbody td::before {
    content:attr(data-label);
    font-weight:600;
    color:var(--th-text-muted);
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    flex-shrink:0;
    margin-right:1rem;
  }

  /* Aktionen-Spalte: kein Label, rechtsbündig */
  .th-table-stack tbody td:last-child { justify-content:flex-end; }
  .th-table-stack tbody td:last-child::before { display:none; }

  /* Hover deaktivieren auf Mobile (kein Pointer-Gerät) */
  .th-table-stack tbody tr:hover td { background:transparent; }
}
.th-table {
  width:100%; border-collapse:collapse; font-size:.875rem;
}
.th-table th {
  text-align:left; padding:.625rem 1rem;
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--th-text-muted); border-bottom:1px solid var(--th-border);
  white-space:nowrap;
}
.th-table td {
  padding:.75rem 1rem; border-bottom:1px solid var(--th-border);
  color:var(--th-text);
}
.th-table tbody tr:last-child td { border-bottom:none; }
.th-table tbody tr:hover td { background:var(--th-bg-soft); }

/* ════════════════════════════════════════════════
   AVATAR SIZES
════════════════════════════════════════════════ */
.th-avatar-sm {
  width:2rem; height:2rem; font-size:.7rem;
}

/* ════════════════════════════════════════════════
   BUTTONS – SMALL + DANGER VARIANT
════════════════════════════════════════════════ */
.th-btn-sm { padding:.25rem .6rem; font-size:.8rem; }
.th-btn-danger:hover { color:#dc2626 !important; }

/* ════════════════════════════════════════════════
   MODALS
════════════════════════════════════════════════ */
.th-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:500; padding:1rem;
}
.th-modal {
  background:var(--th-card-bg); border-radius:var(--th-radius-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  width:100%; max-width:540px; max-height:90vh;
  display:flex; flex-direction:column;
}
.th-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.125rem 1.5rem; border-bottom:1px solid var(--th-border);
  font-weight:600; font-size:1rem;
}
.th-modal-close {
  background:none; border:none; cursor:pointer;
  color:var(--th-text-muted); padding:.25rem; line-height:1;
  border-radius:var(--th-radius);
}
.th-modal-close:hover { background:var(--th-bg-soft); color:var(--th-text); }
.th-modal-body   { padding:1.5rem; overflow-y:auto; flex:1; }
.th-modal-footer {
  padding:1rem 1.5rem; border-top:1px solid var(--th-border);
  display:flex; justify-content:flex-end; gap:.75rem;
}

/* ════════════════════════════════════════════════
   FORMS – EXTRA
════════════════════════════════════════════════ */
.th-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.th-form-section-title {
  font-size:.875rem; font-weight:600; margin-bottom:.5rem; color:var(--th-text);
}
@media (max-width:560px) { .th-form-row { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════
   INFO GRID (Settings)
════════════════════════════════════════════════ */
.th-info-grid { display:flex; flex-direction:column; gap:.5rem; }
.th-info-row  { display:flex; align-items:center; gap:1rem; font-size:.875rem; }
.th-info-label { color:var(--th-text-muted); min-width:120px; }
.th-info-value { color:var(--th-text); font-family:monospace; font-size:.8125rem; }

/* ════════════════════════════════════════════════
   FIELD GRID – zweispaltige Key-Value-Anzeige für viele
   schreibgeschützte Felder (z.B. Produkt-/Kunden-Stammdaten-Tabs).
   Unterschied zu INFO GRID: 2 Spalten statt 1, für längere Feldlisten.
════════════════════════════════════════════════ */
.th-field-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0 2.5rem;
}
.th-field-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  max-width:420px;
  padding:.55rem 0;
  border-bottom:1px solid var(--th-divider);
}
.th-field-label {
  font-size:.78rem;
  color:var(--th-text-muted);
  white-space:nowrap;
}
.th-field-value {
  font-size:.84rem;
  color:var(--th-text);
  font-weight:500;
  text-align:right;
  overflow-wrap:anywhere;
}
@media (max-width:640px) {
  .th-field-grid { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════
   TOOL CARDS (Admin Tools)
════════════════════════════════════════════════ */
.th-card-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem;
}
.th-tool-card { position:relative; overflow:hidden; }
.th-tool-card-accent { position:absolute; top:0; left:0; right:0; height:3px; }
.th-tool-icon {
  width:2.5rem; height:2.5rem; border-radius:var(--th-radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.125rem; flex-shrink:0;
}

/* ════════════════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════════════ */
.th-page-header { margin-bottom:1.5rem; }
.th-page-title  { font-size:1.375rem; font-weight:700; color:var(--th-text); margin:0; }

/* ════════════════════════════════════════════════
   NOTIFICATIONS
════════════════════════════════════════════════ */
.th-notif-wrap    { position:relative; }
.th-notif-badge   {
  position:absolute; top:-4px; right:-4px;
  min-width:16px; height:16px; padding:0 4px;
  background:#dc2626; color:#fff;
  border-radius:999px; font-size:.65rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.th-notif-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  width:320px; max-height:420px;
  background:var(--th-card-bg); border:1px solid var(--th-border);
  border-radius:var(--th-radius-lg); box-shadow:0 8px 30px rgba(0,0,0,.15);
  z-index:300; overflow:hidden; display:flex; flex-direction:column;
}
.th-notif-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-bottom:1px solid var(--th-border);
  font-size:.875rem; font-weight:600;
}
.th-notif-list   { overflow-y:auto; flex:1; }
.th-notif-empty  { padding:2rem 1rem; text-align:center; font-size:.875rem; color:var(--th-text-muted); }
.th-notif-item   {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--th-border);
  cursor:pointer; text-decoration:none; color:var(--th-text);
  transition:background .15s;
}
.th-notif-item:last-child { border-bottom:none; }
.th-notif-item:hover      { background:var(--th-bg-soft); }
.th-notif-unread          { background:var(--th-bg-soft); }
.th-notif-icon  { font-size:1.125rem; flex-shrink:0; margin-top:.1rem; }
.th-notif-title { font-size:.875rem; font-weight:500; }
.th-notif-msg   { font-size:.8rem; color:var(--th-text-muted); margin-top:.2rem; }

/* ════════════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════════════ */
.th-empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:4rem 2rem; text-align:center;
}
.th-empty-icon  { font-size:3rem; color:var(--th-text-muted); margin-bottom:1rem; }
.th-empty-title { font-size:1rem; font-weight:600; color:var(--th-text); margin-bottom:.375rem; }
.th-empty-sub   { font-size:.875rem; color:var(--th-text-muted); max-width:360px; }

/* ════════════════════════════════════════════════
   ADMIN DASHBOARD – Tile Grid
════════════════════════════════════════════════ */
.th-admin-group { margin-bottom:2rem; }

.th-admin-group-label {
  font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--th-text-muted);
  margin-bottom:.625rem;
}

.th-admin-tile-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.625rem;
}

.th-admin-tile {
  display:flex; align-items:center; gap:.875rem;
  padding:.875rem 1rem;
  background:var(--th-card-bg);
  border:1px solid var(--th-card-bd);
  border-radius:10px;
  text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.th-admin-tile:hover {
  border-color:var(--tc);
  box-shadow:0 2px 12px var(--tc-mid);
  text-decoration:none; color:inherit;
}

.th-admin-tile-icon {
  width:36px; height:36px; flex-shrink:0;
  border-radius:9px;
  background:var(--tc-soft);
  color:var(--tc);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  transition:background .3s, color .3s;
}

.th-admin-tile-body { flex:1; min-width:0; }
.th-admin-tile-title { font-size:.825rem; font-weight:600; color:var(--th-text); }
.th-admin-tile-sub   { font-size:.73rem; color:var(--th-text-muted); margin-top:1px; }

.th-admin-tile-arrow { color:var(--th-text-faint); font-size:.75rem; flex-shrink:0; transition:color .15s; }
.th-admin-tile:hover .th-admin-tile-arrow { color:var(--tc); }

@media (max-width:991px) { .th-admin-tile-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px)  { .th-admin-tile-grid { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════
   ADMIN BREADCRUMB (deprecated – ersetzt durch inline-styles in admin_nav.php)
════════════════════════════════════════════════ */
.th-admin-breadcrumb { display:flex; align-items:center; gap:.5rem; margin-bottom:1.5rem; font-size:.825rem; }
.th-admin-breadcrumb-back { display:inline-flex; align-items:center; gap:.3rem; color:var(--tc); text-decoration:none; font-weight:500; transition:opacity .15s; }
.th-admin-breadcrumb-back:hover { opacity:.75; text-decoration:none; }
.th-admin-breadcrumb-sep     { color:var(--th-text-faint); }
.th-admin-breadcrumb-current { color:var(--th-text-muted); }

/* ════════════════════════════════════════════════
   ADMIN TABS (legacy – wird schrittweise abgelöst)
════════════════════════════════════════════════ */
.th-admin-tabs {
  display:flex; flex-wrap:wrap; gap:.25rem;
  background:var(--th-card-bg); border:1px solid var(--th-border);
  border-radius:var(--th-radius); padding:.375rem;
  margin-bottom:1.5rem;
}
.th-admin-tab {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4375rem .875rem; border-radius:calc(var(--th-radius) - 2px);
  font-size:.8125rem; font-weight:500; color:var(--th-text-muted);
  text-decoration:none; transition:background .15s, color .15s;
}
.th-admin-tab:hover { background:var(--th-row-hover); color:var(--th-text); text-decoration:none; }
.th-admin-tab.active { background:var(--tc,#2563eb); color:#fff; }
.th-admin-tab i { font-size:.875rem; }
.viewport-md .th-wrapper { max-width:768px; margin:0 auto; box-shadow:0 0 0 9999px var(--th-body-bg); }

/* ════════════════════════════════════════════════
   TABS (Underline-Stil – z.B. Permissions)
════════════════════════════════════════════════ */
.th-tabs {
  display:flex; gap:.25rem;
  border-bottom:1px solid var(--th-border);
  margin-bottom:1.25rem;
}
.th-tab {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem; font-size:.875rem; font-weight:500;
  color:var(--th-text-muted); text-decoration:none;
  border:1px solid transparent; border-bottom:none;
  border-radius:6px 6px 0 0; margin-bottom:-1px;
  transition:color .15s, border-color .15s, background .15s;
}
.th-tab:hover { color:var(--th-text); text-decoration:none; }
.th-tab.active {
  color:var(--tc);
  border-color:var(--th-border);
  border-bottom:1px solid var(--th-bg);
  background:var(--th-bg);
}

/* ════════════════════════════════════════════════
   SUPPORT FAQ ACCORDION
════════════════════════════════════════════════ */
.th-faq-item {
  border:1px solid var(--th-border);
  border-radius:var(--th-radius);
  margin-bottom:.5rem;
  overflow:hidden;
}
.th-faq-question {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:.875rem 1rem;
  background:var(--th-card-bg); border:none; cursor:pointer;
  font-size:.9375rem; font-weight:500; color:var(--th-text);
  text-align:left; transition:background .15s;
}
.th-faq-question:hover { background:var(--th-row-hover); }
.th-faq-question i.th-faq-chevron {
  flex-shrink:0; font-size:1rem; color:var(--th-text-muted);
  transition:transform .2s ease;
}
.th-faq-item.open .th-faq-chevron { transform:rotate(180deg); }
.th-faq-answer {
  display:none;
  padding:.75rem 1rem 1rem;
  font-size:.875rem; color:var(--th-text-muted); line-height:1.6;
  border-top:1px solid var(--th-border); background:var(--th-bg-soft);
}
.th-faq-item.open .th-faq-answer { display:block; }

/* ════════════════════════════════════════════════
   PASSWORT-STÄRKE WIDGET
════════════════════════════════════════════════ */
.th-pw-rules {
  display:none;
  margin-top:.5rem;
  padding:.5rem .625rem;
  background:var(--th-bg-soft);
  border:1px solid var(--th-border);
  border-radius:var(--th-radius);
}
.th-pw-rules.th-pw-visible { display:block; }
.th-pw-rule {
  display:flex; align-items:center; gap:.35rem;
  font-size:.75rem; color:var(--th-text-faint);
  line-height:1.8; transition:color .15s;
}
.th-pw-rule i { font-size:.8rem; flex-shrink:0; }
.th-pw-rule.ok { color:var(--c-success,#16a34a); }

/* Permissions */
.th-perm-list { display:flex; flex-direction:column; gap:.375rem; }
.th-perm-row {
    display:flex; align-items:flex-start; gap:.75rem;
    padding:.5rem .625rem; border-radius:6px; cursor:pointer;
    transition:background .15s;
}
.th-perm-row:hover { background:var(--th-row-hover); }
.th-perm-row input[type="checkbox"] { margin-top:.125rem; flex-shrink:0; accent-color:var(--tc); }
.th-perm-info { display:flex; flex-direction:column; gap:.125rem; }
.th-perm-key { font-size:.8rem; background:var(--th-bg-soft); padding:.1rem .35rem; border-radius:4px; color:var(--tc); }

/* ════════════════════════════════════════════════
   GRID HELPERS
════════════════════════════════════════════════ */
.th-grid { display:grid; gap:1rem; }
.th-grid-4   { grid-template-columns:repeat(4,1fr); }
.th-grid-3   { grid-template-columns:repeat(3,1fr); }
.th-grid-2   { grid-template-columns:repeat(2,1fr); }
.th-grid-2-1 { grid-template-columns:2fr 1fr; }
.th-grid-1-2 { grid-template-columns:1fr 2fr; }

@media (max-width:1100px) { .th-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:991px)  { .th-grid-2-1,.th-grid-1-2 { grid-template-columns:1fr; } }
@media (max-width:767px)  { .th-grid-3,.th-grid-2 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px)  { .th-grid-4,.th-grid-3,.th-grid-2 { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════
   TOOL TILES  –  Dashboard Quick Access
════════════════════════════════════════════════ */
.th-tool-tile {
  display:flex; flex-direction:column; gap:.5rem;
  padding:1rem;
  background: var(--th-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid var(--th-card-bd);
  border-radius:12px;
  box-shadow: var(--th-shadow-card, var(--th-shadow-sm));
  cursor:pointer; text-decoration:none; color:inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.th-tool-tile:hover {
  transform:translateY(-2px);
  box-shadow: var(--th-shadow);
  border-color: var(--tc-mid);
  text-decoration:none; color:inherit;
}
.th-tool-tile-icon {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
}
.th-tool-tile-name { font-size:.825rem; font-weight:600; color:var(--th-text); }
.th-tool-tile-desc { font-size:.72rem; color:var(--th-text-muted); line-height:1.4; }

/* ════════════════════════════════════════════════
   ACTIVITY LIST
════════════════════════════════════════════════ */
.th-activity-item {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--th-divider);
}
.th-activity-item:last-child { border-bottom:none; padding-bottom:0; }
.th-activity-dot {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; flex-shrink:0; margin-top:1px;
}
.th-activity-title { font-size:.8rem; font-weight:500; color:var(--th-text); line-height:1.35; }
.th-activity-time  { font-size:.7rem; color:var(--th-text-faint); margin-top:1px; }

/* ════════════════════════════════════════════════
   PROGRESS BAR
════════════════════════════════════════════════ */
.th-progress-wrap  { margin-top:.5rem; }
.th-progress-label { display:flex; justify-content:space-between; font-size:.7rem; color:var(--th-text-muted); margin-bottom:.3rem; }
.th-progress-track { height:5px; background:var(--th-divider-hard); border-radius:999px; overflow:hidden; }
.th-progress-bar   { height:100%; border-radius:999px; background:var(--tc-grad); transition:width .4s ease; }

/* ════════════════════════════════════════════════
   TOPBAR USER PILL
════════════════════════════════════════════════ */
.th-topbar-user {
  display:flex; align-items:center; gap:.4rem;
  padding:.3rem .5rem .3rem .3rem;
  border-radius:999px;
  border:1px solid var(--th-input-bd);
  background:var(--th-input-bg);
  cursor:pointer; transition:all .15s;
  text-decoration:none; color:inherit;
}
.th-topbar-user:hover { border-color:var(--tc); background:var(--tc-soft); color:inherit; text-decoration:none; }
.th-topbar-avatar {
  width:22px; height:22px;
  background:var(--tc-grad);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.55rem; font-weight:700;
}
.th-topbar-name { font-size:.775rem; font-weight:600; color:var(--th-text); padding-right:.125rem; }

/* ════════════════════════════════════════════════
   SIDEBAR MOBILE OPEN  –  restore full labels
════════════════════════════════════════════════ */
.sidebar-mobile-open .th-sidebar {
  width:220px;
  box-shadow:0 0 0 100vw rgba(0,0,0,.3);
  z-index:200;
}
.sidebar-mobile-open .th-logo-text,
.sidebar-mobile-open .th-nav-label,
.sidebar-mobile-open .th-nav-item span,
.sidebar-mobile-open .th-nav-badge,
.sidebar-mobile-open .th-nav-dot,
.sidebar-mobile-open .th-user-name,
.sidebar-mobile-open .th-user-role { display:flex !important; }
.sidebar-mobile-open .th-nav-item  { justify-content:flex-start; padding:.42rem 1rem; gap:.5rem; margin:1px .5rem; }
.sidebar-mobile-open .th-nav-item.active::before { display:block !important; }
.sidebar-mobile-open .th-user      { justify-content:flex-start; padding:.42rem .625rem; }
.th-perm-label { font-size:.8rem; color:var(--th-text-muted); }

/* ════════════════════════════════════════════════
   PAGINATION  –  Einheitliche Tabellennavigation
════════════════════════════════════════════════ */
.th-pagination {
  display:flex; align-items:center; justify-content:center;
  gap:.25rem;
  padding:.875rem 1.125rem;
  border-top:1px solid var(--th-divider-hard);
  flex-wrap:wrap;
}
.th-pagination-info {
  font-size:.72rem; color:var(--th-text-muted);
  text-align:center; width:100%;
  margin-bottom:.375rem;
}
.th-page-btn {
  min-width:32px; height:32px;
  padding:0 .375rem;
  border-radius:7px;
  border:1px solid var(--th-input-bd);
  background:var(--th-input-bg);
  color:var(--th-text-muted);
  font-size:.78rem; font-weight:500;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s;
  line-height:1;
}
.th-page-btn:hover:not(:disabled):not(.active) {
  background:var(--tc-soft); color:var(--tc); border-color:var(--tc);
}
.th-page-btn.active {
  background:var(--tc); color:#fff; border-color:var(--tc);
  font-weight:600; cursor:default;
}
.th-page-btn:disabled { opacity:.4; cursor:default; }
.th-page-ellipsis {
  font-size:.78rem; color:var(--th-text-faint);
  padding:0 .125rem; align-self:center;
}

/* ════════════════════════════════════════════════
   FILTER PANEL  –  thFilterPanel() / thSortableTable()
════════════════════════════════════════════════ */
.th-filter-bar {
  background:var(--th-card-bg);
  border:1px solid var(--th-border);
  border-radius:var(--th-radius-lg);
  overflow:hidden;
  margin-bottom:1rem;
}
.th-filter-bar.panel-overflow-visible { overflow:visible; }
.th-filter-bar-row {
  display:flex; align-items:center; gap:.625rem;
  padding:.75rem 1rem; flex-wrap:wrap;
}

.th-filter-search { position:relative; flex:1; min-width:200px; }
.th-filter-search .icon-search {
  position:absolute; left:.65rem; top:50%; transform:translateY(-50%);
  color:var(--th-text-faint); pointer-events:none;
}
.th-filter-search input { padding-left:2.1rem; padding-right:2.1rem; height:2.1rem; }
.th-filter-search-clear {
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  display:none; align-items:center; justify-content:center;
  width:1.3rem; height:1.3rem; border-radius:999px; border:none;
  background:none; color:var(--th-text-faint); cursor:pointer; padding:0;
}
.th-filter-search-clear:hover { background:var(--th-bg-soft); color:var(--th-text); }
.th-filter-search.has-value .th-filter-search-clear { display:flex; }

.th-filter-toggle {
  display:flex; align-items:center; gap:.4rem;
  height:2.1rem; padding:0 .8rem;
  border:1px solid var(--th-border);
  border-radius:var(--th-radius);
  background:var(--th-card-bg);
  font-size:.8rem; font-weight:500;
  cursor:pointer; color:var(--th-text);
  white-space:nowrap;
}
.th-filter-toggle:hover { border-color:var(--tc); color:var(--tc); }
.th-filter-toggle.is-open { background:var(--tc-soft); border-color:var(--tc); color:var(--tc-text); }
.th-filter-toggle .count {
  background:var(--tc); color:#fff;
  font-size:.68rem; font-weight:700;
  min-width:1.15rem; height:1.15rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  padding:0 .3rem; font-variant-numeric:tabular-nums;
}
.th-filter-toggle .count.zero { display:none; }
.th-filter-toggle .chevron { transition:transform .15s ease; display:flex; }
.th-filter-toggle.is-open .chevron { transform:rotate(180deg); }

.th-filter-chips { display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem .75rem; }
.th-filter-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--tc-soft); color:var(--tc-text);
  border-radius:999px; padding:.25rem .5rem .25rem .65rem;
  font-size:.74rem; font-weight:500;
}
.th-filter-chip button {
  background:none; border:none; cursor:pointer;
  color:var(--tc-text); opacity:.65; display:flex; padding:0;
}
.th-filter-chip button:hover { opacity:1; }

.th-filter-panel {
  max-height:0; overflow:hidden;
  transition:max-height .2s ease;
  border-top:1px solid transparent;
}
.th-filter-panel.is-open { max-height:400px; border-top-color:var(--th-border); }
.th-filter-panel.panel-overflow-visible { overflow:visible; }
.th-filter-panel-inner {
  padding:1rem;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1rem 1.25rem;
}
.th-filter-field label {
  display:block; font-size:.74rem; color:var(--th-text-muted);
  margin-bottom:.35rem; font-weight:500;
}
.th-filter-checkbox-group { display:flex; flex-direction:column; gap:.45rem; }
.th-filter-checkbox-group label {
  display:flex; align-items:center; gap:.45rem;
  font-size:.8rem; color:var(--th-text); font-weight:400; margin:0;
  cursor:pointer;
}
.th-filter-checkbox-group input { width:.95rem; height:.95rem; accent-color:var(--tc); }

.th-filter-multiselect { position:relative; }
.th-filter-multiselect-toggle {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  cursor:pointer; text-align:left;
}
.th-filter-multiselect-toggle:hover { border-color:var(--tc); }
.th-filter-multiselect-toggle span {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.th-filter-multiselect-toggle .chevron { transition:transform .15s ease; display:flex; flex-shrink:0; color:var(--th-text-faint); }
.th-filter-multiselect-toggle.is-open .chevron { transform:rotate(180deg); }
.th-filter-multiselect-dropdown {
  display:none;
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--th-card-bg); border:1px solid var(--th-border);
  border-radius:var(--th-radius); box-shadow:0 8px 30px rgba(0,0,0,.15);
  z-index:20; padding:.6rem .75rem;
  max-height:220px; overflow-y:auto;
}
.th-filter-multiselect-dropdown.is-open { display:flex; flex-direction:column; gap:.45rem; }
.th-filter-multiselect-dropdown label {
  display:flex; align-items:center; gap:.45rem;
  font-size:.8rem; color:var(--th-text); font-weight:400; margin:0;
  cursor:pointer;
}
.th-filter-multiselect-dropdown input { width:.95rem; height:.95rem; accent-color:var(--tc); flex-shrink:0; }

.th-filter-panel-footer {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.75rem 1rem;
  border-top:1px solid var(--th-border);
  background:var(--th-bg-soft);
}
.th-filter-panel-heading {
  font-size:.78rem; font-weight:600; color:var(--th-text);
  display:flex; align-items:center; gap:.4rem;
}
.th-filter-btn-group { display:flex; gap:.5rem; margin-left:auto; }

@media (prefers-reduced-motion: reduce) {
  .th-filter-panel, .th-filter-toggle .chevron { transition:none; }
}

/* Sortierbare Tabellen-Header – thSortableTable() */
.th-table th.sortable { cursor:pointer; user-select:none; }
.th-table th.sortable:hover { color:var(--tc); }
.th-table th.sortable .th-sort-wrap { display:inline-flex; align-items:center; gap:.3rem; }
.th-table th.sortable .caret { display:flex; opacity:0; transition:opacity .1s ease; }
.th-table th.sortable.is-active .caret { opacity:1; color:var(--tc); }
.th-table th.sortable.num { text-align:right; }
.th-table th.sortable.num .th-sort-wrap { justify-content:flex-end; }