/* ELENDE Backup v0.26.1 — Enterprise Light/Dark UI
   Fixed dashboard, Virtualizor/Veeam-class information density, ELENDE identity. */
:root,
html[data-theme="dark"] {
  --brand-blue:#2484ff;
  --brand-blue-strong:#1470df;
  --brand-orange:#f26a32;
  --brand-navy:#10152d;
  --shell-bg:#171c31;
  --surface:#222842;
  --surface-2:#272e4a;
  --surface-3:#303855;
  --field:#1b2138;
  --table-head:#343d60;
  --border:#3b4462;
  --border-soft:#333b58;
  --text:#f5f7ff;
  --muted:#b4bdd4;
  --subtle:#8994af;
  --hover:#29324f;
  --success:#17c874;
  --danger:#ff5e6d;
  --warning:#f3ad45;
  --overlay:rgba(4,7,18,.78);
  --shadow:0 10px 26px rgba(3,7,20,.18);
  --panel-shadow:none;
  --header-bg:#12182f;
  --row-line:#333b58;
  --chart-grid:#444d68;
  --chip-bg:#1d2540;
  --sidebar-text:#d8def0;
  --sidebar-muted:#8f9ab7;
  --sidebar-hover:#1c2850;
  --sidebar-active:#24335e;
}
html[data-theme="light"] {
  --brand-blue:#287df0;
  --brand-blue-strong:#1768d2;
  --brand-orange:#f16632;
  --brand-navy:#111637;
  --shell-bg:#f3f5fa;
  --surface:#ffffff;
  --surface-2:#f8f9fc;
  --surface-3:#eef2f8;
  --field:#ffffff;
  --table-head:#dff0fb;
  --border:#dce2ec;
  --border-soft:#e8ecf2;
  --text:#17223b;
  --muted:#66728a;
  --subtle:#8792a8;
  --hover:#f1f6fc;
  --success:#12a961;
  --danger:#e44758;
  --warning:#d78a22;
  --overlay:rgba(18,28,49,.48);
  --shadow:0 10px 26px rgba(30,47,76,.10);
  --panel-shadow:0 1px 2px rgba(31,49,78,.04);
  --header-bg:#ffffff;
  --row-line:#e6ebf2;
  --chart-grid:#dde4ee;
  --chip-bg:#f2f5fa;
  --sidebar-text:#d8def0;
  --sidebar-muted:#8f9ab7;
  --sidebar-hover:#1c2850;
  --sidebar-active:#24335e;
}

html,body{font-size:14px;line-height:1.45;background:var(--shell-bg);color:var(--text)}
body{letter-spacing:0}
.app-shell{grid-template-columns:218px minmax(0,1fr);background:var(--shell-bg)}

