/* =========================================================
   PRIL – OFFICE MODE "CORPORATE STEEL"
   Kühles Grau, weiße Panels, schwarze Schrift, graue Rahmen
   Aktiv bei: html.office oder body.office
   ========================================================= */

html.office,
body.office{
/* Steel Darker */
--bg: #e3e7ec;        /* etwas dunklerer Hintergrund */
--panel: #f6f8fa;     /* kein reines Weiß mehr */
--panel2: #edf1f5;    /* Sekundärflächen dunkler */

--border: #b8c2cc;    /* Rahmen klarer sichtbar */
--border2: #cfd6de;   /* Tabellenrahmen etwas kräftiger */

  --text: #0b0f14;
  --muted: #4b5563;
  --row-hover:#f1f6fb;
  /* Accent bleibt PRIL, aber seriös */
  --accent: #0b6fcf;
  --accent2: #1489ff;
}

/* ================= BASE ================= */

html.office body,
body.office{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ================= NAVBAR ================= */

html.office .navbar{
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

html.office .navbar-title{
  color: var(--text) !important;
}

/* ================= CARDS / PANELS ================= */

html.office .card,
html.office .panel,
html.office .box,
html.office .project-card,
html.office .techgrid .col,
html.office .global-progress-card,
html.office .doc-list,
html.office .doc-preview,
html.office .doc-modal-box{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06) !important;
}

/* dunkle Sonderflächen neutralisieren */
html.office #chatMessages,
html.office #projLogTerminal,
html.office .doc-preview-body,
html.office #docPreviewBody,
html.office .doc-modal-body{
  background: var(--panel2) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
}

/* ================= TABS ================= */

html.office .tab-btn{
  background: var(--panel2) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html.office .tab-btn:hover{
  background: #ffffff !important;
  color: var(--text) !important;
}

html.office .tab-btn.active{
  background: var(--panel) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 2px 0 rgba(11, 111, 207, .20) !important;
}

/* ================= BUTTONS ================= */

html.office .btn,
html.office button,
html.office .production-btn{
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

html.office .btn:hover,
html.office button:hover,
html.office .production-btn:hover{
  background: #f4f7fa !important;
}

html.office .btn.btn-secondary{
  background: var(--panel2) !important;
}

/* Button "loaded" Marker in Office */
html.office .production-btn.loaded{
  border-bottom: 4px solid var(--accent) !important;
}

/* ================= INPUTS ================= */

html.office input,
html.office select,
html.office textarea{
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

html.office input::placeholder,
html.office textarea::placeholder{
  color: #8a94a3 !important;
}

html.office input:focus,
html.office select:focus,
html.office textarea:focus{
  outline: none !important;
  border-color: #9aa7b6 !important;
}

/* Labels/Text */
html.office label,
html.office .label,
html.office .proj-info,
html.office .proj-money{
  color: var(--muted) !important;
}

html.office .value,
html.office h1,
html.office h2,
html.office h3,
html.office h4,
html.office .navbar-center{
  color: var(--text) !important;
}

/* ================= TABLES ================= */

html.office table{
  background: var(--panel) !important;
  border-collapse: collapse;
}

html.office th,
html.office td{
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
}

html.office th{
  background: #f2f5f8 !important;
  font-weight: 800;
}

/* Optional: dezente Zebra */
html.office tbody tr:nth-child(even) td{
  background: #fafbfc !important;
}

/* ================= MODALS ================= */

html.office .modal{
  background: rgba(15, 23, 42, .22) !important;
  backdrop-filter: blur(4px);
}

html.office .modal-content{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18) !important;
}

/* ================= BADGES ================= */

html.office .badge,
html.office .pill,
html.office .status-badge{
  background: #f2f5f8 !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Status-Farben (dezent lassen, aber nicht neon) */
html.office .status-1{ color:#6b7280 !important; }
html.office .status-2{ color:#2563eb !important; }
html.office .status-3{ color:#1d4ed8 !important; }
html.office .status-4{ color:#be185d !important; }
html.office .status-5{ color:#b45309 !important; }
html.office .status-6{ color:#047857 !important; }
html.office .status-7{ color:#92400e !important; }
html.office .status-8{ color:#0f766e !important; }
html.office .status-9{ color:#6d28d9 !important; }
html.office .status-10{ color:#065f46 !important; }

/* ================= HR / SEPARATORS ================= */

html.office hr{
  border-color: var(--border2) !important;
}

html.office .separator{
  background: var(--border2) !important;
}

/* ================= SCROLLBARS (neutral) ================= */

html.office ::-webkit-scrollbar{ width: 10px; height: 10px; }
html.office ::-webkit-scrollbar-track{ background: rgba(15,23,42,.06); border-radius: 10px; }
html.office ::-webkit-scrollbar-thumb{ background: rgba(100,116,139,.35); border-radius: 10px; }
html.office ::-webkit-scrollbar-thumb:hover{ background: rgba(100,116,139,.50); }

/* ================= KILL DARK GLOWS ================= */

html.office *{
  text-shadow: none !important;
}