:root{
  --sidebar:#12202b;
  --sidebar2:#172b38;
  --accent:#079ca2;
  --bg:#f3f6f8;
  --card:#fff;
  --border:#dfe6ea;
  --text:#18242d;
  --muted:#73808b;
  --success:#118149;
  --success-bg:#e7f6ed;
  --warning:#a76a00;
  --warning-bg:#fff3d7;
  --error:#c93434;
  --error-bg:#fdeaea;
  --running:#1769aa;
  --running-bg:#e7f1fa;
  --neutral:#66737e;
  --neutral-bg:#edf1f3;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

.sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:245px;
  background:linear-gradient(180deg,var(--sidebar),var(--sidebar2));
  color:#fff;
  overflow:auto;
}

.brand{
  padding:25px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.brand-name{
  font-size:17px;
  font-weight:800;
  letter-spacing:.7px;
}

.brand-sub{
  margin-top:5px;
  color:#8fa2af;
  font-size:11px;
}

nav{
  padding:14px 11px 30px;
}

.nav-title{
  padding:19px 11px 8px;
  color:#738996;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.4px;
}

.nav{
  width:100%;
  border:0;
  background:transparent;
  color:#c7d2d9;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  margin:2px 0;
  border-radius:7px;
  cursor:pointer;
  text-align:left;
  font-size:12px;
}

.nav span{
  width:18px;
  text-align:center;
}

.nav:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

.nav.active{
  color:#fff;
  background:rgba(7,156,162,.20);
  box-shadow:inset 3px 0 0 #16bcc1;
}

.main{
  margin-left:245px;
  min-height:100vh;
}

.topbar{
  height:67px;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:0 27px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:10;
}

.page-title{
  font-size:19px;
  font-weight:750;
}

.page-sub{
  margin-top:3px;
  font-size:10px;
  color:var(--muted);
}

.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.api-state{
  font-size:10px;
  background:#edf8f8;
  color:#087b7e;
  border:1px solid #c9e8e8;
  border-radius:20px;
  padding:6px 10px;
}

.btn{
  height:35px;
  padding:0 13px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:7px;
  cursor:pointer;
  font-weight:650;
  font-size:11px;
}

.btn:hover{
  background:#f6f8f9;
}

.btn-primary{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}

.content{
  padding:23px 27px 40px;
}

.kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(125px,1fr));
  gap:13px;
  margin-bottom:17px;
}

.kpi{
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  padding:16px;
  box-shadow:0 1px 3px rgba(20,35,45,.06);
}

.kpi-label{
  font-size:9px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--muted);
}

.kpi-value{
  margin-top:6px;
  font-size:29px;
  line-height:1;
  font-weight:800;
}

.kpi-note{
  font-size:9px;
  margin-top:7px;
  color:var(--muted);
}

.kpi.success .kpi-value{color:var(--success)}
.kpi.warning .kpi-value{color:var(--warning)}
.kpi.error .kpi-value{color:var(--error)}
.kpi.running .kpi-value{color:var(--running)}

.grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(320px,.7fr);
  gap:17px;
}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  margin-bottom:17px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(20,35,45,.06);
}

.card-head{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.card-title{
  font-size:13px;
  font-weight:750;
}

.card-sub{
  margin-top:3px;
  font-size:9px;
  color:var(--muted);
}

.card-body{
  padding:15px;
}

.table-wrap{
  overflow:auto;
}

table{
  border-collapse:collapse;
  width:100%;
  min-width:900px;
}

th{
  background:#f8fafb;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  white-space:nowrap;
  text-transform:uppercase;
  font-size:8.5px;
  letter-spacing:.45px;
  color:#66747e;
}

td{
  padding:10px 12px;
  border-bottom:1px solid #edf1f3;
  font-size:10.5px;
  vertical-align:middle;
}

tbody tr:hover{
  background:#fafcfc;
}

.name{
  font-weight:700;
}

.sub{
  margin-top:3px;
  font-size:9px;
  color:var(--muted);
}

.status{
  display:inline-block;
  border-radius:20px;
  padding:4px 8px;
  font-size:8.5px;
  font-weight:800;
}

.status-success{
  color:var(--success);
  background:var(--success-bg);
}

.status-warning{
  color:var(--warning);
  background:var(--warning-bg);
}

.status-error{
  color:var(--error);
  background:var(--error-bg);
}

.status-running{
  color:var(--running);
  background:var(--running-bg);
}

.status-unknown{
  color:var(--neutral);
  background:var(--neutral-bg);
}

.attention{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid #edf1f3;
}

.attention:last-child{
  border-bottom:0;
}

.attention-title{
  font-size:10.5px;
  font-weight:700;
}

.attention-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}

.filters{
  display:flex;
  gap:8px;
  align-items:end;
  flex-wrap:wrap;
  padding:14px 15px;
  border-bottom:1px solid var(--border);
}

.field label{
  display:block;
  font-size:8px;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:4px;
}

.field input,
.field select{
  height:34px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  padding:0 9px;
  font-size:10px;
}

.search{
  min-width:230px;
}

.loading,
.empty{
  padding:40px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
}

.error-box{
  border:1px solid #efc6c6;
  background:#fff0f0;
  color:#a62929;
  padding:13px;
  border-radius:8px;
  font-size:11px;
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.detail{
  background:#fafcfd;
  border:1px solid var(--border);
  border-radius:7px;
  padding:11px;
}

.detail label{
  display:block;
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:5px;
}

.detail strong{
  font-size:10.5px;
}

@media(max-width:1250px){
  .kpis{
    grid-template-columns:repeat(3,1fr);
  }

  .grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:800px){
  .sidebar{
    width:200px;
  }

  .main{
    margin-left:200px;
  }

  .content{
    padding:15px;
  }

  .kpis{
    grid-template-columns:1fr 1fr;
  }

  .detail-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   ADMINISTRATION MODULE
   ========================================================= */

.page-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-bottom:16px;
}

.btn-primary{
  background:#0e7490;
  color:#fff;
  border-color:#0e7490;
}

.btn-primary:hover{
  background:#155e75;
}

.btn-danger{
  color:#b42318;
  border-color:#f1b8b5;
  background:#fff;
}

.link-btn{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  color:#0e7490;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}

.link-btn:hover{
  text-decoration:underline;
}

.form-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  font-size:12px;
  font-weight:700;
  color:#607184;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.field input,
.field select,
.field textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d6e0e7;
  background:#fff;
  border-radius:8px;
  padding:11px 12px;
  font:inherit;
  color:#102333;
}

.field textarea{
  min-height:90px;
  resize:vertical;
}

.check-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:8px;
  padding-top:14px;
  text-transform:none !important;
  font-size:14px !important;
}

.check-row input{
  width:auto;
}

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:22px;
}

.form-bottom{
  justify-content:flex-end;
}

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(8,24,36,.58);
  align-items:center;
  justify-content:center;
  padding:30px;
}

.modal-card{
  width:min(900px,96vw);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:14px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.25);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid #e1e8ed;
}

.modal-body{
  padding:22px;
}

.success-box{
  margin-top:16px;
  padding:12px 14px;
  border:1px solid #b7e4cb;
  border-radius:8px;
  background:#edf9f2;
  color:#087443;
}

.error-box{
  padding:14px;
  border:1px solid #f1b8b5;
  border-radius:8px;
  background:#fff4f3;
  color:#b42318;
}

.status-unknown{
  background:#edf1f4;
  color:#4b5d6b;
}

@media(max-width:900px){
  .form-grid{
    grid-template-columns:1fr;
  }

  .field.full{
    grid-column:auto;
  }
}


/* ==========================================================
   HOME DASHBOARD V2
   ========================================================== */

.home-grid{
  display:grid;
  grid-template-columns:
    1fr 1.7fr 1fr 1fr;
  gap:14px;
  align-items:stretch;
}

.home-card{
  background:#fff;
  border:1px solid #e1e7eb;
  border-radius:10px;
  padding:18px;
  box-shadow:
    0 2px 7px rgba(15,35,50,.06);
  min-width:0;
}

.home-card-wide{
  grid-column:span 1;
}

.home-card-activity{
  grid-column:span 2;
}

.home-click{
  cursor:pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.home-click:hover{
  transform:translateY(-2px);
  box-shadow:
    0 8px 22px rgba(15,35,50,.12);
}

.home-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}

.home-icon{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:50%;
  background:#f2f5d7;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#66751f;
}

.home-card-title{
  font-size:15px;
  font-weight:800;
  color:#162938;
}

.home-card-sub{
  margin-top:3px;
  font-size:11px;
  color:#7a8a98;
}

.home-big-number{
  font-size:36px;
  line-height:1;
  font-weight:800;
  margin:8px 0 18px;
}

.home-huge-number{
  font-size:48px;
  line-height:1;
  font-weight:800;
  margin:8px 0;
}

.home-metric-label{
  font-size:12px;
  color:#71818e;
}

.home-mini-note{
  margin-top:8px;
  color:#788997;
  font-size:11px;
}

.home-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.home-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:12px;
  padding-bottom:8px;
  border-bottom:1px solid #edf1f4;
}

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

.home-list-row span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.home-list-row strong{
  white-space:nowrap;
}

.home-device-layout{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:22px;
  align-items:center;
}

