:root {
    --trezo-primary: #605dff;
    --trezo-primary-2: #7a6bff;
    --trezo-bg-soft: #f7f8fc;
    --trezo-panel: #ffffff;
    --trezo-border: #eceef2;
    --trezo-text-muted: #8695aa;
    --trezo-shadow: 0 8px 18px rgba(9, 11, 33, .04);
    --shell-sidebar-w: 260px;
    --shell-sidebar-collapsed-w: 78px;
    --shell-header-h: 64px;
}

[data-bs-theme="dark"] {
    --trezo-primary: #757dff;
    --trezo-primary-2: #9085ff;
    --trezo-bg-soft: #0b1220;
    --trezo-panel: #111a2e;
    --trezo-border: #23324d;
    --trezo-text-muted: #94a3b8;
    --trezo-shadow: 0 14px 28px rgba(2, 8, 20, .42);
}

main > .container {
    padding: 70px 15px 20px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.not-set {
    color: var(--bs-danger);
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px var(--bs-body-color);
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px var(--bs-body-color);
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--bs-secondary-color);
}

.error-summary {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-left: 3px solid var(--bs-danger-border-subtle);
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align navbar brand baseline with nav links */
.navbar > .container,
.navbar > .container-fluid {
    align-items: baseline;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    color: var(--bs-navbar-color);
}

@media (max-width: 767.98px) {
    .navbar-nav .nav-link.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar-nav .nav-link.logout:focus,
.navbar-nav .nav-link.logout:hover {
    color: var(--bs-navbar-hover-color);
}

/* footer logo: light logo by default (light bg-body-tertiary), dark logo for dark theme */
.footer-logo-dark { display: none; }

[data-bs-theme="dark"] .footer-logo-light { display: none; }
[data-bs-theme="dark"] .footer-logo-dark  { display: inline-block; }

/* login inputs: seamless icon inside input (Volt style) */
.login-split-card .input-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.login-split-card .input-group .input-group-text {
    background: transparent;
    border: 0;
    padding-left: 1rem;
    padding-right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-split-card .input-group .form-control {
    border: 0;
    background: transparent;
}

.login-split-card .input-group .form-control:focus {
    box-shadow: none;
}

.login-split-card .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* validation styles for login split card (browsers with :has()) */
@supports selector(.input-group:has(.is-invalid)) {
    .login-split-card .input-group:has(.is-invalid) ~ .invalid-feedback {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group:has(.is-invalid) {
        border-color: var(--bs-danger);
    }

    .login-split-card .input-group:has(.is-invalid):focus-within {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* fallback validation styles for login split card (browsers without :has()) */
@supports not selector(.input-group:has(.is-invalid)) {
    .login-split-card .invalid-feedback:not(:empty) {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group .form-control.is-invalid {
        border: var(--bs-border-width) solid var(--bs-danger);
    }

    .login-split-card .input-group .form-control.is-invalid:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* login split card */
.login-split-card {
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .10);
    background-color: var(--bs-gray-100);
    width: 100%;
    max-width: 900px;
}

.login-split-card-wide {
    max-width: 960px;
}

.login-brand-title {
    font-size: 1.75rem;
    line-height: 1.3;
}

.login-brand-text {
    font-size: .9rem;
}

.login-brand-panel {
    background: linear-gradient(135deg, #40B3D8 0%, #3a9cbd 40%, #83C933 100%);
    position: relative;
    min-height: 480px;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(241, 138, 42, .25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(131, 201, 51, .2) 0%, transparent 40%);
    pointer-events: none;
}

.login-btn {
    background: linear-gradient(135deg, #40B3D8, #3a9cbd);
    border: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: opacity .2s, transform .1s;
}

.login-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
}

/* dark mode login card */
[data-bs-theme="dark"] .login-split-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 4px 24px rgba(0, 0, 0, .4);
}

[data-bs-theme="dark"] .login-mobile-logo {
    filter: invert(1);
}

/* contact form textarea height */
.site-contact textarea.form-control {
    height: 140px;
}

/* captcha: blend with card background */
.site-contact img[src*="captcha"] {
    border-radius: var(--bs-border-radius);
    mix-blend-mode: multiply;
}

/* dark mode: invert captcha for visibility on dark background */
[data-bs-theme="dark"] .site-contact img[src*="captcha"] {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(180deg);
}

/* centered page layout */
.site-login,
.site-contact,
.site-index,
.site-error,
.site-about,
.site-contact-success {
    flex: 1;
}

.site-error .site-error-content,
.site-about .site-about-content,
.site-contact-success .site-contact-success-content {
    width: 100%;
    max-width: 90%;
}

@media (min-width: 576px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 60%;
    }
}

@media (min-width: 992px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 50%;
    }
}

/* hero banner */
.hero-banner {
    background: linear-gradient(135deg, #83C933 0%, #3a9cbd 40%, #40B3D8 100%);
    position: relative;
}

.hero-lead {
    max-width: 520px;
}

.hero-logo {
    height: 120px;
    opacity: .45;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 15% 85%, rgba(241, 138, 42, .3) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(131, 201, 51, .25) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(64, 179, 216, .15) 0%, transparent 60%);
    pointer-events: none;
}

/* extension cards */
.extension-card {
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.extension-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.extension-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* dark mode: extension cards */
[data-bs-theme="dark"] .extension-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 2px 8px rgba(0, 0, 0, .3);
}

[data-bs-theme="dark"] .extension-card:hover {
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 8px 24px rgba(0, 0, 0, .4) !important;
}

/* project panel navbar */
.app-navbar {
    background: color-mix(in srgb, var(--trezo-panel) 92%, var(--trezo-primary) 8%);
    border-bottom: 1px solid var(--bs-border-color);
    backdrop-filter: blur(8px);
}

[data-bs-theme="dark"] .app-navbar {
    background: #0f182a;
    border-bottom-color: var(--trezo-border);
}

.app-navbar .navbar-brand {
    font-weight: 600;
}

.role-badge {
    font-size: .68rem;
    letter-spacing: .06em;
}

/* login page (trezzo inspired) */
.login-card-trezzo {
    width: 100%;
    max-width: 480px;
    border-radius: 1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
    border: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .login-card-trezzo {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.login-chip {
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .72rem;
    letter-spacing: .07em;
    color: var(--bs-secondary-color);
}

.trezzo-input {
    border-radius: .8rem;
    border-color: var(--bs-border-color);
}

.trezzo-btn {
    border-radius: .7rem;
    background: linear-gradient(180deg, var(--trezo-primary-2), var(--trezo-primary));
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--trezo-primary) 78%, #000 22%);
    font-weight: 600;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--trezo-primary) 30%, transparent);
}

.trezzo-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.06);
    color: #fff;
}

/* Trezo buttons — override Bootstrap 5 .btn CSS variables */
.trezo-content .btn,
.ui-kit-page .btn,
.guest-topbar .btn,
.login-card-trezzo .btn,
.dashboard-card .btn,
.dashboard-hero .btn {
    border-radius: .7rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .5rem 1rem;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.trezo-content .btn.btn-sm,
.dashboard-card .btn.btn-sm,
.dashboard-hero .btn.btn-sm {
    padding: .38rem .75rem;
    font-size: .82rem;
    border-radius: .62rem;
}

.trezo-content .btn.btn-lg,
.login-card-trezzo .btn.btn-lg {
    padding: .62rem 1.25rem;
    font-size: 1rem;
}

.btn.btn-trezo-primary,
a.btn.btn-trezo-primary,
button.btn.btn-trezo-primary,
input.btn.btn-trezo-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--trezo-primary);
    --bs-btn-border-color: color-mix(in srgb, var(--trezo-primary) 80%, #000 20%);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--trezo-primary-2);
    --bs-btn-hover-border-color: var(--trezo-primary-2);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--trezo-primary) 88%, #000 12%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--trezo-primary) 88%, #000 12%);
    --bs-btn-focus-shadow-rgb: 96, 93, 255;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--trezo-primary);
    --bs-btn-disabled-border-color: var(--trezo-primary);
    color: #fff;
    background-image: linear-gradient(180deg, var(--trezo-primary-2), var(--trezo-primary));
    background-color: var(--trezo-primary);
    border: 1px solid color-mix(in srgb, var(--trezo-primary) 78%, #000 22%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--trezo-primary) 28%, transparent);
}

.btn.btn-trezo-primary:hover,
.btn.btn-trezo-primary:focus,
.btn.btn-trezo-primary:active {
    color: #fff;
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--trezo-primary-2) 92%, #fff 8%), var(--trezo-primary));
    transform: translateY(-1px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--trezo-primary) 34%, transparent);
}

