/* Hospibold Design System (neutral default) */
:root{
  /* Typography */
  --font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-size: 16px;

  /* Colors (neutral) */
  --bg: #f6f7f8;
  --panel: #ffffff;
  --text: #111111;
  --muted: #555555;
  --border: #dddddd;

  /* Accent */
  --accent: #0b57d0;
  --link: var(--accent);

  --ok-bg: #e6ffea;
  --err-bg: #ffe5e5;

  /* Layout */
  --gap: 14px;
  --radius: 10px;
  --pad: 12px;
}

/* page base */
html, body { height: 100%; }
body{
  margin: 18px;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--text);
  background: var(--bg);
}

/* links */
a{ color: var(--link); }
a:hover{ opacity: 0.9; }

/* grid layout */
.grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--gap);
  min-height: calc(100vh - 36px);
}
.cell{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
  background: var(--panel);
}

/* brand box */
.brand h1{ margin:0; font-size:22px; }
.brand .tenant{ margin-top:4px; color:var(--muted); font-size:13px; }
.brand .user{ margin-top:10px; color:var(--text); font-size:13px; }

/* menu */
.menu a{
  display:block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration:none;
  color: var(--text);
}
.menu a:hover{ background: #f2f2f2; }
.menu .sep{ margin: 10px 0; border-top: 1px solid var(--border); }

/* breadcrumb */
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crumbs a{ color: var(--link); text-decoration:none; }
.crumbs span{ color: var(--muted); }

/* messages */
.msg{ padding:10px; border-radius:8px; margin:10px 0; }
.msg.err{ background: var(--err-bg); }
.msg.ok{ background: var(--ok-bg); }

/* form controls */
label{ display:block; margin:10px 0 4px; }
input, select, textarea{
  padding:8px;
  width:100%;
  max-width: 520px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
input:focus, select:focus, textarea:focus{
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-color: var(--accent);
}
small{ color: var(--muted); display:block; margin-top:6px; }

/* table */
table{ border-collapse:collapse; width:100%; }
th, td{ border:1px solid var(--border); padding:8px; vertical-align:top; }

/* buttons */
button{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}
button:hover{ background:#f6f6f6; }

/* helpers */
code{ background:#f3f3f3; padding:2px 6px; border-radius:6px; }
.hint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-left:6px;
  border:1px solid #bbb;
  border-radius:999px;
  font-size:12px;
  cursor:help;
  user-select:none;
}

/* --- Hospibold UI variables (user configurable) --- */
body{
  font-size: var(--font-size, 16px);
  color: var(--text, #1F2328);
  background: var(--page-bg, #F3F4F6);
}

a{ color: var(--accent, #0B57D0); }

.cell{
  background: var(--panel-bg, #FFFFFF);
}

/* --- Hospibold UI variables (user configurable) --- */
body{
  font-size: var(--font-size, 16px);
  color: var(--text, #1F2328);
  background: var(--page-bg, #F3F4F6);
}

a{ color: var(--accent, #0B57D0); }

.cell{
  background: var(--panel-bg, #FFFFFF);
}


/* === Hospibold: theme fixes (targeted, no overreach) === */

/* Grundfarben bleiben variabel */
body{
  color: var(--text, #1F2328);
  background: var(--page-bg, #F3F4F6);
}
.cell{
  background: var(--panel-bg, #FFFFFF);
  color: var(--text, #1F2328);
}

/* Normale Links dürfen Akzentfarbe haben */
a{ color: var(--accent, #0B57D0); }

/* ABER: “Button-Links” sollen Schriftfarbe behalten (nicht Akzent) */
.iconbtn,
.iconbtn:visited,
.pill,
.pill:visited,
.th-sortlink,
.th-sortlink:visited,
.thgear,
.thgear:visited,
.thgearcol,
.thgearcol:visited{
  color: var(--text, #1F2328) !important;
  text-decoration: none;
}

/* Aktive Zustände weiter über Rahmen/Border zeigen, nicht über Textfarbe */
.iconbtn.active,
.pill.active{
  border-color: var(--accent, #0B57D0) !important;
}

/* Breadcrumb immer in Schriftfarbe, Links darin weiter Akzent */
.crumbs, .crumbs span{ color: var(--text, #1F2328) !important; }
.crumbs a{ color: var(--accent, #0B57D0) !important; }

/* Inputs sollen Panel-Farbe haben (oder minimal heller) */
input, select, textarea{
  color: var(--text, #1F2328);
  background: var(--panel-bg, #FFFFFF);
}
/* wenn color-mix verfügbar ist, minimal heller – sonst bleibt panel-bg */
@supports (background: color-mix(in srgb, white 10%, black)) {
  input, select, textarea{
    background: color-mix(in srgb, var(--panel-bg, #FFFFFF) 92%, white 8%);
  }
}

/* Spezifisch für Suchfelder/Spaltenfilter */
.search,
.colfilter{
  background: var(--panel-bg, #FFFFFF) !important;
}

/* Sticky Header soll nicht hartweiß sein, sondern Panel-Farbe */
.stickyHeader{
  background: var(--panel-bg, #FFFFFF) !important;
}

/* Tabellenkopf-Hintergrund (sonst wirkt es “fremd” bei dunklen Themes) */
.head-table th{
  background: var(--panel-bg, #FFFFFF) !important;
}

/* Logout-Button: Text nicht schwarz erzwingen, sondern Schriftfarbe */
.menu button{
  color: var(--text, #1F2328) !important;
}


/* === Fix: Sort-Icons + Sort-Badge + Logout-Button === */

/* Sortiersymbole (unsortiert) + Badge sollen immer Schriftfarbe haben */
.sort-icon,
.sort-icon.active,
.sort-badge{
  color: var(--text, #1F2328) !important;
  opacity: .75; /* unsortiert wirkt etwas “leiser” */
}
.sort-icon.active{
  opacity: 1;
}

/* Logout-Button im Menü transparent wie die anderen Controls */
.menu form.inline button,
.menu button{
  background: transparent !important;
}


/* === Auto-muted from --text === */
/* Ziel: "muted" wird aus der Textfarbe abgeleitet (nicht extra konfigurierbar) */
@supports (color: color-mix(in srgb, black 50%, white)) {
  :root{
    /* 65% Text + 35% transparent -> wirkt wie "heller/abgeschwächt" */
    --muted: color-mix(in srgb, var(--text, #1F2328) 75%, transparent 25%);
  }
}

/* Wo immer wir "muted" wollen, verwenden wir --muted */
.muted, small, .hint, .sort-badge{
  color: var(--muted, var(--text, #1F2328)) !important;
  opacity: 1 !important; /* opacity nicht zusätzlich, sonst doppelt "ausgegraut" */
}

/* Optional: unsortierte Sort-Icons ebenfalls muted */
.sort-icon{
  color: var(--muted, var(--text, #1F2328)) !important;
  opacity: 1 !important;
}


/* Ensure tenant line is visible */
.brand .tenant{
  display:block !important;
  visibility: visible !important;
  height: auto !important;
  opacity: 1 !important;
}


/* === Hospibold Theme Consolidation (derived scales) === */
body{
  background: var(--page-bg, var(--bg, #F3F4F6));
  color: var(--text, #1F2328);
  font-size: var(--font-size, 16px);
}

.cell{
  background: var(--panel-bg, var(--panel, #FFFFFF));
}

/* Breadcrumb etwas kleiner (ableitbar) */
.crumbs{
  font-size: calc(var(--font-size, 16px) * var(--crumb-scale, 0.85));
}

/* Sidebar / Topbar Typography (ableitbar) */
.menu a,
.sidenav a{
  font-size: calc(var(--font-size, 16px) * var(--nav-scale, 1));
}

.topbar,
.topbar a,
.topnav a{
  font-size: calc(var(--font-size, 16px) * var(--topbar-scale, 1));
}

/* Buttons */
button,
.iconbtn,
.pill{
  font-size: calc(var(--font-size, 16px) * var(--button-scale, 1));
}

/* Eingabefelder sollen panel-like sein (oder leicht heller) */
input, select, textarea{
  background: var(--panel-bg, var(--panel, #FFFFFF));
  color: var(--text, #1F2328);
}

/* Logout im Menü: transparent wie gewünscht */
.menu form.inline button,
.menu button{
  background: transparent;
}

/* === Inputs: leicht heller als panel-bg (Theme-sicher, auch bei dunklen Farben) === */
input, select, textarea{
  /* 6% Weiß-Overlay auf panel-bg */
  background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
              var(--panel-bg, var(--panel, #FFFFFF));
  color: var(--text, #1F2328);
  border-color: var(--border, rgba(0,0,0,0.12));
}

input::placeholder, textarea::placeholder{
  color: var(--muted, rgba(0,0,0,0.55));
}

/* ======================================================================
   Hospibold Theme Overrides (central, consistent)
   Uses: --text --muted --border --panel-bg --page-bg --accent --text-rgb
   ====================================================================== */

/* Base */
html, body{
  color: var(--text, #1F2328);
  background: var(--page-bg, #F3F4F6);
}

/* Links: Accent, aber nicht “alles” */
a{
  color: var(--accent, #0B57D0);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

/* Panels / Boxes */
.cell{
  background: var(--panel-bg, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 14px;
  padding: 12px;
  box-sizing: border-box;
}

/* Headlines should be text-colored */
h1,h2,h3,h4,h5,h6{
  color: var(--text, #1F2328);
}

/* Breadcrumbs / muted */
.crumbs, .muted, .sep, .tenant, .user small{
  color: var(--muted, rgba(0,0,0,0.55));
}

/* Sidebar / Topbar should keep readable contrast */
.sidebar, .topbar{
  color: var(--text, #1F2328);
}
.topbar a{
  color: var(--text, #1F2328);
}
.topbar a:hover{
  color: var(--accent, #0B57D0);
  text-decoration: none;
}

/* Buttons / Icon Buttons */
button, .btn, .iconbtn, .pill{
  color: var(--text, #1F2328);
  background: transparent;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 12px;
}

button:hover, .btn:hover, .iconbtn:hover, .pill:hover{
  background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
              var(--panel-bg, #FFFFFF);
}

.iconbtn.active, .pill.active, .btn.primary{
  border-color: var(--accent, #0B57D0);
}

/* Disabled */
.disabled, .pill.disabled, .iconbtn.disabled{
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* Forms: use “panel-bg slightly lighter” rule */
input, select, textarea{
  background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
              var(--panel-bg, var(--panel, #FFFFFF));
  color: var(--text, #1F2328);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 12px;
  padding: 8px 10px;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--accent, #0B57D0);
  box-shadow: 0 0 0 3px rgba(var(--text-rgb,31,35,40), 0.06);
}
input::placeholder, textarea::placeholder{
  color: var(--muted, rgba(0,0,0,0.55));
}

/* Messages */
.msg{
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  background: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)),
              var(--panel-bg, #FFFFFF);
  border-radius: 12px;
  padding: 10px 12px;
}
.msg.ok{ border-color: rgba(0,128,0,0.25); }
.msg.err{ border-color: rgba(180,0,0,0.25); }

/* Tables */
table{
  color: var(--text, #1F2328);
}
th, td{
  border-color: var(--border, rgba(0,0,0,0.12));
}
thead th{
  color: var(--text, #1F2328); /* IMPORTANT: not accent */
}

/* Members list specifics: keep sticky header theme-consistent */
.stickyHeader{
  background: var(--panel-bg, #FFFFFF);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.12));
}

/* Sort controls should be text-colored, not accent */
.sort-icon,
.sort-badge{
  color: var(--text, #1F2328) !important;
  opacity: .75;
}
.sort-icon.active{
  opacity: 1;
}

/* Column filter clear buttons */
.colclear{
  background: transparent;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  color: var(--text, #1F2328);
}
.colclear:hover{
  background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
              var(--panel-bg, #FFFFFF);
}

/* Tooltips */
.tip:hover::after{
  color: var(--text, #1F2328);
  background: var(--panel-bg, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
}

/* Logout button in sidebar should be transparent like others */
.sidebar form.inline button{
  width: 100%;
  background: transparent;
}

.form{
  display: flex;
  flex-direction: column;
  gap: 6px;              /* Abstand zwischen allen Kindern */
  align-items: flex-start; /* verhindert, dass der Button 100% breit wird */
}