.home-bars{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.bar-row{
  display:grid;
  grid-template-columns:110px 1fr 32px;
  align-items:center;
  gap:10px;
  font-size:11px;
}

.mini-bar{
  height:9px;
  background:#edf1f3;
  border-radius:10px;
  overflow:hidden;
}

.mini-bar span{
  display:block;
  height:100%;
  border-radius:10px;
  background:#9eb537;
}

.home-device-names{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.device-chip{
  display:inline-block;
  border:1px solid #e0e7eb;
  background:#f8fafb;
  padding:5px 7px;
  border-radius:15px;
  font-size:10px;
}

.donut-wrap{
  display:flex;
  justify-content:center;
  padding:5px 0 15px;
}

.home-donut{
  width:118px;
  height:118px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.donut-center{
  width:70px;
  height:70px;
  background:#fff;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.donut-center strong{
  font-size:22px;
}

.donut-center span{
  font-size:10px;
  color:#758794;
}

.legend-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.legend-item{
  appearance:none;
  border:0;
  background:none;
  display:grid;
  grid-template-columns:9px 1fr auto;
  align-items:center;
  gap:6px;
  padding:4px;
  font-size:10px;
  text-align:left;
  cursor:pointer;
  color:#263846;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
}

.success-dot{
  background:#48ad58;
}

.warning-dot{
  background:#eba82f;
}

.error-dot{
  background:#d9463e;
}

.running-dot{
  background:#4099d4;
}

.server-summary{
  display:flex;
  flex-direction:column;
  gap:11px;
  font-size:11px;
}

.server-summary>div{
  display:grid;
  grid-template-columns:8px 1fr auto;
  align-items:center;
  gap:8px;
}

.home-type-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #edf1f4;
}

.home-type-summary span{
  display:flex;
  justify-content:space-between;
  font-size:11px;
}

.summary-numbers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.summary-numbers>div{
  padding:12px;
  background:#f8fafb;
  border:1px solid #e8edf0;
  border-radius:8px;
  display:flex;
  flex-direction:column;
}

.summary-numbers strong{
  font-size:24px;
}

.summary-numbers span{
  margin-top:4px;
  font-size:10px;
  color:#71818d;
}

.summary-success strong{
  color:#16844a;
}

.summary-warning strong{
  color:#c28505;
}

.summary-error strong{
  color:#cc3831;
}

.activity-list{
  display:flex;
  flex-direction:column;
}

.activity-row{
  appearance:none;
  width:100%;
  background:#fff;
  border:0;
  border-bottom:1px solid #edf1f4;
  padding:10px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  text-align:left;
  cursor:pointer;
}

.activity-row:hover{
  background:#f7fafb;
}

.activity-title{
  font-weight:700;
  font-size:12px;
}

.activity-sub{
  margin-top:4px;
  font-size:10px;
  color:#758794;
}

.activity-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  white-space:nowrap;
  font-size:9px;
  color:#7c8b96;
}

.home-detail-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.detail-action{
  appearance:none;
  border:1px solid #dce4e8;
  background:#f8fafb;
  border-radius:10px;
  padding:20px;
  cursor:pointer;
  font-weight:700;
}

.detail-action:hover{
  background:#edf3f6;
}

.success-action{
  color:#147944;
}

.warning-action{
  color:#a66f00;
}

.error-action{
  color:#bd302a;
}

@media(max-width:1400px){

  .home-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .home-card-activity{
    grid-column:span 2;
  }
}

@media(max-width:1000px){

  .home-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .home-card-activity{
    grid-column:span 2;
  }
}

@media(max-width:700px){

  .home-grid{
    grid-template-columns:1fr;
  }

  .home-card-activity{
    grid-column:span 1;
  }

  .home-device-layout{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   HOME COUNT-ONLY CARDS
   ========================================================== */

.home-clean .home-count-card{
  min-height:220px;
  display:flex;
  flex-direction:column;
}

.home-count-button{
  appearance:none;
  border:0;
  background:none;
  cursor:pointer;

  display:block;
  margin:auto;

  font-size:64px;
  line-height:1;
  font-weight:800;

  color:#102333;

  padding:20px 30px;
}

.home-count-button:hover{
  color:#0d8297;
}

.home-count-foot{
  border-top:1px solid #edf1f4;

  margin-top:auto;
  padding-top:13px;

  display:flex;
  justify-content:space-between;
  gap:10px;

  font-size:11px;
  color:#657783;
}

.home-report-button{
  margin:auto;
  min-width:170px;
}



/* ==========================================================
   SCHEDULE
   ========================================================== */

.schedule-chip{
  display:inline-block;

  border:1px solid #d8e2aa;
  background:#f6f8e7;

  color:#65731c;

  border-radius:16px;

  padding:5px 9px;
  margin:2px;

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



/* ==========================================================
   STATUS REPORT
   ========================================================== */

.report-filter-grid{
  display:grid;

  grid-template-columns:
    repeat(6,minmax(140px,1fr));

  gap:14px;

  align-items:end;
}

.report-action-field{
  justify-content:flex-end;
}

.report-download-row{
  margin-top:18px;

  padding-top:16px;

  border-top:1px solid #e9eef1;

  display:flex;
  justify-content:flex-end;
}

.report-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(140px,1fr));

  gap:14px;

  margin:18px 0;
}


@media(max-width:1350px){

  .report-filter-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .report-summary-grid{
    grid-template-columns:
      repeat(3,1fr);
  }
}


@media(max-width:800px){

  .report-filter-grid{
    grid-template-columns:1fr;
  }

  .report-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }
}


/* =========================================================
   SAFE GLOBAL CONTROL FIX
   ========================================================= */

input,
select,
textarea,
.search{
  font-family:inherit !important;
  font-size:14px !important;
  color:#172936 !important;
  background:#ffffff !important;

  box-sizing:border-box !important;
}


/* Fix chopped dropdown text */

select,
.field select,
.filters select{

  height:44px !important;
  min-height:44px !important;

  padding:0 38px 0 12px !important;

  line-height:normal !important;

  vertical-align:middle !important;

  text-indent:0 !important;

  overflow:visible !important;
}


/* Fix search/input vertical alignment */

input,
.search,
.field input,
.filters input{

  height:44px !important;
  min-height:44px !important;

  padding:0 12px !important;

  line-height:normal !important;
}


/* Labels */

.field label,
.filters label{

  display:block !important;

  height:auto !important;

  min-height:0 !important;

  margin:0 0 7px 0 !important;

  padding:0 !important;

  line-height:1.25 !important;

  overflow:visible !important;
}


/* Backup jobs search bar */

.filters{

  display:flex !important;

  align-items:flex-end !important;

  flex-wrap:wrap !important;

  gap:12px !important;

  overflow:visible !important;
}


.filters .field{

  overflow:visible !important;

  min-width:160px !important;
}


.filters .field:first-child{

  min-width:290px !important;

  flex:0 1 290px !important;
}


/* Client Mapping dropdowns */

#mapClient,
#mapServer,
#mapAccount{

  height:46px !important;

  min-height:46px !important;

  line-height:normal !important;

  padding-top:0 !important;

  padding-bottom:0 !important;
}


/* Report dropdowns */

#reportClient,
#reportDevice,
#reportProtected,
#reportFrom,
#reportTo{

  height:44px !important;

  min-height:44px !important;
}


/* =========================================================
   STICKY HEADER
   ========================================================= */

.topbar{

  position:sticky !important;

  top:0 !important;

  z-index:100 !important;

  background:#fff !important;

  box-shadow:
    0 1px 0
    #dce5ea;
}


/* =========================================================
   STICKY SIDEBAR
   ========================================================= */

.sidebar{

  position:sticky !important;

  top:0 !important;

  height:100vh !important;

  max-height:100vh !important;

  overflow-y:auto !important;

  overflow-x:hidden !important;

  align-self:flex-start !important;

  z-index:110 !important;
}


/* =========================================================
   STICKY TABLE HEADERS
   ========================================================= */

.table-wrap{

  position:relative !important;

  overflow:auto !important;

  max-width:100% !important;
}


.table-wrap thead th{

  position:sticky !important;

  top:0 !important;

  z-index:20 !important;

  background:#f5f8fa !important;

  box-shadow:
    inset 0 -1px 0
    #dce5ea;
}


.table-wrap th{

  white-space:nowrap !important;

  line-height:1.2 !important;

  vertical-align:middle !important;
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

#backBtn{

  white-space:nowrap;

  min-width:82px;
}


/* =========================================================
   RUNNING CLICK
   ========================================================= */

.legend-item{

  cursor:pointer !important;
}


.legend-item:hover{

  background:#f3f7f8 !important;

  border-radius:6px;
}


/* =========================================================
   LAYOUT REPAIR
   Removes the bad sticky positioning introduced by UI patch.
   ========================================================= */

/* Main dashboard must begin at top */
.main,
.main-content,
.app-main,
.content-area {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
}

/* Restore normal topbar positioning.
   We will implement sticky behavior correctly later. */
.topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 30 !important;
}

/* Sidebar stays full-height but does not alter document flow */
.sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Never reserve blank vertical space before the header */
#app,
.app,
.layout,
.shell {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Keep actual page content normal */
#content {
    position: relative !important;
    top: auto !important;
    transform: none !important;
}

/* Keep table header normal for now.
   Sticky table headers will be added after layout is stable. */
.table-wrap thead th {
    position: static !important;
}

/* Back button should not appear on Home */
body:has(.nav-item.active[data-page="overview"]) #backBtn {
    display: none !important;
}


/* ==========================================================
   FINAL STICKY LAYOUT
   Single implementation only
   ========================================================== */

/*
   PAGE STRUCTURE

   sidebar  = independent fixed column
   main     = one browser-height column
   topbar   = fixed within main
   content  = ONLY vertical scroll container
*/


html,
body {
    height: 100%;
    margin: 0;
}


body {
    overflow: hidden !important;
}


/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */

.sidebar {
    position: fixed !important;

    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    height: 100vh !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 500 !important;
}


/* ----------------------------------------------------------
   MAIN AREA
   ---------------------------------------------------------- */