.btn.btn-trezo-outline,
a.btn.btn-trezo-outline,
button.btn.btn-trezo-outline {
    --bs-btn-color: var(--trezo-primary);
    --bs-btn-bg: color-mix(in srgb, var(--trezo-primary) 7%, var(--trezo-panel) 93%);
    --bs-btn-border-color: color-mix(in srgb, var(--trezo-primary) 42%, var(--trezo-border) 58%);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--trezo-primary);
    --bs-btn-hover-border-color: var(--trezo-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--trezo-primary) 90%, #000 10%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--trezo-primary) 90%, #000 10%);
    --bs-btn-focus-shadow-rgb: 96, 93, 255;
    color: var(--trezo-primary);
    background-color: color-mix(in srgb, var(--trezo-primary) 7%, var(--trezo-panel) 93%);
    border: 1px solid color-mix(in srgb, var(--trezo-primary) 42%, var(--trezo-border) 58%);
    box-shadow: none;
}

.btn.btn-trezo-outline:hover,
.btn.btn-trezo-outline:focus,
.btn.btn-trezo-outline:active {
    color: #fff;
    background-color: var(--trezo-primary);
    border-color: var(--trezo-primary);
    transform: translateY(-1px);
}

.btn.btn-trezo-danger-outline,
a.btn.btn-trezo-danger-outline,
button.btn.btn-trezo-danger-outline {
    --bs-btn-color: #e55353;
    --bs-btn-bg: color-mix(in srgb, #e55353 8%, var(--trezo-panel) 92%);
    --bs-btn-border-color: color-mix(in srgb, #e55353 55%, var(--trezo-border) 45%);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e55353;
    --bs-btn-hover-border-color: #e55353;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #cf4747;
    --bs-btn-active-border-color: #cf4747;
    color: #e55353;
    background-color: color-mix(in srgb, #e55353 8%, var(--trezo-panel) 92%);
    border: 1px solid color-mix(in srgb, #e55353 55%, var(--trezo-border) 45%);
}

.btn.btn-trezo-danger-outline:hover,
.btn.btn-trezo-danger-outline:focus {
    color: #fff;
    background-color: #e55353;
    border-color: #e55353;
}

.btn.btn-trezo-soft-success,
button.btn.btn-trezo-soft-success {
    --bs-btn-color: #25b003;
    --bs-btn-bg: color-mix(in srgb, #25b003 10%, var(--trezo-panel) 90%);
    --bs-btn-border-color: color-mix(in srgb, #25b003 40%, var(--trezo-border) 60%);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #25b003;
    --bs-btn-hover-border-color: #25b003;
    color: #25b003;
    background-color: color-mix(in srgb, #25b003 10%, var(--trezo-panel) 90%);
    border: 1px solid color-mix(in srgb, #25b003 40%, var(--trezo-border) 60%);
}

.btn.btn-trezo-soft-success:hover,
.btn.btn-trezo-soft-success:focus {
    color: #fff;
    background-color: #25b003;
    border-color: #25b003;
}

[data-bs-theme="dark"] .btn.btn-trezo-outline {
    --bs-btn-bg: color-mix(in srgb, var(--trezo-primary) 12%, #0f192b 88%);
    background-color: color-mix(in srgb, var(--trezo-primary) 12%, #0f192b 88%);
}

/* trezo form ui */
.trezo-form-card {
    border-radius: 16px;
}

.trezo-form-section + .trezo-form-section {
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--trezo-border);
}

.trezo-form-title {
    font-size: 1rem;
    margin-bottom: .25rem;
    letter-spacing: -.01em;
}

.trezo-form-subtitle {
    color: var(--trezo-text-muted);
    font-size: .85rem;
    margin-bottom: .8rem;
}

.trezo-input.form-control,
.trezo-input.form-select {
    border-radius: .7rem;
    border-color: var(--trezo-border);
    background: color-mix(in srgb, var(--trezo-panel) 96%, var(--trezo-primary) 4%);
    color: var(--bs-body-color);
    min-height: 44px;
}

.trezo-input.form-control:focus,
.trezo-input.form-select:focus {
    border-color: var(--trezo-primary);
    box-shadow: 0 0 0 .24rem color-mix(in srgb, var(--trezo-primary) 22%, transparent);
}

.trezo-form-card .form-label {
    color: var(--trezo-text-muted);
    font-weight: 600;
    font-size: .82rem;
    margin-bottom: .35rem;
}

.trezo-form-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--trezo-border);
}

.site-wizard-steps {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.site-wizard-step-bullet {
    font-size: .76rem;
    font-weight: 600;
    color: var(--trezo-text-muted);
    border: 1px solid var(--trezo-border);
    border-radius: 999px;
    padding: .28rem .62rem;
    background: color-mix(in srgb, var(--trezo-panel) 96%, var(--trezo-primary) 4%);
}

.site-wizard-step-bullet.active {
    color: #fff;
    background: var(--trezo-primary);
    border-color: var(--trezo-primary);
}

.site-wizard-step-bullet.done {
    color: var(--trezo-primary);
    border-color: color-mix(in srgb, var(--trezo-primary) 35%, var(--trezo-border) 65%);
    background: color-mix(in srgb, var(--trezo-primary) 10%, transparent);
}

.owner-result-box {
    margin-top: .45rem;
    border: 1px solid var(--trezo-border);
    border-radius: .7rem;
    overflow: hidden;
    background: var(--trezo-panel);
}

.owner-result-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--trezo-border);
    background: transparent;
    padding: .5rem .65rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.owner-result-item:last-child {
    border-bottom: 0;
}

.owner-result-item:hover {
    background: color-mix(in srgb, var(--trezo-primary) 10%, transparent);
}

.owner-result-name {
    font-weight: 600;
    font-size: .86rem;
}

.owner-result-meta,
.owner-result-empty {
    font-size: .76rem;
    color: var(--trezo-text-muted);
}

.owner-result-empty {
    padding: .5rem .65rem;
}

.owner-selected {
    border: 1px dashed var(--trezo-border);
    border-radius: .7rem;
    padding: .5rem .65rem;
}

.owner-selected-name {
    font-weight: 600;
}

.owner-selected-meta {
    color: var(--trezo-text-muted);
    font-size: .76rem;
}

.domain-preflight {
    border-radius: .7rem;
    border: 1px solid var(--trezo-border);
    padding: .55rem .7rem;
    background: color-mix(in srgb, var(--trezo-panel) 96%, var(--trezo-primary) 4%);
}

.domain-preflight--idle {
    border-style: dashed;
}

.domain-preflight--checking {
    border-color: color-mix(in srgb, var(--trezo-primary) 35%, var(--trezo-border) 65%);
}

.domain-preflight--ok {
    border-color: color-mix(in srgb, #198754 45%, var(--trezo-border) 55%);
    background: color-mix(in srgb, #198754 8%, var(--trezo-panel) 92%);
}

.domain-preflight--warn {
    border-color: color-mix(in srgb, #fd7e14 45%, var(--trezo-border) 55%);
    background: color-mix(in srgb, #fd7e14 8%, var(--trezo-panel) 92%);
}

.domain-preflight--error {
    border-color: color-mix(in srgb, #dc3545 45%, var(--trezo-border) 55%);
    background: color-mix(in srgb, #dc3545 8%, var(--trezo-panel) 92%);
}

.domain-preflight-text {
    font-size: .8rem;
    line-height: 1.35;
}

.domain-preflight-text--main {
    font-weight: 600;
}

.domain-preflight-text--meta {
    color: var(--trezo-text-muted);
    margin-top: .25rem;
}

.domain-preflight-spinner {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border: 2px solid color-mix(in srgb, var(--trezo-primary) 25%, transparent);
    border-top-color: var(--trezo-primary);
    border-radius: 50%;
    animation: domain-preflight-spin .7s linear infinite;
    vertical-align: -.15rem;
    margin-right: .25rem;
}

@keyframes domain-preflight-spin {
    to { transform: rotate(360deg); }
}

.domain-wizard-dns-card {
    border: 1px solid var(--trezo-border);
    border-radius: .75rem;
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--trezo-panel) 94%, var(--trezo-primary) 6%);
}

.domain-wizard-ns-list {
    margin: 0;
    padding-left: 1.1rem;
}

.domain-wizard-ns-list code {
    font-size: .88rem;
}

.domain-wizard-mail-block {
    border-top-color: var(--trezo-border) !important;
}

.domain-wizard-mail-status--ok {
    color: #198754;
    font-weight: 600;
}

.domain-wizard-mail-status--error {
    color: #b02a37;
    font-weight: 600;
}

.domain-wizard-mail-status--checking {
    color: var(--trezo-text-muted);
}

[data-wizard-next]:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* dashboard */
.dashboard-hero {
    border: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--trezo-panel) 94%, var(--trezo-primary) 6%);
    border-radius: 1rem;
    padding: 1.2rem 1.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

[data-bs-theme="dark"] .dashboard-hero {
    background: #131d33;
    border-color: var(--trezo-border);
}

.dashboard-chip {
    background: color-mix(in srgb, var(--trezo-primary) 18%, transparent);
    color: color-mix(in srgb, var(--trezo-primary) 65%, var(--bs-body-color));
    border: 1px solid color-mix(in srgb, var(--trezo-primary) 28%, transparent);
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .07em;
    padding: .32rem .62rem;
}

.metric-card,
.dashboard-card {
    border: 1px solid var(--trezo-border);
    border-radius: 1rem;
    background: var(--trezo-panel);
}

.trezo-panel {
    box-shadow: var(--trezo-shadow);
}

.metric-card {
    padding: 1rem 1.1rem;
}

.tech-card {
    position: relative;
    overflow: hidden;
}

.tech-card::after {
    content: '';
    position: absolute;
    top: -18px;
    right: -18px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--trezo-primary) 22%, transparent);
    opacity: .35;
}

.metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
    background: color-mix(in srgb, var(--trezo-primary) 15%, transparent);
    color: var(--trezo-primary);
}

.metric-icon i {
    font-size: 1rem;
}

.metric-label {
    color: var(--trezo-text-muted);
    font-size: .82rem;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 650;
    line-height: 1.15;
}

.metric-note {
    color: var(--trezo-text-muted);
    font-size: .78rem;
    margin-top: .35rem;
}

.dashboard-card {
    padding: 1rem 1.1rem;
}

.dashboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed var(--bs-border-color);
    padding: .55rem 0;
}

.dashboard-row:last-child {
    border-bottom: 0;
}

.dashboard-metric-link {
    display: block;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dashboard-metric-link:hover {
    color: inherit;
    border-color: color-mix(in srgb, var(--trezo-primary) 35%, var(--trezo-border) 65%);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--trezo-primary) 12%, transparent);
    transform: translateY(-1px);
}

.dashboard-metric-link--danger .metric-icon {
    background: color-mix(in srgb, #dc3545 15%, transparent);
    color: #b02a37;
}

.dashboard-metric-link--danger:hover {
    border-color: color-mix(in srgb, #dc3545 40%, var(--trezo-border) 60%);
}

.dashboard-metric-link--warn .metric-icon {
    background: color-mix(in srgb, #fd7e14 15%, transparent);
    color: #c35a00;
}

.dashboard-metric-link--warn:hover {
    border-color: color-mix(in srgb, #fd7e14 40%, var(--trezo-border) 60%);
}

.dashboard-section-secondary {
    border-top: 1px solid var(--trezo-border);
}

.dashboard-section-secondary-head {
    max-width: 42rem;
}

.dashboard-card--muted {
    background: color-mix(in srgb, var(--trezo-panel) 92%, var(--trezo-text-muted) 8%);
    box-shadow: none;
}

.dashboard-row--compact {
    padding: .4rem 0;
    font-size: .88rem;
}

.dashboard-pipeline-details summary {
    cursor: pointer;
    list-style: none;
}

.dashboard-pipeline-details summary::-webkit-details-marker {
    display: none;
}

.dashboard-pipeline-details summary::before {
    content: '▸ ';
}

.dashboard-pipeline-details[open] summary::before {
    content: '▾ ';
}

.dashboard-list {
    margin: 0;
    padding-left: 1rem;
    color: var(--trezo-text-muted);
}

.dashboard-list li {
    margin-bottom: .45rem;
}

.crm-chart-placeholder {
    border: 1px dashed var(--trezo-border);
    border-radius: .9rem;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--trezo-text-muted);
    background: color-mix(in srgb, var(--trezo-panel) 96%, var(--trezo-primary) 4%);
    font-size: .9rem;
}

.mini-stat {
    border: 1px solid var(--trezo-border);
    border-radius: .75rem;
    padding: .6rem .7rem;
    color: var(--trezo-text-muted);
    font-size: .82rem;
    background: color-mix(in srgb, var(--trezo-panel) 98%, var(--trezo-primary) 2%);
}

.mini-stat strong {
    color: var(--bs-body-color);
    font-size: .95rem;
}

/* Trezo tables (manual tables + Yii GridView) */
.trezo-table-wrap {
    border: 1px solid var(--trezo-border);
    border-radius: .85rem;
    overflow: hidden;
    background: var(--trezo-panel);
}

.trezo-table-wrap .table {
    margin-bottom: 0;
}

.table-trezo,
.table.table-trezo {
    border-collapse: separate;
    border-spacing: 0;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: color-mix(in srgb, var(--trezo-primary) 8%, var(--trezo-panel) 92%);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--trezo-border);
}

.table-trezo thead th,
.table.table-trezo thead th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--trezo-text-muted);
    background: color-mix(in srgb, var(--trezo-panel) 92%, var(--trezo-primary) 8%);
    border-bottom: 1px solid var(--trezo-border);
    padding: .72rem .85rem;
    white-space: nowrap;
}

.table-trezo tbody td,
.table.table-trezo tbody td {
    padding: .78rem .85rem;
    border-color: var(--trezo-border);
    vertical-align: middle;
    font-size: .88rem;
}

.table-trezo tbody tr,
.table.table-trezo tbody tr {
    transition: background-color .18s ease;
}

.table-trezo tbody tr:hover,
.table.table-trezo tbody tr:hover {
    background: color-mix(in srgb, var(--trezo-primary) 8%, var(--trezo-panel) 92%);
}

.table-trezo tbody td:first-child,
.table.table-trezo tbody td:first-child {
    font-weight: 600;
}

.table-trezo a:not(.btn),
.table.table-trezo a:not(.btn) {
    color: var(--trezo-primary);
    text-decoration: none;
    font-weight: 600;
}

.table-trezo a:not(.btn):hover,
.table.table-trezo a:not(.btn):hover {
    text-decoration: underline;
}

/* Yii GridView wrapper */
.grid-view {
    width: 100%;
}

.grid-view .trezo-table-wrap {
    margin-top: .25rem;
}

/* Sites list — compact layout */
.sites-list-grid .table-sites-list thead th,
.sites-list-grid .table-sites-list tbody td {
    padding: .55rem .65rem;
}

.sites-list-grid .table-sites-list thead th.col-actions,
.sites-list-grid .table-sites-list tbody td.col-actions {
    width: 1%;
    padding-left: .45rem;
    padding-right: .55rem;
}

.sites-list-grid .table-sites-list thead th.col-paid,
.sites-list-grid .table-sites-list tbody td.col-paid {
    width: 5.5rem;
}

.sites-list-grid .table-sites-list thead th.col-version,
.sites-list-grid .table-sites-list tbody td.col-version {
    width: 4.5rem;
}

.sites-list-grid .table-sites-list thead th.col-version .badge {
    font-size: .68rem;
    padding: .2rem .45rem;
}

.sites-list-grid .table-sites-list .col-site {
    min-width: 9rem;
    max-width: 14rem;
}

.sites-list-grid .table-sites-list .col-client {
    min-width: 8rem;
    max-width: 13rem;
}

.sites-list-grid .sites-list-domain {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.sites-list-grid .sites-list-site-meta {
    margin-top: .15rem;
    font-size: .72rem;
    color: var(--trezo-text-muted);
    line-height: 1.25;
}

.sites-list-grid .sites-list-client-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    line-height: 1.35;
}

.sites-list-grid .sites-list-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: .25rem;
    justify-content: flex-end;
}

.sites-list-grid .sites-list-action-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sites-quick-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .65rem;
}

.sites-quick-filters-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--trezo-text-muted);
}

.sites-quick-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sites-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .32rem .62rem;
    border-radius: 999px;
    border: 1px solid var(--trezo-border);
    background: var(--trezo-panel);
    color: var(--trezo-text);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sites-filter-chip:hover {
    border-color: color-mix(in srgb, var(--trezo-primary) 40%, var(--trezo-border) 60%);
    color: var(--trezo-primary);
    text-decoration: none;
}

.sites-filter-chip.is-active {
    background: var(--trezo-primary);
    border-color: var(--trezo-primary);
    color: #fff;
}

.sites-filter-chip--danger.is-active {
    background: #dc3545;
    border-color: #dc3545;
}

.sites-filter-chip--warn.is-active {
    background: #fd7e14;
    border-color: #fd7e14;
}

.sites-filter-chip-count {
    display: inline-flex;
    min-width: 1.15rem;
    justify-content: center;
    padding: 0 .28rem;
    border-radius: 999px;
    font-size: .68rem;
    background: color-mix(in srgb, currentColor 18%, transparent);
}

.sites-filter-chip.is-active .sites-filter-chip-count {
    background: color-mix(in srgb, #fff 22%, transparent);
}

.badge-paid-expired {
    background: color-mix(in srgb, #dc3545 18%, var(--trezo-panel) 82%);
    color: #b02a37;
    font-weight: 600;
}

.badge-paid-soon {
    background: color-mix(in srgb, #fd7e14 18%, var(--trezo-panel) 82%);
    color: #c35a00;
    font-weight: 600;
}

.sites-paid-cell--expired {
    color: #b02a37;
    font-weight: 600;
}

.sites-paid-cell--soon {
    color: #c35a00;
    font-weight: 600;
}

.sites-paid-cell--empty {
    color: var(--trezo-text-muted);
}

.dashboard-expiring-table .badge-paid-expired,
.dashboard-expiring-table .badge-paid-soon {
    font-size: .7rem;
}

.dashboard-expiring-comment {
    max-width: 280px;
    font-size: .8rem;
    color: var(--trezo-text-muted);
    vertical-align: middle;
}

.dashboard-expiring-comment-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    cursor: help;
}

.sites-list-grid .trezo-table-wrap {
    overflow-x: auto;
}

.sites-list-grid .table-sites-list thead th.col-actions,
.sites-list-grid .table-sites-list tbody td.col-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--trezo-panel);
    box-shadow: -8px 0 12px color-mix(in srgb, var(--bs-body-color) 8%, transparent);
}

.sites-list-grid .table-sites-list tbody tr:hover td.col-actions {
    background: color-mix(in srgb, var(--trezo-primary) 8%, var(--trezo-panel) 92%);
}

[data-bs-theme="dark"] .sites-list-grid .table-sites-list thead th.col-actions,
[data-bs-theme="dark"] .sites-list-grid .table-sites-list tbody td.col-actions {
    background: color-mix(in srgb, var(--trezo-panel) 94%, #1a2740 6%);
}

[data-bs-theme="dark"] .sites-list-grid .table-sites-list tbody tr:hover td.col-actions {
    background: color-mix(in srgb, var(--trezo-primary) 8%, var(--trezo-panel) 92%);
}

/* Site view card */
.site-view-page .site-view-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
}

.site-view-page .site-view-domain {
    word-break: break-word;
}

.site-view-page .site-view-public-url {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .88rem;
    color: var(--trezo-primary);
    text-decoration: none;
    word-break: break-all;
}

.site-view-page .site-view-public-url:hover {
    text-decoration: underline;
}

.site-view-page .site-view-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.site-view-page .site-view-metric-value {
    font-size: 1.35rem;
}

.site-view-page .site-view-metric-text {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.site-view-page .site-view-version-metric .badge {
    font-size: .78rem;
}

.site-view-card {
    padding: 1rem 1.15rem;
}

.site-view-card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--trezo-border);
}