/* Permanent dark navigation — same identity in light and dark themes. */
.sidebar{width:218px;padding:13px 8px 12px;border-right:1px solid #20284b;background:var(--brand-navy);box-shadow:none}
.sidebar .brand{min-height:48px;padding:0 12px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .brand img{width:150px;max-height:38px}
.sidebar .product-mark{margin-top:5px;color:var(--sidebar-muted);font-size:9px}.sidebar .product-mark b{color:#ff7b43;font-size:9px}
.sidebar-search{height:34px;margin:12px 0 9px;padding:0 9px;border:1px solid #384264;border-radius:4px;background:#171d3a;color:var(--sidebar-muted)}
.sidebar-search:focus-within{border-color:#5475b8;box-shadow:0 0 0 2px rgba(40,125,240,.12)}
.sidebar-search input{min-height:30px;padding:0 4px;border:0;background:transparent;color:#f4f6ff;font-size:11px;box-shadow:none}
.sidebar-search input::placeholder{color:#7f8ba9}
.sidebar-search .ui-icon{width:14px;height:14px}
.sidebar nav{margin:2px 0 8px;padding:0;scrollbar-width:thin;scrollbar-color:#394261 transparent}
.sidebar .nav-group{margin:0 0 2px;gap:1px}
.sidebar .nav-group-toggle{min-height:32px;padding:6px 9px;border:0;border-radius:4px;background:transparent;color:#a6b0c8;font-size:9px;font-weight:700;letter-spacing:.065em;text-transform:uppercase}
.sidebar .nav-group-toggle:hover{background:var(--sidebar-hover);color:#fff}
.sidebar .nav-group-label{gap:8px}.sidebar .nav-group-toggle .ui-icon{width:14px;height:14px;color:#7f94c8}
.sidebar .nav-chevron{font-size:14px;color:#7784a5}
.sidebar .nav-group-items{gap:1px}
.sidebar .nav-item{min-height:33px;padding:6px 9px 6px 13px;border:0;border-radius:4px;background:transparent;color:var(--sidebar-text);font-size:11.5px;font-weight:500;box-shadow:none}
.sidebar .nav-item .nav-icon{width:15px;height:15px;color:#97a7ce}
.sidebar .nav-item:hover{background:var(--sidebar-hover);color:#fff;box-shadow:none}
.sidebar .nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--brand-blue)}
.sidebar .nav-item.active .nav-icon{color:#61a9ff}
.sidebar-footer{padding:10px 10px 2px;border-top:1px solid rgba(255,255,255,.08);color:var(--sidebar-text)}
.sidebar-footer strong{font-size:10px}.sidebar-footer small{color:var(--sidebar-muted);font-size:9px}

/* Compact product header. */
.main{grid-column:2;padding:0 16px 38px;background:var(--shell-bg)}
.topbar{min-height:54px;margin:0 -16px;padding:0 14px;border-bottom:1px solid var(--border);background:var(--header-bg);backdrop-filter:none;box-shadow:0 1px 0 color-mix(in srgb,var(--border) 55%,transparent)}
.topbar-left{display:flex;align-items:center;gap:9px}.topbar-search{width:min(390px,35vw);height:34px;border:1px solid var(--border);border-radius:4px;background:var(--surface-2)}
.topbar-search:focus-within{border-color:var(--brand-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-blue) 12%,transparent)}
.topbar-search input{min-height:30px;border:0;background:transparent;font-size:11px;box-shadow:none}.topbar-search kbd{font-size:8px}
.utility-icon-button{width:34px;height:34px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--muted);box-shadow:none}
.utility-icon-button:hover{border-color:color-mix(in srgb,var(--brand-blue) 55%,var(--border));background:var(--hover);color:var(--brand-blue)}
.utility-icon-button[data-theme-mode="dark"]{background:#202943;color:#d9e1f8}.utility-icon-button[data-theme-mode="light"]{background:#fff;color:#35415a}.utility-icon-button[data-theme-mode="system"]{color:var(--brand-blue)}
.header-clock{padding:0 8px;border-left:1px solid var(--border);border-right:1px solid var(--border)}.header-clock strong{font-size:10px}.header-clock span{font-size:8px}
.user-menu-button{min-width:170px;padding:3px 7px 3px 4px;border:1px solid var(--border);border-radius:5px;background:var(--surface);box-shadow:none}.user-menu-button:hover{border-color:var(--brand-blue);background:var(--hover)}
.user-avatar{width:27px;height:27px;border-radius:50%;background:#3a445e;font-size:9px}.user-menu-copy strong{font-size:10px}.user-menu-copy small{font-size:8px}
.user-dropdown{top:calc(100% + 6px);width:258px;border-radius:6px;background:var(--surface);box-shadow:var(--shadow)}
.user-dropdown-head{padding:11px 12px}.user-dropdown button{font-size:10.5px}
.theme-picker{padding:10px 12px;border-top:1px solid var(--border-soft)}.theme-picker-label{display:block;margin-bottom:7px;color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.theme-picker-options{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.theme-picker-options button{padding:6px 5px;border:1px solid var(--border);border-radius:4px;background:var(--surface-2);color:var(--muted);font-size:9px;text-align:center}.theme-picker-options button:hover{background:var(--hover);color:var(--text)}.theme-picker-options button.active{border-color:var(--brand-blue);background:color-mix(in srgb,var(--brand-blue) 11%,var(--surface));color:var(--brand-blue);font-weight:700}

/* Page heading and security/operations banner. */
.page-titlebar{align-items:center;padding:15px 1px 12px}.page-titlebar h1{font-size:20px;font-weight:600}.page-titlebar .eyebrow{margin-bottom:2px;color:var(--muted);font-size:8.5px;letter-spacing:.06em}.page-title-meta{font-size:8.5px}.platform-chip{padding:4px 7px;border-radius:4px;background:var(--surface)}
.ops-banner{min-height:42px;margin-bottom:14px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--danger) 24%,var(--border));border-radius:4px;background:color-mix(in srgb,#ff9ca4 28%,var(--surface));box-shadow:none}.ops-banner-copy strong{font-size:10.5px}.ops-banner-copy span{font-size:9px}.button.banner-action{min-height:29px;border-radius:4px;font-size:9.5px}

/* Fixed KPI cards, not configurable widgets. */
.overview-status-grid{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:14px;margin-bottom:14px}
.overview-status-card{display:block;width:100%;min-height:154px;padding:13px 14px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);text-align:left;box-shadow:var(--panel-shadow);transition:border-color .14s,background-color .14s,transform .14s}
.overview-status-card:hover{border-color:color-mix(in srgb,var(--brand-blue) 42%,var(--border));background:color-mix(in srgb,var(--brand-blue) 2.5%,var(--surface));transform:translateY(-1px)}
.overview-status-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.overview-status-title{display:flex;align-items:center;gap:7px;color:color-mix(in srgb,var(--brand-blue) 82%,var(--text));font-size:14px;font-weight:500}.overview-status-title .ui-icon{width:18px;height:18px}.overview-status-head>strong{font-size:12px;font-weight:600}
.overview-status-body{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:12px;padding-top:10px}
.overview-ring{position:relative;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:conic-gradient(#6b52ff calc(var(--pct,0)*1%),var(--border-soft) 0)}.overview-ring:before{position:absolute;width:47px;height:47px;border-radius:50%;background:var(--surface);content:""}.overview-ring span{position:relative;color:var(--text);font-size:10px;font-weight:700}
.overview-status-card:nth-child(2) .overview-ring{background:conic-gradient(#2a8cff calc(var(--pct,0)*1%),var(--border-soft) 0)}.overview-status-card:nth-child(3) .overview-ring{background:conic-gradient(#42c9bd calc(var(--pct,0)*1%),var(--border-soft) 0)}.overview-status-card:nth-child(4) .overview-ring{background:conic-gradient(#1fc66e calc(var(--pct,0)*1%),var(--border-soft) 0)}
.overview-status-rows{display:grid;gap:5px;min-width:0}.overview-status-rows>span{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:6px;color:var(--muted);font-size:9.5px}.overview-status-rows i{width:6px;height:6px;border-radius:50%;background:var(--subtle)}.overview-status-rows i.success{background:var(--success)}.overview-status-rows i.danger{background:var(--danger)}.overview-status-rows i.blue{background:var(--brand-blue)}.overview-status-rows b{color:var(--text);font-size:9.5px}.overview-status-rows small{margin-top:3px;color:var(--subtle);font-size:8.5px}

/* Panels: flat, dense, operational. */
.page-section{padding-top:0}.grid-two{grid-template-columns:1.4fr 1fr;gap:14px}.dashboard-operational-grid{margin-bottom:14px}
.panel{border:1px solid var(--border);border-radius:7px;background:var(--surface);box-shadow:var(--panel-shadow)}
.panel-head{min-height:55px;padding:11px 14px;border-bottom:1px solid var(--border)}.panel-head h2{font-size:13px;font-weight:600}.panel-head p{margin-top:2px;font-size:9px}.panel-head .text-button{font-size:9.5px}
.storage-noc-panel,.alerts-panel{margin-top:14px}.chip{padding:3px 7px;border-radius:4px;background:var(--chip-bg);font-size:8.5px}
.button,.mini-button,input,select,textarea,.column-picker summary{border-radius:4px}.button{min-height:34px;font-size:10.5px}.mini-button{min-height:27px;padding:4px 8px;font-size:9.5px}.button.primary{background:var(--brand-blue);border-color:var(--brand-blue);box-shadow:none}.button.primary:hover{background:var(--brand-blue-strong);border-color:var(--brand-blue-strong);box-shadow:none}.button.ghost{background:var(--surface);border-color:var(--border)}

/* Charts. */
.backup-trend-chart{min-height:242px;padding:13px 15px 12px}.trend-summary{gap:8px;margin-bottom:13px}.trend-summary>div{padding:8px 10px;border:1px solid var(--border-soft);border-radius:4px;background:var(--surface-2)}.trend-summary span{font-size:8px}.trend-summary strong{margin-top:2px;font-size:16px}.trend-bars{gap:9px;height:112px;border-color:var(--chart-grid)}.trend-day{grid-template-rows:80px auto auto}.trend-columns{height:77px}.trend-bar{border-radius:2px 2px 0 0}.trend-bar.completed{background:var(--brand-blue)}.trend-day>strong{font-size:8px}.trend-day>small,.trend-legend{font-size:8px}
.activity-list{min-height:240px}.activity-item{padding:10px 13px}.activity-item strong{font-size:10.5px}.activity-item small{font-size:8.5px}

/* Tables follow the reference: compact head band and clear row separators. */
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;line-height:1.32}th{padding:9px 11px;border-bottom:1px solid var(--border);background:var(--table-head);color:var(--text);font-size:9px;font-weight:700;letter-spacing:0;text-transform:none}td{padding:10px 11px;border-bottom:1px solid var(--row-line);font-size:10.5px;vertical-align:middle}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--hover)}
.subtext{margin-top:2px;font-size:8.5px}.badge{padding:3px 7px;border-radius:4px;font-size:8.5px}.badge.success{background:color-mix(in srgb,var(--success) 14%,var(--surface));color:var(--success)}.badge.failed{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}.badge.running,.badge.queued{background:color-mix(in srgb,var(--warning) 13%,var(--surface));color:var(--warning)}
.table-toolbar{padding:9px 11px;background:var(--surface-2)}

/* Physical storage and repositories: more like operational inventory, less card soup. */
.storage-node-grid{display:grid;grid-template-columns:1fr;gap:10px;padding:12px}.storage-node-card{padding:12px;border:1px solid var(--border-soft);border-radius:5px;background:var(--surface-2);box-shadow:none}.storage-node-card.physical-storage-card{grid-column:auto}.storage-node-head{padding-bottom:9px;border-bottom:1px solid var(--border-soft)}.storage-node-head h3{font-size:12px}.storage-node-head small{font-size:8.5px}.repository-kicker{font-size:8px;color:var(--brand-blue)}
.storage-node-main{gap:12px;padding-top:10px}.storage-capacity,.repo-dashboard-capacity{border:0!important;background:transparent!important;padding:5px 0!important}.storage-runtime>div{border:1px solid var(--border-soft);border-radius:4px;background:var(--surface);padding:7px 9px}.storage-info-grid{gap:0;border:1px solid var(--border-soft);border-radius:4px;overflow:hidden}.storage-info-grid>div{padding:8px 9px;border-right:1px solid var(--border-soft);background:var(--surface)}.storage-info-grid>div:last-child{border-right:0}.storage-info-grid span,.storage-info-grid small{font-size:8px}.storage-info-grid strong{font-size:9.5px}
.physical-storage-section{margin-top:10px;padding-top:9px}.physical-pool-grid,.physical-disk-list{gap:5px}.physical-pool,.physical-disk{padding:7px 8px;border-radius:4px;background:var(--surface)}.physical-pool span,.physical-pool small,.physical-disk span,.physical-disk small{font-size:8px}
.dashboard-repository-grid{grid-template-columns:repeat(3,minmax(250px,1fr));gap:10px;padding:12px}.dashboard-repo-card{padding:11px;border:1px solid var(--border-soft);border-radius:5px;background:var(--surface-2)}.repo-dashboard-details{gap:0;border:1px solid var(--border-soft);border-radius:4px;overflow:hidden}.repo-dashboard-details>div{padding:7px 8px;border-bottom:1px solid var(--border-soft);background:var(--surface)}.repo-dashboard-details dt{font-size:7.5px}.repo-dashboard-details dd{font-size:9px}
.capacity-donut{width:58px;height:58px}.capacity-donut strong{font-size:9px}

/* Alerts and installers. */
.alerts-list{grid-template-columns:repeat(2,1fr)}.alert-item{padding:10px 13px}.alert-item strong{font-size:10px}.alert-item p,.alert-item small{font-size:8.5px}
.installer-center-grid{gap:12px}.installer-platform-card{border-radius:6px;background:var(--surface)}.installer-platform-card:hover{border-color:var(--brand-blue);background:var(--hover)}

/* Login keeps the same enterprise palette in both themes. */
.login-shell{background:var(--shell-bg)}.login-stage{border-radius:9px;background:var(--surface);box-shadow:var(--shadow)}.login-brand-panel{background:linear-gradient(145deg,#121a3c,#10152d);color:#f7f9ff}.login-brand-panel p,.login-brand-panel .login-product,.login-brand-panel .login-trust{color:#aeb8d0}.login-form-panel{background:var(--surface)}.login-card input{background:var(--field)}

/* Interaction and accessibility. */
.button,.mini-button,.utility-icon-button,.user-menu-button,.sidebar button,.overview-status-card,.theme-picker-options button,tbody tr{transition:background-color .14s,border-color .14s,color .14s,box-shadow .14s,transform .14s}
.button:focus-visible,.mini-button:focus-visible,.utility-icon-button:focus-visible,.user-menu-button:focus-visible,.sidebar button:focus-visible,.overview-status-card:focus-visible,.theme-picker-options button:focus-visible{outline:2px solid var(--brand-orange);outline-offset:2px}
.text-button:hover,.inline-link:hover,.cloud-crumb:hover{color:var(--brand-orange)}

/* Responsive behaviour. */
@media(max-width:1420px){.overview-status-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}.dashboard-repository-grid{grid-template-columns:repeat(2,minmax(250px,1fr))}}
@media(max-width:1120px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.sidebar{width:205px}.grid-two{grid-template-columns:1fr}.topbar-search{width:min(320px,34vw)}.storage-info-grid{grid-template-columns:1fr 1fr}.storage-info-grid>div:nth-child(2){border-right:0}}
@media(max-width:900px){.app-shell{display:block}.sidebar{position:static;width:100%;height:auto}.main{padding:0 12px 32px}.topbar{margin-inline:-12px;padding-inline:12px}.sidebar nav{max-height:360px}.overview-status-grid{grid-template-columns:1fr 1fr}.dashboard-repository-grid{grid-template-columns:1fr}.topbar-search{width:min(420px,46vw)}}
@media(max-width:680px){.overview-status-grid{grid-template-columns:1fr}.topbar-search kbd,.header-clock,.user-menu-copy{display:none}.topbar-search{width:auto;flex:1}.user-menu-button{min-width:34px}.page-titlebar{display:grid;gap:7px}.page-title-meta{justify-content:space-between}.alerts-list{grid-template-columns:1fr}.overview-status-card{min-height:138px}}


/* v0.26.1 — Disaster Recovery follows the operational dashboard language. */
.dr-section-actions{margin-bottom:14px}.dr-overview-grid{margin-bottom:14px}.dr-overview-grid .overview-status-card{cursor:default}.dr-overview-grid .overview-status-card:hover{transform:none}.dr-service-panel{margin-bottom:14px}.dr-operational-grid{margin-bottom:14px}.dr-points-panel{margin-bottom:14px}.dr-roadmap-note{margin-top:0}
.dr-activation-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--brand-orange) 30%,var(--border));border-radius:6px;background:color-mix(in srgb,var(--brand-orange) 6%,var(--surface));box-shadow:var(--panel-shadow)}.dr-activation-notice>div{display:grid;gap:3px}.dr-activation-notice strong{font-size:11px}.dr-activation-notice span{color:var(--muted);font-size:9px}
.dr-config-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.dr-enable-toggle{margin:2px 0 8px;padding:10px 12px;border:1px solid var(--border);border-radius:5px;background:var(--surface-2)}
#section-disaster-recovery .panel-head{background:linear-gradient(90deg,color-mix(in srgb,var(--brand-blue) 3%,var(--surface)),var(--surface))}#section-disaster-recovery .table-wrap{min-height:0}
@media(max-width:760px){.dr-section-actions,.dr-activation-notice{align-items:stretch;flex-direction:column}.dr-section-actions .inline-actions{width:100%;display:grid;grid-template-columns:1fr}.dr-config-grid{grid-template-columns:1fr}}


/* v0.26.1 — final Backplane navigation hierarchy and typography. */
html,body,button,input,select,textarea,dialog,table,summary,.sidebar,.topbar,.panel,.button,.mini-button{font-family:var(--backplane-font)}
.sidebar .nav-group-toggle{min-height:36px;margin:2px 0;padding:7px 9px;border:1px solid rgba(100,190,235,.11);border-left:3px solid rgba(0,129,193,.58);border-radius:5px;background:rgba(0,129,193,.075);color:#b8d9e9;font-size:10px;font-weight:700;letter-spacing:.025em;text-transform:none}
.sidebar .nav-group-toggle:hover{background:rgba(0,129,193,.13);border-color:rgba(100,190,235,.19);border-left-color:var(--brand-blue);color:#fff}
.sidebar .nav-group.open>.nav-group-toggle{background:rgba(0,129,193,.17);border-color:rgba(100,190,235,.20);border-left-color:var(--brand-orange);color:#fff}
.sidebar .nav-group-toggle .nav-group-label>.ui-icon{color:#8fcbe7}
.sidebar .nav-group.open>.nav-group-toggle .nav-group-label>.ui-icon{color:#6dc8f2}
.sidebar .nav-chevron{width:14px;height:14px;color:#8fb8cc;transition:transform .16s ease,color .16s ease}
.sidebar .nav-group:not(.open) .nav-chevron{transform:rotate(-90deg)}
.sidebar .nav-group.open .nav-chevron{transform:rotate(0deg);color:#e0f0f7}
.sidebar .nav-group-items{padding:2px 0 6px 7px}
body.nav-collapsed .sidebar .nav-group-toggle{border-left-color:transparent}
body.nav-collapsed .sidebar .nav-chevron{display:none}

/* ===== ELENDE CONSOLIDATED UI START ===== */

/* --- shared-shell.css --- */
/* ELENDE shared application shell v0.29.3 — single template for Admin, Tenant and Agent */
:root{--brand-blue:#0081c1;--brand-orange:#f15930;--brand-navy:#101942;--brand-navy-2:#0c1437;--console-line:rgba(255,255,255,.10);--console-muted:#9eabc6;--console-text:#edf4ff;--elende-font:"Inter","Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Arial,sans-serif}
html,body,button,input,select,textarea,dialog,table,summary{font-family:var(--elende-font)}
.ui-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:18px;height:18px;line-height:0}.ui-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;background:var(--bg)}
.sidebar{position:fixed;inset:0 auto 0 0;width:252px;height:100vh;display:flex;flex-direction:column;padding:0 10px 14px;border-right:0;background:var(--brand-navy);color:#fff;box-shadow:none;overflow:hidden}
.sidebar .brand{min-height:99px;display:flex;flex-direction:column;justify-content:center;padding:14px 12px 13px;border-bottom:1px solid var(--console-line)}
.sidebar .brand img{display:block;width:154px;height:auto;max-height:none;filter:none}.sidebar .product-mark{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--console-muted);font-size:10px}.sidebar .product-mark b{color:var(--brand-orange);font-size:10px}.sidebar .product-mark small{display:block;color:#8394b2;font-size:9px}
.sidebar-search{display:flex;align-items:center;gap:8px;margin:13px 4px 7px;padding:0 10px;border:1px solid rgba(255,255,255,.13);border-radius:6px;background:rgba(255,255,255,.055);color:var(--console-muted)}
.sidebar-search:focus-within{border-color:rgba(0,129,193,.85);box-shadow:0 0 0 2px rgba(0,129,193,.16)}.sidebar-search input{width:100%;min-height:34px;padding:6px 0;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;font-size:11.5px;outline:0}.sidebar-search input::placeholder{color:var(--console-muted)}.sidebar-search .ui-icon{width:15px;height:15px}
.sidebar nav{overflow:auto;flex:1;margin:8px -2px 8px;padding:0 2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}.sidebar .nav-group{display:block;margin:0 0 5px}.sidebar .nav-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:39px;margin:2px 0;padding:8px 10px;border:1px solid rgba(111,196,238,.10);border-left:3px solid rgba(0,129,193,.55);border-radius:6px;background:rgba(0,129,193,.075);color:#b8d9e9;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.025em;text-align:left;cursor:pointer}.sidebar .nav-group-toggle:hover{background:rgba(0,129,193,.13);border-color:rgba(111,196,238,.18);border-left-color:var(--brand-blue);color:#fff}.sidebar .nav-group.open>.nav-group-toggle{background:rgba(0,129,193,.17);border-color:rgba(111,196,238,.20);border-left-color:var(--brand-orange);color:#fff}.nav-group-label{display:flex;align-items:center;gap:9px}.nav-group-label .ui-icon{width:16px;height:16px;color:#92c8e2}.sidebar .nav-group.open>.nav-group-toggle .nav-group-label>.ui-icon{color:#75cef5}.sidebar .nav-chevron{width:14px;height:14px;color:#8fb8cc;transition:transform .16s ease,color .16s ease}.sidebar .nav-group.open .nav-chevron{transform:rotate(0deg);color:#d9edf7}.sidebar .nav-group:not(.open) .nav-chevron{transform:rotate(-90deg)}
.sidebar .nav-group-items{display:grid;gap:1px;padding:3px 0 7px 7px}.sidebar .nav-group-items[hidden]{display:none!important}.sidebar .nav-group-items .nav-item{display:flex;align-items:center;gap:9px;width:calc(100% - 2px);min-height:36px;margin-left:2px;padding:7px 10px 7px 15px;border:0;border-radius:5px;background:transparent;color:#c7d2e5;font:inherit;font-size:11.5px;font-weight:500;text-align:left;cursor:pointer}.sidebar .nav-item:hover{background:rgba(255,255,255,.05);color:#fff}.sidebar .nav-item.active{background:rgba(0,129,193,.23);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--brand-blue)}.sidebar .nav-icon{width:16px;height:16px;color:#a9bad0}.sidebar .nav-item.active .nav-icon{color:#63c6f2}
.sidebar .sidebar-footer{display:flex;align-items:center;gap:10px;margin:7px 4px 0;padding:12px 9px 3px;border-top:1px solid var(--console-line);color:var(--console-text)}.sidebar .sidebar-footer strong,.sidebar .sidebar-footer small{display:block}.sidebar .sidebar-footer strong{font-size:10.5px}.sidebar .sidebar-footer small{margin-top:2px;color:var(--console-muted);font-size:9px}.sidebar .status-dot{width:7px;height:7px;border-radius:50%;background:#27c97b;box-shadow:0 0 0 3px rgba(39,201,123,.08)}
.main{grid-column:2;min-width:0;padding:0 30px 52px}.topbar{position:sticky;z-index:12;top:0;min-height:58px;margin:0 -30px;padding:0 30px;border-bottom:1px solid var(--border);background:var(--surface);backdrop-filter:none}.utility-icon-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid color-mix(in srgb,var(--border) 82%,var(--brand-blue) 18%);border-radius:9px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%,#fff 2%),color-mix(in srgb,var(--surface-2) 92%,var(--surface) 8%));color:var(--text);box-shadow:0 1px 2px rgba(16,25,66,.07),inset 0 1px 0 rgba(255,255,255,.72);transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}.utility-icon-button:hover{border-color:color-mix(in srgb,var(--brand-blue) 72%,var(--border));color:var(--brand-blue);background:color-mix(in srgb,var(--brand-blue) 7%,var(--surface));box-shadow:0 4px 12px rgba(0,129,193,.12);transform:translateY(-1px)}.utility-icon-button:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(16,25,66,.10)}.utility-icon-button:focus-visible{outline:0;border-color:var(--brand-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-blue) 18%,transparent)}.utility-icon-button .ui-icon{width:18px;height:18px}.utility-icon-button .ui-icon svg{stroke-width:2}.utility-icon-button.utility-theme{color:var(--brand-orange)}.utility-icon-button.utility-refresh{color:var(--brand-blue)}html[data-theme="dark"] .utility-icon-button{border-color:#465361;background:linear-gradient(180deg,#2b333c,#242b33);color:#e9f1f7;box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 1px 2px rgba(0,0,0,.32)}html[data-theme="dark"] .utility-icon-button.utility-theme{color:#ff8a68}html[data-theme="dark"] .utility-icon-button.utility-refresh{color:#61c7f2}html[data-theme="dark"] .utility-icon-button:hover{border-color:#318fbd;background:#303b46;color:#8bd8f8;box-shadow:0 0 0 1px rgba(49,143,189,.12),0 5px 14px rgba(0,0,0,.22)}
@media(max-width:1120px){.app-shell{grid-template-columns:220px minmax(0,1fr)}.sidebar{width:220px}.main{padding-inline:22px}.topbar{margin-inline:-22px;padding-inline:22px}}
@media(max-width:900px){.app-shell{display:block}.sidebar{position:static;width:100%;height:auto;max-height:none}.sidebar nav{max-height:390px}.main{padding:0 16px 38px}.topbar{margin-inline:-16px;padding-inline:16px}}
html.embedded .app-shell{display:block;min-height:0;background:transparent}html.embedded .sidebar,html.embedded .topbar{display:none!important}html.embedded .main{display:block;min-height:0;padding:0;grid-column:auto}html.embedded .page{padding-top:0}

/* --- hf10.css --- */
/* ELENDE Backup v0.31.0 RC1 HF10
   Inter typography + consistent vertical rhythm across every Backplane section. */
:root{
  --backplane-font:"Inter","Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Arial,sans-serif;
  --elende-font:"Inter","Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Arial,sans-serif;
  --hf10-page-gap:16px;
  --hf10-card-gap:14px;
}
html,body,button,input,select,textarea,dialog,table,summary{
  font-family:var(--backplane-font);
}
body{font-weight:400}
h1,h2,h3,h4,.page-titlebar h1,.panel-head h2,.repository-title h2,.storage-node-head h3{font-weight:600}
strong,.summary-value,.trend-summary strong,.repo-kpi strong,.mini-stat>strong{font-weight:600}
button,.button,.mini-button,.text-button,.column-picker summary{font-weight:600}
input,select,textarea{font-weight:400}
th,.badge,.chip,.repository-kicker,.summary-label,.eyebrow{font-weight:600}
.sidebar .nav-group-toggle{font-weight:600}
.sidebar .nav-group-items .nav-item{font-weight:500}
.sidebar .nav-item.active{font-weight:600}
.user-menu-copy strong,.user-avatar{font-weight:600}

/* Every menu tab/section gets the same breathing room.
   Existing historical margins are neutralized only for direct section children. */
.page-section.active{
  display:grid;
  align-content:start;
  gap:var(--hf10-page-gap);
}
.page-section.active>*{min-width:0}
.page-section.active>:where(
  .panel,
  .section-actions,
  .overview-status-grid,
  .summary-grid,
  .grid-two,
  .repository-grid,
  .installer-center-grid,
  .installer-guidance,
  .cloud-summary-grid,
  .settings-grid,
  .dr-kpi-grid,
  .dr-overview-grid,
  .database-overview-grid,
  .dr-activation-notice,
  .dr-roadmap-note
){
  margin-block:0!important;
}
.page-section.active>.panel+.panel{margin-top:0!important}
.panel{min-width:0}
.panel-head{gap:14px}
.panel-head>div{min-width:0}
.panel-head h2{line-height:1.3}
.panel-head p{line-height:1.5}
.section-actions{min-height:34px}

/* Card collections: prevent cards from looking glued together. */
.overview-status-grid,
.summary-grid,
.repository-grid,
.installer-center-grid,
.cloud-summary-grid,
.settings-grid,
.dr-kpi-grid,
.database-overview-grid{
  gap:var(--hf10-card-gap)!important;
}
.storage-node-grid,
.dashboard-repository-grid{
  gap:var(--hf10-card-gap)!important;
  padding:14px!important;
}
.repository-card,
.dashboard-repo-card,
.storage-node-card,
.installer-platform-card,
.dr-kpi-card,
.settings-card,
.mini-stat,
.overview-status-card{
  min-width:0;
}
.repository-card,
.storage-node-card,
.dashboard-repo-card{
  padding:14px;
}
.repository-title,
.storage-node-head{
  gap:12px;
}
.repo-overview{
  gap:12px;
}
.repo-monitor-row,
.repository-primary-actions,
.repository-actions,
.inline-actions,
.toolbar-actions{
  gap:10px;
}
.form-grid{
  column-gap:16px!important;
  row-gap:14px!important;
}
.storage-service-grid{
  column-gap:16px!important;
  row-gap:12px!important;
}
.storage-service-drafts,
.storage-existing-services{
  gap:12px!important;
}
.physical-pool-grid,
.physical-disk-list{
  gap:10px!important;
}
.repo-dashboard-details{
  gap:1px!important;
}
.alerts-list{
  gap:1px;
}
.alert-item{
  min-width:0;
}

/* Tables keep density but text hierarchy is less heavy with Inter. */
table{font-weight:400}
th{font-weight:600}
td strong{font-weight:600}
.subtext{font-weight:400}
.table-toolbar{gap:12px}

/* Responsive grid breathing room. */
@media(max-width:900px){
  .page-section.active{gap:14px}
}
@media(max-width:680px){
  .page-section.active{gap:12px}
  .storage-node-grid,.dashboard-repository-grid{padding:10px!important}
}

/* ===== HF11 LIVE UI PATCH START ===== */
/*
 ELENDE Backup
 HF11 UI Live Patch
 Base: v0.31.0-rc1-hf10
*/

:root{
  --ui-card-gap:16px;
  --ui-section-gap:18px;
  --ui-card-radius:7px;

  --ui-header-bg:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--blue) 7%,var(--surface-2)),
      color-mix(in srgb,var(--blue) 2%,var(--surface)) 72%,
      var(--surface)
    );
}


/* ======================================================
   CARD HEADERS
   ====================================================== */

.panel>.panel-head,
.repository-card>.repository-title,
.storage-node-card>.storage-node-head,
.dashboard-repo-card>.storage-node-head,
.storage-service-card>.storage-service-card-head,
.physical-storage-section>.section-mini-head{
  background:var(--ui-header-bg)!important;
  border-bottom:1px solid var(--border)!important;
}

.panel>.panel-head{
  padding:12px 15px!important;
}

.repository-card>.repository-title,
.storage-node-card>.storage-node-head,
.dashboard-repo-card>.storage-node-head{
  padding:12px 14px!important;
}


/* ======================================================
   GLOBAL TAB / CARD SPACING
   ====================================================== */

.page-section.active{
  gap:var(--ui-section-gap)!important;
}

.overview-status-grid,
.summary-grid,
.repository-grid,
.storage-node-grid,
.dashboard-repository-grid,
.settings-grid,
.dr-kpi-grid,
.database-overview-grid,
.installer-center-grid,
.cloud-summary-grid{
  gap:var(--ui-card-gap)!important;
}

.repository-grid{
  display:grid!important;
}

.repository-card{
  margin-bottom:0!important;
}


/* ======================================================
   HARDWARE / SYSTEM / NETWORK / CONTACT
   ====================================================== */

.storage-info-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(180px,1fr))!important;

  gap:12px!important;
  padding:12px!important;

  border:0!important;
  border-radius:0!important;

  overflow:visible!important;
  background:transparent!important;
}

.storage-info-grid>div{
  min-height:86px!important;

  padding:11px 12px!important;

  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;

  background:var(--surface)!important;
}

.storage-info-grid>div:nth-child(n){
  border-right:1px solid var(--border-soft)!important;
  border-bottom:1px solid var(--border-soft)!important;
}

.storage-info-grid span{
  font-size:8.5px!important;
}

.storage-info-grid strong{
  font-size:10px!important;
}

.storage-info-grid small{
  font-size:8.5px!important;
}


/* ======================================================
   CPU / RAM REAL-TIME BARS
   ====================================================== */

.storage-runtime{
  gap:12px!important;
}

.storage-runtime>div{
  padding:9px 11px!important;

  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;

  background:var(--surface)!important;
}

.storage-runtime .mini-progress{
  grid-column:1/-1;

  height:7px;
  margin-top:3px;

  overflow:hidden;

  border:1px solid
    color-mix(in srgb,var(--border) 72%,transparent);

  border-radius:999px;

  background:var(--border-soft);
}

.storage-runtime .mini-progress span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      #28a6dc
    );

  transform-origin:left center;

  animation:
    hf11-progress-in
    .55s
    ease-out
    both;
}

.storage-runtime .mini-progress.warning span{
  background:
    linear-gradient(
      90deg,
      var(--warning),
      var(--orange)
    );
}

.storage-runtime .mini-progress.danger span{
  background:
    linear-gradient(
      90deg,
      var(--orange),
      var(--danger)
    );
}

.storage-runtime .mini-progress.unavailable{
  opacity:.45;
}

@keyframes hf11-progress-in{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}


/* ======================================================
   REPOSITORY GROUPS
   ====================================================== */

.repository-group-card{
  padding:0!important;

  overflow:hidden!important;

  border:1px solid var(--border)!important;
  border-radius:8px!important;

  background:var(--surface)!important;
}

.repository-group-title{
  min-height:72px;
}

.repository-group-title h2{
  font-size:14px!important;
}

.repository-group-metrics{
  display:grid!important;

  grid-template-columns:
    repeat(4,minmax(150px,1fr))!important;

  gap:12px!important;

  padding:14px!important;

  border-bottom:0!important;

  background:var(--surface)!important;
}

.repository-group-metrics>div{
  min-width:0;

  padding:12px 13px!important;

  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;

  background:var(--surface-2)!important;
}

.repository-group-metrics>div:nth-child(n){
  border-right:1px solid var(--border-soft)!important;
}

.repository-group-metrics .repo-kpi strong{
  font-size:14px!important;
}

.repository-group-metrics .repo-kpi small{
  line-height:1.45;
}


.repository-group-members{
  margin:
    0
    14px
    14px;

  overflow:hidden;

  border:1px solid var(--border-soft);
  border-radius:var(--ui-card-radius);

  background:var(--surface-2);
}

.repository-group-members-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:10px 12px;

  border-bottom:
    1px solid
    var(--border-soft);

  background:
    color-mix(
      in srgb,
      var(--blue) 4%,
      var(--surface)
    );
}

.repository-group-members-head>div{
  display:grid;
  gap:3px;
}

.repository-group-members-head strong{
  font-size:10.5px;
}

.repository-group-member-list{
  display:grid;

  gap:8px;

  padding:10px;
}

.repository-group-member{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:9px 11px;

  border:1px solid var(--border-soft);
  border-radius:6px;

  background:var(--surface);
}

.repository-group-member-copy{
  display:grid;

  min-width:0;

  gap:3px;
}

.repository-group-member-copy strong{
  overflow:hidden;

  font-size:10.5px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.repository-group-member-copy span{
  color:var(--muted);
  font-size:8.5px;
}


/* ======================================================
   REPOSITORIES
   ====================================================== */

.repository-compact .repo-overview{
  gap:10px!important;

  padding:12px!important;

  border-bottom:0!important;

  background:transparent!important;
}

.repository-compact .repo-overview>div{
  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;

  background:var(--surface-2)!important;
}

.repo-monitor-row{
  margin:
    0
    12px
    12px;

  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;
}

.repository-primary-actions{
  margin:
    0
    12px
    12px;

  padding:0!important;
}


/* Dashboard repository details */

.repo-dashboard-details{
  gap:8px!important;

  border:0!important;

  overflow:visible!important;
}

.repo-dashboard-details>div{
  border:1px solid var(--border-soft)!important;
  border-radius:6px!important;

  background:var(--surface)!important;
}


/* ======================================================
   POOLS / DISKS
   ====================================================== */

.physical-pool-grid,
.physical-disk-list{
  gap:10px!important;
}

.physical-pool,
.physical-disk{
  border:1px solid var(--border-soft)!important;
}


/* ======================================================
   ALERT CARDS
   ====================================================== */

.alerts-list{
  gap:10px!important;
  padding:10px!important;
}

.alert-item{
  border:1px solid var(--border-soft)!important;
  border-radius:6px!important;

  background:var(--surface-2)!important;
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media(max-width:1450px){

  .storage-info-grid{
    grid-template-columns:
      repeat(2,minmax(180px,1fr))!important;
  }

  .repository-group-metrics{
    grid-template-columns:
      repeat(2,minmax(160px,1fr))!important;
  }

}

@media(max-width:900px){

  .storage-info-grid{
    grid-template-columns:1fr!important;
    padding:10px!important;
  }

  .repository-group-metrics{
    grid-template-columns:1fr!important;
    padding:10px!important;
  }

  .repository-group-members{
    margin:
      0
      10px
      10px;
  }

  .repository-group-member{
    align-items:flex-start;
  }

}
.util-pct-0{width:0%}
.util-pct-1{width:1%}
.util-pct-2{width:2%}
.util-pct-3{width:3%}
.util-pct-4{width:4%}
.util-pct-5{width:5%}
.util-pct-6{width:6%}
.util-pct-7{width:7%}
.util-pct-8{width:8%}
.util-pct-9{width:9%}
.util-pct-10{width:10%}
.util-pct-11{width:11%}
.util-pct-12{width:12%}
.util-pct-13{width:13%}
.util-pct-14{width:14%}
.util-pct-15{width:15%}
.util-pct-16{width:16%}
.util-pct-17{width:17%}
.util-pct-18{width:18%}
.util-pct-19{width:19%}
.util-pct-20{width:20%}
.util-pct-21{width:21%}
.util-pct-22{width:22%}
.util-pct-23{width:23%}
.util-pct-24{width:24%}
.util-pct-25{width:25%}
.util-pct-26{width:26%}
.util-pct-27{width:27%}
.util-pct-28{width:28%}
.util-pct-29{width:29%}
.util-pct-30{width:30%}
.util-pct-31{width:31%}
.util-pct-32{width:32%}
.util-pct-33{width:33%}
.util-pct-34{width:34%}
.util-pct-35{width:35%}
.util-pct-36{width:36%}
.util-pct-37{width:37%}
.util-pct-38{width:38%}
.util-pct-39{width:39%}
.util-pct-40{width:40%}
.util-pct-41{width:41%}
.util-pct-42{width:42%}
.util-pct-43{width:43%}
.util-pct-44{width:44%}
.util-pct-45{width:45%}
.util-pct-46{width:46%}
.util-pct-47{width:47%}
.util-pct-48{width:48%}
.util-pct-49{width:49%}
.util-pct-50{width:50%}
.util-pct-51{width:51%}
.util-pct-52{width:52%}
.util-pct-53{width:53%}
.util-pct-54{width:54%}
.util-pct-55{width:55%}
.util-pct-56{width:56%}
.util-pct-57{width:57%}
.util-pct-58{width:58%}
.util-pct-59{width:59%}
.util-pct-60{width:60%}
.util-pct-61{width:61%}
.util-pct-62{width:62%}
.util-pct-63{width:63%}
.util-pct-64{width:64%}
.util-pct-65{width:65%}
.util-pct-66{width:66%}
.util-pct-67{width:67%}
.util-pct-68{width:68%}
.util-pct-69{width:69%}
.util-pct-70{width:70%}
.util-pct-71{width:71%}
.util-pct-72{width:72%}
.util-pct-73{width:73%}
.util-pct-74{width:74%}
.util-pct-75{width:75%}
.util-pct-76{width:76%}
.util-pct-77{width:77%}
.util-pct-78{width:78%}
.util-pct-79{width:79%}
.util-pct-80{width:80%}
.util-pct-81{width:81%}
.util-pct-82{width:82%}
.util-pct-83{width:83%}
.util-pct-84{width:84%}
.util-pct-85{width:85%}
.util-pct-86{width:86%}
.util-pct-87{width:87%}
.util-pct-88{width:88%}
.util-pct-89{width:89%}
.util-pct-90{width:90%}
.util-pct-91{width:91%}
.util-pct-92{width:92%}
.util-pct-93{width:93%}
.util-pct-94{width:94%}
.util-pct-95{width:95%}
.util-pct-96{width:96%}
.util-pct-97{width:97%}
.util-pct-98{width:98%}
.util-pct-99{width:99%}
.util-pct-100{width:100%}
/* ===== HF11 LIVE UI PATCH END ===== */

/* ===== ELENDE HF11 LIVE UI START ===== */
/*
 ELENDE Backup
 HF11 UI Live Patch
 Base: v0.31.0-rc1-hf10
*/

:root{
  --ui-card-gap:16px;
  --ui-section-gap:18px;
  --ui-card-radius:7px;

  --ui-header-bg:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--blue) 7%,var(--surface-2)),
      color-mix(in srgb,var(--blue) 2%,var(--surface)) 72%,
      var(--surface)
    );
}


/* ======================================================
   CARD HEADERS
   ====================================================== */

.panel>.panel-head,
.repository-card>.repository-title,
.storage-node-card>.storage-node-head,
.dashboard-repo-card>.storage-node-head,
.storage-service-card>.storage-service-card-head,
.physical-storage-section>.section-mini-head{
  background:var(--ui-header-bg)!important;
  border-bottom:1px solid var(--border)!important;
}

.panel>.panel-head{
  padding:12px 15px!important;
}

.repository-card>.repository-title,
.storage-node-card>.storage-node-head,
.dashboard-repo-card>.storage-node-head{
  padding:12px 14px!important;
}


/* ======================================================
   GLOBAL TAB / CARD SPACING
   ====================================================== */

.page-section.active{
  gap:var(--ui-section-gap)!important;
}

.overview-status-grid,
.summary-grid,
.repository-grid,
.storage-node-grid,
.dashboard-repository-grid,
.settings-grid,
.dr-kpi-grid,
.database-overview-grid,
.installer-center-grid,
.cloud-summary-grid{
  gap:var(--ui-card-gap)!important;
}

.repository-grid{
  display:grid!important;
}

.repository-card{
  margin-bottom:0!important;
}


/* ======================================================
   HARDWARE / SYSTEM / NETWORK / CONTACT
   ====================================================== */

.storage-info-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(180px,1fr))!important;

  gap:12px!important;
  padding:12px!important;

  border:0!important;
  border-radius:0!important;

  overflow:visible!important;
  background:transparent!important;
}

.storage-info-grid>div{
  min-height:86px!important;

  padding:11px 12px!important;

  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;

  background:var(--surface)!important;
}

.storage-info-grid>div:nth-child(n){
  border-right:1px solid var(--border-soft)!important;
  border-bottom:1px solid var(--border-soft)!important;
}

.storage-info-grid span{
  font-size:8.5px!important;
}

.storage-info-grid strong{
  font-size:10px!important;
}

.storage-info-grid small{
  font-size:8.5px!important;
}


/* ======================================================
   CPU / RAM REAL-TIME BARS
   ====================================================== */

.storage-runtime{
  gap:12px!important;
}

.storage-runtime>div{
  padding:9px 11px!important;

  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;

  background:var(--surface)!important;
}

.storage-runtime .mini-progress{
  grid-column:1/-1;

  height:7px;
  margin-top:3px;

  overflow:hidden;

  border:1px solid
    color-mix(in srgb,var(--border) 72%,transparent);

  border-radius:999px;

  background:var(--border-soft);
}

.storage-runtime .mini-progress span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      #28a6dc
    );

  transform-origin:left center;

  animation:
    hf11-progress-in
    .55s
    ease-out
    both;
}

.storage-runtime .mini-progress.warning span{
  background:
    linear-gradient(
      90deg,
      var(--warning),
      var(--orange)
    );
}

.storage-runtime .mini-progress.danger span{
  background:
    linear-gradient(
      90deg,
      var(--orange),
      var(--danger)
    );
}

.storage-runtime .mini-progress.unavailable{
  opacity:.45;
}

@keyframes hf11-progress-in{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}


/* ======================================================
   REPOSITORY GROUPS
   ====================================================== */

.repository-group-card{
  padding:0!important;

  overflow:hidden!important;

  border:1px solid var(--border)!important;
  border-radius:8px!important;

  background:var(--surface)!important;
}

.repository-group-title{
  min-height:72px;
}

.repository-group-title h2{
  font-size:14px!important;
}

.repository-group-metrics{
  display:grid!important;

  grid-template-columns:
    repeat(4,minmax(150px,1fr))!important;

  gap:12px!important;

  padding:14px!important;

  border-bottom:0!important;

  background:var(--surface)!important;
}

.repository-group-metrics>div{
  min-width:0;

  padding:12px 13px!important;

  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;

  background:var(--surface-2)!important;
}

.repository-group-metrics>div:nth-child(n){
  border-right:1px solid var(--border-soft)!important;
}

.repository-group-metrics .repo-kpi strong{
  font-size:14px!important;
}

.repository-group-metrics .repo-kpi small{
  line-height:1.45;
}


.repository-group-members{
  margin:
    0
    14px
    14px;

  overflow:hidden;

  border:1px solid var(--border-soft);
  border-radius:var(--ui-card-radius);

  background:var(--surface-2);
}

.repository-group-members-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:10px 12px;

  border-bottom:
    1px solid
    var(--border-soft);

  background:
    color-mix(
      in srgb,
      var(--blue) 4%,
      var(--surface)
    );
}

.repository-group-members-head>div{
  display:grid;
  gap:3px;
}

.repository-group-members-head strong{
  font-size:10.5px;
}

.repository-group-member-list{
  display:grid;

  gap:8px;

  padding:10px;
}

.repository-group-member{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:9px 11px;

  border:1px solid var(--border-soft);
  border-radius:6px;

  background:var(--surface);
}

.repository-group-member-copy{
  display:grid;

  min-width:0;

  gap:3px;
}

.repository-group-member-copy strong{
  overflow:hidden;

  font-size:10.5px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.repository-group-member-copy span{
  color:var(--muted);
  font-size:8.5px;
}


/* ======================================================
   REPOSITORIES
   ====================================================== */

.repository-compact .repo-overview{
  gap:10px!important;

  padding:12px!important;

  border-bottom:0!important;

  background:transparent!important;
}

.repository-compact .repo-overview>div{
  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;

  background:var(--surface-2)!important;
}

.repo-monitor-row{
  margin:
    0
    12px
    12px;

  border:1px solid var(--border-soft)!important;
  border-radius:var(--ui-card-radius)!important;
}

.repository-primary-actions{
  margin:
    0
    12px
    12px;

  padding:0!important;
}


/* Dashboard repository details */

.repo-dashboard-details{
  gap:8px!important;

  border:0!important;

  overflow:visible!important;
}

.repo-dashboard-details>div{
  border:1px solid var(--border-soft)!important;
  border-radius:6px!important;

  background:var(--surface)!important;
}


/* ======================================================
   POOLS / DISKS
   ====================================================== */

.physical-pool-grid,
.physical-disk-list{
  gap:10px!important;
}

.physical-pool,
.physical-disk{
  border:1px solid var(--border-soft)!important;
}


/* ======================================================
   ALERT CARDS
   ====================================================== */

.alerts-list{
  gap:10px!important;
  padding:10px!important;
}

.alert-item{
  border:1px solid var(--border-soft)!important;
  border-radius:6px!important;

  background:var(--surface-2)!important;
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media(max-width:1450px){

  .storage-info-grid{
    grid-template-columns:
      repeat(2,minmax(180px,1fr))!important;
  }

  .repository-group-metrics{
    grid-template-columns:
      repeat(2,minmax(160px,1fr))!important;
  }

}

@media(max-width:900px){

  .storage-info-grid{
    grid-template-columns:1fr!important;
    padding:10px!important;
  }

  .repository-group-metrics{
    grid-template-columns:1fr!important;
    padding:10px!important;
  }

  .repository-group-members{
    margin:
      0
      10px
      10px;
  }

  .repository-group-member{
    align-items:flex-start;
  }

}
.util-pct-0{width:0%}
.util-pct-1{width:1%}
.util-pct-2{width:2%}
.util-pct-3{width:3%}
.util-pct-4{width:4%}
.util-pct-5{width:5%}
.util-pct-6{width:6%}
.util-pct-7{width:7%}
.util-pct-8{width:8%}
.util-pct-9{width:9%}
.util-pct-10{width:10%}
.util-pct-11{width:11%}
.util-pct-12{width:12%}
.util-pct-13{width:13%}
.util-pct-14{width:14%}
.util-pct-15{width:15%}
.util-pct-16{width:16%}
.util-pct-17{width:17%}
.util-pct-18{width:18%}
.util-pct-19{width:19%}
.util-pct-20{width:20%}
.util-pct-21{width:21%}
.util-pct-22{width:22%}
.util-pct-23{width:23%}
.util-pct-24{width:24%}
.util-pct-25{width:25%}
.util-pct-26{width:26%}
.util-pct-27{width:27%}
.util-pct-28{width:28%}
.util-pct-29{width:29%}
.util-pct-30{width:30%}
.util-pct-31{width:31%}
.util-pct-32{width:32%}
.util-pct-33{width:33%}
.util-pct-34{width:34%}
.util-pct-35{width:35%}
.util-pct-36{width:36%}
.util-pct-37{width:37%}
.util-pct-38{width:38%}
.util-pct-39{width:39%}
.util-pct-40{width:40%}
.util-pct-41{width:41%}
.util-pct-42{width:42%}
.util-pct-43{width:43%}
.util-pct-44{width:44%}
.util-pct-45{width:45%}
.util-pct-46{width:46%}
.util-pct-47{width:47%}
.util-pct-48{width:48%}
.util-pct-49{width:49%}
.util-pct-50{width:50%}
.util-pct-51{width:51%}
.util-pct-52{width:52%}
.util-pct-53{width:53%}
.util-pct-54{width:54%}
.util-pct-55{width:55%}
.util-pct-56{width:56%}
.util-pct-57{width:57%}
.util-pct-58{width:58%}
.util-pct-59{width:59%}
.util-pct-60{width:60%}
.util-pct-61{width:61%}
.util-pct-62{width:62%}
.util-pct-63{width:63%}
.util-pct-64{width:64%}
.util-pct-65{width:65%}
.util-pct-66{width:66%}
.util-pct-67{width:67%}
.util-pct-68{width:68%}
.util-pct-69{width:69%}
.util-pct-70{width:70%}
.util-pct-71{width:71%}
.util-pct-72{width:72%}
.util-pct-73{width:73%}
.util-pct-74{width:74%}
.util-pct-75{width:75%}
.util-pct-76{width:76%}
.util-pct-77{width:77%}
.util-pct-78{width:78%}
.util-pct-79{width:79%}
.util-pct-80{width:80%}
.util-pct-81{width:81%}
.util-pct-82{width:82%}
.util-pct-83{width:83%}
.util-pct-84{width:84%}
.util-pct-85{width:85%}
.util-pct-86{width:86%}
.util-pct-87{width:87%}
.util-pct-88{width:88%}
.util-pct-89{width:89%}
.util-pct-90{width:90%}
.util-pct-91{width:91%}
.util-pct-92{width:92%}
.util-pct-93{width:93%}
.util-pct-94{width:94%}
.util-pct-95{width:95%}
.util-pct-96{width:96%}
.util-pct-97{width:97%}
.util-pct-98{width:98%}
.util-pct-99{width:99%}
.util-pct-100{width:100%}
/* ===== ELENDE HF11 LIVE UI END ===== */

/* ===== ELENDE CONSOLIDATED UI END ===== */

/* ===== HF11 DARKER HEADERS START ===== */

/*
  Card headers:
  mais azul e com contraste superior,
  mantendo visual enterprise e compatibilidade
  com light/dark theme.
*/

.panel > .panel-head,
.repository-card > .repository-title,
.storage-node-card > .storage-node-head,
.dashboard-repo-card > .storage-node-head,
.storage-service-card > .storage-service-card-head,
.physical-storage-section > .section-mini-head {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--blue) 22%, var(--surface-2)),
      color-mix(in srgb, var(--blue) 13%, var(--surface)) 68%,
      color-mix(in srgb, var(--blue) 7%, var(--surface))
    ) !important;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--blue) 25%,
      var(--border)
    ) !important;
}


/* Repository Groups: reforçar ligeiramente o header principal */

.repository-group-card > .repository-group-title {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--blue) 25%, var(--surface-2)),
      color-mix(in srgb, var(--blue) 14%, var(--surface)) 65%,
      color-mix(in srgb, var(--blue) 7%, var(--surface))
    ) !important;
}


/* Header interno "Membros do Grupo" */

.repository-group-members-head {
  background:
    color-mix(
      in srgb,
      var(--blue) 12%,
      var(--surface)
    ) !important;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--blue) 20%,
      var(--border)
    ) !important;
}