.main {
    height: 100vh !important;

    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* ----------------------------------------------------------
   PAGE HEADER
   Always visible
   ---------------------------------------------------------- */

.topbar {
    position: relative !important;

    flex: 0 0 auto !important;

    top: auto !important;

    z-index: 400 !important;

    background: #ffffff !important;

    border-bottom:
        1px solid #dce5ea !important;
}


/* ----------------------------------------------------------
   ONLY SCROLL CONTAINER
   ---------------------------------------------------------- */

.content {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    position: relative !important;

    overflow-y: auto !important;
    overflow-x: auto !important;

    --sticky-toolbar-height: 0px;
}


/*
   IMPORTANT:
   old .card overflow:hidden prevents sticky children.
*/

.content > .card,
.content > div > .card {
    overflow: visible !important;
}


/* ----------------------------------------------------------
   JOB PAGE SEARCH / STATUS
   ---------------------------------------------------------- */

.content .filters {
    position: sticky !important;

    top: 0 !important;

    z-index: 310 !important;

    background: #ffffff !important;

    padding-top: 16px !important;
    padding-bottom: 16px !important;

    border-bottom:
        1px solid #dce5ea !important;

    box-shadow:
        0 2px 5px
        rgba(15, 35, 50, .06);
}


/* ----------------------------------------------------------
   ADMIN PAGE ACTION BAR
   + Add Client
   + Add Server
   + Add Datacenter
   ---------------------------------------------------------- */

.content > .page-actions {
    position: sticky !important;

    top: 0 !important;

    z-index: 310 !important;

    background: #f3f6f8 !important;

    padding-top: 10px !important;
    padding-bottom: 10px !important;

    margin-bottom: 12px !important;
}


/* ----------------------------------------------------------
   REPORT PAGE FILTER CARD
   ---------------------------------------------------------- */

.content.report-sticky-page
> .card:first-child {
    position: sticky !important;

    top: 0 !important;

    z-index: 310 !important;

    background: #ffffff !important;
}


/* ----------------------------------------------------------
   CLIENT MAPPING ASSIGN CARD
   ---------------------------------------------------------- */

.content.mapping-sticky-page
> .card:first-child {
    position: sticky !important;

    top: 0 !important;

    z-index: 310 !important;

    background: #ffffff !important;
}


/* ----------------------------------------------------------
   TABLE CONTAINER

   Critical:
   NO nested vertical scroll.
   Content itself must perform the scrolling.
   ---------------------------------------------------------- */

.content .table-wrap {
    overflow: visible !important;

    position: relative !important;
}


/* ----------------------------------------------------------
   TABLE HEADER
   ---------------------------------------------------------- */

.content .table-wrap thead th {
    position: sticky !important;

    top:
        var(
            --sticky-toolbar-height,
            0px
        ) !important;

    z-index: 250 !important;

    background: #f5f8fa !important;

    box-shadow:
        inset 0 -1px 0
        #dce5ea !important;
}


/* ----------------------------------------------------------
   CONTROLS
   ---------------------------------------------------------- */

.filters {
    display: flex !important;

    flex-wrap: wrap !important;

    align-items: flex-end !important;

    gap: 12px !important;
}


.filters .field {
    overflow: visible !important;
}


input,
select,
textarea {
    box-sizing: border-box !important;
}


select,
.field select,
.filters select {
    min-height: 44px !important;
    height: 44px !important;

    padding:
        0 38px
        0 12px !important;

    line-height: normal !important;

    vertical-align: middle !important;

    overflow: visible !important;
}


input,
.search,
.field input,
.filters input {
    min-height: 44px !important;
    height: 44px !important;

    padding:
        0 12px !important;

    line-height: normal !important;
}


.field label,
.filters label {
    display: block !important;

    height: auto !important;

    line-height: 1.25 !important;

    margin-bottom: 7px !important;

    overflow: visible !important;
}


/* ----------------------------------------------------------
   MODALS
   ---------------------------------------------------------- */

.modal-card {
    max-height: 90vh !important;

    overflow-y: auto !important;
}


.modal-head {
    position: sticky !important;

    top: 0 !important;

    z-index: 600 !important;

    background: #ffffff !important;
}



/* =========================================================
   FINAL SCROLL CORRECTION
   Neutralize previous experimental sticky rules.
   ========================================================= */


/*
   Top page header remains visible.
*/

.main{
  height:100vh !important;
  min-height:0 !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;
}


.topbar{
  position:relative !important;

  top:auto !important;

  flex:0 0 auto !important;

  z-index:500 !important;

  background:#fff !important;
}


/*
   ONLY .content scrolls vertically.
*/

.content{
  flex:1 1 auto !important;

  min-height:0 !important;

  overflow-y:auto !important;
  overflow-x:auto !important;

  position:relative !important;

  padding-top:24px !important;
}


/* =========================================================
   REMOVE OLD WHOLE-CARD STICKY RULES
   These are what caused rows to appear above Search.
   ========================================================= */

.content > .card:first-child{
  position:relative !important;

  top:auto !important;

  z-index:auto !important;

  transform:none !important;
}


.content .card > .card-head:first-child{
  position:relative !important;

  top:auto !important;

  z-index:auto !important;
}


/*
   Generic cards must NOT be sticky.
*/

.content .card{
  position:relative !important;
}


/* =========================================================
   JOB SEARCH / STATUS
   This is the only sticky block on job pages.
   ========================================================= */

.content .filters{
  position:sticky !important;

  top:-24px !important;

  z-index:450 !important;

  background:#fff !important;

  margin-left:-1px !important;
  margin-right:-1px !important;

  padding:
    22px 16px
    14px 16px !important;

  border-bottom:
    1px solid #dce5ea !important;

  box-shadow:
    0 3px 8px
    rgba(15,35,50,.08) !important;
}


/*
   Do NOT make first card sticky.
*/

.content > .card.sticky-category{
  position:relative !important;

  top:auto !important;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.content .table-wrap{
  overflow:visible !important;

  position:relative !important;
}


/*
   Table headings stick directly below filter bar.

   102px is the actual approximate height of the
   Search/Status area on these pages.
*/

.content .filters ~ .table-wrap thead th{
  position:sticky !important;

  top:94px !important;

  z-index:420 !important;

  background:#f5f8fa !important;

  box-shadow:
    inset 0 -1px 0
    #dbe4e9 !important;
}


/*
   Tables without Search/Status:
   heading sticks at top of content.
*/

.content .card:not(:has(.filters))
.table-wrap thead th{
  position:sticky !important;

  top:-24px !important;

  z-index:300 !important;

  background:#f5f8fa !important;
}


/* =========================================================
   ADMIN PAGE ACTIONS
   ========================================================= */

.content > .page-actions{
  position:sticky !important;

  top:-24px !important;

  z-index:430 !important;

  background:#f3f6f8 !important;

  padding:
    24px 0 10px 0 !important;
}


/* =========================================================
   REPORT FILTER CARD
   ========================================================= */

.content.report-sticky-page
> .card:first-child{
  position:sticky !important;

  top:-24px !important;

  z-index:430 !important;

  background:#fff !important;
}


/* =========================================================
   CLIENT MAPPING FILTER/ASSIGN CARD
   ========================================================= */

.content.mapping-sticky-page
> .card:first-child{
  position:sticky !important;

  top:-24px !important;

  z-index:430 !important;

  background:#fff !important;
}


/* =========================================================
   PREVENT DATA FROM PAINTING OVER FILTER
   ========================================================= */

.content .filters::before{
  content:"";

  position:absolute;

  left:0;
  right:0;

  top:-50px;

  height:50px;

  background:#f3f6f8;

  pointer-events:none;
}


/* =========================================================
   HOME RANGE SELECT
   ========================================================= */

.home-status-title-row{
  width:100%;

  display:flex;

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

  gap:10px;
}


.home-range-select{
  width:auto !important;

  min-width:105px !important;

  height:34px !important;
  min-height:34px !important;

  padding:
    0 28px
    0 9px !important;

  font-size:11px !important;

  border-radius:7px !important;
}



/* ==========================================================
   FINAL JOB PAGE SCROLL MODEL

   Do NOT use sticky offsets for job pages.
   Search stays fixed.
   Table header stays fixed.
   Only rows scroll.
   ========================================================== */


/* ----------------------------------------------------------
   JOB PAGE CONTENT
   ---------------------------------------------------------- */

.content.job-scroll-page{

  overflow:hidden !important;

  display:flex !important;

  flex-direction:column !important;

  min-height:0 !important;

  padding-top:24px !important;
  padding-bottom:0 !important;
}


/* ----------------------------------------------------------
   MAIN JOB CARD
   ---------------------------------------------------------- */

.content.job-scroll-page
> .card{

  flex:1 1 auto !important;

  min-height:0 !important;

  display:flex !important;

  flex-direction:column !important;

  overflow:hidden !important;

  position:relative !important;

  top:auto !important;

  margin-bottom:0 !important;
}


/* ----------------------------------------------------------
   SEARCH / STATUS BAR
   Fixed inside job card
   ---------------------------------------------------------- */

.content.job-scroll-page
.filters{

  position:relative !important;

  top:auto !important;

  left:auto !important;

  right:auto !important;

  flex:0 0 auto !important;

  z-index:20 !important;

  margin:0 !important;

  padding:
    16px !important;

  background:#ffffff !important;

  border-bottom:
    1px solid #dce5ea !important;

  box-shadow:none !important;
}


/* Remove pseudo element from previous sticky experiment */

.content.job-scroll-page
.filters::before{

  display:none !important;
}


/* ----------------------------------------------------------
   JOB RESULT CONTAINER
   ---------------------------------------------------------- */

.content.job-scroll-page
#jobsResult{

  flex:1 1 auto !important;

  min-height:0 !important;

  overflow:hidden !important;

  display:flex !important;

  flex-direction:column !important;
}


/* ----------------------------------------------------------
   TABLE SCROLLER

   THIS is now the only scrolling section.
   ---------------------------------------------------------- */

.content.job-scroll-page
#jobsResult
> .table-wrap{

  flex:1 1 auto !important;

  min-height:0 !important;

  width:100% !important;

  overflow-y:auto !important;

  overflow-x:auto !important;

  position:relative !important;
}


/* ----------------------------------------------------------
   TABLE HEADER
   ---------------------------------------------------------- */

.content.job-scroll-page
#jobsResult
thead th{

  position:sticky !important;

  top:0 !important;

  z-index:30 !important;

  background:#f5f8fa !important;

  box-shadow:
    inset 0 -1px 0
    #d8e2e8 !important;
}


/* ----------------------------------------------------------
   CANCEL ALL OLD JOB-PAGE STICKY RULES
   ---------------------------------------------------------- */

.content.job-scroll-page
.card.sticky-category{

  position:relative !important;

  top:auto !important;
}


.content.job-scroll-page
.filters.sticky-category{

  position:relative !important;

  top:auto !important;
}


.content.job-scroll-page
.table-wrap thead th{

  top:0 !important;
}


/* ----------------------------------------------------------
   Keep rows below header
   ---------------------------------------------------------- */

.content.job-scroll-page
tbody{

  position:relative;

  z-index:1;
}


.content.job-scroll-page
thead{

  position:relative;

  z-index:30;
}



/* ==========================================================
   UNIVERSAL GLOBAL FILTER BAR
   ========================================================== */

.content{

  --global-filter-height:
    0px;
}


/* ----------------------------------------------------------
   GLOBAL BAR
   ---------------------------------------------------------- */

.global-filter-bar{

  position:sticky !important;

  top:0 !important;

  z-index:800 !important;

  flex:0 0 auto !important;

  background:#ffffff !important;

  border:
    1px solid #dbe4ea;

  border-radius:
    10px;

  margin:
    0 0 14px 0;

  padding:
    14px 16px;

  box-shadow:
    0 3px 10px
    rgba(17,38,52,.08);
}


/* job page content does not scroll,
   so the filter naturally stays fixed */

.content.job-scroll-page
.global-filter-bar{

  position:relative !important;

  top:auto !important;

  margin-bottom:
    10px;
}


/* ----------------------------------------------------------
   FIRST ROW
   ---------------------------------------------------------- */

.gf-row{

  display:grid;

  grid-template-columns:
    minmax(115px,.7fr)
    minmax(180px,1.4fr)
    minmax(150px,1fr)
    minmax(150px,1fr)
    minmax(130px,.8fr);

  gap:12px;

  align-items:end;
}


/* ----------------------------------------------------------
   FIELD
   ---------------------------------------------------------- */

.gf-field{

  min-width:0;

  display:flex;

  flex-direction:column;

  gap:6px;
}


.gf-field label,
.gf-search-field label{

  display:block;

  font-size:11px;

  font-weight:800;

  color:#5f7180;

  text-transform:uppercase;

  letter-spacing:.04em;
}


.gf-field select,
.gf-field input{

  width:100% !important;

  height:40px !important;

  min-height:40px !important;

  box-sizing:border-box;

  font-size:13px !important;
}


/* ----------------------------------------------------------
   CUSTOM DATES
   ---------------------------------------------------------- */

.gf-custom-dates{

  display:flex;

  gap:12px;

  margin-top:12px;

  padding-top:12px;

  border-top:
    1px solid #edf1f3;
}


.gf-custom-dates
.gf-field{

  width:
    min(220px,100%);
}


/* ----------------------------------------------------------
   SEARCH ROW
   ---------------------------------------------------------- */

.gf-search-row{

  display:flex;

  align-items:flex-end;

  gap:10px;

  margin-top:12px;

  padding-top:12px;

  border-top:
    1px solid #edf1f3;
}


.gf-search-field{

  flex:
    1 1 auto;

  display:flex;

  flex-direction:column;

  gap:6px;
}


.gf-search-field input{

  width:100%;

  height:40px !important;

  min-height:40px !important;

  box-sizing:border-box;
}


.gf-apply,
.gf-reset{

  flex:
    0 0 auto;

  min-width:80px;

  height:40px;
}


/* ----------------------------------------------------------
   HIDE OLD DUPLICATE JOB FILTER
   ---------------------------------------------------------- */

.job-scroll-page
.legacy-page-filter{

  display:none !important;
}


/* ----------------------------------------------------------
   JOB TABLE

   Global filter remains above.
   Only rows scroll.
   ---------------------------------------------------------- */

.content.job-scroll-page{

  padding-top:
    16px !important;
}


.content.job-scroll-page
> .card{

  flex:
    1 1 auto !important;

  min-height:0 !important;

  margin-top:0 !important;
}


/* Old filter has disappeared,
   jobsResult receives all remaining height */

.content.job-scroll-page
#jobsResult{

  flex:
    1 1 auto !important;

  min-height:0 !important;
}