.site-view-card-icon {
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--trezo-primary) 14%, transparent);
    color: var(--trezo-primary);
    flex-shrink: 0;
}

.site-view-entity-name {
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.35;
}

.site-view-dl {
    margin: 0;
}

.site-view-dl-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 7rem) 1fr;
    gap: .65rem 1rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--trezo-border);
    align-items: baseline;
}

.site-view-dl-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.site-view-dl-row dt {
    margin: 0;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--trezo-text-muted);
    font-weight: 600;
}

.site-view-dl-row dd {
    margin: 0;
    font-size: .9rem;
    word-break: break-word;
}

.site-view-link {
    color: var(--trezo-primary);
    text-decoration: none;
    font-weight: 600;
}

.site-view-link:hover {
    text-decoration: underline;
}

.site-view-comment {
    padding: .75rem .85rem;
    border-radius: .75rem;
    background: color-mix(in srgb, var(--trezo-panel) 94%, var(--trezo-primary) 6%);
    border: 1px solid var(--trezo-border);
    height: 100%;
}

@media (max-width: 575.98px) {
    .site-view-page .site-view-hero-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .site-view-dl-row {
        grid-template-columns: 1fr;
        gap: .2rem;
    }
}

/* Site point (availability) */
.site-point-status {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.site-point-dot {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    margin-top: .35rem;
    flex-shrink: 0;
    background: var(--trezo-text-muted);
}

.site-point-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.site-point-label {
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.3;
}

.site-point-detail {
    font-size: .75rem;
    color: var(--trezo-text-muted);
    line-height: 1.25;
}

.site-point-status.is-checking .site-point-dot {
    background: var(--trezo-primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--trezo-primary) 45%, transparent);
    animation: site-point-pulse 1.2s ease-in-out infinite;
}

