/* ═══════════════════════════════════════════════════════════════════════════
   IIO BALKANGRILL — Warm, Regional, Einladend
   
   "Dobrodošli. Setz di. Schaff was."
   
   Eine Werkstatt, ein Grill, ein Treffpunkt. Wer herkommt bleibt.
   Kein Kitsch — echter Charakter. Glut, Holz, Gemeinschaft.
   
   Farb-DNA:
   - Glut-Orange   #c0501a  — lebendige Flamme, Akzent
   - Rauch-Dunkel  #1c1208  — tiefer Hintergrund
   - Holzkohle     #2a1c0e  — Oberflächen
   - Sahne-Weiß    #f5ede0  — warmer Text
   - Grünkraut     #4a7c3f  — OK/Erfolg, wie frische Kräuter
   
   Hell-Variante verfügbar via [data-theme="light"]
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('../../../b2b/solution-provider/assets/style.css');

/* ── DARK (Standard) ─────────────────────────────────────────────────────── */
:root {
  /* Markenpalette */
  --bg-glut:         #c0501a;
  --bg-glut-dark:    #963d12;
  --bg-glut-glow:    rgba(192, 80, 26, 0.4);
  --bg-holz:         #2a1c0e;
  --bg-nacht:        #1c1208;
  --bg-rauch:        #0e0905;
  --bg-sahne:        #f5ede0;
  --bg-krauter:      #4a7c3f;

  /* IIO Semantik-Tokens */
  --iio-bg:          #1c1208;
  --iio-surface:     #2a1c0e;
  --iio-ink:         #f5ede0;
  --iio-muted:       #c4a882;
  --iio-line:        #3d2910;
  --iio-accent:      #c0501a;
  --iio-accent-mid:  #e06820;
  --iio-accent-light:#2d1408;
  --iio-ok:          #4a7c3f;
  --iio-warn:        #c98a2c;
  --iio-risk:        #b43030;
  --iio-thead-bg:    #231508;
  --iio-tab-bg:      #200f04;
  --iio-shadow-md:   0 6px 20px rgba(0,0,0,0.55);
  --iio-r-md:        10px;
  --iio-r-lg:        14px;

  /* Portal Bridge */
  --accent:          var(--iio-accent);
  --accent-fg:       #fff8f2;
  --tenant-accent:   var(--iio-accent);
  --bg:              var(--iio-bg);
  --surface:         var(--iio-surface);
  --surface-2:       #321c0a;
  --text:            var(--iio-ink);
  --text-1:          var(--iio-ink);
  --text-2:          #c4a882;
  --text-3:          #8a6845;
  --border:          #3d2910;
  --border-hover:    #5a3f1a;
  --green:           #4a7c3f;
  --amber:           #c98a2c;
  --red:             #b43030;
}