.content.job-scroll-page
#jobsResult
.table-wrap{

  height:100%;

  overflow-y:auto !important;

  overflow-x:auto !important;
}


.content.job-scroll-page
#jobsResult
thead th{

  position:sticky !important;

  top:0 !important;

  z-index:50 !important;

  background:#f5f8fa !important;
}


/* ----------------------------------------------------------
   REPORT PAGE
   ---------------------------------------------------------- */

.content.report-sticky-page
.global-filter-bar{

  position:sticky !important;

  top:0 !important;
}


/* existing detailed report form appears below global bar */

.content.report-sticky-page
> .card:first-of-type{

  position:relative !important;

  top:auto !important;
}


/* ----------------------------------------------------------
   OTHER PAGES
   ---------------------------------------------------------- */

.content:not(.job-scroll-page)
.global-filter-bar{

  position:sticky !important;

  top:0 !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:1450px){

  .gf-row{

    grid-template-columns:
      repeat(
        3,
        minmax(
          180px,
          1fr
        )
      );

  }
}


@media(max-width:950px){

  .gf-row{

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

  }


  .gf-search-row{

    flex-wrap:wrap;
  }
}


@media(max-width:650px){

  .gf-row{

    grid-template-columns:
      1fr;
  }


  .gf-custom-dates{

    flex-direction:column;
  }
}



/* ==========================================================
   NO FLICKER / STABLE RENDER
   ========================================================== */


/*
 * While a page is being assembled, retain its dimensions
 * but do not expose intermediate layouts.
 */

.content.render-hold{
  visibility:hidden !important;
}


/*
 * Applying filters does not hide the full page.
 * It simply prevents animations/transitions from flashing.
 */

.content.filter-applying,
.content.filter-applying *{
  transition:none !important;
  animation:none !important;
}


/*
 * Do not animate layout/navigation elements.
 */

.global-filter-bar,
.card,
.table-wrap,
.filters,
.page-actions,
#jobsResult{
  transition:none !important;
}


/*
 * Old per-page filter is completely removed from layout
 * once universal filter exists.
 */

.job-scroll-page
.legacy-page-filter{
  display:none !important;

  height:0 !important;
  min-height:0 !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
}


/*
 * Global bar owns the top filter position.
 */

.content.job-scroll-page
.global-filter-bar{
  flex:0 0 auto !important;

  position:relative !important;

  top:auto !important;

  margin-bottom:10px !important;
}


/*
 * Remaining card consumes available area immediately,
 * preventing vertical jump.
 */

.content.job-scroll-page
> .card{
  flex:1 1 auto !important;

  min-height:0 !important;

  margin-top:0 !important;
}


/*
 * Only job table scrolls.
 */

.content.job-scroll-page
#jobsResult{
  flex:1 1 auto !important;

  min-height:0 !important;

  overflow:hidden !important;
}


.content.job-scroll-page
#jobsResult
.table-wrap{
  height:100% !important;

  overflow-y:auto !important;
  overflow-x:auto !important;
}


/*
 * Sticky table headings.
 */

.content.job-scroll-page
#jobsResult
thead th{
  position:sticky !important;

  top:0 !important;

  z-index:60 !important;

  background:#f5f8fa !important;
}


/*
 * Remove duplicate Home date-range selector.
 * Date Range in universal bar is now authoritative.
 */

#homeRange{
  display:none !important;
}



/* =========================================================
   CLIENT DASHBOARD ENTRY
   ========================================================= */

.client-view-dashboard-btn{
  margin-right:8px !important;

  background:#14839a !important;

  border-color:#14839a !important;

  color:#fff !important;
}


.client-view-dashboard-btn:hover{
  background:#106e81 !important;
}


.client-dashboard-link{
  cursor:pointer !important;
}


.client-dashboard-link:hover{
  color:#14839a !important;
  text-decoration:underline;
}



/* =========================================================
   CLIENT DASHBOARD
   ========================================================= */

.cd-dashboard{
  display:flex;
  flex-direction:column;
  gap:16px;
}


.cd-header{
  background:#fff;

  border:1px solid #dce5ea;
  border-radius:10px;

  padding:18px 20px;

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

  gap:20px;
}


.cd-header h2{
  margin:0;

  font-size:24px;
}


.cd-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  gap:14px;

  margin-top:8px;

  font-size:12px;

  color:#677986;
}


/* metrics */

.cd-metrics{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(130px,1fr));

  gap:14px;
}


.cd-metric{
  appearance:none;

  background:#fff;

  border:1px solid #dce5ea;
  border-radius:10px;

  padding:18px;

  text-align:left;

  cursor:pointer;
}


.cd-metric:hover{
  box-shadow:
    0 6px 17px
    rgba(20,40,55,.10);
}


.cd-metric span{
  display:block;

  font-size:11px;

  font-weight:800;

  text-transform:uppercase;

  color:#6d7e89;
}


.cd-metric strong{
  display:block;

  margin-top:8px;

  font-size:34px;

  color:#102535;
}


/* chart panels */

.cd-chart-grid{
  display:grid;

  grid-template-columns:
    minmax(320px,.8fr)
    minmax(450px,1.4fr);

  gap:14px;
}


.cd-panel{
  background:#fff;

  border:1px solid #dce5ea;

  border-radius:10px;

  overflow:hidden;
}


.cd-panel-head{
  padding:15px 18px;

  border-bottom:
    1px solid #e5ebef;
}


.cd-panel-head h3{
  margin:0;

  font-size:15px;
}


.cd-panel-head span{
  display:block;

  margin-top:4px;

  font-size:11px;

  color:#738591;
}


/* donut */

.cd-donut-layout{
  min-height:260px;

  padding:20px;

  display:flex;

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

  gap:38px;
}


.cd-donut{
  width:170px;
  height:170px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;
}


.cd-donut-center{
  width:105px;
  height:105px;

  background:#fff;

  border-radius:50%;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;
}


.cd-donut-center strong{
  font-size:31px;
}


.cd-donut-center span{
  font-size:11px;

  color:#738591;
}


.cd-legend{
  min-width:155px;

  display:flex;
  flex-direction:column;

  gap:12px;
}


.cd-legend>div{
  display:grid;

  grid-template-columns:
    9px 1fr auto;

  align-items:center;

  gap:8px;

  font-size:12px;
}


.cd-dot{
  width:9px;
  height:9px;

  border-radius:50%;
}


.cd-ok{
  background:#3ca458;
}

.cd-warn{
  background:#e5a82c;
}

.cd-bad{
  background:#d94a43;
}

.cd-run{
  background:#419bd3;
}


/* trend */

.cd-trend{
  padding:20px;

  display:flex;
  flex-direction:column;

  gap:9px;
}


.cd-trend-row{
  display:grid;

  grid-template-columns:
    90px 1fr 35px;

  gap:10px;

  align-items:center;

  font-size:11px;
}


.cd-trend-track{
  height:14px;

  display:flex;

  background:#edf2f4;

  border-radius:8px;

  overflow:hidden;
}


.cd-trend-track i{
  display:block;

  height:100%;
}


.cd-trend-ok{
  background:#3ca458;
}

.cd-trend-warn{
  background:#e5a82c;
}

.cd-trend-bad{
  background:#d94a43;
}

.cd-trend-run{
  background:#419bd3;
}


.cd-empty{
  min-height:220px;

  display:flex;

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

  color:#758692;
}


/* tables */

.cd-dashboard .table-wrap{
  overflow-x:auto !important;
  overflow-y:visible !important;
}


@media(max-width:1300px){

  .cd-metrics{
    grid-template-columns:
      repeat(3,1fr);
  }

  .cd-chart-grid{
    grid-template-columns:1fr;
  }

}


@media(max-width:800px){

  .cd-metrics{
    grid-template-columns:
      repeat(2,1fr);
  }

  .cd-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .cd-donut-layout{
    flex-direction:column;
  }

}



/* =========================================================
   CLEAN CLIENT DASHBOARD
   ========================================================= */


/* Never show universal monitoring filter inside client view */

.content[data-client-dashboard="1"]
#globalFilterBar{
  display:none !important;
}


/* Client dashboard should scroll normally */

.content[data-client-dashboard="1"]{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-top:18px !important;
}


/* ---------------------------------------------------------
   Client Overview
   --------------------------------------------------------- */

.cd-overview{

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fbfc
    );

  border:
    1px solid #dce5ea;

  border-radius:12px;

  padding:20px;

  display:flex;

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

  gap:20px;

  box-shadow:
    0 2px 8px
    rgba(20,40,55,.06);
}