.site-point-status.is-checking .site-point-label {
    color: var(--trezo-primary);
    animation: site-point-text-pulse 1.2s ease-in-out infinite;
}

.site-point-status.is-online .site-point-dot {
    background: #25b003;
    box-shadow: 0 0 0 4px color-mix(in srgb, #25b003 18%, transparent);
}

.site-point-status.is-online .site-point-label {
    color: #1f8f02;
}

.site-point-status.is-offline .site-point-dot {
    background: #e55353;
    box-shadow: 0 0 0 4px color-mix(in srgb, #e55353 16%, transparent);
}

.site-point-status.is-offline .site-point-label {
    color: #c93c3c;
}

.site-point-status.is-unknown .site-point-dot {
    background: #f0ad4e;
}

.site-point-status.is-pending .site-point-dot {
    background: #6c8cff;
    box-shadow: 0 0 0 4px color-mix(in srgb, #6c8cff 16%, transparent);
}

.site-point-status.is-pending .site-point-label {
    color: var(--trezo-primary);
}

.site-ssl-cta {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}

.site-ssl-cta-text {
    font-size: 0.8125rem;
    line-height: 1.45;
}

.site-deploy-cta {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--trezo-border);
}

.site-ns-delegation-cta {
    margin-top: .65rem;
}

.site-ns-delegation-details {
    border: 1px solid color-mix(in srgb, #fd7e14 30%, var(--trezo-border) 70%);
    border-radius: .55rem;
    background: color-mix(in srgb, #fd7e14 5%, var(--trezo-panel) 95%);
}

.site-ns-delegation-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .55rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.site-ns-delegation-summary::-webkit-details-marker {
    display: none;
}

.site-ns-delegation-summary-text {
    font-size: .78rem;
    font-weight: 600;
    color: var(--trezo-text);
}

.site-ns-delegation-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--trezo-primary) 12%, transparent);
    color: var(--trezo-primary);
    flex-shrink: 0;
}

.site-ns-delegation-summary-icon i {
    font-size: .9rem;
}

.site-ns-delegation-details[open] .site-ns-delegation-summary {
    border-bottom: 1px solid color-mix(in srgb, #fd7e14 20%, var(--trezo-border) 80%);
}

.site-ns-delegation-panel {
    padding: .55rem .65rem .65rem;
}

.site-ns-delegation-ns-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .82rem;
}

.site-ns-delegation-ns-list code {
    font-size: .85rem;
    color: var(--trezo-primary);
}

.site-deploy-cta-text {
    font-size: .8rem;
    line-height: 1.35;
    margin-bottom: 0;
}

.site-install-cta {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--trezo-border);
}

