/* ═══════════════════════════════════════════════════════════════════════════
   IIO PONYHOF — Fröhlich, Farbig, Echt
   
   "Wo Ponys galoppieren und Projekte laufen."
   
   Warme Sommer-Pastell-Energie. Wiesen, Blumen, Pferde.
   Nicht kindisch — verspielt und klar. Jede Farbe trägt.
   
   Farb-DNA:
   - Wiesen-Rosa   #b7266c  — Hauptakzent, Energie
   - Himmels-Blau  #5ba4d4  — Zweiter Akzent, Klarheit
   - Sonnen-Creme  #fff9f4  — Hintergrund
   - Sommer-Grün   #46b56c  — OK/Erfolg
   - Pastell-Lila  #9b7fd4  — Highlight
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  /* Markenpalette */
  --ph-rosa:       #b7266c;
  --ph-rosa-light: #e85898;
  --ph-rosa-soft:  #ffe0f1;
  --ph-blau:       #5ba4d4;
  --ph-gruen:      #46b56c;
  --ph-lila:       #9b7fd4;
  --ph-sonne:      #f5a623;
  --ph-creme:      #fff9f4;

  /* IIO Semantik-Tokens */
  --iio-bg:          #fff9f4;
  --iio-surface:     #ffffff;
  --iio-ink:         #3d2840;
  --iio-muted:       #7f5e8a;
  --iio-line:        #f0d4e8;
  --iio-accent:      #b7266c;
  --iio-accent-mid:  #e85898;
  --iio-accent-light:#ffe8f4;
  --iio-ok:          #46b56c;
  --iio-warn:        #e8a130;
  --iio-risk:        #e04060;
  --iio-thead-bg:    #fff0f8;
  --iio-tab-bg:      #ffecf6;
  --iio-shadow-md:   0 4px 16px rgba(183,38,108,0.10), 0 1px 4px rgba(0,0,0,0.05);
  --iio-r-md:        12px;
  --iio-r-lg:        18px;
  --iio-r-xl:        24px;

  /* Portal Bridge */
  --accent:          var(--iio-accent);
  --accent-fg:       #ffffff;
  --tenant-accent:   var(--iio-accent);
  --bg:              var(--iio-bg);
  --surface:         var(--iio-surface);
  --surface-2:       #fff0f8;
  --text:            var(--iio-ink);
  --text-1:          var(--iio-ink);
  --text-2:          #7f5e8a;
  --text-3:          #b090ba;
  --border:          #f0d4e8;
  --border-hover:    #e0a8cc;
  --green:           #46b56c;
  --amber:           #e8a130;
  --red:             #e04060;
}

/* ── Background — Sommer-Wiese, warm und leicht ─────────────────────────── */
html, body {
  background-color: var(--ph-creme);
  background-image:
    /* Zarte Blüten-Andeutung oben links */
    radial-gradient(circle at 8%  12%, rgba(183,38,108,0.08) 0%, transparent 28%),
    /* Himmels-Schimmer oben rechts */
    radial-gradient(circle at 92% 8%,  rgba(91,164,212,0.10) 0%, transparent 25%),
    /* Wiesen-Grün unten */
    radial-gradient(circle at 50% 100%, rgba(70,181,108,0.07) 0%, transparent 35%),
    linear-gradient(180deg, #fff9f4 0%, #fff5f0 100%);
  color: var(--iio-ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Header — frisch wie ein Sommertag ──────────────────────────────────── */
#app-header,
header {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.98) 0%,
    rgba(255,249,244,0.99) 100%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(
    90deg,
    rgba(183,38,108,0.15) 0%,
    rgba(183,38,108,0.5)  30%,
    rgba(232,88,152,0.8)  50%,
    rgba(183,38,108,0.5)  70%,
    rgba(183,38,108,0.15) 100%
  ) 1;
  position: relative;
  overflow: visible;
  box-shadow: 0 1px 0 rgba(183,38,108,0.06), 0 2px 8px rgba(0,0,0,0.04);
}

/* Lebendige Blüten-Linie am Header-Rand */
#app-header::before,
header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(91,164,212,0.0)  0%,
    rgba(91,164,212,0.6)  10%,
    rgba(183,38,108,0.9)  30%,
    rgba(232,88,152,1.0)  50%,
    rgba(183,38,108,0.9)  70%,
    rgba(155,127,212,0.6) 90%,
    rgba(155,127,212,0.0) 100%
  );
  box-shadow:
    0 0 6px  rgba(183,38,108,0.4),
    0 0 14px rgba(183,38,108,0.2);
  animation: ph-rainbow-shift 6s ease-in-out infinite;
  z-index: 10;
}