.cd-company-name{

  font-size:23px;

  font-weight:800;

  color:#102535;
}


.cd-company-details{

  margin-top:8px;

  display:flex;
  flex-wrap:wrap;

  align-items:center;

  gap:14px;

  color:#657783;

  font-size:12px;
}


.cd-overview-actions{

  display:flex;

  align-items:flex-end;

  gap:10px;
}


.cd-range-control{

  display:flex;

  flex-direction:column;

  gap:5px;
}


.cd-range-control label{

  font-size:10px;

  font-weight:800;

  text-transform:uppercase;

  color:#697b87;

  letter-spacing:.04em;
}


.cd-range-control select{

  width:165px !important;

  min-height:40px !important;

  height:40px !important;
}


/* Avoid old sticky table offset inside client dashboard */

.content[data-client-dashboard="1"]
.table-wrap thead th{

  position:static !important;

  top:auto !important;
}


.content[data-client-dashboard="1"]
.cd-panel{

  scroll-margin-top:15px;
}


@media(max-width:900px){

  .cd-overview{

    flex-direction:column;

    align-items:flex-start;
  }

}



/* =========================================================
   FIXED PAGE SCOPE
   ========================================================= */

.gf-fixed-scope select:disabled{
    opacity:1 !important;

    color:#1d3442 !important;

    background:#f4f7f8 !important;

    cursor:default !important;

    -webkit-text-fill-color:#1d3442 !important;
}



/* =========================================================
   CLIENT DASHBOARD UI POLISH
   ========================================================= */


/* ---------------------------------------------------------
   Sticky client summary
   --------------------------------------------------------- */

.cd-sticky-summary{

  position:sticky !important;

  top:0 !important;

  z-index:450 !important;

  background:#f4f7f9 !important;

  padding:
    0 0 14px 0;

  margin:
    0 0 0 0;

  box-shadow:
    0 7px 12px
    rgba(20,40,55,.05);
}


/*
 * Remove bottom gap between summary components
 * while they act as one sticky block.
 */

.cd-sticky-summary
.cd-overview{

  margin-bottom:14px !important;
}


.cd-sticky-summary
.cd-metrics{

  margin-bottom:0 !important;
}


/* ---------------------------------------------------------
   Collapsible section headers
   --------------------------------------------------------- */

.cd-dropdown-head{

  cursor:pointer;

  user-select:none;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:15px;
}


.cd-dropdown-head:hover{

  background:#f8fafb;
}


.cd-section-arrow{

  width:36px;

  height:36px;

  flex:0 0 36px;

  border:
    1px solid #d6e0e5;

  border-radius:8px;

  background:#fff;

  color:#18303e;

  font-size:17px;

  line-height:1;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:center;
}


.cd-section-arrow:hover{

  background:#edf4f6;
}


.cd-section-collapsed
.cd-panel-head{

  border-bottom:0 !important;
}


.cd-collapsible-body{

  width:100%;
}


/* ---------------------------------------------------------
   Sticky summary should not be covered when jumping
   to a section by clicking metric counts.
   --------------------------------------------------------- */

#cdDevices,
#cdProtected,
#cdJobs,
#cdServers{

  scroll-margin-top:
    245px !important;
}


/* ---------------------------------------------------------
   Keep section table headings visible while rows scroll
   naturally under the sticky summary.
   --------------------------------------------------------- */

.content[data-client-dashboard="1"]
.cd-panel
thead th{

  position:sticky !important;

  top:0 !important;

  z-index:20 !important;

  background:#f4f8fa !important;
}


/* ---------------------------------------------------------
   Consistent server-type appearance
   --------------------------------------------------------- */

.cd-dashboard td,
.content table td{

  text-transform:none;
}


/* ---------------------------------------------------------
   Responsive sticky block
   --------------------------------------------------------- */

@media(max-width:1000px){

  .cd-sticky-summary{

    position:relative !important;

    top:auto !important;

  }


  #cdDevices,
  #cdProtected,
  #cdJobs,
  #cdServers{

    scroll-margin-top:
      20px !important;

  }

}



/* =========================================================
   FINAL STICKY LAYOUT OVERRIDE
   ========================================================= */


/* ---------------------------------------------------------
   Main application structure
   Sidebar fixed.
   Topbar fixed inside main area.
   Only content area scrolls.
   --------------------------------------------------------- */

html,
body{
    height:100% !important;
    overflow:hidden !important;
}


.sidebar{
    position:fixed !important;

    top:0 !important;
    left:0 !important;
    bottom:0 !important;

    height:100vh !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    z-index:1000 !important;
}


.main{
    margin-left:252px !important;

    width:calc(100% - 252px) !important;

    height:100vh !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
}


.topbar{
    position:relative !important;

    top:auto !important;

    flex:0 0 auto !important;

    z-index:900 !important;

    background:#fff !important;
}


.content{
    flex:1 1 auto !important;

    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    position:relative !important;

    padding-bottom:30px !important;
}


/* =========================================================
   UNIVERSAL FILTER BAR
   Home / All Jobs / Client Backups / Errors / Warnings
   ========================================================= */

#globalFilterBar,
.global-filter-bar{
    position:sticky !important;

    top:0 !important;

    z-index:700 !important;

    background:#fff !important;

    margin-top:0 !important;

    box-shadow:
      0 5px 12px
      rgba(20,40,55,.08) !important;
}


/*
 * Prevent tables/charts from appearing visually above
 * the sticky filter.
 */

#globalFilterBar::before,
.global-filter-bar::before{
    content:"";

    position:absolute;

    left:-20px;
    right:-20px;
    top:-20px;

    height:20px;

    background:#f4f7f9;

    pointer-events:none;
}


/* =========================================================
   CLIENT DETAILS PAGE
   ========================================================= */


/*
 * Client Details does NOT use globalFilterBar.
 */

.content[data-client-dashboard="1"]
#globalFilterBar{
    display:none !important;
}


/*
 * The entire client summary:
 *
 * VONIT Solutions
 * period
 * Devices / Protected Items / Schedules / Jobs / Accounts
 *
 * remains sticky as one block.
 */

.content[data-client-dashboard="1"]
.cd-sticky-summary{
    position:sticky !important;

    top:0 !important;

    z-index:800 !important;

    background:#f4f7f9 !important;

    padding-top:0 !important;
    padding-bottom:14px !important;

    margin:0 !important;

    box-shadow:
      0 6px 13px
      rgba(20,40,55,.09) !important;
}


/*
 * Nothing should render visually through/above
 * the sticky client header.
 */

.content[data-client-dashboard="1"]
.cd-sticky-summary::before{
    content:"";

    position:absolute;

    top:-30px;
    left:-25px;
    right:-25px;

    height:30px;

    background:#f4f7f9;

    z-index:-1;
}


/*
 * Client overview + metric cards act as one unit.
 */

.content[data-client-dashboard="1"]
.cd-sticky-summary
.cd-overview{
    position:relative !important;

    z-index:2 !important;

    margin:0 0 14px 0 !important;
}


.content[data-client-dashboard="1"]
.cd-sticky-summary
.cd-metrics{
    position:relative !important;

    z-index:2 !important;

    margin:0 !important;
}


/*
 * Charts and lower sections must be below sticky summary.
 */

.content[data-client-dashboard="1"]
.cd-chart-grid,
.content[data-client-dashboard="1"]
.cd-panel{
    position:relative !important;

    z-index:1 !important;
}


/*
 * Do not allow any old sticky rules on chart/table cards.
 */

.content[data-client-dashboard="1"]
.cd-chart-grid,
.content[data-client-dashboard="1"]
.cd-chart-grid .cd-panel,
.content[data-client-dashboard="1"]
.cd-panel-head{
    top:auto !important;
}


/* =========================================================
   CLIENT TABLE SECTION HEADERS
   ========================================================= */

.content[data-client-dashboard="1"]
.cd-dropdown-head{
    position:relative !important;

    top:auto !important;

    z-index:5 !important;

    background:#fff !important;
}


/*
 * Table headings can stick inside the visible table area,
 * but they must never overlap client summary.
 */

.content[data-client-dashboard="1"]
.cd-collapsible-body
thead th{
    position:sticky !important;

    top:0 !important;

    z-index:15 !important;

    background:#f4f8fa !important;
}


/* =========================================================
   REMOVE OLD GENERIC STICKY BEHAVIOR FROM CLIENT CARDS
   ========================================================= */

.content[data-client-dashboard="1"]
.card,
.content[data-client-dashboard="1"]
.card-head,
.content[data-client-dashboard="1"]
.filters,
.content[data-client-dashboard="1"]
.sticky-category{
    position:relative !important;

    top:auto !important;
}


/* =========================================================
   SECTION JUMP OFFSET
   ========================================================= */

.content[data-client-dashboard="1"]
#cdServers,
.content[data-client-dashboard="1"]
#cdDevices,
.content[data-client-dashboard="1"]
#cdProtected,
.content[data-client-dashboard="1"]
#cdJobs{
    scroll-margin-top:245px !important;
}


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

@media(max-width:900px){

    .main{
        margin-left:0 !important;

        width:100% !important;
    }


    .content[data-client-dashboard="1"]
    .cd-sticky-summary{
        position:relative !important;
    }

}



/* =========================================================
   HOME STATUS WITH MISSED
   ========================================================= */

.home-status-head{
  display:flex;

  align-items:center;

  gap:12px;
}


.home-card-title{
  font-size:16px;

  font-weight:800;

  color:#102535;
}


.home-status-body{
  display:flex;

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

  gap:24px;

  padding:20px 8px 8px;
}


.home-status-donut{
  width:135px;
  height:135px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;
}


.home-status-center{
  width:86px;
  height:86px;

  border-radius:50%;

  background:#fff;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;
}


.home-status-center strong{
  font-size:26px;
}


.home-status-center span{
  font-size:10px;

  color:#71828e;
}


.home-status-legend{
  min-width:115px;

  display:flex;
  flex-direction:column;

  gap:7px;
}


.home-status-legend > div{
  display:grid;

  grid-template-columns:
    8px 1fr auto;

  gap:7px;

  align-items:center;

  font-size:10px;
}


.home-status-legend i{
  width:8px;
  height:8px;

  border-radius:50%;
}


.hs-success{
  background:#3ca458;
}


.hs-warning{
  background:#e7aa2c;
}


.hs-missed{
  background:#9866cc;
}


.hs-error{
  background:#d94a43;
}


.hs-running{
  background:#419bd3;
}


/* =========================================================
   REPORT DURATION
   ========================================================= */

.report-period-field{
  display:flex;

  flex-direction:column;

  gap:7px;

  min-width:180px;
}


.report-period-field label{
  font-size:11px;

  font-weight:800;

  color:#617482;
}