/* ── LIGHT ───────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --iio-bg:          #fdf6ee;
  --iio-surface:     #ffffff;
  --iio-ink:         #1c1208;
  --iio-muted:       #6b4c2c;
  --iio-line:        #e8d5bc;
  --iio-accent:      #c0501a;
  --iio-accent-mid:  #e06820;
  --iio-accent-light:#fceee3;
  --iio-thead-bg:    #f5ede0;
  --iio-tab-bg:      #fdf0e4;
  --iio-shadow-md:   0 4px 14px rgba(60,30,10,0.10);

  --bg:              #fdf6ee;
  --surface:         #ffffff;
  --surface-2:       #f5ede0;
  --text:            #1c1208;
  --text-1:          #1c1208;
  --text-2:          #6b4c2c;
  --text-3:          #a07850;
  --border:          #e8d5bc;
  --border-hover:    #c9a880;
  --accent-fg:       #ffffff;
}

/* ── Background — warme Dunkelheit mit Glut-Schimmer ────────────────────── */
html, body {
  background-color: var(--iio-bg);
  background-image:
    radial-gradient(ellipse at 15% 0%,   rgba(192,80,26,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 100%, rgba(192,80,26,0.07) 0%, transparent 40%),
    linear-gradient(160deg, #1c1208 0%, #201508 50%, #1c0e04 100%);
  color: var(--iio-ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

[data-theme="light"] body,
[data-theme="light"] html {
  background-color: #fdf6ee;
  background-image:
    radial-gradient(ellipse at 5% 0%, rgba(192,80,26,0.06) 0%, transparent 35%),
    linear-gradient(180deg, #fdf6ee 0%, #fdf0e4 100%);
}

/* ── Header — Grill-Kante mit Glut-Linie ────────────────────────────────── */
#app-header,
header {
  background: linear-gradient(180deg,
    rgba(42, 28, 14, 0.98) 0%,
    rgba(28, 18, 8, 0.99)  100%);
  border-bottom: 1px solid rgba(192, 80, 26, 0.3);
  position: relative;
  overflow: visible;
}

[data-theme="light"] #app-header,
[data-theme="light"] header {
  background: linear-gradient(180deg, #ffffff 0%, #fdf6ee 100%);
  border-bottom: 1px solid rgba(192, 80, 26, 0.25);
}

/* Glut-Linie am unteren Rand — wie Kohlenglut im Grill */
#app-header::before,
header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent      0%,
    rgba(192,80,26,0.4) 15%,
    rgba(224,104,32,0.9) 40%,
    rgba(255,140,60,1.0) 50%,
    rgba(224,104,32,0.9) 60%,
    rgba(192,80,26,0.4) 85%,
    transparent      100%
  );
  box-shadow:
    0 0 6px  rgba(224,104,32,0.7),
    0 0 16px rgba(192,80,26,0.4),
    0 0 30px rgba(192,80,26,0.2);
  animation: bg-grill-pulse 4s ease-in-out infinite;
  z-index: 10;
}

@keyframes bg-grill-pulse {
  0%,100% { opacity: 0.85; }
  50%      { opacity: 1.0; box-shadow: 0 0 8px rgba(224,104,32,0.9), 0 0 20px rgba(192,80,26,0.5), 0 0 40px rgba(192,80,26,0.25); }
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar {
  background: linear-gradient(180deg,
    rgba(42,28,14,0.98) 0%,
    rgba(28,18,8,0.99)  100%);
  border-right: 1px solid rgba(61,41,16,0.8);
}

[data-theme="light"] #sidebar {
  background: #fdf6ee;
  border-right: 1px solid #e8d5bc;
}

.nav-item {
  color: #c4a882;
  border-radius: 7px;
  transition: background 100ms, color 100ms;
}

.nav-item:hover {
  background: rgba(192,80,26,0.12);
  color: var(--bg-glut);
}

.nav-item.active {
  background: rgba(192,80,26,0.18);
  color: var(--bg-glut);
  border-left: 2px solid var(--bg-glut);
  font-weight: 600;
}

.nav-section-label {
  color: #8a6845;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Cards / Panels ──────────────────────────────────────────────────────── */
.iio-card, .card, .pnl {
  background: rgba(42,28,14,0.92);
  border: 1px solid rgba(61,41,16,0.9);
  border-radius: var(--iio-r-md);
  box-shadow: var(--iio-shadow-md);
}

.iio-card:hover, .card:hover {
  border-color: rgba(192,80,26,0.35);
  box-shadow: var(--iio-shadow-md), 0 0 0 1px rgba(192,80,26,0.08);
}

[data-theme="light"] .iio-card,
[data-theme="light"] .card,
[data-theme="light"] .pnl {
  background: #ffffff;
  border-color: #e8d5bc;
  box-shadow: 0 2px 10px rgba(60,30,10,0.08);
}

/* Tenant-Cards */
.tenant-card {
  background: rgba(42,28,14,0.92);
  border: 1px solid rgba(61,41,16,0.8);
  border-radius: var(--iio-r-md);
}

.tenant-card:hover {
  border-color: rgba(192,80,26,0.4);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(192,80,26,0.1);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.iio-btn-primary {
  background: var(--bg-glut) !important;
  color: #fff8f2 !important;
  border-color: var(--bg-glut-dark) !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 10px rgba(192,80,26,0.2);
}

.iio-btn-primary:hover {
  background: #d45f22 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 18px rgba(192,80,26,0.3) !important;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.iio-input, input, select, textarea {
  background: rgba(28,18,8,0.9) !important;
  border-color: rgba(61,41,16,0.9) !important;
  color: var(--iio-ink) !important;
  border-radius: 7px;
}

.iio-input:focus, input:focus, select:focus {
  border-color: var(--bg-glut) !important;
  box-shadow: 0 0 0 3px rgba(192,80,26,0.15) !important;
}

[data-theme="light"] .iio-input,
[data-theme="light"] input,
[data-theme="light"] select {
  background: #ffffff !important;
  border-color: #e8d5bc !important;
  color: #1c1208 !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.people-table thead th,
thead th {
  background: rgba(35,21,8,0.9);
  color: #c4a882;
  border-bottom: 1px solid rgba(61,41,16,0.9);
}

.people-tr:hover td,
tbody tr:hover td {
  background: rgba(192,80,26,0.06);
}

/* ── Badges / Status ─────────────────────────────────────────────────────── */
.people-status-active  { color: var(--bg-krauter); font-weight: 600; }
.people-status-invited { color: var(--bg-glut);    font-weight: 600; }
.people-role-operator  { color: var(--bg-glut);    font-weight: 700; }

.people-group-badge {
  background: rgba(61,41,16,0.8);
  color: #c4a882;
  border: 1px solid rgba(90,60,25,0.6);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
}

.people-avatar {
  background: var(--bg-glut) !important;
  color: #fff8f2 !important;
  font-weight: 700;
}

/* ── Code ────────────────────────────────────────────────────────────────── */
code, kbd {
  background: rgba(35,21,8,0.8);
  color: var(--bg-glut);
  border: 1px solid rgba(61,41,16,0.8);
  border-radius: 4px;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a       { color: var(--bg-glut); }
a:hover { color: #e06820; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: rgba(28,18,8,0.5); }
::-webkit-scrollbar-thumb { background: rgba(61,41,16,0.9); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(192,80,26,0.35); }

/* ── Selection ───────────────────────────────────────────────────────────── */
::selection { background: rgba(192,80,26,0.25); color: var(--bg-sahne); }

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #app-header::before,
  header::before {
    animation: none;
    opacity: 0.7;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #app-header::before,
  header::before { height: 1px; }
}