.site-version-badge .badge,
.col-version .badge {
    font-size: .85rem;
    font-weight: 600;
}

.badge-version-ok {
    background-color: #16a34a;
    color: #fff;
    border: 1px solid color-mix(in srgb, #16a34a 80%, #000 20%);
}

.badge-version-warn {
    background-color: #f59e0b;
    color: #1e293b;
    border: 1px solid color-mix(in srgb, #f59e0b 75%, #000 25%);
}

.badge-version-critical {
    background-color: #dc2626;
    color: #fff;
    border: 1px solid color-mix(in srgb, #dc2626 80%, #000 20%);
}

[data-bs-theme="dark"] .badge-version-ok {
    background-color: #22c55e;
    color: #052e16;
    border-color: #16a34a;
}

[data-bs-theme="dark"] .badge-version-warn {
    background-color: #fbbf24;
    color: #422006;
    border-color: #d97706;
}

[data-bs-theme="dark"] .badge-version-critical {
    background-color: #ef4444;
    color: #fff;
    border-color: #b91c1c;
}

.site-version-card .site-point-status.is-checking + .site-version-badge {
    display: none !important;
}

.site-ip-note {
    font-size: .75rem;
}

@keyframes site-point-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--trezo-primary) 42%, transparent);
    }

    70% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--trezo-primary) 0%, transparent);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--trezo-primary) 0%, transparent);
    }
}

