/* Puslapio karkasas (ne valdikliai). Spalvos – kintamieji vienoje vietoje (prekės ženklo keitimui). */
:root {
  --hpc-primary: #003087;
  --hpc-primary-dk: #002266;
  --hpc-bg: #f2f5fa;
  --hpc-card: #ffffff;
  --hpc-text: #1d2533;
  --hpc-muted: #5b6b85;
  --hpc-line: #d9e0ec;
  --hpc-err: #c62828;
  --hpc-ok: #2e7d32;
  --hpc-nav-h: 52px;
  --hpc-side-w: 220px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.4 Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--hpc-text); background: var(--hpc-bg); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
#hpc-app { min-height: 100%; }
#hpc-loading { padding: 40px; text-align: center; color: var(--hpc-muted); }

/* viršutinė juosta */
.hpc-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--hpc-nav-h); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--hpc-primary); color: #fff; z-index: 1000; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.hpc-brand { font-weight: 700; font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
.hpc-sp { flex: 1; }
.hpc-user { font-size: 13px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.hpc-burger { display: none; border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1; padding: 6px 8px; cursor: pointer; border-radius: 6px; }
.hpc-burger:hover { background: rgba(255,255,255,.15); }
.hpc-out { border: 1px solid rgba(255,255,255,.55); background: transparent; color: #fff; padding: 6px 12px; border-radius: 16px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.hpc-out:hover { background: rgba(255,255,255,.15); }

/* šoninis meniu */
.hpc-side { position: fixed; top: var(--hpc-nav-h); left: 0; bottom: 0; width: var(--hpc-side-w); background: var(--hpc-card); border-right: 1px solid var(--hpc-line); padding: 10px 0; z-index: 900; overflow-y: auto; }
.hpc-side a { display: block; padding: 11px 18px; color: var(--hpc-text); text-decoration: none; border-left: 3px solid transparent; }
.hpc-side a:hover { background: var(--hpc-bg); }
.hpc-side a.on { border-left-color: var(--hpc-primary); color: var(--hpc-primary); font-weight: 600; background: rgba(0,48,135,.06); }

/* turinys */
.hpc-main { padding: calc(var(--hpc-nav-h) + 12px) 12px 12px calc(var(--hpc-side-w) + 12px); min-height: 100vh; }
.hpc-grid { display: flex; flex-direction: column; gap: 12px; }
.hpc-cell { background: var(--hpc-card); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden; position: relative; min-height: 120px; }
.hpc-map { height: 420px; }
.hpc-fleet { min-height: 630px; }
.hpc-one > .hpc-cell { min-height: calc(100vh - var(--hpc-nav-h) - 24px); }
.hpc-widget { width: 100%; height: 100%; min-height: inherit; }
.hpc-map .hpc-widget { height: 420px; }

@media (max-width: 960px) {
  .hpc-burger { display: inline-block; }
  .hpc-side { transform: translateX(-100%); transition: transform .2s; box-shadow: 2px 0 8px rgba(0,0,0,.15); }
  #hpc-app.side-open .hpc-side { transform: none; }
  .hpc-main { padding-left: 8px; padding-right: 8px; }
  .hpc-user { display: none; }
}
@media (max-width: 600px) {
  .hpc-nav { padding: 0 6px; gap: 6px; }
  .hpc-brand { font-size: 15px; }
  .hpc-main { padding-left: 4px; padding-right: 4px; }
  .hpc-map, .hpc-map .hpc-widget { height: 420px; }
}

/* prisijungimas / aktyvavimas */
.hpc-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; background: linear-gradient(160deg, var(--hpc-primary) 0%, var(--hpc-primary-dk) 100%); }
.hpc-card { width: 100%; max-width: 380px; background: var(--hpc-card); border-radius: 14px; padding: 26px 24px 22px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.hpc-card h1 { margin: 0 0 18px; font-size: 20px; color: var(--hpc-primary); }
.hpc-card label { display: block; margin: 0 0 12px; font-size: 13px; color: var(--hpc-muted); }
.hpc-card input { display: block; width: 100%; margin-top: 4px; height: 42px; padding: 0 12px; border: 1px solid var(--hpc-line); border-radius: 8px; background: #fff; color: var(--hpc-text); }
.hpc-card input:focus { outline: 2px solid var(--hpc-primary); outline-offset: -1px; border-color: var(--hpc-primary); }
.hpc-btn { display: block; width: 100%; height: 44px; border: 0; border-radius: 22px; background: var(--hpc-primary); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 6px; }
.hpc-btn:hover { background: var(--hpc-primary-dk); }
.hpc-btn:disabled { opacity: .6; cursor: default; }
.hpc-link { display: block; text-align: center; margin-top: 14px; color: var(--hpc-primary); font-size: 13px; text-decoration: none; }
.hpc-link:hover { text-decoration: underline; }
.hpc-err { min-height: 18px; color: var(--hpc-err); font-size: 13px; margin: 2px 0 8px; }
.hpc-ok { color: var(--hpc-ok); }
.hpc-hint { font-size: 12px; color: var(--hpc-muted); margin: -6px 0 8px; }
.hpc-authlang { margin-top: 18px; }
.hpc-chips { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.16); border-radius: 20px; padding: 3px; }
.hpc-chip { border: 0; background: transparent; color: #fff; font: 700 13px/1 Roboto, Arial, sans-serif; padding: 7px 9px; border-radius: 16px; cursor: pointer; letter-spacing: .02em; }
.hpc-chip.on { background: #fff; color: var(--hpc-primary); }
.hpc-chip:hover:not(.on) { background: rgba(255,255,255,.18); }