@keyframes ph-rainbow-shift {
  0%,100% { opacity: 0.9; filter: hue-rotate(0deg); }
  33%      { opacity: 1.0; filter: hue-rotate(20deg); }
  66%      { opacity: 0.95; filter: hue-rotate(-15deg); }
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #fff9f4 100%);
  border-right: 1px solid #f0d4e8;
}

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

.nav-item:hover {
  background: rgba(183,38,108,0.08);
  color: var(--ph-rosa);
}

.nav-item.active {
  background: rgba(183,38,108,0.12);
  color: var(--ph-rosa);
  border-left: 2px solid var(--ph-rosa);
  font-weight: 600;
}

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

/* Kleines Huf-Easter-Egg ganz unten */
#sidebar::after {
  content: '🐴';
  display: block;
  text-align: center;
  font-size: 14px;
  padding: 8px 0 6px;
  opacity: 0.15;
  pointer-events: none;
}

/* ── Cards / Panels ──────────────────────────────────────────────────────── */
.iio-card, .card, .pnl {
  background: #ffffff;
  border: 1px solid #f0d4e8;
  border-radius: var(--iio-r-lg);
  box-shadow: var(--iio-shadow-md);
}

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

/* Tenant-Cards */
.tenant-card {
  background: #ffffff;
  border: 1px solid #f0d4e8;
  border-radius: var(--iio-r-lg);
}

.tenant-card:hover {
  border-color: rgba(183,38,108,0.4);
  box-shadow: 0 6px 24px rgba(183,38,108,0.12), 0 2px 6px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.iio-btn-primary {
  background: var(--ph-rosa) !important;
  color: #ffffff !important;
  border-color: #9a1d5a !important;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(183,38,108,0.25);
}

.iio-btn-primary:hover {
  background: #d42d7f !important;
  box-shadow: 0 4px 14px rgba(183,38,108,0.35) !important;
  transform: translateY(-1px);
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.iio-input, input, select, textarea {
  background: #ffffff !important;
  border-color: #f0d4e8 !important;
  color: var(--iio-ink) !important;
  border-radius: 10px;
}

.iio-input:focus, input:focus, select:focus {
  border-color: var(--ph-rosa) !important;
  box-shadow: 0 0 0 3px rgba(183,38,108,0.12) !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.people-table thead th,
thead th {
  background: #fff0f8;
  color: #7f5e8a;
  border-bottom: 1px solid #f0d4e8;
}

.people-tr:hover td,
tbody tr:hover td {
  background: rgba(183,38,108,0.04);
}

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

.people-group-badge {
  background: rgba(183,38,108,0.08);
  color: var(--ph-rosa);
  border: 1px solid rgba(183,38,108,0.2);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 10px;
}

.people-avatar {
  background: var(--ph-rosa) !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* ── Code ────────────────────────────────────────────────────────────────── */
code, kbd {
  background: #fff0f8;
  color: var(--ph-rosa);
  border: 1px solid #f0d4e8;
  border-radius: 5px;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a       { color: var(--ph-rosa); }
a:hover { color: #e85898; text-decoration: underline; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: #fff5f0; }
::-webkit-scrollbar-thumb { background: #f0c8e0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(183,38,108,0.3); }

/* ── Selection ───────────────────────────────────────────────────────────── */
::selection { background: rgba(183,38,108,0.15); color: var(--iio-ink); }

/* ── HITL Gates ──────────────────────────────────────────────────────────── */
.iio-gate-icon.pending {
  background: rgba(245,166,35,0.10);
  border-color: rgba(245,166,35,0.35);
}
.hitl-btn.approve {
  background: rgba(70,181,108,0.10);
  border-color: rgba(70,181,108,0.3);
  color: #46b56c;
}
.hitl-btn.reject {
  background: rgba(183,38,108,0.08);
  border-color: rgba(183,38,108,0.25);
  color: var(--ph-rosa);
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tenant-card:hover { transform: none; }
  .iio-btn-primary:hover { transform: none; }
  #app-header::before,
  header::before { animation: none; opacity: 0.7; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #sidebar::after { display: none; }
}