/* LicenseHub portal theme on top of Bootstrap 5.3 (local, wwwroot/lib).
   Tokens first (light, then dark via data-bs-theme set by js/theme.js), then layout, then components.
   Only one accent color: change --lh-accent* to rebrand. */

:root,
[data-bs-theme=light] {
    --lh-accent: #2F54EB;
    --lh-accent-rgb: 47, 84, 235;
    --lh-accent-hover: #1D39C4;
    --lh-accent-soft: #EEF2FF;
    --lh-bg: #F6F7F9;
    --lh-surface: #FFFFFF;
    --lh-surface-2: #FAFBFC;
    --lh-border: #E4E7EC;
    --lh-border-strong: #D0D5DD;
    --lh-text: #111827;
    --lh-muted: #5B6472;
    --lh-track: #F1F3F6;

    --lh-ok-bg: #DCFCE7;   --lh-ok-fg: #166534;
    --lh-warn-bg: #FEF3C7; --lh-warn-fg: #92400E;
    --lh-bad-bg: #FEE2E2;  --lh-bad-fg: #991B1B;
    --lh-off-bg: #F1F3F6;  --lh-off-fg: #374151;
    --lh-info-bg: #EEF2FF; --lh-info-fg: #1D39C4;
    --lh-danger: #B42318;
    --lh-danger-border: #FDA29B;

    --bs-body-bg: var(--lh-bg);
    --bs-body-color: var(--lh-text);
    --bs-secondary-color: var(--lh-muted);
    --bs-border-color: var(--lh-border);
    --bs-tertiary-bg: var(--lh-surface-2);
    --bs-primary: var(--lh-accent);
    --bs-primary-rgb: var(--lh-accent-rgb);
    --bs-link-color: var(--lh-accent);
    --bs-link-color-rgb: var(--lh-accent-rgb);
    --bs-link-hover-color: var(--lh-accent-hover);
    --bs-focus-ring-color: rgba(var(--lh-accent-rgb), .25);
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: .875rem;
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    color-scheme: light;
}

[data-bs-theme=dark] {
    --lh-accent: #7C9BFF;
    --lh-accent-rgb: 124, 155, 255;
    --lh-accent-hover: #A5BBFF;
    --lh-accent-soft: rgba(124, 155, 255, .14);
    --lh-bg: #0F1115;
    --lh-surface: #171A21;
    --lh-surface-2: #1C2029;
    --lh-border: #2A2F3A;
    --lh-border-strong: #3A4150;
    --lh-text: #E6E8EC;
    --lh-muted: #A0A7B4;
    --lh-track: #252A34;

    --lh-ok-bg: rgba(34, 197, 94, .16);   --lh-ok-fg: #86EFAC;
    --lh-warn-bg: rgba(245, 158, 11, .16); --lh-warn-fg: #FCD34D;
    --lh-bad-bg: rgba(239, 68, 68, .16);   --lh-bad-fg: #FCA5A5;
    --lh-off-bg: rgba(148, 163, 184, .16); --lh-off-fg: #CBD5E1;
    --lh-info-bg: rgba(124, 155, 255, .16); --lh-info-fg: #A5BBFF;
    --lh-danger: #F97066;
    --lh-danger-border: #7A271A;

    --bs-body-bg: var(--lh-bg);
    --bs-body-color: var(--lh-text);
    --bs-secondary-color: var(--lh-muted);
    --bs-border-color: var(--lh-border);
    --bs-tertiary-bg: var(--lh-surface-2);
    --bs-primary: var(--lh-accent);
    --bs-primary-rgb: var(--lh-accent-rgb);
    --bs-link-color: var(--lh-accent);
    --bs-link-color-rgb: var(--lh-accent-rgb);
    --bs-link-hover-color: var(--lh-accent-hover);
    color-scheme: dark;
}

