:root {
  --primary-text-color: #5F6368; /* lightgray */
  --primary-background-color: #1E1E1E; /* grey */
  --primary-border-color: #ececec; /* lightgray */
  --primary-link-color: #5F6368; /* lightgray */

  --secondary-background-color: #323E48; /* black */
  --secondary-text-color: #ffffff; /* white */

  --status-available: #7FDF83;
  --status-informational: #6495ED;
  --status-degraded: #FF9F00;
  --status-maintenance: #FFEC00;
  --status-unavailable: #E51C23;
  --status-investigating: #5064CD;
  --status-monitoring: #fc6c85;
  --status-identified: #2794F2;
}

#page-wrapper {
    background-color: var(--primary-background-color);
}

.navbar {
    background-color: var(--primary-background-color) !important;
}

.ibox-title {
    background-color: var(--secondary-background-color);
    border-color: var(--primary-border-color);
    color: var(--secondary-text-color);
}

.ibox-content {
    background-color: var(--primary-background-color);
    border-color: var(--primary-border-color);
}

.fa-chevron-up,
.fa-chevron-down,
.fa-expand {
    color: var(--secondary-text-color);
}

.footer-brand a {
    color: var(--primary-text-color);
}

.component-uptime-from {
    color: var(--primary-text-color);
}

.text-secondary.component-uptime-to {
    color: var(--primary-text-color) !important;
}

.component-uptime-percentage {
    color: var(--primary-text-color);
}

.subscribe-link {
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);
}

body {
    color: var(--primary-text-color);
}

a {
    color: var(--primary-link-color) !important;
}

table,
td,
th,
.border {
    border-color: var(--primary-border-color) !important;
}

table > thead > tr > th {
    background-color: var(--primary-background-color) !important;
    color: var(--primary-text-color);
}

table > tbody > tr > td {
    color: var(--primary-text-color);
}

.widget-tableofcontents > div > div.ibox-content {
    border: none;
    padding: 0px 20px 0px 20px;
}

/* button and bar colors */
.component-available { color: var(--status-available); }
.component-informational { color: var(--status-informational); }
.component-degraded { color: var(--status-degraded); }
.component-unavailable { color: var(--status-unavailable); }
.component-maintenance { color: var(--status-maintenance); }
.component-investigating { color: var(--status-investigating); }
.component-monitoring { color: var(--status-monitoring); }
.component-identified { color: var(--status-identified); }

.status-available { background-color: var(--status-available); }
.status-degraded { background-color: var(--status-degraded); }
.status-informational { background-color: var(--status-informational); }
.status-unavailable { background-color: var(--status-unavailable); }
.status-maintenance { background-color: var(--status-maintenance); }
.status-investigating { background-color: var(--status-investigating); }
.status-monitoring { background-color: var(--status-monitoring); }
.status-identified { background-color: var(--status-identified); }

/* ------------------------------------------------------------
   FIX: TAB-KOPPEN / COMPONENT HEADERS VALLEN ERUIT
   ------------------------------------------------------------ */

.components-section .tab,
.nav-tabs > li > a,
.component-container .name,
.component-status .name,
.page-status .name {
    max-width: none !important;        /* voorkom uitrekken door * selector */
    width: auto !important;            /* gebruik natuurlijke breedte */
    display: inline-flex !important;   /* behoud icon + tekst spacing */
    align-items: center !important;    /* tekst + icons mooi gecentreerd */
    padding: 8px 12px !important;      /* correcte layout */
}

.status-icon,
.component-status .component-inner .icon,
.tab .icon {
    margin-right: 6px !important;      /* ruimte tussen icoon en tekst */
}


/* ------------------------------------------------------------
   FULL-WIDTH FIXES + SCROLLBAR FIXES FOR STATUSPAGE
   ------------------------------------------------------------ */

html, body {
    overflow-x: hidden !important;
}

* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.layout-content,
.layout-content .container,
.components-section,
.components-section .container,
.component-status,
.components-container {
    max-width: 100% !important;
    width: 100% !important;
}

.layout-content .container,
.components-section .container,
.page-status .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.components-container {
    width: 100% !important;
    overflow-x: hidden !important;
}

/* uptime grafieken */
.metrics-container,
.metrics-graph,
.uptime-graph,
.uptime-day {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* SVG-fix */
svg {
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}

/* ------------------------------------------------------------
   LOGIN BUTTON – PROXSYS ORANJE (#FF7D00) + DONKERTEKST (#1E1E1E)
   ------------------------------------------------------------ */

.navbar .login-button,
.navbar .btn-login,
.navbar .btn,
.navbar button {
    background-color: #FF7D00 !important;
    color: #1E1E1E !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 14px !important;
    border-radius: 6px !important; /* optioneel: mooi afgerond */
    font-weight: 600 !important;
}

/* Hover-effect */
.navbar .login-button:hover,
.navbar .btn-login:hover,
.navbar .btn:hover,
.navbar button:hover {
    background-color: #e66f00 !important; /* iets donkerder oranje */
    color: #1E1E1E !important;
}