/* ===== 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; }
/* MULTIPLY IS OPT-IN, by class, and must stay that way.
   It suits the engraved logos — black line art on transparent, which melts into the silver
   gradient. It ruins anything with its own tonal range: the crest is a mid-tone metal object
   carrying highlights, and multiply crushes them into a dark smudge.
   This used to read `.hk-header-bar img`, which silently applied multiply to every image in
   the bar and made each new one a bug to be patched afterwards. Mark engraved art with
   .hk-engraved; anything unmarked renders normally, which is the safe default. */
.hk-engraved, .hk-login-logo, .hk-brand-img{ mix-blend-mode:multiply; }
/* the crest half of the header lockup — same drop-shadow h2koi.com uses on its header crest */
.hk-header-bar .hk-hdr-crest{
  margin-right:14px;
  filter:drop-shadow(0 1px 2px rgba(56,66,80,.28));
}
/* Folded (icon-rail) sidebar: the wide wordmark doesn't fit — show the drop icon.
   DELIBERATELY still the droplet, not the crest. The header bar above carries the crest as
   half of its lockup, and folding the rail put the two side by side — one crest per screen
   (David, 2026-08-04). Change this only if the header crest goes away. */
#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; }
/* Login hero: the same crest + wordmark lockup as the header and h2koi.com.
   BOTH drop to 86px. At the wordmark's old 110px the pair measures 317px against 328px of
   card interior (400px card, 36px padding each side) — it fits, but with 11px to spare, so
   any translated tagline or a 94vw card on a small screen would collide. 86px leaves 77px. */
.hk-login-lockup{
  display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 6px;
}
.hk-login-lockup .hk-login-logo{ margin:0; max-height:86px; }
.hk-login-crest{
  height:86px; width:auto; display:block;
  filter:drop-shadow(0 1px 2px rgba(56,66,80,.28));
}
.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;
}