body { background: var(--lh-bg); -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- Layout */

.lh-shell { display: flex; min-height: 100vh; }
.lh-main { flex: 1 1 auto; min-width: 0; padding: 1.75rem 2rem 3rem; }
.lh-content { max-width: 80rem; }

.lh-sidebar {
    --bs-offcanvas-width: 16rem;
    --bs-offcanvas-bg: var(--lh-surface);
    background: var(--lh-surface);
    border-right: 1px solid var(--lh-border);
}
.lh-sidebar .offcanvas-body { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem .875rem; }
@media (min-width: 992px) {
    .lh-sidebar { flex: 0 0 15.5rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
    .lh-sidebar .offcanvas-body { height: 100%; }
}

.lh-topbar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--lh-surface); border-bottom: 1px solid var(--lh-border); }

.lh-brand { display: flex; align-items: center; gap: .625rem; padding: 0 .5rem; color: var(--lh-text); text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.lh-brand:hover { color: var(--lh-text); }
.lh-brand-mark { width: 2rem; height: 2rem; border-radius: .5rem; background: var(--lh-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
[data-bs-theme=dark] .lh-brand-mark { color: #0F1115; }

.lh-nav { display: flex; flex-direction: column; gap: 2px; }
.lh-nav-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lh-muted); padding: .75rem .625rem .25rem; }
.lh-nav a { display: flex; align-items: center; gap: .625rem; padding: .55rem .625rem; border-radius: .5rem; color: var(--lh-off-fg); text-decoration: none; font-weight: 500; }
.lh-nav a:hover { background: var(--lh-track); color: var(--lh-text); }
.lh-nav a.active { background: var(--lh-accent-soft); color: var(--lh-accent); font-weight: 600; }
.lh-nav svg { flex: none; }

.lh-user { margin-top: auto; border-top: 1px solid var(--lh-border); padding: .875rem .5rem 0; display: flex; flex-direction: column; gap: .375rem; font-size: .8125rem; }
.lh-user-name { font-weight: 600; word-break: break-all; }
.lh-user-links { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.lh-user-links form { display: inline; }
.lh-user-links .btn-link { padding: 0; font-size: inherit; border: 0; vertical-align: baseline; text-decoration: none; }

/* Sign-in pages (no sidebar). */
.lh-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 3rem 1rem; }
.lh-auth .lh-brand { font-size: 1.125rem; }
.lh-auth main { width: 100%; }
.auth-card { max-width: 25rem; margin: 0 auto; }
.auth-card .card-body { padding: 2rem !important; }

/* ---------------------------------------------------------------- Type and page header */

h1, .h1, h2, .h2, h3, .h3 { font-weight: 700; letter-spacing: -.02em; }
.lh-main h1.h3 { font-size: 1.625rem; }
h2.h5, .h5 { font-size: 1rem; font-weight: 700; }
.lh-main section > h2.h5 { margin-bottom: .75rem; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--lh-muted); --bs-breadcrumb-item-active-color: var(--lh-muted); margin-bottom: .5rem; }
.breadcrumb a { text-decoration: none; }
.form-text, .text-body-secondary { color: var(--lh-muted) !important; }
code { color: var(--lh-bad-fg); }

/* ---------------------------------------------------------------- Cards and stats */

.card {
    --bs-card-bg: var(--lh-surface);
    --bs-card-border-color: var(--lh-border);
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: .875rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.125rem;
    box-shadow: none;
}
.card-header { font-weight: 700; font-size: .9375rem; border-bottom-color: var(--lh-border); }
.card-footer { background: transparent !important; border-top-color: var(--lh-border); padding: .75rem 1.25rem; }
.shadow-sm { box-shadow: 0 4px 16px rgba(16, 24, 40, .06) !important; }
details.card > summary { cursor: pointer; }

.stat { font-size: 1.875rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: .8125rem; font-weight: 600; color: var(--lh-muted); margin-bottom: .5rem; }
.kpi-note { font-size: .78rem; color: var(--lh-muted); margin-top: .5rem; }
.kpi-note.warn { color: var(--lh-warn-fg); }
.kpi-note.bad { color: var(--lh-bad-fg); }

.meter { height: .5rem; border-radius: 999px; background: var(--lh-track); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--lh-accent); border-radius: 999px; }
.meter.over > span { background: var(--lh-danger); }