.report-period-field select{
  height:48px;

  padding:0 12px;

  border:
    1px solid #d4e0e6;

  border-radius:8px;

  background:#fff;
}



/* Comet status 7004 - Missed */

.missed-dot{
    background:#8d63c7 !important;
}



/* =========================================================
   HOME - SCHEDULE SUMMARY
   ========================================================= */

.home-schedule-summary-card{
    cursor:default !important;
}


.home-schedule-summary{
    display:grid;

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

    gap:12px;

    margin-top:18px;
}


.home-schedule-stat{
    min-height:78px;

    padding:14px 16px;

    border:
      1px solid #dbe5ea;

    border-radius:10px;

    background:#f8fafb;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:5px;
}


.home-schedule-stat span{
    font-size:11px;

    font-weight:700;

    color:#71828e;
}


.home-schedule-stat strong{
    font-size:27px;

    line-height:1;

    color:#18303e;
}


.home-schedule-stat.missed{
    background:#fff9f0;

    border-color:#ead7b9;
}


.home-schedule-stat.missed strong{
    color:#b87318;
}


@media(max-width:700px){

    .home-schedule-summary{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   HOME BACKUP STATUS CARD
   Cleaner period selector + balanced layout
   ========================================================= */

.home-status-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    width:100%;
}

.home-range-select{
    width:auto;
    min-width:118px;
    max-width:145px;

    height:34px;

    padding:5px 30px 5px 10px;

    border:1px solid #d7e1e7;
    border-radius:8px;

    background:#ffffff;

    font-size:12px;
    font-weight:600;

    color:#294352;

    cursor:pointer;

    flex:0 0 auto;
}

.home-range-select:focus{
    outline:none;
    border-color:#1686a1;
    box-shadow:0 0 0 2px rgba(22,134,161,.12);
}


/* keep status card content visually balanced */

.home-card .donut-wrap{
    margin-top:18px;
}

.home-card .legend-grid{
    margin-top:14px;
}


/* Better legend spacing for five statuses */

.legend-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px 14px;
}

.legend-item{
    min-width:0;
}


/* Responsive selector */

@media(max-width:900px){

    .home-status-title-row{
        flex-direction:column;
        align-items:stretch;
    }

    .home-range-select{
        width:100%;
        max-width:none;
    }

}



/* =========================================================
   HOME BACKUP STATUS - FINAL HEADER LAYOUT
   ========================================================= */

.home-status-card{
    overflow:visible !important;
}

.home-status-card .home-card-head{
    display:flex !important;
    align-items:flex-start !important;
    width:100% !important;
}

.home-status-card .home-card-head > div:last-child{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
}

.home-status-card .home-status-title-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    justify-content:space-between !important;

    width:100% !important;

    gap:10px !important;
}

.home-status-card .home-status-title-row > div:first-child{
    flex:1 1 auto !important;
    min-width:0 !important;
}

.home-status-card .home-range-select{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;

    flex:0 0 auto !important;

    width:108px !important;
    min-width:108px !important;
    max-width:108px !important;

    height:32px !important;

    margin:0 !important;

    padding:0 24px 0 8px !important;

    border:1px solid #cbd8df !important;
    border-radius:7px !important;

    background:#fff !important;

    color:#243b48 !important;

    font-size:11px !important;
    font-weight:600 !important;

    z-index:20 !important;
}


/* keep donut/legend balanced below selector */

.home-status-card .donut-wrap{
    margin-top:16px !important;
}

.home-status-card .legend-grid{
    margin-top:12px !important;
}



/* =========================================================
   HOME BACKUP STATUS - FINAL HEADER LAYOUT
   ========================================================= */

.home-status-card{
    overflow:visible !important;
}

.home-status-card .home-card-head{
    display:flex !important;
    align-items:flex-start !important;
    width:100% !important;
}

.home-status-card .home-card-head > div:last-child{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
}

.home-status-card .home-status-title-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    justify-content:space-between !important;

    width:100% !important;

    gap:10px !important;
}

.home-status-card .home-status-title-row > div:first-child{
    flex:1 1 auto !important;
    min-width:0 !important;
}

.home-status-card .home-range-select{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;

    flex:0 0 auto !important;

    width:108px !important;
    min-width:108px !important;
    max-width:108px !important;

    height:32px !important;

    margin:0 !important;

    padding:0 24px 0 8px !important;

    border:1px solid #cbd8df !important;
    border-radius:7px !important;

    background:#fff !important;

    color:#243b48 !important;

    font-size:11px !important;
    font-weight:600 !important;

    z-index:20 !important;
}


/* keep donut/legend balanced below selector */

.home-status-card .donut-wrap{
    margin-top:16px !important;
}

.home-status-card .legend-grid{
    margin-top:12px !important;
}


/* =========================================================
   HOME PERIOD BUTTON MENU
   ========================================================= */

.home-period-option{
    display:block !important;

    width:100% !important;
    height:32px !important;

    padding:0 10px !important;
    margin:0 !important;

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

    background:#ffffff !important;
    color:#29414f !important;

    text-align:left !important;

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

    cursor:pointer !important;
}

.home-period-option:hover{
    background:#eef6f8 !important;
    color:#087f98 !important;
}


/* HOME STATUS LEGEND - clickable rows */

.home-status-link{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:12px !important;

    padding:3px 2px !important;
    margin:0 !important;

    border:0 !important;
    background:transparent !important;

    color:#243946 !important;

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

    cursor:pointer !important;
}

.home-status-link:hover{
    background:#f5f9fb !important;
    border-radius:5px !important;
}

.home-status-link strong{
    flex:0 0 auto !important;
    min-width:22px !important;
    text-align:right !important;
}

.home-status-label{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;

    min-width:0 !important;
}



/* ==========================================================
   INVENTORY PAGES
   Protected Items / Devices
   ========================================================== */

.inventory-page{
  width:100%;
  min-width:0;
}

.inventory-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:16px;
}

.inventory-hero-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.inventory-page-icon{
  width:42px;
  height:42px;
  min-width:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  background:#e9f6f7;
  color:#0d8297;

  font-size:20px;
  font-weight:800;
}

.inventory-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.inventory-title-row h2{
  margin:0;

  color:#102333;

  font-size:22px;
  line-height:1.2;
}

.inventory-total{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:31px;
  height:26px;

  padding:0 9px;

  border-radius:999px;

  background:#e8f6f5;
  color:#08798c;

  font-size:12px;
  font-weight:800;
}

.inventory-subtitle{
  margin-top:4px;

  color:#71818e;
  font-size:12px;
}


.inventory-toolbar{
  display:grid;

  grid-template-columns:
    minmax(170px,.7fr)
    minmax(190px,.8fr)
    minmax(300px,1.7fr)
    auto;

  align-items:end;
  gap:12px;

  background:#fff;

  border:1px solid #dfe7eb;
  border-radius:12px;

  padding:15px;

  box-shadow:
    0 2px 8px rgba(15,35,50,.045);
}


.inventory-filter{
  min-width:0;
}

