/* ============================================================
   Wiwo Neo — Client portal + client login (theme "perfex").
   Loads AFTER the generic bridge/dark, which already style the
   shared Bootstrap components (.panel_s, .btn, .form-control,
   .table, .dropdown-menu, badges, alerts…). This file only adds
   the client-theme STRUCTURE the admin bridge doesn't cover:
   the portal navbar, shell, submenu, login layout and footer.
   Works light & dark via tokens (scoped to body.customers).
   ============================================================ */

/* ---- shell ---- */
body.customers {
  background: var(--surface) !important;
  color: var(--ink);
  font-family: var(--font-system) !important;
  -webkit-font-smoothing: antialiased;
}
body.customers #wrapper,
body.customers #content,
body.customers #content > .container { background: transparent !important; }

/* ---- portal navbar (top header) ---- */
body.customers .navbar.navbar-default.header,
body.customers .navbar.header {
  background: var(--wiwo-almost-white) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-1);
  border-radius: 0;
  margin-bottom: 0;
}
body.customers .navbar .navbar-brand.logo,
body.customers .navbar .navbar-brand {
  height: auto;
  display: inline-flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}
body.customers .navbar .navbar-brand img { height: 30px !important; width: auto !important; }
body.customers .navbar-nav > li > a {
  color: var(--ink) !important;
  font-weight: var(--weight-nav);
  transition: color var(--motion-fast) var(--ease-expressive);
}
body.customers .navbar-nav > li > a:hover,
body.customers .navbar-nav > li > a:focus,
body.customers .navbar-nav > li.active > a { color: var(--wiwo-blue) !important; background: transparent !important; }
body.customers .navbar-toggle { border-color: var(--line) !important; }
body.customers .navbar-toggle .icon-bar { background-color: var(--ink) !important; }
/* the "Iniciar sesión" nav button (btn inside nav) keeps bridge .btn styling */

/* vertically center the WHOLE navbar row (logo + menu + toggle + avatar).
   Bootstrap 3's float layout left them on different baselines; flexbox fixes
   it. Desktop-only so the mobile collapse/dropdown is untouched. */
@media (min-width: 768px) {
  body.customers .navbar.header > .container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  body.customers .navbar.header .navbar-header {
    float: none !important;
    display: flex;
    align-items: center;
    margin: 0 !important;
  }
  body.customers .navbar.header .navbar-brand { display: flex; align-items: center; height: auto; }
  body.customers .navbar.header .navbar-collapse {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    padding: 0;
  }
  body.customers .navbar.header .navbar-nav.navbar-right {
    display: flex;
    align-items: center;
    float: none !important;
    margin: 0;
  }
  body.customers .navbar.header .navbar-nav.navbar-right > li {
    float: none !important;
    display: flex;
    align-items: center;
  }
  body.customers .navbar.header .navbar-nav.navbar-right > li > a { display: flex; align-items: center; }
  body.customers .navbar.header .customers-nav-item-profile .client-profile-image-small { display: block; }
}

/* ---- Files / Calendar submenu ---- */
body.customers .submenu.customer-top-submenu {
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
  padding-left: 0;
}
body.customers .submenu.customer-top-submenu > li > a {
  color: var(--muted) !important;
  font-weight: var(--weight-nav);
  border-bottom: 2px solid transparent;
  padding-bottom: 10px;
}
body.customers .submenu.customer-top-submenu > li > a:hover,
body.customers .submenu.customer-top-submenu > li.active > a {
  color: var(--wiwo-blue) !important;
  border-bottom-color: var(--wiwo-blue);
}

/* ---- login / register / forgot layout ---- */
body.customers .login-heading {
  color: var(--ink);
  font-weight: var(--weight-display);
  letter-spacing: -0.015em;
}
body.customers .login-form .panel_s,
body.customers .login-form .panel-body { box-shadow: var(--shadow-2); }
body.customers .login-form .panel_s { border-radius: var(--radius-card); }
/* full-width primary button reads as the main CTA */
body.customers .login-form .btn-primary { font-weight: var(--weight-action); letter-spacing: .2px; }

/* ---- knowledge base search hero (Bootstrap .jumbotron = light bg by default;
   in dark the beige heading was invisible on it) ---- */
body.customers .jumbotron.kb-search-jumbotron,
body.customers .kb-search-jumbotron {
  background: var(--surface-2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
body.customers .kb-search-heading { color: var(--ink) !important; }
body.customers .kb-search-input,
body.customers .kb-search-input.form-control {
  background: var(--control-surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
body.customers .kb-search-input::placeholder { color: var(--muted) !important; }
body.customers .kb-search-icon { color: var(--muted) !important; }

/* ---- portal theme toggle (navbar) ----
   Align it with the other navbar links (same vertical padding so it isn't
   pushed up) and strip the stray focus box. */
body.customers .wiwo-portal-theme > a,
body.customers .wiwo-portal-theme > a:hover,
body.customers .wiwo-portal-theme > a:focus,
body.customers .wiwo-portal-theme > a:active {
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 15px 14px !important;   /* match Bootstrap navbar link padding */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}
body.customers .wiwo-portal-theme > a:hover { color: var(--wiwo-blue) !important; }
/* size only — do NOT set display here, or it overrides the theme show/hide
   rules (html[data-theme] .wiwo-icon-sun/moon { display:none }) and both icons appear */
body.customers .wiwo-portal-theme svg { width: 20px; height: 20px; vertical-align: middle; }
/* keep a tidy keyboard-only focus ring (no big glow box) */
body.customers .wiwo-portal-theme > a:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: -4px !important;
  border-radius: 10px !important;
}

/* ---- footer ---- */
body.customers footer,
body.customers .footer,
body.customers #footer {
  background: var(--wiwo-almost-white) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted) !important;
}
body.customers footer a, body.customers .footer a { color: var(--wiwo-blue) !important; }

/* ---- headings / links / cards inside portal content ---- */
body.customers h1, body.customers h2, body.customers h3 { color: var(--ink); }
body.customers a { color: var(--wiwo-blue); }
body.customers .well { background: var(--surface-2); border-color: var(--line); }