/* ===== HF11 DARKER HEADERS END ===== */

/* ===== HF11 REPOSITORY GROUPS BG FIX START ===== */

/*
  O problema:
  existe fundo branco contínuo por trás da lista de Repository Groups,
  o que visualmente "liga" os cards.

  A correção:
  - contentor passa a transparente
  - gap vertical real entre groups
  - cada group card mantém o seu próprio fundo
  - pequeno contraste/shadow para os separar do fundo
*/

#repositoryGroupCards{
  display:grid !important;
  gap:18px !important;
  padding:10px 0 0 !important;
  background:transparent !important;
}

#repositoryGroupCards > .repository-group-card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  box-shadow:
    0 1px 0 rgba(16,24,40,.03),
    0 2px 6px rgba(15,23,42,.025) !important;
}

#repositoryGroupCards > .repository-group-card + .repository-group-card{
  margin-top:0 !important;
}

/* O wrapper da secção também não deve parecer uma folha branca contínua */
#section-repositories .panel,
#section-repositories .page-panel,
#section-repositories .repository-groups-panel,
#section-repositories .repository-groups-wrapper{
  background:transparent !important;
}

/* Mantemos o corpo interno de cada card separado */
.repository-group-card .repository-group-metrics{
  background:transparent !important;
}

.repository-group-card .repository-group-members{
  background:var(--surface-2) !important;
}