/* In-page section links of the customer page. */
.lh-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--lh-border); overflow-x: auto; margin-bottom: 1.5rem; }
.lh-tabs a { padding: .625rem .875rem; font-weight: 600; color: var(--lh-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lh-tabs a:hover { color: var(--lh-text); border-bottom-color: var(--lh-border-strong); }
section[id] { scroll-margin-top: 1rem; }

/* ---------------------------------------------------------------- Tables */

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--lh-border);
    --bs-table-hover-bg: var(--lh-surface-2);
    --bs-table-hover-color: var(--lh-text);
    margin-bottom: 0;
    font-size: .84rem;
}
.table > thead th { font-size: .75rem; font-weight: 600; color: var(--lh-muted); background: var(--lh-surface-2); white-space: nowrap; border-bottom-color: var(--lh-border); }
.table > :not(caption) > * > * { padding: .7rem 1rem; }
.table-sm > :not(caption) > * > * { padding: .6rem .875rem; }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.table td, .table th { vertical-align: middle; }
.table .table-success, .table tr.table-success > * { --bs-table-bg: transparent; --bs-table-color: inherit; box-shadow: inset 3px 0 0 transparent; }
.table tr.table-success > td:first-child { box-shadow: inset 3px 0 0 var(--lh-ok-fg); }
.table-actions { white-space: nowrap; text-align: right; }
.table-actions form { display: inline-block; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.hash { font-family: Consolas, ui-monospace, "Cascadia Mono", monospace; font-size: .82em; }
.contract-annulled td { text-decoration: line-through; color: var(--lh-muted); }
.contract-annulled td.annul-reason { text-decoration: none; white-space: normal; }

details.row-actions { display: inline-block; text-align: left; }
details.row-actions > summary { cursor: pointer; list-style: none; }
details.row-actions > summary::-webkit-details-marker { display: none; }
details.row-actions[open] > :not(summary) { position: relative; z-index: 2; width: 20rem; white-space: normal; background: var(--lh-surface) !important; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }

.audit-detail { font-size: .78em; white-space: pre-wrap; word-break: break-all; max-width: 32rem; display: block; }

/* ---------------------------------------------------------------- Status badges (PortalText.Badge keeps Bootstrap names) */

.badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25em .7em; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.4; }
.badge.text-bg-success::before, .badge.text-bg-warning::before, .badge.text-bg-danger::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }
.badge.text-bg-success { background: var(--lh-ok-bg) !important; color: var(--lh-ok-fg) !important; }
.badge.text-bg-warning { background: var(--lh-warn-bg) !important; color: var(--lh-warn-fg) !important; }
.badge.text-bg-danger { background: var(--lh-bad-bg) !important; color: var(--lh-bad-fg) !important; }
.badge.text-bg-secondary, .badge.text-bg-light { background: var(--lh-off-bg) !important; color: var(--lh-off-fg) !important; border: 0 !important; }

/* ---------------------------------------------------------------- Buttons and forms */