@keyframes site-point-text-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

.site-tariff-form-block {
    padding: .85rem 1rem;
    border: 1px solid var(--trezo-border);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--trezo-panel) 94%, var(--trezo-primary) 6%);
}

.site-tariff-radio-list .form-check-input:checked {
    border-color: var(--trezo-primary);
    background-color: var(--trezo-primary);
}

.grid-view .trezo-table-summary {
    color: var(--trezo-text-muted);
}

.grid-view .empty {
    color: var(--trezo-text-muted);
    padding: 1rem .2rem;
}

.grid-view .filters td {
    background: color-mix(in srgb, var(--trezo-panel) 96%, var(--trezo-primary) 4%);
}

.grid-view .filters input,
.grid-view .filters select {
    border-radius: .6rem;
    border-color: var(--trezo-border);
    min-height: 36px;
    font-size: .84rem;
}

.trezo-table-footer {
    border-top: 1px dashed var(--trezo-border);
    padding-top: .75rem;
}

/* Trezo pagination (GridView + LinkPager) */
.trezo-pagination,
.grid-view ul.pagination.trezo-pagination {
    gap: .2rem;
}

.trezo-pagination .page-item,
.grid-view ul.pagination.trezo-pagination .page-item {
    margin: 0;
}

.trezo-pagination .page-link,
.grid-view ul.pagination.trezo-pagination .page-link {
    border-radius: .6rem;
    border: 1px solid var(--trezo-border);
    color: var(--trezo-text-muted);
    background: color-mix(in srgb, var(--trezo-panel) 96%, var(--trezo-primary) 4%);
    font-weight: 600;
    font-size: .8rem;
    min-width: 36px;
    text-align: center;
    padding: .38rem .58rem;
    box-shadow: none;
}

.trezo-pagination .page-item.active .page-link,
.grid-view ul.pagination.trezo-pagination .page-item.active .page-link {
    color: #fff;
    background: linear-gradient(180deg, var(--trezo-primary-2), var(--trezo-primary));
    border-color: var(--trezo-primary);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--trezo-primary) 24%, transparent);
}

.trezo-pagination .page-item.disabled .page-link,
.grid-view ul.pagination.trezo-pagination .page-item.disabled .page-link {
    opacity: .5;
    color: var(--trezo-text-muted);
    background: color-mix(in srgb, var(--trezo-panel) 98%, var(--trezo-bg-soft) 2%);
}

[data-bs-theme="dark"] .trezo-table-wrap,
[data-bs-theme="dark"] .table-trezo thead th {
    background: color-mix(in srgb, var(--trezo-panel) 94%, #1a2740 6%);
}

/* trezo-like shell */
body {
    background: var(--trezo-bg-soft);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: .003em;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.015em;
}

.metric-mono {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
}

.guest-topbar {
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--trezo-panel) 96%, var(--trezo-primary) 4%);
}

.guest-brand {
    color: var(--bs-body-color);
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
}

.trezo-shell {
    display: block;
    min-height: 100vh;
}

.trezo-sidebar {
    width: var(--shell-sidebar-w);
    border-right: 1px solid var(--trezo-border);
    background: color-mix(in srgb, var(--trezo-panel) 92%, var(--trezo-primary) 8%);
    padding: 1rem .85rem;
    position: sticky;
    top: 0;
    height: 100vh;
    position: fixed;
    left: 0;
    z-index: 40;
    transition: width .22s ease, transform .22s ease;
}

[data-bs-theme="dark"] .trezo-sidebar {
    background: #0e1728;
    border-right-color: var(--trezo-border);
}

