/* ===== H2Koi gray/silver theme =====
   Loaded after app.css — overrides only. */
:root{
  --silver-light:#eef1f4; --silver-mid:#b6bdc4;
  --bar-light:#e4e8ec;    --bar-dark:#a9b0b7;
  --graphite-hi:#838a92;  --graphite-lo:#565c64;  /* medium-dark gray */
  --ink:#1f2429;          --muted:#8a929a;
  --card:rgba(255,255,255,.55);
  --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.15);
  --shadow:0 1px 2px rgba(31,36,41,.08), 0 4px 16px rgba(31,36,41,.10);
  --shadow-lg:0 10px 34px rgba(31,36,41,.22);
}

/* ---------- page background ---------- */
html,body{ min-height:100%; }
html{ background:var(--silver-mid); }
body{
  background:linear-gradient(180deg,var(--silver-light) 0%,var(--silver-mid) 100%) !important;
  background-attachment:fixed !important;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.app-body,.app-content{ background:transparent !important; }

/* ---------- top/bottom bars, navbars, headers ---------- */
header,nav,footer,.navbar,.header,.topbar,
.app-header,.app-header.white{
  background:linear-gradient(180deg,var(--bar-light) 0%,var(--bar-dark) 100%) !important;
  color:var(--ink); border-color:#9199a0;
}
.app-header{
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 2px 10px rgba(31,36,41,.18) !important;
  border-bottom:1px solid var(--line-strong);
}
.app-header .navbar{ min-height:78px; box-shadow:none !important; }
.app-header .navbar-item .material-icons{ color:#343c44; }

/* ---------- sidebar ---------- */
.app-aside .navside,
.navside.dark,
.navside .dk,
.navside.dark .dk{
  background:linear-gradient(180deg,var(--bar-light) 0%,var(--bar-dark) 100%) !important;
}
.app-aside .navbar{
  background:rgba(255,255,255,.35) !important;
  border-bottom:1px solid var(--line);
}
.navside .nav{ padding:8px 10px; background:transparent !important; }
.navside .nav > li > a{
  border-radius:8px;
  margin:2px 0;
  color:#343c44;
  transition:background .15s ease,color .15s ease;
}
.navside .nav > li > a:hover,
.navside .nav > li > a:focus{
  background:rgba(255,255,255,.55);
  color:var(--graphite-lo);
}
.navside .nav > li.active > a{
  background:linear-gradient(180deg,var(--graphite-hi) 0%,var(--graphite-lo) 100%);
  color:var(--silver-light);
  box-shadow:0 2px 8px rgba(18,22,26,.35);
}
.navside .nav > li.active > a .nav-icon i{ color:var(--silver-light); }
.navside .nav-text,.navside .nav-icon i{ color:inherit !important; }
/* flyout submenus pop out over page content, so they must be OPAQUE light
   (a translucent panel goes murky over the dark map/table behind it) */
.navside .nav-sub{
  background:linear-gradient(180deg,#f4f6f9 0%,#dde2e8 100%) !important;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(31,36,41,.30);
}
.navside .nav-sub > li > a{ color:#1f2429 !important; }
.navside .nav-sub > li > a:hover,
.navside .nav-sub > li > a:focus{ background:rgba(0,0,0,.06); color:#12161a !important; }
.navside .nav-sub .nav-text,
.navside .nav-sub .nav-icon i{ color:#1f2429 !important; }
.navside .nav-sub > li.active > a,
.navside .nav-sub > li.active > a .nav-text,
.navside .nav-sub > li.active > a .nav-icon i{ color:#12161a !important; }
.navside .nav-header small{
  color:var(--muted);
  letter-spacing:.12em; text-transform:uppercase; font-size:10px;
}
.nav-fold{
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.30);
}
.nav-fold .block._500{ color:#343c44; }

/* ---------- header brand + page-title chips ---------- */
.hk-header-bar{
  position:absolute; left:0; top:0; text-align:center; width:100%; z-index:1;
  background:transparent; padding-top:6px;
  pointer-events:none;
}
.hk-header-bar img{ height:68px; vertical-align:middle; margin-right:18px; }
/* engraved logos are transparent PNGs; multiply keeps them melted into the metal */
.hk-header-bar img, .hk-login-logo, .hk-brand-img{ mix-blend-mode:multiply; }
/* folded (icon-rail) sidebar: wide logo doesn't fit — show the drop icon */
#aside.folded .hk-brand-img{ content:url('../img/icon-silver.png'); max-height:56px; width:auto; padding:4px 0; }
/* 3D metal buttons: raised silver for the platform name, raised graphite for the page title */
.hk-title-chip{
  display:inline-block; vertical-align:middle;
  color:var(--ink);
  background:linear-gradient(180deg,#f4f7fa 0%,#c9d0d7 55%,#aab1b8 100%);
  border:1px solid #8a929a;
  font-size:1.35em; font-weight:600; letter-spacing:.03em;
  border-radius:999px; padding:8px 26px;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 -2px 3px rgba(0,0,0,.12) inset, 0 3px 7px rgba(31,36,41,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.hk-title-chip.accent{
  background:linear-gradient(180deg,#969ca4 0%,var(--graphite-hi) 45%,var(--graphite-lo) 100%);
  border:1px solid #0c0f12;
  color:var(--silver-light);
  margin-left:8px; text-transform:uppercase;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 -2px 3px rgba(0,0,0,.35) inset, 0 3px 7px rgba(18,22,26,.45);
  text-shadow:0 -1px 0 rgba(0,0,0,.45);
}
.hk-title-chip:empty{ display:none; }
/* avoid crowding the language/logout controls on narrow windows */
@media (max-width:1200px){ .hk-title-chip:not(.accent){ display:none; } }
@media (max-width:900px){ .hk-header-bar span{ display:none; } }

/* header language select */
.app-header .form-control{
  background:rgba(255,255,255,.5);
  border:1px solid var(--line-strong);
  color:var(--ink); border-radius:8px;
}
.app-header .form-control option{ color:var(--ink); }

/* ---------- cards / panels ---------- */
.card,.panel,section.card,
.box,.box-color,.white.box-shadow,.box-shadow-z1{
  background:var(--card) !important;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--ink);
}
.padding{ padding:24px; }

/* ---------- buttons: brushed silver ---------- */
button,.btn{
  background:linear-gradient(180deg,#e6eaee 0%,#a6aeb6 100%);
  color:var(--ink);
  border:1px solid #8a929a;
  border-radius:8px;
  transition:background .15s ease,box-shadow .15s ease,transform .15s ease,filter .15s ease;
}
button:hover,.btn:hover{ filter:brightness(1.06); }
/* primary action: dark graphite */
.btn-primary,button.primary,.btn.primary,.md-btn.primary{
  background:linear-gradient(180deg,var(--graphite-hi) 0%,var(--graphite-lo) 100%) !important;
  color:var(--silver-light) !important;
  border:1px solid #0c0f12;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 2px 8px rgba(18,22,26,.35);
}
.btn-primary:hover,button.primary:hover,.btn.primary:hover{
  filter:brightness(1.25);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 4px 14px rgba(18,22,26,.45);
  transform:translateY(-1px);
}

/* section-nav buttons (Device Action, Node Status, etc.) — darker than the
   primary action buttons so they read as a distinct tier */
.md-btn.md-raised{
  background:linear-gradient(180deg,#4e535a 0%,#2f3339 100%) !important;
  color:var(--silver-light) !important;
  border:1px solid #202329;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 2px 7px rgba(18,22,26,.45);
}
.md-btn.md-raised:hover{ filter:brightness(1.18); transform:translateY(-1px); }

hr{ border-color:var(--line-strong); }

/* ---------- tab strips (dashboard parameter tabs etc.) ---------- */
.nav-tabs{ border-bottom:1px solid var(--line-strong); background:transparent !important; }
.nav-tabs .nav-item{ margin-bottom:-1px; }
.nav-tabs .nav-item > a,
.nav-tabs .nav-link2{
  background:linear-gradient(180deg,#e6eaee 0%,#a6aeb6 100%) !important;
  color:var(--ink) !important;
  border:1px solid #8a929a !important;
  border-radius:8px 8px 0 0 !important;
  margin:0 2px;
  transition:filter .15s ease;
}
.nav-tabs .nav-item > a:hover,
.nav-tabs .nav-link2:hover{ filter:brightness(1.06); }
.nav-tabs .nav-item.active > a,
.nav-tabs .nav-item > a.active,
.nav-tabs .nav-link2.active{
  background:linear-gradient(180deg,var(--graphite-hi) 0%,var(--graphite-lo) 100%) !important;
  color:var(--silver-light) !important;
  border:1px solid #0c0f12 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
}
.nav-active-primary .nav-tabs > li.active > a{ background:linear-gradient(180deg,var(--graphite-hi) 0%,var(--graphite-lo) 100%) !important; color:var(--silver-light) !important; }

/* ---------- forms ---------- */
.form-control{ border-radius:8px; border-color:var(--line-strong); color:var(--ink); }
.form-control:focus{ border-color:var(--graphite-hi); box-shadow:0 0 0 3px rgba(18,22,26,.12); }
.md-input:focus ~ label,.md-input.has-value ~ label{ color:var(--graphite-hi); }
.md-form-group .md-input:focus{ border-color:var(--graphite-hi); }

/* ---------- tables ---------- */
.table{ background:transparent; color:var(--ink); }
.table > thead > tr > th{
  background:rgba(0,0,0,.045);
  color:var(--muted);
  text-transform:uppercase; font-size:11px; letter-spacing:.08em;
  border-bottom:1px solid var(--line-strong);
}
.table > tbody > tr{ transition:background .1s ease; }
.table > tbody > tr:hover{ background:rgba(255,255,255,.5); }
.table > tbody > tr > td{ border-color:var(--line); vertical-align:middle; }
.table-striped > tbody > tr:nth-of-type(odd){ background:rgba(255,255,255,.3); }
/* ui-grid: cells are transparent by default, so the fixed silver page gradient
   shows through and reads as dark gray. Give rows solid light backgrounds. */
.ui-grid{ border-radius:12px; border:1px solid rgba(0,0,0,.12) !important; overflow:hidden; }
.ui-grid, .ui-grid-viewport, .ui-grid-render-container,
.ui-grid-render-container-body, .ui-grid-canvas{ background:#ffffff !important; }
.ui-grid-row:nth-child(odd) .ui-grid-cell{ background:#ffffff !important; }
.ui-grid-row:nth-child(even) .ui-grid-cell{ background:#f3f6fa !important; }
.ui-grid-row:hover .ui-grid-cell{ background:#e8f0fb !important; }
.ui-grid-cell, .ui-grid-cell-contents{ color:var(--ink) !important; }
.ui-grid-cell{ border-color:rgba(0,0,0,.06) !important; }
.ui-grid-header, .ui-grid-header-cell, .ui-grid-header-canvas{
  background:linear-gradient(180deg,#e4e8ec 0%,#cdd3d9 100%) !important;
  color:var(--ink) !important;
}
.ui-grid-header-cell .ui-grid-cell-contents{ color:var(--ink) !important; font-weight:600; }
.ui-grid-top-panel{ background:linear-gradient(180deg,#e4e8ec 0%,#cdd3d9 100%) !important; }
.ui-grid-filter-input{ background:#fff !important; color:var(--ink) !important; border:1px solid rgba(0,0,0,.15); border-radius:6px; }

/* ---------- labels / badges / scrollbars ---------- */
.label{ border-radius:6px; }
.label.rounded{ border-radius:999px; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(31,36,41,.28); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(31,36,41,.45); }

/* ===== Login screen ===== */
.hk-login{
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--silver-light) 0%,var(--silver-mid) 100%) fixed;
  padding:24px;
}
.hk-login-card{
  position:relative;
  width:400px; max-width:94vw;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-lg);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  padding:36px 36px 30px;
  animation:hk-rise .45s ease both;
}
@keyframes hk-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.hk-login-logo{ display:block; margin:0 auto 6px; max-height:110px; }
.hk-login-tagline{
  text-align:center; color:var(--muted);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:26px;
}
.hk-login-title{ font-size:15px; font-weight:500; color:var(--ink); margin-bottom:14px; }
.hk-login .md-form-group{ padding-bottom:22px; }
.hk-login .md-form-group label{ color:var(--muted); opacity:1; }
.hk-login .md-input{
  color:var(--ink);
  border-bottom:2px solid var(--line-strong);
  transition:border-color .2s ease;
  background:transparent;
}
.hk-login .md-input:focus{ border-bottom-color:var(--graphite-hi); }
.hk-login-btn{
  width:100%;
  border:1px solid #0c0f12;
  border-radius:10px;
  padding:12px;
  font-size:15px; font-weight:500; letter-spacing:.04em;
  color:var(--silver-light);
  background:linear-gradient(180deg,var(--graphite-hi) 0%,var(--graphite-lo) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 4px 14px rgba(18,22,26,.4);
  cursor:pointer;
  transition:background .15s ease,box-shadow .15s ease,transform .15s ease,filter .15s ease;
}
.hk-login-btn:hover{ filter:brightness(1.25); transform:translateY(-1px); }
.hk-login-btn:active{ transform:none; }
.hk-login-foot{
  position:relative; margin-top:22px; text-align:center;
  color:var(--muted); font-size:12px; letter-spacing:.06em;
}