.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: .5rem; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .875rem; }
.btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: .45rem; }
.btn-primary {
    --bs-btn-bg: var(--lh-accent); --bs-btn-border-color: var(--lh-accent); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--lh-accent-hover); --bs-btn-hover-border-color: var(--lh-accent-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--lh-accent-hover); --bs-btn-active-border-color: var(--lh-accent-hover);
    --bs-btn-disabled-bg: var(--lh-accent); --bs-btn-disabled-border-color: var(--lh-accent);
}
[data-bs-theme=dark] .btn-primary { --bs-btn-color: #0F1115; --bs-btn-hover-color: #0F1115; --bs-btn-active-color: #0F1115; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-warning {
    --bs-btn-bg: var(--lh-surface); --bs-btn-border-color: var(--lh-border-strong); --bs-btn-color: var(--lh-text);
    --bs-btn-hover-bg: var(--lh-track); --bs-btn-hover-border-color: var(--lh-border-strong); --bs-btn-hover-color: var(--lh-text);
    --bs-btn-active-bg: var(--lh-track); --bs-btn-active-border-color: var(--lh-border-strong); --bs-btn-active-color: var(--lh-text);
}
.btn-outline-primary { --bs-btn-color: var(--lh-accent); --bs-btn-hover-color: var(--lh-accent-hover); }
.btn-outline-success { --bs-btn-color: var(--lh-ok-fg); --bs-btn-hover-color: var(--lh-ok-fg); }
.btn-outline-warning { --bs-btn-color: var(--lh-warn-fg); --bs-btn-hover-color: var(--lh-warn-fg); }
.btn-outline-danger {
    --bs-btn-bg: var(--lh-surface); --bs-btn-border-color: var(--lh-danger-border); --bs-btn-color: var(--lh-danger);
    --bs-btn-hover-bg: var(--lh-bad-bg); --bs-btn-hover-border-color: var(--lh-danger-border); --bs-btn-hover-color: var(--lh-danger);
    --bs-btn-active-bg: var(--lh-bad-bg); --bs-btn-active-border-color: var(--lh-danger-border); --bs-btn-active-color: var(--lh-danger);
}
.btn-link { --bs-btn-color: var(--lh-accent); --bs-btn-hover-color: var(--lh-accent-hover); text-decoration: none; }

.form-label { font-weight: 600; color: var(--lh-text); margin-bottom: .3rem; }
.form-label.small { font-size: .78rem; }
.form-control, .form-select { border-color: var(--lh-border-strong); background-color: var(--lh-surface); border-radius: .5rem; }
.form-control-sm, .form-select-sm { border-radius: .45rem; min-height: 2.125rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--lh-accent); box-shadow: 0 0 0 .2rem rgba(var(--lh-accent-rgb), .2); }
.form-check-input:checked { background-color: var(--lh-accent); border-color: var(--lh-accent); }

/* ---------------------------------------------------------------- Alerts and pager */

.alert { border-radius: .625rem; border-width: 1px; font-size: .875rem; }
.alert-success { --bs-alert-bg: var(--lh-ok-bg); --bs-alert-color: var(--lh-ok-fg); --bs-alert-border-color: transparent; }
.alert-warning { --bs-alert-bg: var(--lh-warn-bg); --bs-alert-color: var(--lh-warn-fg); --bs-alert-border-color: transparent; }
.alert-danger { --bs-alert-bg: var(--lh-bad-bg); --bs-alert-color: var(--lh-bad-fg); --bs-alert-border-color: transparent; }
.alert-info { --bs-alert-bg: var(--lh-info-bg); --bs-alert-color: var(--lh-text); --bs-alert-border-color: transparent; }

.pagination { --bs-pagination-border-radius: .45rem; --bs-pagination-color: var(--lh-text); --bs-pagination-bg: var(--lh-surface); --bs-pagination-border-color: var(--lh-border-strong); --bs-pagination-active-bg: var(--lh-accent); --bs-pagination-active-border-color: var(--lh-accent); --bs-pagination-hover-bg: var(--lh-track); --bs-pagination-disabled-bg: var(--lh-surface); gap: .375rem; }
.pagination .page-link { border-radius: var(--bs-pagination-border-radius) !important; }

/* Bootstrap's bg-white (popovers of row actions, recovery codes) follows the theme; the QR stays white. */
[data-bs-theme=dark] .bg-white:not(.qr-svg) { background-color: var(--lh-surface) !important; }
#renovar { scroll-margin-top: 1rem; }

/* ---------------------------------------------------------------- Two-factor pages */

.qr-svg svg { width: 14rem; height: 14rem; display: block; }
.qr-svg { background: #fff !important; }
.secret-key { font-family: Consolas, ui-monospace, monospace; font-size: 1.05rem; letter-spacing: .05em; word-spacing: .3em; }
.recovery-codes { font-family: Consolas, ui-monospace, monospace; columns: 2; }

@media (max-width: 991.98px) {
    .lh-main { padding: 1.25rem 1rem 2.5rem; }
}