.trezo-sidebar-brand a {
    color: var(--bs-body-color);
    font-size: 1.1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.trezo-sidebar-role {
    margin-top: .75rem;
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    color: color-mix(in srgb, var(--trezo-primary) 70%, var(--bs-body-color));
    background: color-mix(in srgb, var(--trezo-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--trezo-primary) 30%, transparent);
}

.trezo-menu {
    margin-top: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.trezo-menu-section-title {
    margin-top: .95rem;
    margin-bottom: .45rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--trezo-text-muted);
    padding: 0 .55rem;
}

.trezo-menu-item {
    text-decoration: none;
    color: var(--trezo-text-muted);
    padding: .68rem .72rem;
    border-radius: .75rem;
    font-size: .9rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.trezo-icon {
    width: 20px;
    min-width: 20px;
    text-align: center;
    opacity: .9;
    margin-top: .1rem;
}

.trezo-menu-text-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.trezo-menu-sub {
    font-size: .73rem;
    color: color-mix(in srgb, var(--trezo-text-muted) 90%, var(--bs-body-color) 10%);
    line-height: 1.28;
}

.trezo-menu-item:hover,
.trezo-menu-item.active {
    color: var(--bs-body-color);
    background: color-mix(in srgb, var(--trezo-primary) 17%, var(--trezo-panel) 83%);
    border-color: color-mix(in srgb, var(--trezo-primary) 36%, transparent);
}

.trezo-main {
    margin-left: var(--shell-sidebar-w);
    min-width: 0;
    transition: margin-left .22s ease;
}

.trezo-topbar {
    min-height: var(--shell-header-h);
    border-bottom: 1px solid var(--trezo-border);
    padding: 0 1.2rem;
    background: var(--trezo-panel);
    position: sticky;
    top: 0;
    z-index: 20;
}

.trezo-topbar-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--shell-header-h);
}

[data-bs-theme="dark"] .trezo-topbar {
    background: #0f192b;
    border-bottom-color: var(--trezo-border);
}

.trezo-topbar-search-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(460px, 100%);
}

.trezo-topbar-search-form .form-control {
    border-radius: .75rem;
    background: color-mix(in srgb, var(--trezo-panel) 95%, var(--trezo-primary) 5%);
    border-color: var(--trezo-border);
    min-width: 0;
}

[data-bs-theme="dark"] .trezo-topbar-search-form .form-control {
    background: #0c1525;
    color: #dbe7ff;
}

[data-bs-theme="dark"] .trezo-topbar-search-form .form-control::placeholder {
    color: #7f92b2;
}

.trezo-topbar-search-panel {
    display: none;
    padding: .65rem 1.2rem .85rem;
    border-bottom: 1px solid var(--trezo-border);
    background: var(--trezo-panel);
    position: sticky;
    top: var(--shell-header-h);
    z-index: 19;
}

.trezo-topbar-search-panel.is-open {
    display: block;
}

.trezo-topbar-search-panel .trezo-topbar-search-form {
    max-width: none;
}

.trezo-topbar-search-panel .form-control {
    flex: 1 1 auto;
}

[data-bs-theme="dark"] .trezo-topbar-search-panel {
    background: #0f192b;
}

.trezo-topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.trezo-user {
    color: var(--trezo-text-muted);
    font-size: .9rem;
}

.trezo-content {
    padding: 1.1rem 1.2rem 1.6rem;
}

/* Trezo breadcrumb rule */
.trezo-content .breadcrumb {
    margin-bottom: .9rem;
    padding: .45rem .7rem;
    border: 1px solid var(--trezo-border);
    border-radius: .65rem;
    background: color-mix(in srgb, var(--trezo-panel) 96%, var(--trezo-primary) 4%);
    font-size: .78rem;
    font-weight: 600;
}

.trezo-content .breadcrumb-item + .breadcrumb-item::before {
    color: var(--trezo-text-muted);
}

.trezo-content .breadcrumb-item a {
    color: var(--trezo-primary);
    text-decoration: none;
}

.trezo-content .breadcrumb-item.active {
    color: var(--trezo-text-muted);
}

.trezo-menu-item {
    font-weight: 500;
}

.trezo-menu-item.active {
    box-shadow: 0 8px 16px color-mix(in srgb, var(--trezo-primary) 16%, transparent);
}

.trezo-sidebar-collapse {
    margin-top: .8rem;
    margin-bottom: .8rem;
    width: 100%;
    border: 1px solid var(--trezo-border);
    border-radius: .75rem;
    background: transparent;
    color: var(--trezo-text-muted);
    padding: .5rem .6rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.trezo-sidebar-collapse:hover {
    background: color-mix(in srgb, var(--trezo-primary) 12%, transparent);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .trezo-sidebar-collapse:hover {
    background: rgba(117, 125, 255, .16);
}

html.pm-sidebar-collapsed .trezo-sidebar {
    width: var(--shell-sidebar-collapsed-w);
}

html.pm-sidebar-collapsed .trezo-main {
    margin-left: var(--shell-sidebar-collapsed-w);
}

html.pm-sidebar-collapsed .trezo-menu-text,
html.pm-sidebar-collapsed .trezo-sidebar-role,
html.pm-sidebar-collapsed .trezo-menu-sub,
html.pm-sidebar-collapsed .trezo-menu-section-title {
    display: none;
}

html.pm-sidebar-collapsed .trezo-sidebar-brand a {
    justify-content: center;
}

html.pm-sidebar-collapsed .trezo-menu-item,
html.pm-sidebar-collapsed .trezo-sidebar-collapse {
    justify-content: center;
    padding-left: .45rem;
    padding-right: .45rem;
}

html.pm-sidebar-collapsed .trezo-menu-item.active {
    box-shadow: none;
    background: color-mix(in srgb, var(--trezo-primary) 24%, var(--trezo-panel) 76%);
    border-color: color-mix(in srgb, var(--trezo-primary) 52%, transparent);
}

@media (max-width: 991.98px) {
    .trezo-topbar {
        padding: 0 .75rem;
    }

    .trezo-topbar-inner {
        width: 100%;
    }

    .trezo-topbar-actions .btn-trezo-danger-outline {
        padding-left: .55rem;
        padding-right: .55rem;
    }

    .trezo-shell {
        display: block;
    }

    .trezo-sidebar {
        width: min(86vw, 290px);
        height: 100vh;
        position: fixed;
        transform: translateX(-100%);
        top: 0;
        left: 0;
        z-index: 50;
    }

    .trezo-main {
        margin-left: 0;
    }

    .trezo-shell.pm-sidebar-open .trezo-sidebar {
        transform: translateX(0);
    }

    .trezo-shell.pm-sidebar-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        z-index: 45;
    }

    .trezo-sidebar-collapse {
        display: none;
    }

    html.pm-sidebar-collapsed .trezo-menu-text,
    html.pm-sidebar-collapsed .trezo-sidebar-role,
    html.pm-sidebar-collapsed .trezo-menu-sub,
    html.pm-sidebar-collapsed .trezo-menu-section-title {
        display: initial;
    }
}

/* Public UI kit page */
.ui-kit-page {
    padding-bottom: 2rem;
}

.ui-kit-section {
    margin-bottom: 2rem;
    scroll-margin-top: calc(var(--shell-header-h) + 1rem);
}

.ui-kit-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .85rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--trezo-border);
}