.inventory-filter label{
  display:block;

  margin-bottom:6px;

  color:#607482;

  font-size:10px;
  font-weight:800;

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

.inventory-filter select,
.inventory-filter input{
  width:100%;
  height:40px;

  border:1px solid #ccd9df;
  border-radius:8px;

  background:#fff;
  color:#18303f;

  padding:0 11px;

  outline:none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.inventory-filter select:focus,
.inventory-filter input:focus{
  border-color:#1595a8;

  box-shadow:
    0 0 0 3px rgba(21,149,168,.11);
}

.inventory-search input{
  min-width:0;
}


.inventory-result-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  min-height:46px;

  padding:4px 3px 0;

  color:#687b88;

  font-size:12px;
}

.inventory-result-line strong{
  color:#0d8297;
  font-weight:800;
}

.inventory-refresh{
  appearance:none;

  border:0;
  background:transparent;

  color:#0d8297;

  cursor:pointer;

  font:inherit;
  font-weight:700;

  padding:7px 9px;

  border-radius:7px;

  transition:
    color .15s ease,
    background .15s ease;
}

.inventory-refresh:hover{
  color:#086d7e;
  background:#eaf6f7;
}


.inventory-table-card{
  overflow:hidden;

  background:#fff;

  border:1px solid #dfe7eb;
  border-radius:12px;

  box-shadow:
    0 3px 12px rgba(15,35,50,.05);
}

.inventory-table-card .table-wrap{
  width:100%;
  overflow:auto;
}

.inventory-table{
  width:100%;
  border-collapse:collapse;
}

.inventory-table thead th{
  position:sticky;
  top:0;
  z-index:2;

  background:#f6f9fa;

  color:#58707e;

  border-bottom:1px solid #d9e3e7;

  padding:12px 14px;

  text-align:left;

  font-size:10px;
  font-weight:800;

  letter-spacing:.05em;
  text-transform:uppercase;

  white-space:nowrap;
}

.inventory-table tbody td{
  padding:13px 14px;

  border-bottom:1px solid #edf1f3;

  color:#2b3f4c;

  vertical-align:middle;

  font-size:12px;
}

.inventory-table tbody tr:last-child td{
  border-bottom:0;
}

.inventory-table tbody tr{
  transition:
    background .13s ease;
}

.inventory-table tbody tr:hover{
  background:#f5fbfc;
}


.inventory-primary{
  color:#17303f;

  font-weight:800;

  line-height:1.35;
}

.inventory-secondary{
  margin-top:3px;

  color:#82919b;

  font-size:10px;
}

.inventory-name{
  display:inline-block;

  color:#314957;

  font-weight:600;
}

.inventory-accent{
  transition:
    color .14s ease,
    background .14s ease;
}

.inventory-row:hover .inventory-accent,
.inventory-accent:hover{
  color:#0d8297;
}

.inventory-engine{
  display:inline-flex;

  padding:4px 8px;

  border-radius:999px;

  background:#f1f5f7;
  color:#617582;

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

.inventory-schedules{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.inventory-item-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:28px;
  height:24px;

  padding:0 8px;

  border-radius:999px;

  background:#e8f6f5;
  color:#08798c;

  font-weight:800;
}

.inventory-muted{
  color:#8b9aa4;
  font-size:11px;
}

.inventory-action{
  min-width:72px;
}


.inventory-empty{
  min-height:240px;

  display:flex;
  flex-direction:column;

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

  gap:7px;

  color:#748691;
}

.inventory-empty-icon{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#edf7f7;
  color:#0d8297;

  font-size:20px;
}

.inventory-empty strong{
  color:#334b59;
  font-size:14px;
}

.inventory-empty span{
  font-size:11px;
}


/* ==========================================================
   CONSISTENT DASHBOARD CLICKABLE HOVER
   Do not turn clickable values black.
   ========================================================== */

.home-count-button{
  transition:
    color .15s ease,
    transform .15s ease,
    text-shadow .15s ease;
}

.home-count-button:hover{
  color:#0d8297 !important;

  transform:translateY(-2px);

  text-shadow:
    0 5px 14px rgba(13,130,151,.12);
}

.home-click:hover .home-card-title{
  color:#0d8297;
}

.home-click:hover .home-icon{
  background:#e7f6f6;
  color:#0d8297;
}


/*
 * Existing common clickable/name elements.
 * Keep the effect restrained: teal text instead of black.
 */

.name,
.link-btn,
.detail-action,
.client-dashboard-link,
.client-view-dashboard-btn{
  transition:
    color .15s ease,
    background .15s ease;
}

.name:hover,
.link-btn:hover,
.detail-action:hover,
.client-dashboard-link:hover{
  color:#0d8297 !important;
}


/* Sidebar refinement */

.nav{
  transition:
    background .14s ease,
    color .14s ease,
    transform .14s ease;
}

.nav:hover{
  color:#fff;
}

.nav-title{
  margin-top:19px;
}


/* responsive inventory pages */

@media(max-width:1100px){

  .inventory-toolbar{
    grid-template-columns:
      1fr 1fr;
  }

  .inventory-search{
    grid-column:1 / -1;
  }

}

@media(max-width:700px){

  .inventory-toolbar{
    grid-template-columns:1fr;
  }

  .inventory-search{
    grid-column:auto;
  }

  .inventory-result-line{
    align-items:flex-start;
    flex-direction:column;
    padding:10px 2px;
  }

}



/* ==========================================================
   INVENTORY PAGE VIEWPORT MODEL
   Protected Items / Devices

   Header / filters / result line remain in place.
   Only the inventory table body area scrolls.
   ========================================================== */

.inventory-page{
  display:flex;
  flex-direction:column;

  width:100%;
  min-width:0;

  height:calc(100dvh - 130px);
  min-height:420px;

  overflow:hidden;
}


/*
 * Inventory page heading remains visible.
 */
.inventory-page > .inventory-hero{
  flex:0 0 auto;
}


/*
 * Inventory-specific search/filter controls remain visible.
 */
.inventory-page > .inventory-toolbar{
  flex:0 0 auto;

  position:relative;
  z-index:4;
}


/*
 * Showing X of X / Refresh remains visible.
 */
.inventory-page > .inventory-result-line{
  flex:0 0 auto;

  position:relative;
  z-index:3;

  background:#f3f6f8;
}


/*
 * Remaining viewport is assigned to the table.
 */
.inventory-page > .inventory-table-card{
  flex:1 1 auto;

  min-height:0;

  display:flex;
  flex-direction:column;

  overflow:hidden;
}


/*
 * ONLY this area scrolls.
 */
.inventory-page > .inventory-table-card > .table-wrap{
  flex:1 1 auto;

  min-height:0;

  overflow:auto;
  overscroll-behavior:contain;
}


/*
 * Column headings remain visible while rows scroll.
 */
.inventory-page .inventory-table thead th{
  position:sticky;
  top:0;

  z-index:5;

  background:#f6f9fa;
}


/* ==========================================================
   JOB PAGE NATIVE FILTER
   All Jobs / Internal / Client / Errors / Warnings
   ========================================================== */

#content .card > .filters{
  display:flex;
  visibility:visible;
  opacity:1;
}


/*
 * Old universal-filter code may still leave this class behind.
 * On a currently rendered job card it must not hide Search.
 */
#content .card > .filters.legacy-page-filter{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}


/*
 * Search/filter area stays above the scrolling job table.
 */
#content.job-scroll-page .card > .filters{
  flex:0 0 auto;
  position:relative;
  z-index:5;
}


@media(max-width:1100px){

  .inventory-page{
    height:auto;
    min-height:0;
    overflow:visible;
  }

  .inventory-page > .inventory-table-card{
    max-height:calc(100dvh - 310px);
  }

}


@media(max-width:700px){

  .inventory-page > .inventory-table-card{
    max-height:calc(100dvh - 360px);
  }

}



/* ==========================================================
   FINAL TABLE SCROLL + STICKY HEADER MODEL
   2026-09-14

   - Protected Items / Devices:
       title + filters stay above table
       table rows scroll
   - All table headers remain sticky
   ========================================================== */


/* ----------------------------------------------------------
   1. INVENTORY PAGE
   Do not clip the complete page.
   ---------------------------------------------------------- */

.inventory-page{
    width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;

    display:block !important;

    overflow:visible !important;
}


/* ----------------------------------------------------------
   2. INVENTORY TITLE
   Reduce unnecessary vertical gap before filter controls.
   ---------------------------------------------------------- */

.inventory-page .inventory-hero{
    margin-bottom:10px !important;

    min-height:56px !important;
}


/* ----------------------------------------------------------
   3. FIRST RED BOX
   Client / Comet Server / Search

   Cleaner compact position directly below title.
   ---------------------------------------------------------- */

.inventory-page .inventory-toolbar{
    position:relative !important;

    width:100% !important;

    margin:0 0 10px 0 !important;

    padding:11px 13px !important;

    gap:10px !important;

    border-radius:10px !important;

    z-index:20 !important;
}


.inventory-page .inventory-filter label{
    margin-bottom:4px !important;
}


.inventory-page .inventory-filter select,
.inventory-page .inventory-filter input{
    height:38px !important;
}


/* Reset button alignment */
.inventory-page .inventory-toolbar > .btn{
    height:38px !important;

    margin:0 !important;

    align-self:end !important;
}


/* ----------------------------------------------------------
   4. "SHOWING X OF X"
   Keep compact before table.
   ---------------------------------------------------------- */

.inventory-page .inventory-result-line{
    min-height:36px !important;

    padding:0 4px !important;

    margin:0 !important;

    position:relative !important;

    background:transparent !important;

    z-index:15 !important;
}


/* ----------------------------------------------------------
   5. INVENTORY TABLE CARD
   Table itself gets remaining visible viewport.
   ---------------------------------------------------------- */

.inventory-page .inventory-table-card{
    display:block !important;

    width:100% !important;

    min-height:0 !important;

    overflow:hidden !important;
}


/*
 * THIS is the scrolling area.
 *
 * Around 350px is used by:
 * top application bar
 * inventory heading
 * filter box
 * result line
 */
.inventory-page
.inventory-table-card
.table-wrap{
    width:100% !important;

    max-height:calc(100vh - 355px) !important;
    min-height:260px !important;

    overflow-y:auto !important;
    overflow-x:auto !important;

    overscroll-behavior:contain !important;

    scrollbar-gutter:stable !important;
}


/* ----------------------------------------------------------
   6. SECOND RED BOX
   Inventory column headers stay fixed.
   ---------------------------------------------------------- */

.inventory-page
.inventory-table
thead th{
    position:sticky !important;

    top:0 !important;

    z-index:30 !important;

    background:#f6f9fa !important;

    box-shadow:
        inset 0 -1px 0 #d9e3e7 !important;
}


/* ----------------------------------------------------------
   7. ALL OTHER DASHBOARD TABLES

   When a table is inside .table-wrap,
   keep its column header visible while rows scroll.
   ---------------------------------------------------------- */

#content
.table-wrap{
    position:relative;
}


#content
.table-wrap
table
thead
th{
    position:sticky !important;

    top:0 !important;

    z-index:25 !important;

    background:#f6f9fa !important;

    box-shadow:
        inset 0 -1px 0 #d9e3e7 !important;
}


/* ----------------------------------------------------------
   8. JOB TABLES
   All Jobs / Internal / Client / Errors / Warnings
   ---------------------------------------------------------- */

#content.job-scroll-page
#jobsResult
.table-wrap{
    overflow-y:auto !important;
    overflow-x:auto !important;

    max-height:calc(100vh - 300px) !important;

    min-height:260px !important;

    scrollbar-gutter:stable !important;
}


#content.job-scroll-page
#jobsResult
.table-wrap
thead th{
    position:sticky !important;

    top:0 !important;

    z-index:30 !important;

    background:#f6f9fa !important;
}


/* ----------------------------------------------------------
   9. GENERIC LONG TABLES
   Give normal tables usable scrolling when needed.
   ---------------------------------------------------------- */

#content
.card
> .table-wrap{
    overflow:auto;

    max-height:calc(100vh - 260px);
}


/* ----------------------------------------------------------
   10. RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:1100px){

    .inventory-page
    .inventory-table-card
    .table-wrap{
        max-height:calc(100vh - 410px) !important;
    }

}


@media(max-width:700px){

    .inventory-page .inventory-toolbar{
        grid-template-columns:1fr !important;
    }


    .inventory-page
    .inventory-table-card
    .table-wrap{
        max-height:calc(100vh - 500px) !important;
        min-height:220px !important;
    }

}



/* ==========================================================
   SERVERBASKET STATIC BRANDING
   ========================================================== */

/*
 * Sidebar itself remains fixed.
 */
.sidebar{
    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
}


/*
 * Branding always stays visible at the top.
 */
.sidebar .brand{
    flex:0 0 auto !important;

    position:sticky !important;
    top:0 !important;

    z-index:100 !important;

    background:
      linear-gradient(
        180deg,
        var(--sidebar),
        var(--sidebar2)
      ) !important;

    border-bottom:
      1px solid rgba(255,255,255,.08) !important;
}


/*
 * Only navigation/menu section scrolls.
 */
.sidebar nav{
    flex:1 1 auto !important;

    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    scrollbar-gutter:stable !important;
}


/*
 * Brand text.
 */
.sidebar .brand-name{
    font-size:18px !important;
    font-weight:800 !important;

    letter-spacing:.4px !important;

    text-transform:none !important;

    white-space:nowrap !important;
}


.sidebar .brand-sub{
    margin-top:6px !important;

    max-width:190px !important;

    font-size:11px !important;
    line-height:1.35 !important;

    color:#aebfca !important;

    white-space:normal !important;
}


/* ==========================================================
   LOGIN PAGE BRANDING
   ========================================================== */

.login-card .brand-title{
    font-size:26px !important;
    font-weight:800 !important;

    letter-spacing:.2px !important;

    text-transform:none !important;
}


.login-card .brand-sub{
    margin-top:7px !important;

    font-size:13px !important;
    line-height:1.4 !important;

    text-align:center !important;

    max-width:320px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}



/* ==========================================================
   SERVERBASKET OPERATIONS THEME V2
   ========================================================== */

