/* ============================================================
   Customer portal: the NexoVirt product panel look.
   Loaded AFTER theme-overwrite.css by layouts/portal.php and layouts/auth.php only, so the public
   marketing pages keep their monochrome brand. Tokens and rules are copied from the panel
   (NexoVirtPveMapper public/assets/css/theme-overwrite.css + app.css): zinc greys with ONE blue
   accent (#2563eb light / #60a5fa dark), white attached sidebar, white top bar, rounded soft cards.
   Custom CSS here is explicitly allowed by the owner.
   ============================================================ */

/* ---------- Blue accent: LIGHT ---------- */
:root {
  --tblr-primary: #2563eb;
  --tblr-primary-rgb: 37, 99, 235;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-text-emphasis: #1e40af;
  --tblr-primary-bg-subtle: #eff6ff;
  --tblr-primary-border-subtle: #bfdbfe;
  --tblr-link-color: #2563eb;
  --tblr-link-color-rgb: 37, 99, 235;
  --tblr-link-hover-color: #1d4ed8;
  --tblr-body-bg: #fafafa;
  --tblr-body-bg-rgb: 250, 250, 250;
  --tblr-bg-surface: #ffffff;

  --tblr-primary-lt: color-mix(in oklab, var(--tblr-primary) 10%, transparent);
  --tblr-primary-lt-rgb: var(--tblr-primary-rgb);
  --tblr-primary-darken: color-mix(in oklab, var(--tblr-primary), transparent 20%);
  --tblr-active-bg: rgba(var(--tblr-primary-rgb), 0.04);
  --tblr-blue: var(--tblr-primary);
  --tblr-blue-rgb: var(--tblr-primary-rgb);
  --tblr-form-focus-border-color: color-mix(in oklab, var(--tblr-primary) 50%, white);

  /* Rounded + soft shell (radii 6/9/12px), shared top bar height. */
  --tblr-border-radius-scale: 1.5;
  --nx-topbar-h: 4rem;
  --nx-sidebar-w: 17.5rem;
  --tblr-box-shadow-sm: 0 1px 2px rgba(9, 9, 11, .05);
  --tblr-box-shadow: 0 1px 3px rgba(9, 9, 11, .06), 0 1px 2px -1px rgba(9, 9, 11, .05);
  --tblr-box-shadow-lg: 0 12px 28px -8px rgba(9, 9, 11, .14), 0 6px 12px -6px rgba(9, 9, 11, .08);
  --tblr-card-box-shadow: var(--tblr-box-shadow);
}

/* ---------- Blue accent: DARK ---------- */
[data-bs-theme="dark"] {
  --tblr-primary: #60a5fa;
  --tblr-primary-rgb: 96, 165, 250;
  --tblr-primary-fg: #0a0a0a;
  --tblr-primary-text-emphasis: #93c5fd;
  --tblr-primary-bg-subtle: #0f1d33;
  --tblr-primary-border-subtle: #1e3a5f;
  --tblr-link-color: #60a5fa;
  --tblr-link-color-rgb: 96, 165, 250;
  --tblr-link-hover-color: #93c5fd;
  --tblr-body-bg: #0a0a0a;
  --tblr-body-bg-rgb: 10, 10, 10;
  --tblr-bg-surface: #161616;

  --tblr-active-bg: rgba(var(--tblr-primary-rgb), 0.08);
  --tblr-primary-lt: color-mix(in oklab, var(--tblr-primary) 10%, transparent);
  --tblr-blue: var(--tblr-primary);
  --tblr-blue-rgb: var(--tblr-primary-rgb);
  --tblr-form-focus-border-color: color-mix(in oklab, var(--tblr-primary) 50%, black);

  --tblr-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --tblr-box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px -1px rgba(0, 0, 0, .4);
  --tblr-box-shadow-lg: 0 14px 32px -8px rgba(0, 0, 0, .6), 0 6px 14px -6px rgba(0, 0, 0, .45);
  --tblr-card-box-shadow: var(--tblr-box-shadow);
}

/* ---------- Buttons: blue fill (hover darkens in light, lightens in dark) ----------
   The dark selectors match theme-overwrite.css's monochrome [data-bs-theme=dark] rules so blue wins. */
