:root {
    --mdw-primary: #2857df;
    --mdw-primary-hover: #2048bc;
    --mdw-brand: #28649d;
    --mdw-sidebar: #111827;
    --mdw-sidebar-muted: #94a3b8;
    --mdw-border: #e2e8f0;
    --mdw-surface: #ffffff;
    --mdw-page: #f4f7fb;
    --mdw-text: #172033;
    --mdw-sidebar-width: 270px;
}

[data-bs-theme="dark"] {
    --mdw-sidebar: #0b1220;
    --mdw-border: #334155;
    --mdw-surface: #1e293b;
    --mdw-page: #0f172a;
    --mdw-text: #f8fafc;
}

html, body { min-height: 100%; }
body { margin: 0; background: var(--mdw-page); color: var(--mdw-text); }
.brand-wordmark { background: var(--mdw-brand); color: #fff; font-size: 1.45rem; font-weight: 800; letter-spacing: .02em; padding: .45rem .75rem; }
.btn-primary { --bs-btn-bg: var(--mdw-primary); --bs-btn-border-color: var(--mdw-primary); --bs-btn-hover-bg: var(--mdw-primary-hover); --bs-btn-hover-border-color: var(--mdw-primary-hover); }
.btn-surface { color: var(--bs-body-color); background: var(--mdw-surface); border: 1px solid var(--mdw-border); }
.btn-surface:hover { color: var(--bs-body-color); border-color: var(--mdw-primary); background: color-mix(in srgb, var(--mdw-primary) 9%, var(--mdw-surface)); }
[data-bs-theme="dark"] .btn-outline-primary { color: #a9c2ff; border-color: #5278d7; background: rgba(40,87,223,.10); }
[data-bs-theme="dark"] .btn-outline-primary:hover { color: #fff; background: #315fd8; border-color: #4773e5; }
[data-bs-theme="dark"] .btn-outline-secondary { color: #d7e0ee; border-color: #607086; background: rgba(148,163,184,.08); }
.btn-icon, .btn-theme { border: 0; width: 42px; height: 42px; display: inline-grid; place-items: center; color: var(--bs-body-color); }
.btn-icon:hover, .btn-theme:hover { background: var(--bs-tertiary-bg); }

.login-page { min-height: 100vh; background: var(--mdw-page); }
.login-header { height: 88px; display: flex; align-items: center; padding: 0 2rem; background: #1e293b; border-bottom: 1px solid #334155; }
.login-content { min-height: calc(100vh - 88px); display: grid; place-items: center; padding: 2rem 1rem 5rem; }
.login-wrapper { width: min(100%, 450px); }
.login-card { border: 1px solid var(--mdw-border); border-radius: 1rem; background: var(--mdw-surface); }
.form-control { border-color: var(--mdw-border); }
.form-control:focus { border-color: var(--mdw-primary); box-shadow: 0 0 0 .2rem rgba(40,87,223,.14); }

.portal-shell { min-height: 100vh; }
.portal-sidebar { width: var(--mdw-sidebar-width); position: fixed; inset: 0 auto 0 0; z-index: 1040; display: flex; flex-direction: column; color: #fff; background: var(--mdw-sidebar); transition: transform .2s ease; }
.sidebar-brand { min-height: 96px; padding: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-product { color: var(--mdw-sidebar-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.sidebar-nav { padding: 1rem .75rem; gap: .25rem; }
.sidebar-nav .nav-link { display: flex; align-items: center; gap: .85rem; color: #cbd5e1; border-radius: .65rem; padding: .75rem .85rem; font-weight: 500; }
.sidebar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar-nav .nav-link.active { color: #fff; background: var(--mdw-primary); }
.sidebar-nav .nav-link i { width: 1.25rem; text-align: center; }
.sidebar-footer { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.1); color: var(--mdw-sidebar-muted); font-size: .82rem; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; }
.status-online { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.14); }
.portal-main { min-height: 100vh; margin-left: var(--mdw-sidebar-width); }
.portal-topbar { height: 76px; position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; background: color-mix(in srgb, var(--mdw-surface) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--mdw-border); }
.topbar-title h1 { font-weight: 700; }
.user-menu { border: 0; display: flex; align-items: center; gap: .6rem; color: var(--bs-body-color); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; background: var(--mdw-primary); font-weight: 700; }
.portal-content { padding: 1.5rem; }
.content-loading { min-height: 65vh; display: grid; place-items: center; }
.metric-card { border: 1px solid var(--mdw-border); background: var(--mdw-surface); border-radius: .9rem; }
.metric-filter { color: var(--bs-body-color); transition: border-color .15s ease, transform .15s ease; }
.metric-filter:hover { border-color: var(--mdw-primary); transform: translateY(-1px); }
.metric-filter.active { border-color: var(--mdw-primary); box-shadow: 0 0 0 3px rgba(40,87,223,.12); }
.metric-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: .75rem; font-size: 1.2rem; }
.surface-card { border: 1px solid var(--mdw-border); background: var(--mdw-surface); border-radius: .9rem; }
.placeholder-chart { min-height: 300px; display: grid; place-items: center; color: var(--bs-secondary-color); background: linear-gradient(180deg, rgba(40,87,223,.06), transparent); border-radius: .65rem; }
.site-table-wrap { max-height: calc(100vh - 355px); min-height: 330px; }
.site-table-wrap thead { position: sticky; top: 0; z-index: 2; }
.site-table-wrap th { white-space: nowrap; background: var(--bs-tertiary-bg); }
.site-directory { max-width: 360px; }
.chart-container { position: relative; min-height: 320px; }
.dashboard-period-label { display: flex; align-items: center; gap: .55rem; color: var(--bs-secondary-color); font-size: .82rem; }
.dashboard-period-label span { color: var(--mdw-primary); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-period-label strong { color: var(--bs-body-color); }
.modal-client-details { max-width: 920px; }
.modal-client-details .modal-body { max-height: calc(100vh - 170px); overflow-y: auto; }
.modal-client-details .chart-container { min-height: 250px; }
.settings-navigation { display: flex; flex-wrap: wrap; gap: .65rem; }
.site-preview-browser { overflow: hidden; border: 1px solid var(--mdw-border); border-radius: .75rem; background: var(--mdw-page); box-shadow: 0 10px 30px rgba(15,23,42,.12); }
.site-preview-toolbar { display: flex; align-items: center; gap: .35rem; padding: .55rem .7rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--mdw-border); }
.site-preview-toolbar > span { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.site-preview-address { flex: 1; margin-left: .5rem; padding: .28rem .6rem; overflow: hidden; color: var(--bs-secondary-color); background: var(--mdw-surface); border-radius: .35rem; font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.site-preview-page { min-height: 210px; display: grid; place-items: center; padding: 1rem; background: linear-gradient(135deg, #dbeafe, #f8fafc); background-position: center; background-size: cover; }
.site-preview-login { width: 210px; padding: 1rem; text-align: center; background: rgba(255,255,255,.94); border-radius: .65rem; box-shadow: 0 8px 24px rgba(15,23,42,.18); }
.site-preview-logo { height: 42px; display: grid; place-items: center; margin-bottom: .4rem; color: #28649d; font-weight: 800; }
.site-preview-logo img { max-width: 150px; max-height: 42px; object-fit: contain; }
.site-preview-title { margin-bottom: .6rem; color: #172033; font-size: .78rem; font-weight: 700; }
.site-preview-field { height: 20px; margin: .35rem 0; border: 1px solid #cbd5e1; border-radius: .25rem; background: #fff; }
.site-preview-button { margin-top: .55rem; padding: .3rem; color: #fff; background: #2857df; border-radius: .25rem; font-size: .7rem; }
.report-table-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.report-table-wrap thead { position: sticky; top: 0; z-index: 2; }
.report-table-wrap th { white-space: nowrap; background: var(--bs-tertiary-bg); }
.portal-main:has(.portal-content.has-storage-status) { height: 100vh; min-height: 0; overflow: hidden; }
body:has(.portal-content.has-storage-status) { overflow: hidden; }
.portal-content.has-storage-status { height: calc(100vh - 76px); min-height: 0; display: flex; flex-direction: column; padding: 1rem 1.5rem 88px; overflow: hidden; }
.portal-content.has-storage-status > section:first-child { flex: 0 0 auto; margin-bottom: .75rem !important; }
.portal-content.has-storage-status [data-report-content] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.portal-content.has-storage-status [data-report-content] > .surface-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.portal-content.has-storage-status [data-report-content] > .surface-card > .border-bottom { flex: 0 0 auto; padding: .65rem 1rem !important; }
.period-summary { flex: 0 0 auto; margin-bottom: .75rem !important; padding: .7rem 1rem; border: 1px solid var(--mdw-border); border-radius: .9rem; background: color-mix(in srgb, var(--mdw-primary) 4%, var(--mdw-surface)); }
.period-summary-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; padding-bottom: .5rem; border-bottom: 1px solid var(--mdw-border); }
.period-summary-heading > div { display: flex; flex-direction: column; gap: .15rem; }
.period-summary-kicker { color: var(--mdw-primary); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.period-summary .metric-card { box-shadow: none; }
.period-summary .row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.period-summary .row > * { width: auto; min-width: 0; }
.period-summary .metric-card { padding: .55rem .7rem !important; }
.period-summary .metric-icon { width: 40px; height: 40px; }
.period-summary .fs-3 { font-size: clamp(1.1rem, 1.3vw, 1.55rem) !important; }
.storage-status-bar { position: fixed; right: 0; bottom: 0; left: var(--mdw-sidebar-width); z-index: 1025; min-height: 72px; display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; padding: .7rem 1.5rem; background: color-mix(in srgb, var(--mdw-surface) 96%, transparent); border-top: 1px solid var(--mdw-border); box-shadow: 0 -8px 24px rgba(15,23,42,.10); backdrop-filter: blur(12px); }
.storage-status-title { display: grid; grid-template-columns: 38px auto; margin-right: auto; column-gap: .7rem; }
.storage-status-title i { grid-row: 1 / 3; display: grid; place-items: center; color: #fff; background: var(--mdw-primary); border-radius: .65rem; }
.storage-status-title span { align-self: end; font-weight: 700; }
.storage-status-title small { align-self: start; color: var(--bs-secondary-color); }
.storage-status-value { min-width: 150px; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.storage-status-value span { color: var(--bs-secondary-color); font-size: .78rem; }
.storage-status-value strong { margin-top: .2rem; font-size: 1.25rem; }
.storage-status-divider { width: 1px; height: 38px; background: var(--mdw-border); }
.tabulator { border: 0 !important; background: var(--mdw-surface) !important; color: var(--bs-body-color) !important; font-size: .875rem; }
.tabulator .tabulator-header { color: var(--bs-body-color) !important; background: var(--bs-tertiary-bg) !important; border-bottom: 1px solid var(--mdw-border) !important; }
.tabulator .tabulator-header .tabulator-col { color: var(--bs-body-color) !important; background: var(--bs-tertiary-bg) !important; border-right-color: var(--mdw-border) !important; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { min-height: 42px; display: flex; align-items: center; padding: .55rem .75rem; }
.tabulator .tabulator-header .tabulator-col:hover { background: color-mix(in srgb, var(--mdw-primary) 10%, var(--bs-tertiary-bg)) !important; }
.tabulator .tabulator-tableholder, .tabulator .tabulator-tableholder .tabulator-table { color: var(--bs-body-color) !important; background: var(--mdw-surface) !important; }
.tabulator .tabulator-row { color: var(--bs-body-color) !important; background: var(--mdw-surface) !important; border-bottom: 1px solid var(--mdw-border) !important; }
.tabulator .tabulator-row.tabulator-row-even { background: color-mix(in srgb, var(--mdw-surface) 90%, var(--bs-tertiary-bg)) !important; }
.tabulator .tabulator-row:hover { background: color-mix(in srgb, var(--mdw-primary) 12%, var(--mdw-surface)) !important; }
.tabulator .tabulator-row { min-height: 52px; }
.tabulator .tabulator-row .tabulator-cell { min-height: 52px; display: inline-flex; align-items: center; padding: .55rem .75rem; color: var(--bs-body-color) !important; background: transparent !important; white-space: normal; line-height: 1.35; border-right-color: var(--mdw-border) !important; }
.tabulator .tabulator-footer { color: var(--bs-body-color) !important; background: var(--bs-tertiary-bg) !important; border-top-color: var(--mdw-border) !important; }
.tabulator .tabulator-placeholder { color: var(--bs-secondary-color) !important; background: var(--mdw-surface) !important; }
[data-bs-theme="dark"] .tabulator .tabulator-header, [data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col { background: #263347 !important; }
[data-bs-theme="dark"] .tabulator .tabulator-row { background: #182235 !important; }
[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-even { background: #202d42 !important; }
[data-bs-theme="dark"] .tabulator .tabulator-row:hover { background: #293b59 !important; }
.site-table-wrap .tabulator-row { min-height: 70px; }
.site-table-wrap .tabulator-row .tabulator-cell { min-height: 70px; }
.site-grid-client { display: flex; min-width: 0; max-width: 100%; flex-direction: column; gap: .15rem; }
.site-grid-client .fw-bold, .site-grid-client a, .site-directory { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-grid-versions { display: grid; gap: .3rem; width: 100%; font-size: .78rem; }
.site-grid-versions > div { display: grid; grid-template-columns: 78px 1fr; gap: .4rem; }
.site-grid-versions > div > span:first-child { color: var(--bs-secondary-color); font-weight: 600; }
.site-grid-actions { display: flex; justify-content: flex-end; gap: .35rem; width: 100%; }
.site-operation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.site-operation-button { min-height: 72px; display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; text-align: left; }
.site-operation-button i { width: 30px; font-size: 1.2rem; text-align: center; }
.site-operation-button span { font-weight: 600; }
.monitoring-table, .event-list { max-height: calc(100vh - 330px); min-height: 360px; overflow: auto; }
.monitoring-table thead { position: sticky; top: 0; z-index: 2; }
.monitoring-table th { background: var(--bs-tertiary-bg); }
.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 1030; background: rgba(2,6,23,.6); }

@media (max-width: 991.98px) {
    .portal-sidebar { transform: translateX(-100%); }
    .portal-sidebar.open { transform: translateX(0); }
    .portal-main { margin-left: 0; }
    .storage-status-bar { left: 0; }
    .sidebar-backdrop.show { display: block; }
    .period-summary .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .login-header { height: 72px; padding: 0 1rem; }
    .login-content { min-height: calc(100vh - 72px); padding-top: 1rem; }
    .portal-content { padding: 1rem; }
    .portal-topbar { padding: 0 .75rem; }
    .period-summary-heading { align-items: flex-start; flex-direction: column; }
    .period-summary .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .storage-status-bar { gap: .65rem; padding: .6rem 1rem; }
    .storage-status-title small { display: none; }
    .storage-status-value { min-width: auto; }
    .storage-status-value strong { font-size: 1rem; }
}
.portal-swagger-container {
    height: calc(100vh - 190px);
    min-height: 620px;
}

.portal-swagger-frame {
    border: 0;
    height: 100%;
    width: 100%;
}