/* Afasta melhor a área Repository Groups da secção seguinte */
#repositoryGroupCards + *{
  margin-top:18px !important;
}

/* ===== HF11 REPOSITORY GROUPS BG FIX END ===== */

/* ===== HF11 STORAGE NETWORK GRAPH START ===== */

.storage-top-telemetry{
  display:grid;
  grid-template-columns:minmax(280px,1.1fr) minmax(260px,.9fr);
  gap:14px;
  align-items:stretch;
}

.storage-network-card{
  border:1px solid var(--border-soft);
  border-radius:8px;
  background:var(--surface);
  padding:10px 12px;
  min-height:92px;
  display:grid;
  gap:8px;
}

.storage-network-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.storage-network-head>div{
  display:grid;
  gap:2px;
}

.storage-network-head span{
  color:var(--muted);
  font-size:8.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
}

.storage-network-head small{
  color:var(--subtle);
  font-size:8.5px;
}

.storage-network-legend{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.storage-network-legend>div{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8.5px;
  color:var(--muted);
}

.storage-network-legend i{
  width:10px;
  height:3px;
  border-radius:999px;
  display:inline-block;
}

.storage-network-legend .rx i{ background:#2d8cff; }
.storage-network-legend .tx i{ background:#16a34a; }

.storage-network-legend strong{
  font-size:9px;
  color:var(--text);
}

.storage-network-chart-wrap{
  border:1px solid var(--border-soft);
  border-radius:6px;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--blue) 2%,var(--surface)),
      var(--surface)
    );
}