.btn-primary,
[data-bs-theme="dark"] .btn-primary {
  --tblr-btn-color: var(--tblr-primary-fg);
  --tblr-btn-bg: var(--tblr-primary);
  --tblr-btn-border-color: var(--tblr-primary);
  --tblr-btn-hover-color: var(--tblr-primary-fg);
  --tblr-btn-hover-bg: color-mix(in srgb, var(--tblr-primary), #000 14%);
  --tblr-btn-hover-border-color: color-mix(in srgb, var(--tblr-primary), #000 14%);
  --tblr-btn-active-color: var(--tblr-primary-fg);
  --tblr-btn-active-bg: color-mix(in srgb, var(--tblr-primary), #000 24%);
  --tblr-btn-active-border-color: color-mix(in srgb, var(--tblr-primary), #000 24%);
  --tblr-btn-disabled-color: var(--tblr-primary-fg);
  --tblr-btn-disabled-bg: var(--tblr-primary);
  --tblr-btn-disabled-border-color: var(--tblr-primary);
  --tblr-btn-focus-shadow-rgb: var(--tblr-primary-rgb);
}
.btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-primary {
  --tblr-btn-color: var(--tblr-primary);
  --tblr-btn-border-color: var(--tblr-primary);
  --tblr-btn-hover-color: var(--tblr-primary-fg);
  --tblr-btn-hover-bg: var(--tblr-primary);
  --tblr-btn-hover-border-color: var(--tblr-primary);
  --tblr-btn-active-color: var(--tblr-primary-fg);
  --tblr-btn-active-bg: var(--tblr-primary);
  --tblr-btn-active-border-color: var(--tblr-primary);
}
[data-bs-theme="dark"] .btn-primary {
  --tblr-btn-hover-bg: color-mix(in srgb, var(--tblr-primary), #fff 18%);
  --tblr-btn-hover-border-color: color-mix(in srgb, var(--tblr-primary), #fff 18%);
  --tblr-btn-active-bg: color-mix(in srgb, var(--tblr-primary), #fff 32%);
  --tblr-btn-active-border-color: color-mix(in srgb, var(--tblr-primary), #fff 32%);
}
.btn { --tblr-btn-font-weight: 600; }

/* ---------- Baked-in components that ignore --tblr-primary ---------- */
.pagination {
  --tblr-pagination-active-bg: var(--tblr-primary);
  --tblr-pagination-active-border-color: var(--tblr-primary);
  --tblr-pagination-active-color: var(--tblr-primary-fg);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--tblr-primary); color: var(--tblr-primary-fg); }
.list-group-item.active {
  background-color: var(--tblr-bg-surface-secondary);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
  box-shadow: none;
}
.steps-counter .step-item::before { color: var(--tblr-primary-fg); }
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.input-group-flat:focus-within .form-control,
.input-group-flat:focus-within .input-group-text { border-color: var(--tblr-form-focus-border-color) !important; }

/* Dark mode checked controls: the light blue needs a DARK knob/tick (white only reaches 2.5:1). */
[data-bs-theme="dark"] .form-switch .form-check-input:checked {
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
  --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2318181b'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%2318181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
}

/* Cards: lifted soft panels. */
.card { box-shadow: var(--tblr-box-shadow); }

/* Icon-only buttons render as squares (known-quirks .btn-icon collapse fix, as in the panel). */
.btn-icon { padding-left: var(--tblr-btn-padding-y); padding-right: var(--tblr-btn-padding-y); }
.btn-icon .icon { margin: 0; }

/* ============================================================
   Sidebar: a 1:1 copy of the product panel (NexoVirtPveMapper theme-overwrite.css sections
   "Attached sidebar", "Sidebar foot", "Sidebar nav active/hover", "Mobile sidebar drawer" and the
   app.css navbar-vertical rules). Keep in sync with the panel; do not add portal-only variants.
   ============================================================ */
.navbar-vertical {
  background-color: var(--tblr-body-bg);
  border-right: var(--tblr-border-width) solid var(--tblr-border-color);
}
.navbar-vertical { scrollbar-width: none; }
.navbar-vertical::-webkit-scrollbar { display: none; }

@media (min-width: 992px) {
  .nx-sidebar.navbar-vertical {
    width: 17.5rem;
    background: var(--tblr-bg-surface) !important;
    border: 0 !important;
    border-right: var(--tblr-border-width, 1px) solid var(--tblr-border-color) !important;
    box-shadow: none !important;
    padding: 0;
    overflow: hidden;
  }
  /* Tabler hardcodes 15rem on the aside + the content offset; keep both at the wider width. */
  .nx-sidebar.navbar-vertical ~ .page-wrapper { margin-left: 17.5rem; }
  .nx-sidebar.navbar-vertical ~ .page { padding-left: 17.5rem; }
  /* Tabler zeroes padding on the vertical navbar's direct container; match its specificity. */
  .nx-sidebar.navbar-vertical > .nx-side-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    gap: 0;
    padding: 0 !important;
  }
  .nx-side-collapse {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }
  .nx-side-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nx-side-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: var(--nx-topbar-h);
    padding: 0 1rem;
    border-bottom: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
  }
  .nx-side-nav {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: .5rem .75rem;
  }
  .nx-side-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .nx-side-nav .navbar-nav { padding: 0; }
  .nx-side-user { flex-shrink: 0; margin: .25rem .75rem .75rem; }
}

/* Sidebar foot: same item style as the panel's edition + version link. */
.nx-side-edition-link {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
  text-decoration: none;
  transition: background-color .12s ease;
}
.nx-side-edition-link:hover { background-color: var(--tblr-active-bg); color: var(--tblr-body-color); text-decoration: none; }
.nx-side-edition { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.nx-side-version { display: block; font-size: .8125rem; color: var(--tblr-secondary); }

/* Sidebar nav active/hover: soft blue tint pill (no bar on any edge). */
.nx-side-nav .navbar-nav .nav-link {
  border-radius: var(--tblr-border-radius);
  transition: background-color .12s ease, color .12s ease;
}
.nx-side-nav .navbar-nav .nav-link:hover {
  background-color: var(--tblr-active-bg);
}
.nx-side-nav .navbar-nav > .nav-item.active > .nav-link,
.nx-side-nav .navbar-nav .nav-link.active,
.nx-side-nav .navbar-nav .nav-link.show {
  background-color: var(--tblr-primary-lt);
  color: var(--tblr-primary);
  font-weight: 500;
  box-shadow: none;
}
.nx-side-nav .navbar-nav > .nav-item.active > .nav-link .nav-link-icon,
.nx-side-nav .navbar-nav .nav-link.active .nav-link-icon {
  color: var(--tblr-primary);
}
.nx-sidebar { --tblr-navbar-active-bg: var(--tblr-primary-lt); --tblr-navbar-active-border-color: transparent; }
/* Tabler draws its own active bar on vertical navbars (a ::after on one edge): never show it. */
.nx-sidebar .navbar-nav .nav-link::after,
.nx-sidebar .navbar-nav .nav-item.active > .nav-link::after { display: none !important; }

/* Mobile sidebar drawer (slides from the LEFT), below lg only (portal.js js-nav-drawer). */
@media (max-width: 991.98px) {
  .nx-side-collapse {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 17rem;
    max-width: 85vw;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    background: var(--tblr-bg-surface);
    border-right: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .nx-side-collapse.show { transform: translateX(0); }
  .nx-side-collapse > * { align-self: stretch; width: 100%; }
  .nx-side-user { text-align: left; }
  #sidebar-menu .navbar-nav { align-items: stretch !important; padding-left: 0; margin-left: 0; }
  #sidebar-menu .nav-item { width: 100%; text-align: left; }
  #sidebar-menu .navbar-nav .nav-link {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .nx-nav-backdrop { position: fixed; inset: 0; z-index: 1044; background: rgba(0, 0, 0, .45); }
  body.nx-nav-open { overflow: hidden; }
  .page-wrapper .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}


/* ============================================================
   Top bar (lg+): attached, white, sticky, same height as the logo row.
   ============================================================ */
@media (min-width: 992px) {
  .page-wrapper > .page-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    min-height: var(--nx-topbar-h);
    margin: 0;
    padding: 0 1.5rem;
    background: var(--tblr-bg-surface);
    border-bottom: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
  }
  .page-wrapper > .page-header > .container-fluid { width: 100%; padding-left: 0; padding-right: 0; }
  .page-wrapper > .page-body > .container-fluid,
  .page-wrapper > .footer > .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Page intro: one plain-language line under the top bar saying what the page is for. */
.nx-intro { display: flex; gap: .625rem; align-items: flex-start; color: var(--tblr-secondary); margin-bottom: 1.25rem; }
.nx-intro .icon { flex: 0 0 auto; color: var(--tblr-primary); margin-top: .125rem; }

/* ============================================================
   Settings: profile card (left) + section nav + content.
   ============================================================ */
.nx-profile-card .avatar { --tblr-avatar-size: 4.5rem; font-size: 1.5rem; }
.nx-settings-nav { margin: 0; }
.nx-settings-nav .list-group-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  border: 0;
  padding: .5rem .75rem;
  border-radius: var(--tblr-border-radius);
  margin-bottom: 2px;
}
.nx-settings-nav .icon { flex: 0 0 auto; }
.nx-settings-nav .list-group-item:hover { background-color: var(--tblr-active-bg); }
.nx-settings-nav .list-group-item.active {
  background-color: var(--tblr-primary-lt);
  color: var(--tblr-primary);
  font-weight: 500;
  box-shadow: none;
}

/* Onboarding steps on the dashboard: numbered blue circles, done = green tick. */
.nx-step-num {
  width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; background: var(--tblr-primary-lt); color: var(--tblr-primary);
}
.nx-step.is-done .nx-step-num { background: var(--tblr-green-lt); color: var(--tblr-green); }