/* LesenJaga — Logicalis brand (Brand Guidelines, July 2026). Tokens from logicalis-brand/assets/logicalis.css */
:root {
  --lgc-blue: #194BFF;
  --lgc-red: #FF1414;
  --lgc-blue-1: #E8EDFF;
  --lgc-blue-2: #8CA5FF;
  --lgc-blue-3: #010F3E;
  --lgc-grey: #E6E6E6;
  --lgc-teal: #00FFCD;
  --lgc-blue-dark: #002092;
  --lgc-gradient: linear-gradient(90deg, var(--lgc-blue-dark) 0%, var(--lgc-blue) 100%);
  --lgc-ink: #595959;
  --lgc-font-heading: 'Roboto Slab', Times, serif;
  --lgc-font-body: 'Montserrat', Verdana, sans-serif;

  /* Bootstrap theme mapped onto the palette */
  --bs-primary: #194BFF; --bs-primary-rgb: 25, 75, 255;
  --bs-danger: #FF1414; --bs-danger-rgb: 255, 20, 20;
  --bs-success: #194BFF; --bs-success-rgb: 25, 75, 255;
  --bs-warning: #8CA5FF; --bs-warning-rgb: 140, 165, 255;
  --bs-info: #8CA5FF; --bs-info-rgb: 140, 165, 255;
  --bs-dark: #010F3E; --bs-dark-rgb: 1, 15, 62;
  --bs-secondary-color: #595959;
  --bs-body-font-family: var(--lgc-font-body);
  --bs-body-color: #1a1a1a;
  --bs-link-color: #194BFF; --bs-link-color-rgb: 25, 75, 255;
  --bs-link-hover-color: #010F3E; --bs-link-hover-color-rgb: 1, 15, 62;
  --bs-border-color: #E6E6E6;
}
body { background: #fff; font-family: var(--lgc-font-body); font-size: .92rem; }
h1, h2, h3, h4, h5, h6, .modal-title { font-family: var(--lgc-font-heading); font-weight: 400; }

/* Navigation: reversed logo on Logicalis Blue only */
.lgc-nav { background: var(--lgc-blue); padding-top: .55rem; padding-bottom: .55rem; }
.lgc-nav .navbar-brand { display: flex; align-items: center; gap: 1rem; padding: .4rem 0; }
.lgc-nav .navbar-brand img { width: 200px; height: auto; display: block; }
.lgc-nav .app-name { font-family: var(--lgc-font-heading); font-size: 1.15rem; color: #fff; border-left: 1px solid rgba(255,255,255,.45); padding-left: 1rem; }
.lgc-nav .nav-link { color: rgba(255,255,255,.85); font-weight: 500; }
.lgc-nav .nav-link:hover { color: #fff; }
.lgc-nav .nav-link.active { color: #fff !important; background: var(--lgc-blue-3); border-radius: .25rem; }
.lgc-nav .badge-role { background: var(--lgc-red); color: #fff; font-weight: 600; }

/* The Logicalis highlight — solid block hugging the text, one block per wrapped line */
.lgc-highlight {
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: .15em .4em; background: var(--lgc-red); color: #fff; line-height: 1.55;
}
.lgc-highlight--blue { background: var(--lgc-blue); }
.page-title { font: 400 1.85rem/1.5 var(--lgc-font-heading); margin: 0 0 .35rem; }
.page-sub { font: 500 .82rem/1.45 var(--lgc-font-body); color: var(--lgc-ink); }

/* Buttons */
.btn-primary, .btn-lj { --bs-btn-bg: #194BFF; --bs-btn-border-color: #194BFF; --bs-btn-hover-bg: #010F3E; --bs-btn-hover-border-color: #010F3E;
  --bs-btn-active-bg: #010F3E; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: #8CA5FF; --bs-btn-disabled-border-color: #8CA5FF;
  background: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: #fff; font-weight: 600; }
.btn-lj:hover, .btn-lj:focus { background: var(--lgc-blue-3); border-color: var(--lgc-blue-3); color: #fff; }
.btn-outline-dark { --bs-btn-color: #010F3E; --bs-btn-border-color: #010F3E; --bs-btn-hover-bg: #010F3E; --bs-btn-hover-border-color: #010F3E;
  --bs-btn-active-bg: #010F3E; --bs-btn-active-border-color: #010F3E; }
.btn-check:checked + .btn-outline-dark { background: var(--lgc-blue-3); color: #fff; }
.btn-dark { --bs-btn-bg: #010F3E; --bs-btn-border-color: #010F3E; }

/* Palette-safe utility overrides */
.text-success { color: var(--lgc-blue) !important; }
.text-danger { color: var(--lgc-red) !important; }
.text-warning { color: var(--lgc-blue-2) !important; }
.text-secondary { color: var(--lgc-ink) !important; }
.bg-secondary { background-color: var(--lgc-blue-2) !important; }
.bg-warning { background-color: var(--lgc-blue) !important; }
.bg-dark { background-color: var(--lgc-blue-3) !important; }
.text-bg-warning, .text-bg-primary { background: var(--lgc-blue) !important; color: #fff !important; }
.text-bg-secondary { background: var(--lgc-blue-3) !important; color: #fff !important; }
.text-bg-light { background: var(--lgc-blue-1) !important; color: var(--lgc-blue-3) !important; }
.text-bg-success { background: var(--lgc-blue) !important; }
.text-bg-danger { background: var(--lgc-red) !important; }
.alert-warning, .alert-light { --bs-alert-bg: #E8EDFF; --bs-alert-border-color: #8CA5FF; --bs-alert-color: #010F3E; }
.alert-danger { --bs-alert-bg: #fff; --bs-alert-border-color: #FF1414; --bs-alert-color: #FF1414; }
.form-check-input:checked { background-color: var(--lgc-blue); border-color: var(--lgc-blue); }
.form-control:focus, .form-select:focus { border-color: var(--lgc-blue-2); box-shadow: 0 0 0 .2rem rgba(25,75,255,.18); }
.lj-accent { color: var(--lgc-blue); }

/* Cards and figures */
.card { border: 1px solid var(--lgc-grey); box-shadow: none; }
.card-header { background: #fff; font: 700 .9rem/1.4 var(--lgc-font-body); color: var(--lgc-blue-3); border-bottom: 1px solid var(--lgc-grey); }
.card-header i { color: var(--lgc-blue); }
.kpi { background: var(--lgc-blue-1); border: 0; }
.kpi .small-muted { font: 500 .78rem/1.4 var(--lgc-font-body); color: var(--lgc-blue-3); }
.kpi .v { font: 300 1.65rem/1.15 var(--lgc-font-heading); color: var(--lgc-blue-3); word-break: break-word; }

/* Login: gradient background, colour logo on white */
.login-bg { position: fixed; inset: 0; overflow: auto; background: var(--lgc-gradient); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-wrap { max-width: 440px; width: 100%; }
.login-wrap .card { padding: 2rem !important; }
.login-logo { width: 220px; margin: 0 0 1.5rem; padding: .35em 0; display: block; }

/* Matrix */
.matrix-wrap { max-height: calc(100vh - 250px); overflow: auto; background: #fff; border: 1px solid var(--lgc-grey); border-radius: .375rem; }
.matrix { font-size: .84rem; margin: 0; --bs-table-border-color: #E6E6E6; }
.matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--lgc-blue-3); color: #fff; vertical-align: bottom; min-width: 92px; max-width: 120px;
  white-space: normal; font: 600 .8rem/1.3 var(--lgc-font-body); cursor: pointer; }
.matrix thead th.sel { background: var(--lgc-blue); }
.matrix thead th:first-child { left: 0; z-index: 4; min-width: 340px; max-width: 420px; cursor: default; }
.matrix tbody th { position: sticky; left: 0; background: #fff; z-index: 2; font-weight: 500; }
.matrix tr.cat td, .matrix tr.cat th { background: var(--lgc-blue-1) !important; color: var(--lgc-blue-3); font: 400 .82rem/1.4 var(--lgc-font-heading); }
.matrix td { text-align: center; vertical-align: middle; }
.matrix tbody tr:hover td, .matrix tbody tr:hover th { background: var(--lgc-blue-1); }
.matrix .price-row td, .matrix .price-row th { background: #fff; font-weight: 700; color: var(--lgc-blue-3); border-bottom: 2px solid var(--lgc-blue-3); }
.yes { color: var(--lgc-blue); }
.no { color: var(--lgc-ink); }
.diff-row th { background: #fff; }
.diff-row td { background: var(--lgc-blue-1); }
.vbadge { font-size: .72rem; }

.feature-pick { max-height: 420px; overflow: auto; }
.addon-pick { max-height: 260px; overflow: auto; border: 1px solid var(--lgc-grey); border-radius: .375rem; padding: .5rem .75rem; background: #fff; }
.option-card.best { border: 2px solid var(--lgc-blue); }
.chip { display: inline-block; background: var(--lgc-grey); border-radius: 1rem; padding: .1rem .6rem; margin: .1rem; font-size: .78rem; }
.chip.add { background: var(--lgc-blue-1); color: var(--lgc-blue-3); }
.chip.lose { background: #fff; border: 1px solid var(--lgc-red); color: var(--lgc-red); }
.small-muted { font-size: .8rem; color: var(--lgc-ink); }
.table-fixed td { vertical-align: top; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.progress { height: 14px; font-size: .68rem; background: var(--lgc-grey); }
.lgc-footer { border-top: 1px solid var(--lgc-grey); color: var(--lgc-ink); font-size: .78rem; padding: 1rem 0 2rem; }

@media print {
  .lgc-nav, .no-print, .btn, #toasts { display: none !important; }
  .card { border: 1px solid var(--lgc-grey); break-inside: avoid; }
  .progress-bar, .lgc-highlight, .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.addable { color: var(--lgc-blue-2); }
.na { color: var(--lgc-ink); font-size: .72rem; }
.fnref { color: var(--lgc-blue); cursor: help; font-weight: 600; margin-left: 1px; }
.conflict-row td { vertical-align: middle; }

/* ================================================================ Sidebar shell */
:root { --lj-side-w: 252px; --lj-side-mini: 68px; }
.lj-shell { min-height: 100vh; }
.lj-side { position: fixed; inset: 0 auto 0 0; width: var(--lj-side-w); background: var(--lgc-blue); color: #fff; display: flex; flex-direction: column;
  z-index: 1040; transition: width .18s ease, transform .2s ease; }
.lj-main { margin-left: var(--lj-side-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .18s ease; }
.lj-main > main { flex: 1; }
.lj-shell.no-side .lj-main { margin-left: 0; }
.lj-side-brand { padding: 1.1rem 1.1rem .9rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.lj-side-brand .lj-logo img { width: 170px; display: block; }
.lj-side-brand .lj-logo .lj-logo-mini { display: none; }
#mq { width: 230px; }
.lj-side-brand .app-name, .lj-topbar .app-name { font-family: var(--lgc-font-heading); font-size: 1.15rem; color: #fff; display: block; margin-top: .45rem; }
.lj-side-nav { flex: 1; overflow-y: auto; padding: .6rem .6rem; }
.lj-side-group { font: 600 .66rem/1 var(--lgc-font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); padding: 1rem .7rem .45rem; }
.lj-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: .375rem; color: rgba(255,255,255,.88); text-decoration: none;
  font-weight: 500; white-space: nowrap; }
.lj-link i { width: 1.15rem; text-align: center; flex: none; }
.lj-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.lj-link.active { background: var(--lgc-blue-3); color: #fff; box-shadow: inset 3px 0 0 var(--lgc-red); }
.lj-count { margin-left: auto; background: var(--lgc-red); color: #fff; border-radius: 1rem; font-size: .7rem; padding: .05rem .45rem; }
.lj-count:empty { display: none; }
.lj-side-foot { border-top: 1px solid rgba(255,255,255,.18); padding: .7rem .6rem .8rem; }
.lj-user { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: .375rem; color: #fff; text-decoration: none; }
.lj-user:hover, .lj-user.active { background: rgba(255,255,255,.12); color: #fff; }
.lj-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--lgc-blue-3); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font: 600 .8rem/1 var(--lgc-font-body); flex: none; border: 2px solid rgba(255,255,255,.55); }
.lj-user-txt { min-width: 0; line-height: 1.2; }
.lj-user-txt .n { font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-user-txt .r { font-size: .7rem; color: rgba(255,255,255,.75); text-transform: capitalize; }
.lj-side-tools { display: flex; gap: .35rem; margin-top: .5rem; padding: 0 .2rem; }
.lj-tool { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; border-radius: .375rem; border: 1px solid rgba(255,255,255,.35);
  background: transparent; color: #fff; }
.lj-tool:hover { background: rgba(255,255,255,.14); }
.lj-tool[data-act=logout] { margin-left: auto; }

/* Compact (icon-only) sidebar on desktop */
@media (min-width: 992px) {
  html[data-lj-side=mini] .lj-side { width: var(--lj-side-mini); }
  html[data-lj-side=mini] .lj-main { margin-left: var(--lj-side-mini); }
  html[data-lj-side=mini] .lj-side .app-name, html[data-lj-side=mini] .lj-link span, html[data-lj-side=mini] .lj-side-group,
  html[data-lj-side=mini] .lj-user-txt, html[data-lj-side=mini] .lj-count { display: none; }
  html[data-lj-side=mini] .lj-side-brand { padding: 1rem .6rem; }
  html[data-lj-side=mini] .lj-logo-full { display: none !important; }
  html[data-lj-side=mini] .lj-logo-mini { display: block !important; width: 34px; height: 34px; margin: 0 auto; border-radius: .375rem; background: #fff; padding: 3px; }
  html[data-lj-side=mini] .lj-link { justify-content: center; padding: .65rem 0; }
  html[data-lj-side=mini] .lj-user { justify-content: center; padding: .4rem 0; }
  html[data-lj-side=mini] .lj-side-tools { flex-direction: column; align-items: center; }
  html[data-lj-side=mini] .lj-tool[data-act=logout] { margin-left: 0; }
  html[data-lj-side=mini] #side-collapse i { transform: rotate(180deg); }
}
/* Mobile: off-canvas */
.lj-topbar { position: sticky; top: 0; z-index: 1030; background: var(--lgc-blue); color: #fff; display: flex; align-items: center; gap: .8rem; padding: .55rem 1rem; }
.lj-topbar-logo { width: 120px; }
.lj-topbar .app-name { margin: 0; border-left: 1px solid rgba(255,255,255,.45); padding-left: .8rem; font-size: 1rem; }
.lj-backdrop { display: none; }
@media (max-width: 991.98px) {
  .lj-side { transform: translateX(-100%); box-shadow: none; }
  .lj-main { margin-left: 0; }
  .lj-shell.side-open .lj-side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .lj-shell.side-open .lj-backdrop { display: block; position: fixed; inset: 0; background: rgba(1,15,62,.45); z-index: 1035; }
  .matrix-wrap { max-height: calc(100vh - 230px); }
}

/* ================================================================ Collapsible categories */
.matrix tr.cat th { cursor: pointer; user-select: none; }
.matrix tr.cat th .cat-chev { display: inline-block; width: 1rem; color: var(--lgc-blue); transition: transform .15s ease; }
.matrix tr.cat.collapsed th .cat-chev { transform: rotate(-90deg); }
.matrix tr.cat .cat-n { font: 500 .72rem/1 var(--lgc-font-body); color: var(--lgc-ink); margin-left: .4rem; }
.matrix tr.cat .cat-sum { font: 500 .72rem/1 var(--lgc-font-body); color: var(--lgc-blue-3); }
.matrix tr.cat:focus-visible th { outline: 2px solid var(--lgc-blue); outline-offset: -2px; }

/* ================================================================ Profile */
.profile-hero { display: flex; align-items: center; gap: 1rem; }
.profile-hero .lj-avatar { width: 64px; height: 64px; font-size: 1.3rem; border-color: var(--lgc-blue-1); }
.sec-list { list-style: none; padding: 0; margin: 0; }
.sec-list li { display: flex; gap: .6rem; padding: .35rem 0; font-size: .84rem; }
.sec-list li i { width: 1.1rem; text-align: center; margin-top: .15rem; }
.profile-scroll { max-height: 420px; overflow: auto; }
.captcha-box { min-height: 78px; display: flex; justify-content: center; margin-bottom: .75rem; }

/* ================================================================ Dark mode (Bootstrap data-bs-theme + brand overrides) */
[data-bs-theme=dark] {
  --bs-body-bg: #0b1433; --bs-body-color: #e6e9f5; --bs-border-color: #26335f; --bs-secondary-color: #a7b0cf;
  --bs-link-color: #8CA5FF; --bs-link-color-rgb: 140, 165, 255; --bs-link-hover-color: #c9d5ff; --bs-link-hover-color-rgb: 201, 213, 255;
  --lgc-ink: #a7b0cf; --lgc-grey: #26335f; --lgc-blue-1: #15224f;
}
[data-bs-theme=dark] body { background: #0b1433; color: #e6e9f5; }
[data-bs-theme=dark] .lj-side, [data-bs-theme=dark] .lj-topbar { background: #071039; }
[data-bs-theme=dark] .lj-link.active { background: var(--lgc-blue); }
[data-bs-theme=dark] .card, [data-bs-theme=dark] .modal-content { background: #101b44; border-color: #26335f; }
[data-bs-theme=dark] .card-header { background: #101b44; color: #e6e9f5; border-color: #26335f; }
[data-bs-theme=dark] .card-header i, [data-bs-theme=dark] .yes, [data-bs-theme=dark] .fnref { color: #8CA5FF; }
[data-bs-theme=dark] .kpi .small-muted, [data-bs-theme=dark] .kpi .v { color: #e6e9f5; }
[data-bs-theme=dark] .matrix-wrap, [data-bs-theme=dark] .feature-pick, [data-bs-theme=dark] .addon-pick, [data-bs-theme=dark] .bg-white { background: #101b44 !important; }
[data-bs-theme=dark] .matrix tbody th, [data-bs-theme=dark] .diff-row th { background: #101b44; color: #e6e9f5; }
[data-bs-theme=dark] .matrix .price-row td, [data-bs-theme=dark] .matrix .price-row th { background: #101b44; color: #e6e9f5; border-bottom-color: #8CA5FF; }
[data-bs-theme=dark] .matrix tr.cat td, [data-bs-theme=dark] .matrix tr.cat th { color: #e6e9f5; }
[data-bs-theme=dark] .matrix tr.cat .cat-sum { color: #c9d5ff; }
[data-bs-theme=dark] .matrix thead th { background: #020a2b; }
[data-bs-theme=dark] .matrix thead th.sel { background: var(--lgc-blue); }
[data-bs-theme=dark] .table { --bs-table-bg: transparent; --bs-table-color: #e6e9f5; --bs-table-border-color: #26335f; --bs-table-hover-bg: #15224f; --bs-table-hover-color: #fff; }
[data-bs-theme=dark] .btn-outline-dark { --bs-btn-color: #c9d5ff; --bs-btn-border-color: #8CA5FF; --bs-btn-hover-bg: #8CA5FF; --bs-btn-hover-color: #010F3E; }
[data-bs-theme=dark] .btn-check:checked + .btn-outline-dark { background: var(--lgc-blue); color: #fff; border-color: var(--lgc-blue); }
[data-bs-theme=dark] .chip { background: #26335f; color: #e6e9f5; }
[data-bs-theme=dark] .chip.add { background: #15224f; color: #c9d5ff; }
[data-bs-theme=dark] .chip.lose { background: transparent; }
[data-bs-theme=dark] .alert-warning, [data-bs-theme=dark] .alert-light { --bs-alert-bg: #15224f; --bs-alert-border-color: #26335f; --bs-alert-color: #e6e9f5; }
[data-bs-theme=dark] .alert-danger { --bs-alert-bg: #101b44; }
[data-bs-theme=dark] .text-bg-light { background: #15224f !important; color: #c9d5ff !important; }
[data-bs-theme=dark] .link-dark { color: #e6e9f5 !important; }
[data-bs-theme=dark] .bg-light { background: #15224f !important; color: #e6e9f5; }
[data-bs-theme=dark] .lgc-footer { border-color: #26335f; }
[data-bs-theme=dark] .text-success { color: #8CA5FF !important; }
[data-bs-theme=dark] .login-wrap .card { background: #fff; color: #1a1a1a; }
[data-bs-theme=dark] .login-wrap .card .form-control { background: #fff; color: #1a1a1a; border-color: #ced4da; }
@media print { .lj-side, .lj-topbar { display: none !important; } .lj-main { margin-left: 0 !important; } }

/* ================================================================ Customer view */
.cust-only { display: none; }
html[data-lj-cust="1"] .int, html[data-lj-cust="1"] .vbadge { display: none !important; }
html[data-lj-cust="1"] .cust-only { display: inline; }
html[data-lj-cust="1"] .matrix thead th[data-col] { cursor: default; }

/* Plan 1 vs Plan 2 */
.tier-card .card-header { cursor: pointer; user-select: none; background: var(--lgc-blue-1); }
.tier-card .card-header:focus-visible { outline: 2px solid var(--lgc-blue); outline-offset: -2px; }
.tier-card .cat-chev { display: inline-block; width: 1rem; color: var(--lgc-blue); transition: transform .15s ease; }
.tier-card .cat-chev.collapsed { transform: rotate(-90deg); }
.tier-wrap { max-height: none; }
.tier-wrap .matrix thead th { min-width: 140px; max-width: 220px; cursor: default; }
.tier-wrap .matrix tr.cat th { cursor: default; }
.badge.tier-up { background: var(--lgc-blue); color: #fff; font-weight: 500; }
[data-bs-theme=dark] .tier-card .card-header { background: #101b44; color: #e6e9f5; }

/* reCAPTCHA v3 badge: hidden (visibility, NOT display:none, which breaks token minting).
   Google permits this only with the attribution text shown on the login form (#capnote). */
.grecaptcha-badge { visibility: hidden !important; }
.captcha-note { font-size: .75rem; }
.captcha-note a { color: inherit; text-decoration: underline; }