.storage-network-chart{
  display:block;
  width:100%;
  height:68px;
}

.storage-network-grid line{
  stroke:color-mix(in srgb,var(--border) 78%,transparent);
  stroke-width:1;
}

.storage-network-line{
  fill:none;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.storage-network-line.rx{
  stroke:url(#storageNetRx);
}

.storage-network-line.tx{
  stroke:url(#storageNetTx);
}

.storage-network-empty{
  color:var(--muted);
  font-size:9px;
  padding:10px 2px;
}

.storage-runtime{
  align-self:stretch;
}

@media(max-width:1200px){
  .storage-top-telemetry{
    grid-template-columns:1fr;
  }
}

/* ===== HF11 STORAGE NETWORK GRAPH END ===== */

/* ===== HF11 STORAGE OPS V2 CSS START ===== */

.storage-node-main{
  display:grid !important;
  grid-template-columns:
    minmax(300px,1fr)
    minmax(620px,2fr) !important;
  gap:14px !important;
  align-items:stretch !important;
  padding:14px !important;
}

.storage-capacity{
  display:grid !important;
  grid-template-columns:64px minmax(0,1fr) !important;
  align-content:start !important;
  align-items:center !important;
  gap:10px 12px !important;

  min-height:218px !important;
  padding:13px !important;

  border:1px solid var(--border-soft) !important;
  border-radius:8px !important;

  background:var(--surface) !important;
}

.storage-health-summary-v2{
  grid-column:1/-1;

  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:8px;

  margin-top:5px;
}

.storage-health-summary-v2>div{
  display:grid;
  gap:2px;

  min-width:0;
  min-height:48px;

  padding:8px 9px;

  border:1px solid var(--border-soft);
  border-radius:6px;

  background:var(--surface-2);
}

.storage-health-summary-v2 span,
.network-stats-v2 span,
.compute-stats-v2 span{
  color:var(--muted);
  font-size:8px;
  font-weight:600;
}

.storage-health-summary-v2 strong,
.network-stats-v2 strong,
.compute-stats-v2 strong{
  overflow:hidden;

  color:var(--text);
  font-size:9.5px;
  font-weight:650;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.storage-health-summary-v2 small{
  color:var(--subtle);
  font-size:7.5px;
}

.storage-health-summary-v2 .ok{
  color:var(--success);
}

.storage-health-summary-v2 .warn,
.compute-stats-v2 .warn{
  color:var(--danger);
}


.storage-top-telemetry{
  display:grid !important;

  grid-template-columns:
    minmax(360px,1.2fr)
    minmax(290px,.8fr) !important;

  gap:14px !important;

  min-width:0;
}


.storage-ops-card{
  display:grid;

  min-width:0;
  min-height:218px;

  padding:12px;

  border:1px solid var(--border-soft);
  border-radius:8px;

  background:var(--surface);

  align-content:start;
}


.storage-ops-title{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:8px;
}

.storage-ops-title>div{
  display:grid;
  gap:2px;
}

.storage-ops-title span{
  color:var(--muted);
  font-size:8px;
  font-weight:700;

  letter-spacing:.055em;
  text-transform:uppercase;
}

.storage-ops-title strong{
  color:var(--text);
  font-size:10px;
  font-weight:650;
}

.storage-ops-title small{
  color:var(--subtle);
  font-size:8px;
}


.network-current-v2{
  display:flex;

  align-items:center;

  gap:18px;

  margin-bottom:7px;
}

.network-current-v2>div{
  display:flex;

  align-items:center;

  gap:6px;
}

.network-current-v2 i{
  display:inline-block;

  width:11px;
  height:3px;

  border-radius:999px;
}

.network-current-v2 .rx i{
  background:#168eea;
}

.network-current-v2 .tx i{
  background:#19a45b;
}

.network-current-v2 span{
  color:var(--muted);

  font-size:8px;
  font-weight:700;
}

.network-current-v2 strong{
  color:var(--text);

  font-size:9px;
  font-weight:650;
}


.network-chart-v2{
  overflow:hidden;

  height:84px;

  border:1px solid var(--border-soft);
  border-radius:6px;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--blue) 3%,
        var(--surface)
      ),
      var(--surface)
    );
}

.network-chart-v2 svg{
  display:block;

  width:100%;
  height:84px;
}

.network-grid-v2 line{
  stroke:
    color-mix(
      in srgb,
      var(--border) 78%,
      transparent
    );

  stroke-width:1;
}

.network-rx-v2,
.network-tx-v2{
  fill:none;

  stroke-width:2.2;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.network-rx-v2{
  stroke:#168eea;
}

.network-tx-v2{
  stroke:#19a45b;
}


.network-stats-v2{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:7px;

  margin-top:8px;
}

.network-stats-v2>div{
  display:grid;

  min-width:0;

  gap:2px;

  padding:6px 7px;

  border:1px solid var(--border-soft);
  border-radius:5px;

  background:var(--surface-2);
}


.storage-compute-v2{
  grid-template-rows:auto auto 1fr;
}


.compute-bars-v2{
  display:grid;

  gap:10px;

  margin-bottom:10px;
}

.compute-bars-v2>div{
  display:grid;

  gap:5px;

  padding:7px 8px;

  border:1px solid var(--border-soft);
  border-radius:6px;

  background:var(--surface-2);
}

.compute-label-v2{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;
}

.compute-label-v2 span{
  color:var(--muted);

  font-size:8px;
  font-weight:600;
}

.compute-label-v2 strong{
  color:var(--text);

  font-size:9px;
  font-weight:650;
}


.compute-stats-v2{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:7px;
}

.compute-stats-v2>div{
  display:grid;

  min-width:0;
  min-height:43px;

  align-content:center;

  gap:3px;

  padding:7px 8px;

  border:1px solid var(--border-soft);
  border-radius:5px;

  background:var(--surface-2);
}


.storage-ops-empty{
  display:grid;

  min-height:120px;

  place-items:center;

  color:var(--muted);

  font-size:9px;
}


@media(max-width:1500px){

  .storage-node-main{
    grid-template-columns:1fr !important;
  }

}

@media(max-width:1000px){

  .storage-top-telemetry{
    grid-template-columns:1fr !important;
  }

  .storage-health-summary-v2{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media(max-width:650px){

  .storage-health-summary-v2,
  .network-stats-v2,
  .compute-stats-v2{
    grid-template-columns:1fr;
  }

}

/* ===== HF11 STORAGE OPS V2 CSS END ===== */

/* ===== HF11 STORAGE OPS V3 CSS START ===== */


/* ====================================================
   CAPACIDADE - SEPARAR TEXTO
   ==================================================== */

.storage-capacity{
  column-gap:16px !important;
  row-gap:14px !important;
}


.storage-capacity-copy-v3{
  display:grid !important;

  align-content:center !important;

  gap:5px !important;

  min-width:0;
}


.storage-capacity-copy-v3 span{
  display:block !important;

  margin:0 !important;

  color:var(--muted);

  font-size:9px !important;
  font-weight:500;

  line-height:1.3 !important;
}


.storage-capacity-copy-v3 strong{
  display:block !important;

  margin:0 !important;

  color:var(--text);

  font-size:18px !important;
  font-weight:650 !important;

  line-height:1.15 !important;

  letter-spacing:-.015em;
}


.storage-capacity-copy-v3 small{
  display:block !important;

  margin:1px 0 0 !important;

  color:var(--subtle);

  font-size:8.5px !important;

  line-height:1.4 !important;
}


/* ====================================================
   RANGE SELECTOR
   ==================================================== */

.network-range-head-v3{
  display:grid;

  justify-items:end;

  gap:5px;
}


.network-range-buttons-v3{
  display:flex;

  align-items:center;

  gap:5px;
}


.network-range-v3{
  appearance:none;

  min-width:31px;

  padding:4px 8px;

  border:
    1px solid
    var(--border-soft);

  border-radius:999px;

  background:
    var(--surface-2);

  color:
    var(--muted);

  font-family:inherit;

  font-size:8px;

  font-weight:700;

  line-height:1;

  cursor:pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    transform .12s ease;
}


.network-range-v3:hover{
  color:var(--text);

  border-color:
    color-mix(
      in srgb,
      var(--blue) 32%,
      var(--border)
    );

  transform:
    translateY(-1px);
}


.network-range-v3.active{
  color:var(--blue);

  border-color:
    color-mix(
      in srgb,
      var(--blue) 38%,
      var(--border)
    );

  background:
    color-mix(
      in srgb,
      var(--blue) 13%,
      var(--surface)
    );

  box-shadow:
    inset 0 0 0 1px
    color-mix(
      in srgb,
      var(--blue) 8%,
      transparent
    );
}


.network-range-v3:focus-visible{
  outline:
    2px solid
    color-mix(
      in srgb,
      var(--blue) 38%,
      transparent
    );

  outline-offset:2px;
}


.network-history-status-v3{
  margin-left:auto;

  color:var(--subtle);

  font-size:7.5px;

  white-space:nowrap;
}


/* ====================================================
   MAIS RESPIRO NOS TEXTOS
   ==================================================== */

.storage-health-summary-v2{
  margin-top:8px !important;
}


.storage-health-summary-v2>div{
  gap:3px !important;

  padding:
    9px
    10px !important;
}


.storage-health-summary-v2 span{
  line-height:1.25;
}


.storage-health-summary-v2 strong{
  line-height:1.25;
}


.storage-health-summary-v2 small{
  line-height:1.3;
}


.storage-ops-title{
  margin-bottom:
    10px !important;
}


.storage-ops-title>div{
  gap:3px !important;
}


.storage-ops-title span,
.storage-ops-title strong,
.storage-ops-title small{
  line-height:1.3;
}


.network-current-v2{
  min-height:18px;

  margin-bottom:
    8px !important;
}


.network-current-v2>div{
  gap:7px !important;
}


.network-stats-v2>div,
.compute-stats-v2>div{
  gap:3px !important;

  padding:
    8px
    9px !important;
}


.compute-bars-v2>div{
  gap:6px !important;

  padding:
    8px
    9px !important;
}


@media(max-width:900px){

  .network-range-head-v3{
    justify-items:start;
  }

  .network-history-status-v3{
    display:none;
  }

}

/* ===== HF11 STORAGE OPS V3 CSS END ===== */


/* HF11 STORAGE ALERT DETAILS */

.storage-alert-details{
  margin-top:5px;
}

.storage-alert-details > summary{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
  list-style:none;
}

.storage-alert-details > summary::-webkit-details-marker{
  display:none;
}

.storage-alert-details > summary::after{
  content:"›";
  margin-left:5px;
  font-size:10px;
}

.storage-alert-details[open] > summary::after{
  transform:rotate(90deg);
}

.storage-alert-popover{
  display:grid;
  gap:6px;
  min-width:300px;
  max-width:480px;
  margin-top:7px;
}

.storage-alert-entry{
  padding:9px 10px;
  border:1px solid var(--border-soft);
  border-left:3px solid var(--warning);
  border-radius:4px;
  background:var(--surface);
}

.storage-alert-entry.critical{
  border-left-color:var(--danger);
}

.storage-alert-entry-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.storage-alert-entry-head strong{
  font-size:9px;
}

.storage-alert-entry p{
  margin:6px 0 0;
  font-size:8.5px;
  line-height:1.4;
}

.storage-alert-entry small{
  display:block;
  margin-top:6px;
  font-size:8px;
  opacity:.75;
}