.ui-kit-body .trezo-topbar .badge {
    font-size: .72rem;
    font-weight: 600;
}

/* Site logs panel */
.site-logs-panel .site-logs-header {
    flex-wrap: wrap;
    gap: .75rem;
}

.site-logs-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.site-logs-status {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .5rem 0;
    font-size: .88rem;
}

.site-logs-status.is-loading .site-point-dot {
    background: var(--trezo-primary);
    animation: site-point-pulse 1.2s ease-in-out infinite;
}

.site-logs-status.is-error {
    color: #dc3545;
}

.site-logs-status.is-error .site-point-dot {
    background: #dc3545;
}

.site-logs-status.is-ok {
    color: var(--trezo-text-muted);
}

.site-logs-status.is-ok .site-point-dot {
    background: #25b003;
}

.site-logs-levels {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.site-logs-level-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 650;
    border: 1px solid var(--trezo-border);
    background: color-mix(in srgb, var(--trezo-panel) 96%, transparent);
}

.site-logs-level-chip--error {
    border-color: color-mix(in srgb, #dc3545 35%, var(--trezo-border));
    color: #b02a37;
}

.site-logs-level-chip--warning {
    border-color: color-mix(in srgb, #f0ad4e 40%, var(--trezo-border));
    color: #946200;
}

.site-logs-level-chip--info {
    border-color: color-mix(in srgb, var(--trezo-primary) 30%, var(--trezo-border));
    color: var(--trezo-primary);
}

.site-logs-entry {
    padding: .65rem .75rem;
    border: 1px solid var(--trezo-border);
    border-radius: .65rem;
    background: color-mix(in srgb, var(--trezo-panel) 98%, transparent);
}

.site-logs-entry + .site-logs-entry {
    margin-top: .5rem;
}

.site-logs-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .65rem;
    margin-bottom: .35rem;
    font-size: .75rem;
    color: var(--trezo-text-muted);
}

.site-logs-entry-level {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.site-logs-entry-level--error {
    color: #dc3545;
}

.site-logs-entry-level--warning {
    color: #946200;
}

.site-logs-entry-level--info {
    color: var(--trezo-primary);
}

.site-logs-entry-message {
    font-size: .82rem;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.site-logs-recent-title,
.site-logs-results-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--trezo-text-muted);
    margin-bottom: .5rem;
}

.site-logs-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* Admin account panel */
.site-admin-account-panel .site-admin-account-header {
    flex-wrap: wrap;
    gap: .75rem;
}

.site-admin-account-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.site-admin-account-status {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .75rem;
    font-size: .92rem;
}

.site-admin-account-status.is-loading .site-point-dot {
    animation: site-point-pulse 1.2s ease-in-out infinite;
}

.site-admin-account-status.is-ok {
    color: var(--trezo-success, #198754);
}

.site-admin-account-status.is-ok .site-point-dot {
    background: var(--trezo-success, #198754);
}

.site-admin-account-status.is-warn {
    color: #b78100;
}

.site-admin-account-status.is-warn .site-point-dot {
    background: #e9a100;
}

.site-admin-account-status.is-error {
    color: var(--trezo-danger, #dc3545);
}

.site-admin-account-status.is-error .site-point-dot {
    background: var(--trezo-danger, #dc3545);
}

.site-admin-account-form-status--ok {
    color: var(--trezo-success, #198754);
}

.site-admin-account-form-status--error {
    color: var(--trezo-danger, #dc3545);
}

.site-admin-account-form-status--checking {
    color: var(--trezo-text-muted);
}

/* Remote update panel */
.site-remote-update-panel .site-remote-update-header {
    flex-wrap: wrap;
    gap: .75rem;
}

.site-remote-update-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.site-remote-update-status {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .35rem 0;
    font-size: .88rem;
}

.site-remote-update-status.is-loading .site-point-dot {
    background: var(--trezo-primary);
    animation: site-point-pulse 1.2s ease-in-out infinite;
}

.site-remote-update-status.is-error {
    color: #dc3545;
}

.site-remote-update-status.is-error .site-point-dot {
    background: #dc3545;
}

.site-remote-update-status.is-ok .site-point-dot {
    background: #25b003;
}

.site-remote-update-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem;
}

.site-remote-update-stat {
    padding: .65rem .75rem;
    border: 1px solid var(--trezo-border);
    border-radius: .65rem;
    background: color-mix(in srgb, var(--trezo-panel) 98%, transparent);
}

.site-remote-update-stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--trezo-text-muted);
    font-weight: 600;
    margin-bottom: .2rem;
}

.site-remote-update-stat-value {
    font-size: .95rem;
    font-weight: 650;
    word-break: break-word;
}

.site-remote-update-stat-value--highlight {
    color: var(--trezo-primary);
}

.site-remote-update-actions,
.site-remote-update-fallback {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.site-remote-update-changelog {
    margin-top: .75rem;
    font-size: .82rem;
}

.site-remote-update-changelog ul {
    margin: .35rem 0 0;
    padding-left: 1.1rem;
}

.site-remote-update-log-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--trezo-text-muted);
    margin-bottom: .4rem;
}

.site-remote-update-log-pre {
    max-height: 16rem;
    overflow: auto;
    padding: .75rem;
    border-radius: .65rem;
    border: 1px solid var(--trezo-border);
    background: color-mix(in srgb, var(--trezo-panel) 92%, #000 8%);
    font-size: .75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.site-mail-modal-content {
    overflow: hidden;
}

.site-mail-modal-loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--trezo-panel) 82%, transparent);
    backdrop-filter: blur(2px);
}

.site-mail-modal-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    max-width: 16rem;
    text-align: center;
}

.site-mail-modal-spinner {
    display: block;
    width: 2rem;
    height: 2rem;
    border: 3px solid color-mix(in srgb, var(--trezo-primary) 20%, transparent);
    border-top-color: var(--trezo-primary);
    border-radius: 50%;
    animation: site-mail-modal-spin .75s linear infinite;
}

.site-mail-modal-loader-text {
    font-size: .875rem;
    font-weight: 600;
    color: var(--trezo-text);
}

@keyframes site-mail-modal-spin {
    to { transform: rotate(360deg); }
}

.site-mail-modal-content.is-mail-modal-busy .modal-header,
.site-mail-modal-content.is-mail-modal-busy .modal-body,
.site-mail-modal-content.is-mail-modal-busy .modal-footer {
    pointer-events: none;
    user-select: none;
}