/* ════════════════════════════════════════════════════════════════════
   iC Consult Theme — basierend auf dem offiziellen iCC Brand Guide
   Farben: Dark Blue #004159, Green #84BD00, Blue #60C0DD, Pink #E5497C
   Schrift: Titillium Web
   ════════════════════════════════════════════════════════════════════ */

/* Titillium Web — lokal eingebunden, kein Google Fonts CDN */
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Titillium Web';
  src: url('fonts/TitilliumWeb-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.theme-icc {
  --bg:          #E3E6E6;
  --surface:     #FFFFFF;
  --surface-2:   #F0F2F2;
  --surface-3:   #E8EBEB;
  --border:      #D0D3D3;
  --border-2:    #B0B3B3;
  --text:        #636362;
  --text-muted:  #939598;
  --text-dim:    #B0B3B3;

  /* iCC Akzentfarben */
  --blue:        #60C0DD;
  --green:       #84BD00;
  --red:         #E5497C;
  --purple:      #AA4899;
  --teal:        #60C0DD;
  --yellow:      #84BD00;
  --orange:      #E5497C;
  --indigo:      #AA4899;
  --cyan:        #60C0DD;
  --warn-border: #E8931E;

  --priority-critical: #E5497C;
  --priority-high:     #AA4899;
  --priority-medium:   #60C0DD;
  --priority-low:      #84BD00;

  font-family: 'Titillium Web', 'Segoe UI', Arial, sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────── */
body.theme-icc .header {
  background: #004159;
  border-bottom: none;
}
body.theme-icc .header-title,
body.theme-icc #project-name      { color: #FFFFFF; }
body.theme-icc #app-version        { color: rgba(255,255,255,.5); }
body.theme-icc .conn-status,
body.theme-icc .meta-item          { color: rgba(255,255,255,.7); }
/* Nur im Header: weiße Icon-Farbe (dunkler Hintergrund) */
body.theme-icc .header .btn-icon       { color: rgba(255,255,255,.8); border-color: transparent; }
body.theme-icc .header .btn-icon:hover { background: rgba(255,255,255,.1); }
/* Modal + Rest: dunkle Icon-Farbe passend zum hellen Hintergrund */
body.theme-icc .modal .btn-icon        { color: #636362; }
body.theme-icc .modal .btn-icon:hover  { background: #F0F2F2; }
body.theme-icc .header .project-select {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
body.theme-icc #report-month-select,
body.theme-icc #history-days {
  background: #F0F2F2;
  border-color: #D0D3D3;
  color: #636362;
}
body.theme-icc .view-tabs          { background: rgba(0,0,0,.2); }
body.theme-icc .view-tab           { color: rgba(255,255,255,.7); }
body.theme-icc .view-tab.active    { background: rgba(255,255,255,.15); color: #fff; }

/* ── KPI Cards ───────────────────────────────────────────────────── */
body.theme-icc .kpi-card {
  background: #FFFFFF;
  border-color: #D0D3D3;
  box-shadow: 0 1px 4px rgba(0,65,89,.08);
}
body.theme-icc .kpi-card:hover       { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,65,89,.12); }
body.theme-icc .kpi-value            { color: #004159; }
body.theme-icc .kpi-label            { color: #939598; }
body.theme-icc .kpi-sub              { color: #939598; }
/* Kachel-Status: explizite Border-Farben (höhere Spezifizität als .kpi-card) */
body.theme-icc .kpi-card.status--warn { border: 2px solid #AA4899; }
body.theme-icc .kpi-card.status--bad  { border: 2px solid #E5497C; }

/* Service Health Kachel — iCC Farben */
body.theme-icc #card-health.status--good {
  border-left-color: #84BD00;
  background: rgba(132,189,0,.10);
}
body.theme-icc #card-health.status--warn {
  border-left-color: #AA4899;
  background: rgba(170,72,153,.10);
}
body.theme-icc #card-health.status--bad {
  border-left-color: #E5497C;
  background: rgba(229,73,124,.10);
}
body.theme-icc #card-health.status--good .health-status-line { color: #84BD00; }
body.theme-icc #card-health.status--good .health-status-line::before { background: #84BD00; }
body.theme-icc #card-health.status--warn .health-status-line { color: #AA4899; }
body.theme-icc #card-health.status--warn .health-status-line::before { background: #AA4899; }
body.theme-icc #card-health.status--bad  .health-status-line { color: #E5497C; }
body.theme-icc #card-health.status--bad  .health-status-line::before { background: #E5497C; }

body.theme-icc .kpi-icon--blue   { background: rgba(96,192,221,.12); color: #60C0DD; }
body.theme-icc .kpi-icon--green  { background: rgba(132,189,0,.12);  color: #84BD00; }
body.theme-icc .kpi-icon--orange { background: rgba(229,73,124,.12); color: #E5497C; }
body.theme-icc .kpi-icon--red    { background: rgba(229,73,124,.12); color: #E5497C; }
body.theme-icc .kpi-icon--purple { background: rgba(170,72,153,.12); color: #AA4899; }
body.theme-icc .kpi-icon--teal   { background: rgba(96,192,221,.12); color: #60C0DD; }
body.theme-icc .kpi-icon--yellow { background: rgba(132,189,0,.12);  color: #84BD00; }
body.theme-icc .kpi-icon--indigo { background: rgba(170,72,153,.12); color: #AA4899; }
body.theme-icc .kpi-icon--cyan   { background: rgba(96,192,221,.12); color: #60C0DD; }

/* ── Zeitraum-Badges ─────────────────────────────────────────────── */
body.theme-icc .kpi-period.period-live   { background: rgba(132,189,0,.12);  color: #84BD00; }
body.theme-icc .kpi-period.period-today  { background: rgba(96,192,221,.12); color: #60C0DD; }
body.theme-icc .kpi-period.period-week   { background: rgba(170,72,153,.12); color: #AA4899; }
body.theme-icc .kpi-period.period-month  { background: rgba(96,192,221,.12); color: #60C0DD; }
body.theme-icc .kpi-period.period-hist   { background: rgba(99,99,98,.10);   color: #939598; }

/* ── Charts & Cards ──────────────────────────────────────────────── */
body.theme-icc .chart-card,
body.theme-icc .table-card {
  background: #FFFFFF;
  border-color: #D0D3D3;
  box-shadow: 0 1px 4px rgba(0,65,89,.06);
}
body.theme-icc .chart-header h2  { color: #004159; }
body.theme-icc .chart-badge      { background: #F0F2F2; border-color: #D0D3D3; color: #939598; }

/* ── Footer ──────────────────────────────────────────────────────── */
body.theme-icc .footer { border-top-color: #D0D3D3; color: #939598; }
body.theme-icc .footer a { color: #004159; }

/* ── Edit-Bar ────────────────────────────────────────────────────── */
body.theme-icc .edit-bar {
  background: rgba(0,65,89,.08);
  border-color: rgba(0,65,89,.2);
  color: #004159;
}
body.theme-icc .btn-primary {
  background: #84BD00;
  border-color: #84BD00;
  color: #fff;
}
body.theme-icc .btn-primary:hover {
  background: #6fa000;
  border-color: #6fa000;
}

/* ── Tables ──────────────────────────────────────────────────────── */
body.theme-icc .agent-table th,
body.theme-icc .report-table th { color: #939598; border-bottom-color: #D0D3D3; }
body.theme-icc .agent-table td,
body.theme-icc .report-table td { color: #636362; border-bottom-color: rgba(208,211,211,.5); }
body.theme-icc .agent-table tr:hover td { background: #F0F2F2; }

/* ── iCC Logo im Header ──────────────────────────────────────────── */
body.theme-icc .logo rect { fill: #84BD00; }

/* ── Modals ──────────────────────────────────────────────────────── */
body.theme-icc .modal { background: #FFFFFF; border-color: #D0D3D3; }
body.theme-icc .modal-header { border-bottom-color: #D0D3D3; }
body.theme-icc .modal-header h2 { color: #004159; }
body.theme-icc .tab-btn { color: #939598; }
body.theme-icc .tab-btn.active { color: #004159; border-bottom-color: #84BD00; }
body.theme-icc .form-row input, body.theme-icc .form-row select {
  background: #F0F2F2; border-color: #D0D3D3; color: #636362;
}

/* ── GridStack Edit-Modus ────────────────────────────────────────── */
body.theme-icc.edit-active .grid-stack-item { outline-color: rgba(0,65,89,.2); }
body.theme-icc.edit-active .grid-stack-item:hover { outline-color: #004159; }

/* ── Scrollbar ───────────────────────────────────────────────────── */
body.theme-icc ::-webkit-scrollbar { background: #E3E6E6; }
body.theme-icc ::-webkit-scrollbar-thumb { background: #D0D3D3; }

/* ── Login-Seite ─────────────────────────────────────────────────── */
body.theme-icc.login-body { background: #E3E6E6; }
body.theme-icc .login-card { background: #FFFFFF; border-color: #D0D3D3; box-shadow: 0 4px 24px rgba(0,65,89,.12); }
body.theme-icc .login-header h1 { color: #004159; }
body.theme-icc .login-subtitle   { color: #939598; }
body.theme-icc .login-field input { background: #F0F2F2; border-color: #D0D3D3; color: #636362; }
body.theme-icc .login-field input:focus { border-color: #004159; }
body.theme-icc .login-field label { color: #636362; }
body.theme-icc .login-footer { color: #939598; }
body.theme-icc .login-info   { color: #636362; }
body.theme-icc .login-2fa-title { color: #004159; }
body.theme-icc .logo rect { fill: #84BD00; }