:root{
    --sb-blue:#0878c9;
    --sb-blue-dark:#074f85;

    --sb-green:#08a85d;

    --sb-sidebar:#073a62;
    --sb-sidebar-dark:#062d4d;

    --sb-page:#f2f8fc;

    --sb-border:#d8e5ed;

    --sb-text:#142d40;
    --sb-muted:#6c8190;

    --sb-card:#ffffff;
}


/* ----------------------------------------------------------
   PAGE BACKGROUND
   ---------------------------------------------------------- */

html,
body{
    background:var(--sb-page) !important;
}


.main{
    background:
        linear-gradient(
            180deg,
            #f7fbfe 0,
            #eff7fb 100%
        ) !important;
}


/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */

.sidebar{
    background:
        linear-gradient(
            180deg,
            var(--sb-sidebar) 0%,
            var(--sb-sidebar-dark) 100%
        ) !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    box-shadow:
        5px 0 18px
        rgba(15,51,76,.10) !important;
}


/* ----------------------------------------------------------
   STATIC / STICKY BRAND
   ---------------------------------------------------------- */

.sidebar .brand{
    position:sticky !important;
    top:0 !important;

    z-index:100 !important;

    flex:0 0 auto !important;

    padding:
        18px 18px
        16px !important;

    background:
        linear-gradient(
            135deg,
            #075484 0%,
            #06426e 100%
        ) !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.10) !important;
}


.sidebar .brand-name{
    font-size:15px !important;

    line-height:1.1 !important;

    font-weight:800 !important;

    letter-spacing:0 !important;

    text-transform:none !important;

    color:#ffffff !important;
}


.sidebar .brand-sub{
    max-width:175px !important;

    margin-top:5px !important;

    font-size:9.5px !important;
    line-height:1.35 !important;

    font-weight:500 !important;

    color:#c7ddea !important;

    white-space:normal !important;
}


/*
 * Only navigation scrolls.
 */
.sidebar nav{
    flex:1 1 auto !important;

    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    scrollbar-gutter:stable;
}


/* ----------------------------------------------------------
   SECTION HEADINGS = DROPDOWNS
   ---------------------------------------------------------- */

.sidebar .nav-title{
    position:relative;

    margin:
        14px 10px
        5px !important;

    padding:
        8px 25px
        8px 10px !important;

    border-radius:7px;

    color:#9db9c9 !important;

    font-size:9px !important;

    font-weight:800 !important;

    letter-spacing:1.3px !important;

    cursor:pointer;

    transition:
        background .15s ease,
        color .15s ease;
}


.sidebar .nav-title:hover{
    background:
        rgba(255,255,255,.06);

    color:#ffffff !important;
}


/*
 * dropdown arrow
 */
.sidebar .nav-title::after{
    content:"⌄";

    position:absolute;

    right:10px;
    top:50%;

    transform:
        translateY(-50%);

    font-size:12px;
    color:#a8c4d3;

    transition:
        transform .15s ease;
}


.sidebar .nav-title.nav-group-collapsed::after{
    transform:
        translateY(-50%)
        rotate(-90deg);
}


/*
 * Hidden items when group collapsed.
 */
.sidebar .nav.nav-group-hidden{
    display:none !important;
}


/* ----------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------- */

.sidebar .nav{
    position:relative;

    margin:
        2px 9px !important;

    width:
        calc(100% - 18px) !important;

    min-height:38px;

    padding:
        8px 10px !important;

    border-radius:8px !important;

    color:#d6e5ed !important;

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


.sidebar .nav:hover{
    background:
        rgba(255,255,255,.08) !important;

    color:#ffffff !important;
}


.sidebar .nav.active{
    background:
        linear-gradient(
            90deg,
            rgba(8,120,201,.92),
            rgba(0,159,168,.75)
        ) !important;

    color:#ffffff !important;

    box-shadow:
        inset 3px 0 0
        var(--sb-green) !important;
}


/* ----------------------------------------------------------
   TOP HEADER
   ---------------------------------------------------------- */

.topbar{
    position:sticky !important;

    top:0 !important;

    z-index:200 !important;

    background:
        rgba(255,255,255,.97) !important;

    border-bottom:
        1px solid
        var(--sb-border) !important;

    box-shadow:
        0 3px 14px
        rgba(31,76,106,.05) !important;

    backdrop-filter:
        blur(8px);
}


.page-title{
    color:
        var(--sb-text) !important;

    font-weight:800 !important;
}


.page-sub{
    color:
        var(--sb-muted) !important;
}


/* ----------------------------------------------------------
   API STATUS
   ---------------------------------------------------------- */

.api-state.api-ok{
    background:
        #e8faf1 !important;

    color:
        #087744 !important;

    border:
        1px solid
        #bdebd2 !important;

    border-radius:
        999px !important;
}


/* ----------------------------------------------------------
   CONTENT
   ---------------------------------------------------------- */

.content{
    background:
        transparent !important;
}


/* ----------------------------------------------------------
   CARDS / TOOLBARS / FILTERS
   ---------------------------------------------------------- */

.card,
.inventory-toolbar,
.inventory-table-card,
.global-filter-bar,
.report-filter-card,
.cd-card{
    background:
        var(--sb-card) !important;

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

    border-radius:
        11px !important;

    box-shadow:
        0 7px 20px
        rgba(34,79,107,.055) !important;
}


/* ----------------------------------------------------------
   INPUTS / SELECTS
   ---------------------------------------------------------- */

input,
select,
textarea{
    border-color:
        #cbdde7 !important;

    border-radius:
        8px !important;

    background:
        #ffffff !important;

    color:
        var(--sb-text) !important;
}


input:focus,
select:focus,
textarea:focus{
    outline:none !important;

    border-color:
        var(--sb-blue) !important;

    box-shadow:
        0 0 0 3px
        rgba(8,120,201,.10) !important;
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.btn-primary,
.inventory-refresh,
button.primary{
    background:
        linear-gradient(
            90deg,
            var(--sb-blue),
            #086fc0
        ) !important;

    border-color:
        var(--sb-blue) !important;

    color:
        #ffffff !important;
}


.btn-primary:hover,
button.primary:hover{
    filter:
        brightness(.96);
}


/* ----------------------------------------------------------
   TABLES
   ---------------------------------------------------------- */

.table-wrap{
    border-radius:
        9px !important;
}


table{
    background:#ffffff !important;
}


thead th{
    color:
        #486275 !important;

    background:
        #eff6fa !important;

    font-weight:
        800 !important;

    border-bottom:
        1px solid
        #cddde6 !important;
}


/*
 * Sticky headings on every scrollable dashboard table.
 */
.table-wrap thead th{
    position:
        sticky !important;

    top:
        0 !important;

    z-index:
        30 !important;

    background:
        #eff6fa !important;
}


tbody tr:hover{
    background:
        #f1f9fc !important;
}


/* ----------------------------------------------------------
   STATUS
   ---------------------------------------------------------- */

.status-success,
.badge.success{
    background:
        #e7f8ef !important;

    color:
        #087746 !important;
}


/* ----------------------------------------------------------
   SMALL SCREEN
   ---------------------------------------------------------- */

@media(max-width:900px){

    .sidebar .brand{
        padding:
            14px 12px !important;
    }

    .sidebar .brand-name{
        font-size:
            14px !important;
    }

    .sidebar .brand-sub{
        font-size:
            9px !important;
    }

}


/* ============================================================
   Comet Servers - Direct / Private Connector Management
   ============================================================ */

.sb-server-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.sb-server-stat{
  background:var(--card,#fff);
  border:1px solid var(--border,#e5e7eb);
  border-radius:12px;
  padding:16px 18px;
}

.sb-server-stat span{
  display:block;
  font-size:12px;
  opacity:.7;
  margin-bottom:7px;
}

.sb-server-stat strong{
  display:block;
  font-size:26px;
  line-height:1;
}

.sb-server-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.sb-server-filters{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
}

.sb-server-filters select{
  width:auto;
  min-width:170px;
}

.sb-server-filters input{
  width:100%;
  max-width:330px;
}

.sb-server-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.sb-danger-btn{
  border-color:#dc2626 !important;
  color:#dc2626 !important;
}

.sb-danger-btn:hover{
  background:#dc2626 !important;
  color:#fff !important;
}

.sb-api-address{
  max-width:260px;
  overflow-wrap:anywhere;
}

.sb-server-subtext{
  font-size:11px;
  opacity:.68;
  margin-top:4px;
}

.sb-connection-badge,
.sb-usage-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.sb-connection-badge.direct{
  background:rgba(37,99,235,.10);
  color:#2563eb;
}

.sb-connection-badge.private{
  background:rgba(124,58,237,.10);
  color:#7c3aed;
}

.sb-usage-badge.internal{
  background:rgba(8,145,178,.10);
  color:#0891b2;
}

.sb-usage-badge.client{
  background:rgba(5,150,105,.10);
  color:#059669;
}

.sb-connector-mini{
  margin-top:4px;
  font-size:11px;
  font-weight:700;
}

.sb-connector-mini.online{
  color:#059669;
}

.sb-connector-mini.offline{
  color:#dc2626;
}

.sb-connector-panel{
  margin-top:18px;
}

.sb-connector-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.sb-connector-heading h3{
  margin:0 0 5px 0;
}

.sb-connector-name{
  font-size:18px;
  font-weight:700;
  margin-top:20px;
}

.sb-connector-status{
  display:inline-flex;
  border-radius:999px;
  padding:6px 11px;
  font-size:12px;
  font-weight:800;
}

.sb-connector-status.online{
  background:rgba(5,150,105,.10);
  color:#059669;
}

.sb-connector-status.offline{
  background:rgba(220,38,38,.10);
  color:#dc2626;
}

.sb-connector-details{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.sb-connector-details > div{
  border:1px solid var(--border,#e5e7eb);
  border-radius:10px;
  padding:12px;
}

.sb-connector-details span{
  display:block;
  font-size:11px;
  opacity:.65;
  margin-bottom:5px;
}

.sb-connector-details strong{
  overflow-wrap:anywhere;
}

.sb-agent-download{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid var(--border,#e5e7eb);
  margin-top:18px;
  padding-top:18px;
}

.sb-agent-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

@media(max-width:1100px){

  .sb-server-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sb-connector-details{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

@media(max-width:760px){

  .sb-server-summary{
    grid-template-columns:1fr;
  }

  .sb-server-toolbar,
  .sb-server-filters,
  .sb-agent-download{
    flex-direction:column;
    align-items:stretch;
  }

  .sb-server-filters select,
  .sb-server-filters input{
    width:100%;
    max-width:none;
  }

  .sb-connector-details{
    grid-template-columns:1fr;
  }

  .sb-agent-buttons{
    justify-content:flex-start;
  }

}