/* ==========================================================================
   ICTGroepTwente Theme — Client portal (customers area)
   Loaded via the app_customers_head hook on every client-facing page
   (login, dashboard, invoices, tickets, knowledge base, ...).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ictgt-accent: #12d6e0;
  --ictgt-accent-dark: #0ea8b0;
  --ictgt-bg-dark: #15171a;
  --ictgt-bg-darker: #0d0e10;
  --ictgt-border-dark: #2a2e35;
  --ictgt-text-light: #eaf9fb;
}

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  background-color: #f3f5f7 !important;
}

/* Top navigation / header of the client portal */
.navbar,
.navbar-default,
header.navigation,
#header,
.customers-navigation {
  background-color: var(--ictgt-bg-dark) !important;
  border-bottom: 1px solid var(--ictgt-border-dark) !important;
}

.navbar a,
.navbar-default a,
.customers-navigation a,
.navbar-nav > li > a {
  color: var(--ictgt-text-light) !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.customers-navigation a:hover {
  color: var(--ictgt-accent) !important;
}

.navbar-brand img,
.customers-navigation .logo img {
  content: url('../images/logo.png');
  max-height: 40px;
  width: auto;
}

/* Buttons & accent elements */
.btn-primary,
.bg-primary,
.label-primary,
.badge-primary,
.panel-primary > .panel-heading {
  background-color: var(--ictgt-accent) !important;
  border-color: var(--ictgt-accent-dark) !important;
  color: #04222a !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ictgt-accent-dark) !important;
  border-color: var(--ictgt-accent-dark) !important;
  color: #ffffff !important;
}

a {
  color: var(--ictgt-accent-dark);
}

a:hover,
a:focus {
  color: var(--ictgt-accent);
}

.text-primary {
  color: var(--ictgt-accent-dark) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  color: var(--ictgt-accent-dark) !important;
  border-top: 2px solid var(--ictgt-accent) !important;
}

/* Login / register card in the client area */
body.login-page,
.customers-login-container {
  background: radial-gradient(circle at 20% 20%, #1c2a2c 0%, #0d0e10 55%, #0a0b0c 100%) !important;
}

.login-page .panel,
.customers-login-container .panel {
  background-color: #15171a !important;
  border: 1px solid var(--ictgt-border-dark) !important;
  border-radius: 10px !important;
  color: var(--ictgt-text-light) !important;
}

.login-page label,
.customers-login-container label {
  color: var(--ictgt-text-light) !important;
}

/* Form focus state */
.form-control:focus {
  border-color: var(--ictgt-accent) !important;
  box-shadow: 0 0 0 2px rgba(18, 214, 224, 0.15) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ictgt-accent);
}

/* Footer */
footer,
.customers-footer {
  background-color: var(--ictgt-bg-darker) !important;
  color: var(--ictgt-text-light) !important;
}

footer a,
.customers-footer a {
  color: var(--ictgt-accent) !important;
}

::selection {
  background: var(--ictgt-accent);
  color: #04222a;
}