/* OpsDeck360 – Calm/Clarity UI Override (Demo + Live)
   Nur Optik: ruhigere Schrift, klarere Buttons, bessere Lesbarkeit */

:root{
  --od-text: #e7edf6;
  --od-text-soft: #b7c3d2;
  --od-text-muted: #93a4b8;

  --od-line: rgba(255,255,255,.10);
  --od-line-2: rgba(255,255,255,.14);

  --od-bg-soft: rgba(255,255,255,.03);
  --od-bg-soft-2: rgba(255,255,255,.05);

  --od-primary: rgba(44,114,255,.22);
  --od-primary-line: rgba(90,140,255,.45);

  --od-focus: rgba(92,224,194,.45);
}

/* Grundschrift ruhiger */
html, body{
  color: var(--od-text);
  font-family: "Segoe UI Variable", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.42;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Überschriften */
h1,h2,h3,h4{
  color: #f4f7fb;
  letter-spacing: -0.012em;
  line-height: 1.12;
  font-weight: 700;
}
h5,h6{
  color: #f0f4fa;
  font-weight: 600;
}

/* Fließtext / Labels / Hinweise */
p, li, label, small, .muted, .subtle, .hint, .help-text{
  color: var(--od-text-soft);
  line-height: 1.45;
}

/* Panels/Karten/Container allgemein beruhigen */
.card, .panel, .box, .tile, .dialog, .modal-content,
[class*="card"], [class*="panel"], [class*="tile"], [class*="box"]{
  border-color: var(--od-line) !important;
}

/* Upload-/Infobereich (greift nur wenn vorhanden) */
.demo-upload-box,
.demo-kunde-upload-box,
.upload-panel,
.upload-box,
.info-box,
.help-box{
  background: rgba(255,255,255,.02);
  border: 1px solid var(--od-line) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}

.demo-upload-box .row,
.demo-kunde-upload-box .row{
  gap: 10px !important;
  align-items: center;
}

/* Buttons allgemein */
button, .btn{
  font-family: inherit;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  border-radius: 10px !important;
  border: 1px solid var(--od-line-2) !important;
  background: rgba(255,255,255,.04);
  color: #eaf0f7 !important;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}

button:hover, .btn:hover{
  background: rgba(255,255,255,.07);
}
button:active, .btn:active{
  transform: translateY(1px);
}

/* Fokus sichtbar */
button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--od-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(92,224,194,.12);
}

/* Primär-Buttons stärker hervorheben (Datei laden / wichtige Aktionen) */
#demoKundeLoadBtn,
.btn-primary,
button[data-role="primary"],
button.primary{
  background: linear-gradient(180deg, rgba(44,114,255,.24), rgba(44,114,255,.12)) !important;
  border-color: var(--od-primary-line) !important;
  box-shadow: 0 0 0 1px rgba(90,140,255,.12) inset;
}

/* Sekundäraktionen (Template, Startseite, Reset etc.) dezenter */
#demoKundeTemplateBtn,
#demoKundeCsvTemplateBtn,
#demoKundeResetBtn,
#demoKundeHomeBtn,
#demoKundePickBtn,
.btn-secondary,
.btn-ghost{
  background: rgba(255,255,255,.03) !important;
}

/* Eingabefelder / Selects */
input, select, textarea{
  color: var(--od-text) !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
}

input::placeholder, textarea::placeholder{
  color: var(--od-text-muted) !important;
}

/* Natives Dateifeld (soweit möglich) */
input[type="file"]{
  padding: 6px 8px;
  background: rgba(255,255,255,.02);
}
input[type="file"]::file-selector-button{
  border: 1px solid var(--od-line-2);
  background: rgba(255,255,255,.06);
  color: var(--od-text);
  border-radius: 8px;
  padding: 6px 10px;
  margin-right: 10px;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover{
  background: rgba(255,255,255,.10);
}

/* Tabellen – größerer Lesbarkeitshebel */
table{
  color: var(--od-text);
  border-color: var(--od-line);
}

th, td{
  border-color: var(--od-line) !important;
  vertical-align: middle;
}

th{
  color: #eef3fa;
  background: rgba(255,255,255,.03);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none !important;
}

td{
  color: var(--od-text-soft);
  font-weight: 400;
}

tbody tr:nth-child(even){
  background: rgba(255,255,255,.012);
}
tbody tr:hover{
  background: rgba(255,255,255,.028);
}

/* Badges / Chips / Pills */
.badge, .pill, .chip, .tag{
  border: 1px solid var(--od-line) !important;
  color: var(--od-text) !important;
  font-weight: 600;
}

/* Kurzanleitung/Hinweisboxen */
.demo-help, .demo-guide, .quick-guide, .kurzanleitung{
  color: var(--od-text-soft);
}
.demo-help strong, .demo-guide strong, .quick-guide strong, .kurzanleitung strong{
  color: #f2f6fb;
}

/* Trennlinien */
hr, .divider, [class*="divider"]{
  border-color: var(--od-line) !important;
  opacity: 1;
}

/* Links */
a{
  color: #d8f6ef;
}
a:hover{
  color: #effffd;
  text-decoration-thickness: 2px;
}

/* Header-Leiste/Pills oben (falls vorhanden) etwas ruhiger */
header .pill, header .chip, .topbar .pill, .topbar .chip{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Optional: etwas größere Grundschrift auf Desktop */
@media (min-width: 1100px){
  html, body{ font-size: 15.5px; }
}