:root{color-scheme:dark;--bg:#0c1220;--panel:#171f31;--panel2:#1e2a3f;--border:#344156;--text:#eaf0fa;--muted:#9cabc1;--accent:#fb923c;--good:#4ade80;--red:#fca5a5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}.app{display:flex;min-height:100vh}.sidebar{width:248px;background:#111a2b;border-right:1px solid var(--border);padding:30px 20px;display:flex;flex-direction:column;flex-shrink:0}.brand{font-size:21px;font-weight:800;letter-spacing:.06em;margin:0 0 48px}.brand span{color:var(--accent)}.sidebar-label{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;margin:6px 10px 12px}.space-top{margin-top:40px}.machine-id{background:#223048;border:1px solid var(--border);padding:12px;border-radius:10px;font-weight:700}nav{display:grid;gap:6px}.nav-item{border:0;background:transparent;color:var(--muted);text-align:left;cursor:pointer;border-radius:9px;padding:12px 14px;font:inherit}.nav-item.active,.nav-item:hover{background:#303b50;color:white}.nav-item.active{border-left:3px solid var(--accent)}.sidebar-bottom{margin-top:auto;padding-top:25px}.logout{border:1px solid var(--border);background:none;border-radius:10px;color:var(--muted);padding:9px 20px;cursor:pointer}.content{width:100%;max-width:1200px;margin:0 auto;padding:40px}header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:26px}.eyebrow{font-size:11px;color:var(--accent);font-weight:800;letter-spacing:.12em}h1{font-size:31px;margin:0 0 5px}h2{font-size:17px;margin:0 0 17px}.muted{color:var(--muted);margin:0}.small{font-size:12px}.header-actions{display:flex;align-items:center;gap:10px}.primary{background:var(--accent);border:0;border-radius:9px;color:#21150d;cursor:pointer;font-weight:800;padding:11px 17px}.primary:hover{filter:brightness(1.08)}.primary:disabled{opacity:.55;cursor:wait}.pill{border:1px solid;border-radius:30px;padding:5px 10px;font-weight:700;font-size:12px}.pill.good{color:var(--good);border-color:#225e43}.pill.bad{color:var(--red);border-color:#803939}.pill.pending{color:var(--muted);border-color:var(--border)}.notice{padding:14px 18px;border:1px solid var(--border);border-radius:10px;background:var(--panel);margin-bottom:14px}.notice:empty{display:none}#updated{margin-bottom:22px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}.card{border:1px solid var(--border);border-radius:14px;padding:24px;background:var(--panel);margin-bottom:18px}.card.full{grid-column:1/-1}.metric-label{font-size:12px;color:var(--muted)}.metric{font-size:28px;font-weight:800;margin-top:6px}.metric-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px;margin-bottom:12px}.metric-box{background:var(--panel2);padding:16px;border-radius:10px}.note{color:var(--muted);font-size:13px;margin:14px 0 0}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}th,td{padding:11px 14px;border-bottom:1px solid var(--border);text-align:left}th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}td:last-child,th:last-child{text-align:right}footer{border-top:1px solid var(--border);padding-top:20px;margin-top:60px;font-size:12px;color:var(--muted)}.login-bg{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:100%;max-width:420px;border:1px solid var(--border);background:var(--panel);border-radius:16px;padding:34px}.login-card .brand{margin-bottom:30px}.login-card label{display:block;font-weight:700;margin:18px 0 7px}.login-card input:not([type=hidden]){width:100%;background:#101728;border:1px solid #50607a;color:white;padding:13px;border-radius:8px;font:inherit}.wide{width:100%;margin:24px 0}.error{background:#562b34;padding:12px;border-radius:8px;color:#ffd5db}@media(max-width:720px){.app{display:block}.sidebar{width:100%;padding:15px;border-bottom:1px solid var(--border)}.sidebar .brand{margin:0 0 10px}.sidebar-label,.machine-id{display:none}.sidebar nav{display:flex;overflow:auto}.sidebar .nav-item{white-space:nowrap;padding:8px 11px}.sidebar-bottom{display:none}.content{padding:22px 14px}header{align-items:flex-start;flex-direction:column}h1{font-size:25px}.card{padding:18px}}


/* Admin: register a prepared machine. */
.machine-add { display: grid; gap: 8px; margin: 16px 10px 26px; }
.machine-add label { font-size: 12px; font-weight: 700; }
.machine-add input { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid #52616d; background: #17252c; color: #fff; }
.machine-add button { padding: 10px; border: 0; border-radius: 8px; cursor: pointer; background: #19b9aa; color: #092323; font-weight: 700; }
.machine-add button:disabled { opacity: .6; cursor: wait; }
.machine-add .add-message { margin: 0; min-height: 1.4em; font-size: 12px; }


.ad-actions { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0; }
.ad-actions button { padding:10px 16px; border-radius:8px; cursor:pointer; }
.ad-actions button:disabled { opacity:.55; cursor:wait; }
.ad-remove { border:1px solid #cf6e6e; color:#f0a5a5; background:transparent; }
.ad-result { min-height:1.5em; }


.sound-toggle { display:flex; align-items:center; gap:12px; margin:18px 0 25px; cursor:pointer; }
.sound-toggle input { width:20px; height:20px; }
.sound-volume-label { display:block; margin-bottom:10px; }
.sound-volume { display:flex; align-items:center; gap:16px; }
.sound-volume input { width:min(100%,460px); accent-color:#19b9aa; }
.sound-value { min-width:3ch; }


.reset-target { font-weight:700; margin:16px 0; }
.reset-label { display:grid; gap:9px; max-width:360px; margin:18px 0; }
.reset-label input { padding:10px; border-radius:8px; border:1px solid #52616d; background:#17252c; color:#fff; }
.reset-label + button { padding:10px 16px; border-radius:8px; }
.reset-label + button:disabled { opacity:.5; cursor:not-allowed; }


/* BESKAR turquoise theme */
:root {
  color-scheme: dark;
  --bg: #080d0f;
  --panel: #111b1e;
  --panel2: #19282b;
  --border: #294247;
  --text: #ecf8f7;
  --muted: #a4bbbd;
  --accent: #26d5c7;
  --good: #55ddaa;
  --red: #ff858c;
}

body {
  background:
    radial-gradient(circle at 70% -15%, rgba(38,213,199,.11), transparent 38%),
    var(--bg);
  color: var(--text);
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, .brand, .metric {
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
}

h1 {
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 750;
  letter-spacing: -.025em;
}

h2 { font-size: 19px; font-weight: 700; }
h3 { color: var(--text); }

.sidebar {
  background: linear-gradient(180deg, #0d181b, #0a1113);
  border-right: 1px solid var(--border);
}

.brand {
  font-size: 23px;
  letter-spacing: .075em;
}
.brand span { color: var(--accent); }

.sidebar-label, .eyebrow {
  color: var(--accent);
  letter-spacing: .13em;
}

.machine-id,
.reset-label input,
.machine-add input,
.login-card input:not([type=hidden]),
#view input:not([type=checkbox]):not([type=range]):not([type=file]) {
  background: #142226;
  border: 1px solid #35565b;
  color: var(--text);
  border-radius: 10px;
}

.nav-item {
  color: #b4c9c9;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover {
  background: #193033;
  color: var(--text);
}
.nav-item.active {
  background: linear-gradient(90deg, #193a3b, #16282b);
  color: #f4ffff;
  border-left: 3px solid var(--accent);
}

.content { max-width: 1280px; }

.card, .login-card {
  background: linear-gradient(145deg, #142124, #10191c);
  border: 1px solid var(--border);
  box-shadow: 0 12px 36px rgba(0,0,0,.14);
}

.metric-box {
  background: #1b2c2e;
  border: 1px solid #2a494b;
}

.metric { color: #eafffc; }

.notice {
  background: #142226;
  border-color: var(--border);
}

.primary, .machine-add button {
  background: var(--accent);
  color: #052023;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 800;
  box-shadow: 0 5px 18px rgba(38,213,199,.13);
}
.primary:hover, .machine-add button:hover {
  background: #5ce6da;
  filter: none;
}
.primary:disabled, .machine-add button:disabled {
  opacity: .48;
  box-shadow: none;
  cursor: not-allowed;
}

.logout:hover {
  border-color: var(--accent);
  color: var(--text);
}

.pill.good {
  background: rgba(85,221,170,.1);
  border-color: #31755d;
}
.pill.bad {
  background: rgba(255,133,140,.09);
  border-color: #91464e;
}
.pill.pending { background: #1b292c; }

th { color: #a9cecc; }
tr:hover td { background: rgba(38,213,199,.035); }
th, td { border-bottom-color: #294247; }

input[type=range], input[type=checkbox] {
  accent-color: var(--accent);
}

input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media(max-width:720px) {
  .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar .sidebar-label:first-of-type { display: block; margin: 12px 4px 6px; }
  .sidebar .machine-id { display: block; width: 100%; margin-bottom: 10px; }
  .sidebar nav { padding-bottom: 5px; }
}


/* Stronger positive status */
:root { --good: #00f58a; }

.pill.good {
  color: #00ff91;
  background: #103d2b;
  border: 1px solid #00d875;
  box-shadow: inset 0 0 0 1px rgba(0,255,145,.12),
              0 0 16px rgba(0,245,138,.18);
  font-weight: 800;
}

#machine-select option {
  background: #111b1e;
  font-weight: 700;
}


/* Mobile logout visibility */
@media(max-width:720px) {
  .sidebar .sidebar-bottom {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .sidebar .logout {
    width: 100%;
    text-align: center;
  }
}


/* Aligned price and round settings */
.editable-settings .setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 180px);
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.editable-settings .setting-row:last-child { border-bottom: 0; }
.editable-settings .setting-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.editable-settings .setting-text { display: flex; flex-direction: column; min-width: 0; }
.editable-settings .setting-name {
  color: var(--text);
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.editable-settings .setting-caption {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}
.editable-settings .setting-label input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  font: 600 16px "Aptos", "Segoe UI", sans-serif;
  text-align: center;
}
.editable-settings .setting-row > button {
  width: 110px;
  min-height: 40px;
  justify-self: end;
}
.editable-settings .setting-row > .muted.small {
  font-size: 12px;
}
@media (max-width: 760px) {
  .editable-settings .setting-row {
    grid-template-columns: minmax(0, 1fr) 110px;
  }
  .editable-settings .setting-label {
    grid-template-columns: minmax(0, 1fr) 95px;
    gap: 10px;
  }
  .editable-settings .setting-row > .muted.small {
    grid-column: 1 / -1;
  }
}


/* Statistics layout */
.stats-card h2 {
  margin-bottom: 18px;
}
.stats-card table {
  font-variant-numeric: tabular-nums;
}
.stats-card th {
  padding-top: 12px;
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .07em;
}
.stats-card td {
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 15px;
}
.stats-card td:first-child {
  color: var(--text);
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-weight: 650;
}
.stats-card td:last-child {
  color: var(--good);
  font-size: 17px;
  font-weight: 800;
}
.stats-card tbody tr:hover {
  background: var(--panel2);
}


/* Active game player tiles */
.player-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.player-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 100px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel2);
}
.player-name {
  color: var(--text);
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.player-score {
  align-self: flex-end;
  color: var(--good);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 12px;
}
@media (max-width: 480px) {
  .player-grid { gap: 9px; }
  .player-tile { min-height: 86px; padding: 13px; }
}


/* Game options inside game metric */
.game-options {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}


/* Compact player tiles */
.player-grid.compact { gap: 9px; }
.player-grid.compact .player-tile {
  min-height: 62px;
  padding: 10px 14px;
}
.player-grid.compact .player-name { font-size: 14px; }
.player-grid.compact .player-score {
  font-size: clamp(22px, 3vw, 29px);
  margin-top: 5px;
}
@media (max-width: 480px) {
  .player-grid.compact { gap: 7px; }
  .player-grid.compact .player-tile {
    min-height: 54px;
    padding: 8px 10px;
  }
  .player-grid.compact .player-score { font-size: 23px; }
}


/* Active player's turn */
.player-tile.is-active {
  border: 2px solid var(--accent);
  background: #143438;
  box-shadow: 0 0 0 2px rgba(38,213,199,.14),
              0 0 22px rgba(38,213,199,.18);
}
.player-tile.is-active .player-name { color: var(--accent); }


/* Portal home page */
.portal-home-link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.portal-home-link:hover { color: var(--accent); }
.home-mode #machine-select,
.home-mode .portal-home-link + .sidebar-label,
.home-mode .machine-add,
.home-mode #nav .nav-item:not([data-tab="home"]),
.home-mode .header-actions,
.home-mode #notice,
.home-mode #updated { display: none; }
.portal-hero {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(180px,.8fr);
  align-items: center;
  gap: 24px;
  min-height: 260px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: radial-gradient(circle at 80% 30%,#17615d 0%,#12292b 38%,var(--panel) 76%);
  overflow: hidden;
}
.portal-hero-copy h2 {
  font-size: clamp(27px,3vw,42px);
  line-height: 1.15;
  max-width: 540px;
}
.portal-hero-kicker {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;
}
.portal-hero img {
  display: block;
  justify-self: center;
  max-width: 100%;
  max-height: 290px;
  object-fit: contain;
  filter: drop-shadow(0 14px 25px rgba(0,0,0,.45));
}
.portal-list-title { margin: 30px 0 16px; }
.portal-machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 14px;
}
.portal-machine-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-height: 145px;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.portal-machine-card:hover,
.portal-machine-card:focus-visible {
  border-color: var(--accent);
  background: var(--panel2);
}
.portal-machine-title { font-size: 18px; overflow-wrap: anywhere; }
.portal-machine-status { font-size: 13px; }
.portal-machine-open { margin-top: auto; color: var(--accent); font-weight: 700; }
@media(max-width:720px) {
  .portal-hero { grid-template-columns: 1fr; padding: 22px; }
  .portal-hero img { max-height: 230px; }
}


/* Home hero machine background */
.portal-hero {
  display: flex;
  align-items: center;
  min-height: 330px;
  background-image:
    linear-gradient(90deg, rgba(8,18,21,.98) 0%, rgba(8,18,21,.91) 48%,
                          rgba(8,18,21,.24) 100%),
    url('/static/nova01-front.png');
  background-color: #102326;
  background-repeat: no-repeat;
  background-size: cover, auto 150%;
  background-position: center, right 5% center;
}
.portal-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 58%;
}
.portal-hero > img { display: none; }
@media(max-width:720px) {
  .portal-hero {
    min-height: 380px;
    align-items: flex-start;
    background-image:
      linear-gradient(180deg, rgba(8,18,21,.98) 0%,
                            rgba(8,18,21,.80) 47%,
                            rgba(8,18,21,.20) 100%),
      url('/static/nova01-front.png');
    background-size: cover, auto 105%;
    background-position: center, right -35px bottom;
  }
  .portal-hero-copy { max-width: 100%; }
}


/* Home machine outside hero */
.portal-hero {
  position: relative;
  overflow: visible;
  min-height: 330px;
  background: radial-gradient(circle at 75% 45%, #174448 0%, #10292c 38%, #0b171a 80%);
}
.portal-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 65%;
}
.portal-hero > img {
  display: block;
  position: absolute;
  z-index: 2;
  width: auto;
  height: 700px;
  max-width: none;
  max-height: none;
  right: 2%;
  bottom: -125px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 20px 25px rgba(0,0,0,.65));
}
.portal-list-title,
.portal-machine-grid {
  position: relative;
  z-index: 3;
}
@media(max-width:720px) {
  .portal-hero {
    min-height: 410px;
    align-items: flex-start;
  }
  .portal-hero-copy { max-width: 100%; }
  .portal-hero > img {
    height: 390px;
    right: -25px;
    bottom: -55px;
    opacity: .9;
  }
  .portal-hero-copy h2,
  .portal-hero-copy .muted {
    max-width: 65%;
  }
}


/* Separate dashboard and machine list */
.home-mode #nav .nav-item[data-tab="machines"] { display: block; }
.machine-list-mode #machine-select,
.machine-list-mode .portal-home-link + .sidebar-label,
.machine-list-mode .machine-add,
.machine-list-mode #nav .nav-item:not([data-tab="home"]):not([data-tab="machines"]),
.machine-list-mode .header-actions,
.machine-list-mode #notice,
.machine-list-mode #updated { display: none; }
.portal-hero-copy .primary {
  margin-top: 18px;
  padding: 11px 18px;
}
.home-mode #view > .card {
  margin-top: 28px;
}


/* Smaller dashboard machine */
.portal-hero > img {
  height: 470px;
  right: 5%;
  bottom: -45px;
}
@media(max-width:720px) {
  .portal-hero > img {
    height: 300px;
    right: -10px;
    bottom: -20px;
  }
}


/* Open dashboard without frame */
.home-mode .portal-hero {
  min-height: 500px;
  padding: 28px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.home-mode .portal-hero > img {
  height: 520px;
  right: 6%;
  bottom: -10px;
}
.home-mode .portal-hero-copy {
  max-width: 55%;
}
@media(max-width:720px) {
  .home-mode .portal-hero {
    min-height: 510px;
    padding: 18px 0;
  }
  .home-mode .portal-hero > img {
    height: 340px;
    right: -10px;
    bottom: 0;
  }
  .home-mode .portal-hero-copy { max-width: 100%; }
}


/* Horizontal portal navigation */
#nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  padding: 0 0 13px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
#nav .nav-item {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 9px;
}
.home-mode #nav .nav-item[data-tab="machines"] {
  display: block;
}
@media(max-width:720px) {
  #nav {
    margin-bottom: 20px;
    padding-bottom: 10px;
  }
  #nav .nav-item {
    padding: 9px 12px;
  }
}


/* Separate machine navigation */
#nav {
  display: flex;
  flex-direction: column;
}
#machine-nav {
  display: none;
}
body.machine-open #machine-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 24px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
#machine-nav .nav-item {
  flex: 0 0 auto;
  white-space: nowrap;
  width: auto;
}
@media (max-width: 720px) {
  #nav {
    display: flex;
    flex-direction: row;
  }
  body.machine-open #machine-nav {
    margin-bottom: 18px;
  }
}


/* Sidebar order: primary links above logout */
.sidebar #nav {
  position: static;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  margin: 12px 0 20px;
}
.sidebar #nav .nav-item {
  display: block;
  width: 100%;
}
.sidebar .sidebar-bottom {
  position: static;
  flex: 0 0 auto;
  margin-top: auto;
}
@media (max-width:720px) {
  .sidebar #nav {
    flex-direction: row;
    margin: 8px 0 12px;
  }
  .sidebar #nav .nav-item {
    width: auto;
  }
  .sidebar .sidebar-bottom {
    margin-top: 12px;
  }
}


/* Dedicated add-machine page */
.home-mode #nav .nav-item[data-tab="addMachine"],
.machine-list-mode #nav .nav-item[data-tab="addMachine"] {
  display: block !important;
}
#view .machine-add {
  max-width: 420px;
  margin: 12px 0;
}


/* Clean dashboard header */
body.home-mode header .eyebrow,
body.home-mode #page-title,
body.home-mode #machine-heading,
body.home-mode #status,
body.home-mode #refresh,
body.home-mode #updated,
body.home-mode #notice {
  display: none !important;
}
body.home-mode header {
  display: none !important;
}


/* Edit machine information from the machine list */
.machine-list-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 9px;
}
.machine-list-row > button:first-child {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: left;
}
.machine-info-edit {
  flex: 0 0 48px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--panel2);
  color: var(--accent);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
.machine-info-edit:hover,
.machine-info-edit:focus-visible {
  background: var(--accent);
  color: #071416;
}


/* Machine information list */
#nav .nav-item[data-tab="info"] {
  display: block;
}
.home-mode #nav .nav-item[data-tab="info"],
.machine-list-mode #nav .nav-item[data-tab="info"] {
  display: block !important;
}
.machine-list-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 8px;
  max-width: 460px;
}
.machine-list-row .machine-info-name {
  flex: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.machine-list-row .machine-info-name:hover,
.machine-list-row .machine-info-name:focus-visible {
  border-color: var(--accent);
}
.machine-list-row .machine-info-edit {
  flex: 0 0 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--accent);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.machine-list-row .machine-info-edit:hover,
.machine-list-row .machine-info-edit:focus-visible {
  border-color: var(--accent);
}
.machine-list-row + .card,
.card:has(> .machine-info-close) {
  max-width: 460px;
}
.machine-info-close {
  float: right;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel2);
  color: var(--text);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.machine-info-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}


/* Machine selector at the right end of the machine navigation */
#machine-nav .machine-nav-selector {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
#machine-nav .machine-nav-selector .machine-id {
  display: block;
  width: 190px;
  min-width: 160px;
  margin: 0;
}
@media(max-width:720px) {
  #machine-nav .machine-nav-selector {
    padding-left: 10px;
  }
  #machine-nav .machine-nav-selector .machine-id {
    display: block;
    width: 150px;
  }
}


/* Smaller selector at the far right of the machine menu */
#machine-nav .machine-nav-selector {
  margin-left: auto;
  padding-left: 8px;
  gap: 6px;
}
#machine-nav .machine-nav-selector .machine-id {
  width: 145px;
  min-width: 145px;
  padding: 7px 9px;
  font-size: 13px;
}
@media(max-width:720px) {
  #machine-nav .machine-nav-selector .machine-id {
    width: 135px;
    min-width: 135px;
  }
}


/* Folders for machines, including narrow mobile screens */
.machine-folder-create {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:16px 0 8px;
}
.machine-folder-create input,
.machine-folder-label select {
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel2);
  color:var(--text);
  padding:10px 12px;
  font:inherit;
}
.machine-folder-create input {min-width:220px;max-width:100%}
.machine-folder {margin:24px 0}
.machine-folder h3 {margin:0 0 12px;color:var(--accent)}
.machine-folder .portal-machine-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}
.machine-folder-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
}
.machine-folder-open {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  width:100%;
  min-width:0;
  padding:16px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.machine-folder-label {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 16px 16px;
  font-size:13px;
  color:var(--muted);
}
.machine-folder-label select {width:100%}
@media(max-width:720px){
  .machine-folder .portal-machine-grid {grid-template-columns:1fr}
  .machine-folder-create input {flex:1 1 100%;min-width:0}
}


/* Clickable machine folders */
.machine-folder .portal-machine-grid[hidden] {
  display:none !important;
}
.machine-folder-toggle {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0 0 12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.machine-folder-toggle:hover,
.machine-folder-toggle:focus-visible {
  border-color:var(--accent);
}
.folder-arrow {color:var(--accent);font-size:20px;line-height:1}
.folder-count {
  margin-left:auto;
  padding:2px 9px;
  border-radius:999px;
  background:var(--panel2);
  color:var(--muted);
  font-size:13px;
}


/* Machine name is a label; only the pencil opens editing */
.machine-list-row .machine-info-name {
  display:flex;
  align-items:center;
  cursor:default;
}
.machine-list-row .machine-info-name:hover {
  border-color:var(--border);
}


/* Connection status beside machine name */
.machine-list-row .machine-info-name {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.info-device-status {
  color:#87999a;
  font-size:18px;
  line-height:1;
  flex:0 0 auto;
}
.info-device-status.online {color:#35e887}
.info-device-status.offline {color:#ff666d}

/* Clearer machine connection indicators */
.info-device-status {
  font-size: 20px;
  font-weight: 900;
}
.info-device-status.online {
  color: #39f58f;
  text-shadow: 0 0 9px rgba(57,245,143,.65);
}
.info-device-status.offline {
  color: #ff555f;
  text-shadow: 0 0 9px rgba(255,85,95,.55);
}


/* Live Cricket marks in player cards */
.cricket-details {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
  width:100%;
  margin-top:12px;
}
.cricket-target {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:5px 2px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--panel2);
}
.cricket-number {font-size:11px;font-weight:700}
.cricket-marks {font-size:13px;font-weight:800}
.cricket-target.closed {
  border-color:var(--accent);
  color:var(--accent);
}
.cricket-points {
  margin-top:9px;
  font-size:13px;
  font-weight:700;
}
@media(max-width:480px){
  .cricket-details {gap:2px}
  .cricket-target {padding:4px 1px}
  .cricket-number {font-size:10px}
  .cricket-marks {font-size:11px}
}


/* PIN setup matches the portal cards */
.machine-pin-panel {
  max-width:620px;
}
.machine-pin-panel > select,
.machine-pin-panel .machine-pin-label input {
  display:block;
  box-sizing:border-box;
  width:100%;
  margin:12px 0;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--panel2);
  color:var(--text);
  font:inherit;
}
.machine-pin-panel .machine-pin-label {
  display:block;
  margin-top:18px;
  font-weight:700;
}
.machine-pin-panel > button {
  margin:8px 10px 8px 0;
  padding:11px 16px;
  border-radius:8px;
  cursor:pointer;
}
.machine-pin-panel > button:disabled {
  opacity:.5;
  cursor:not-allowed;
}
.machine-pin-panel .ad-result {
  overflow-wrap:anywhere;
  line-height:1.7;
}


/* Logout always visible */
@media (min-width: 721px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sidebar nav {
    min-height: 0;
    overflow-y: auto;
  }
  .sidebar .sidebar-bottom {
    display: block;
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 12px;
    background: var(--panel);
  }
}
@media (max-width: 720px) {
  body { padding-bottom: 76px; }
  .sidebar .sidebar-bottom {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    margin: 0;
    padding: 9px 14px max(9px, env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--border);
  }
  .sidebar .sidebar-bottom .logout { width: 100%; }
}

/* Odjava bez dodatnog okvira */
@media (min-width: 721px) {
  .sidebar .sidebar-bottom {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}


/* Analytics */
.analytics-controls { margin: 12px 0 24px; }
.analytics-controls label { display: flex; align-items: center; gap: 12px; }
.analytics-controls select {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
}
.analytics-section { margin: 30px 0; }
.analytics-row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) 1fr minmax(65px, 95px);
  gap: 12px;
  align-items: center;
  margin: 11px 0;
}
.analytics-name { overflow-wrap: anywhere; }
.analytics-number { text-align: right; font-variant-numeric: tabular-nums; }
.analytics-track {
  height: 15px;
  background: var(--panel2);
  border-radius: 20px;
  overflow: hidden;
}
.analytics-fill {
  height: 100%;
  background: linear-gradient(90deg, #109b93, var(--accent));
  border-radius: inherit;
}
@media(max-width:720px){
  .analytics-row { grid-template-columns: 100px 1fr 65px; gap: 7px; font-size: 12px; }
}

/* Analiza je uvijek dostupna u glavnom izborniku */
.sidebar #nav .nav-item[data-tab="analysis"] {
  display: block !important;
}


/* Korisnički portal: isti okvir i boje kao administratorski prikaz. */
.customer-portal .customer-brand {
  display: block;
  text-decoration: none;
  color: var(--text);
}
.customer-portal .customer-primary-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.customer-portal .customer-primary-nav a,
.customer-portal .customer-primary-nav button {
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.customer-portal .sidebar {
  display: flex;
  flex-direction: column;
}
.customer-portal .sidebar-bottom {
  margin-top: auto;
}
.customer-portal [hidden] {
  display: none !important;
}
.customer-portal .customer-machine-link {
  text-decoration: none;
  color: var(--text);
}
.customer-portal .customer-machine-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--border);
}
.customer-portal .customer-machine-tabs .nav-item {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  cursor: pointer;
}
.customer-portal .customer-tab-panel {
  max-width: 1100px;
}
@media (max-width:720px) {
  .customer-portal .customer-primary-nav {
    flex-direction: row;
    overflow-x: auto;
  }
  .customer-portal .customer-primary-nav .nav-item {
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto;
  }
  .customer-portal .sidebar-bottom {
    display: block;
    margin-top: 12px;
  }
}


/* Isti raspored uređivanja cijena i rundi za korisnika. */
.customer-settings .customer-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.customer-settings .customer-setting-row:last-child {
  border-bottom: 0;
}
.customer-setting-description {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.customer-setting-description strong {
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: 17px;
  color: var(--text);
}
.customer-setting-description span {
  color: var(--muted);
  font-size: 13px;
}
.customer-setting-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.customer-setting-controls input {
  box-sizing: border-box;
  width: 112px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.customer-setting-controls input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.customer-setting-controls .primary {
  min-width: 100px;
}
.customer-setting-value {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .customer-settings .customer-setting-row {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .customer-setting-controls input {
    flex: 1;
    min-width: 0;
  }
}

/* Korisnički izbornici: isti raspored kao kod administratora. */
body.customer-shared-layout .content > .customer-device-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  margin: 0 0 24px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}

body.customer-shared-layout .customer-device-nav .nav-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  cursor: pointer;
}

body.customer-shared-layout .sidebar .customer-sidebar-nav a,
body.customer-shared-layout .sidebar .customer-brand {
  text-decoration: none;
}

body.customer-shared-layout .sidebar .customer-sidebar-nav a {
  color: var(--text);
}

body.customer-shared-layout .sidebar .customer-sidebar-nav a:hover,
body.customer-shared-layout .sidebar .customer-brand:hover {
  color: var(--accent);
}

/* Poravnanje cijena igara, kredita i broja rundi. */
body.customer-shared-layout .customer-settings .customer-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 198px;
  align-items: center;
  gap: 16px;
}

body.customer-shared-layout .customer-setting-controls {
  display: grid;
  grid-template-columns: 86px 100px;
  align-items: center;
  gap: 12px;
  width: 198px;
}

body.customer-shared-layout .customer-setting-controls input {
  width: 86px;
  height: 40px;
  padding: 7px 9px;
  font-size: 15px;
}

body.customer-shared-layout .customer-setting-controls .primary {
  width: 100px;
  min-width: 100px;
}

body.customer-shared-layout .customer-setting-value {
  justify-self: end;
}

@media (max-width: 560px) {
  body.customer-shared-layout .customer-settings .customer-setting-row {
    grid-template-columns: minmax(0, 1fr) 198px;
  }
}

@media (max-width: 430px) {
  body.customer-shared-layout .customer-settings .customer-setting-row {
    grid-template-columns: 1fr;
  }
  body.customer-shared-layout .customer-setting-value {
    justify-self: start;
  }
}

body.customer-shared-layout .customer-setting-controls input[type="number"] {
  text-align: center;
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

body.customer-shared-layout .customer-setting-value {
  font-family: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}

/* The same admin layout is used for customer pages. */
#nav [hidden], #machine-nav [hidden], #view [hidden] { display:none !important; }


.customer-card {
  padding: 0;
  overflow: hidden;
  background: var(--panel);
}

.customer-card[open] {
  border-color: rgba(38, 213, 199, .55);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.customer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, rgba(38,213,199,.10), transparent 70%), var(--panel);
}

.customer-summary::-webkit-details-marker {
  display: none;
}

.customer-summary:hover {
  background: linear-gradient(90deg, rgba(38,213,199,.18), transparent 75%), var(--panel2);
}

.customer-summary-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.customer-summary-main strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.customer-summary-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}

.customer-summary-arrow {
  color: var(--accent);
  font-size: 20px;
  font-weight: 800;
}

.customer-card-body {
  padding: 0 24px 24px;
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .customer-summary {
    padding: 17px 18px;
  }

  .customer-card-body {
    padding: 0 18px 18px;
  }
}


/* BESKAR customer controls and account label */
.customer-card-body .reset-label {
  gap: 8px;
  color: var(--text, #ecf8f7);
  font-size: 14px;
  font-weight: 700;
}

.customer-card-body select,
.customer-card-body input[type="number"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid #35575d;
  border-radius: 10px;
  background-color: #122125;
  color: #ecf8f7;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  padding: 11px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.customer-card-body select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2326d5c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.customer-card-body select option {
  background: #122125;
  color: #ecf8f7;
}

.customer-card-body select:hover,
.customer-card-body input[type="number"]:hover {
  border-color: #26d5c7;
}

.customer-card-body select:focus,
.customer-card-body input[type="number"]:focus {
  outline: 2px solid #26d5c7;
  outline-offset: 2px;
  border-color: #26d5c7;
  box-shadow: 0 0 0 4px rgba(38, 213, 199, .10);
}

.customer-card-body input[type="number"] {
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.customer-card-body .grid {
  gap: 16px 22px;
  margin-bottom: 24px;
}

.customer-card-body .grid .reset-label {
  max-width: none;
  margin: 8px 0;
}

.customer-card-body button[type="submit"] {
  min-height: 46px;
  padding: 11px 22px;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
}

.customer-summary-main {
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-summary-meta {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.customer-summary-machines {
  overflow-wrap: anywhere;
}

.customer-summary-arrow {
  flex-shrink: 0;
  transition: transform .15s ease;
}

.customer-card:not([open]) .customer-summary-arrow {
  transform: rotate(-90deg);
}

.sidebar .portal-account-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 12px;
  min-width: 0;
  text-align: left;
}

.portal-account-caption {
  color: var(--muted, #a4bbbd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

.portal-account-email {
  color: var(--accent, #26d5c7);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .customer-card-body select,
  .customer-card-body input[type="number"] {
    font-size: 16px;
  }

  .customer-card-body .grid {
    grid-template-columns: 1fr;
  }
}


/* BESKAR customer back button */
a.customer-back-link,
a.customer-back-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid var(--accent, #26d5c7);
  border-radius: 10px;
  background: var(--accent, #26d5c7);
  color: #081719;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}

a.customer-back-link:hover {
  background: #54e4d8;
  color: #081719;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(38, 213, 199, .18);
}

a.customer-back-link:focus-visible {
  outline: 2px solid var(--text, #ecf8f7);
  outline-offset: 3px;
}


/* BESKAR customer package navigation */
.sidebar a[href="/customer/packages"],
.sidebar a[href="/customer/packages"]:visited {
  display: block;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--text, #ecf8f7);
  font: inherit;
  font-weight: 600;
  text-decoration: none !important;
}

.sidebar a[href="/customer/packages"]:hover {
  color: var(--accent, #26d5c7);
  background: var(--panel2, #19282b);
  text-decoration: none !important;
}

.sidebar a[href="/customer/packages"]:focus-visible {
  outline: 2px solid var(--accent, #26d5c7);
  outline-offset: 2px;
}

main a[href="/customer/portal"]:not(.nav-item),
main a[href="/customer/portal"]:not(.nav-item):visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--accent, #26d5c7);
  border-radius: 10px;
  background: var(--accent, #26d5c7);
  color: #081719;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
  transition: background .15s ease, box-shadow .15s ease;
}

main a[href="/customer/portal"]:not(.nav-item):hover {
  background: #54e4d8;
  color: #081719;
  box-shadow: 0 4px 16px rgba(38, 213, 199, .18);
}

main a[href="/customer/portal"]:not(.nav-item):focus-visible {
  outline: 2px solid var(--text, #ecf8f7);
  outline-offset: 3px;
}


/* BESKAR separate subscription button */
.sidebar nav[aria-label="Pretplata"] {
  flex: 0 0 auto;
  padding: 14px 0;
  margin: 8px 0 16px;
  border-top: 1px solid var(--border, #294247);
  border-bottom: 1px solid var(--border, #294247);
}

.sidebar a[href="/customer/packages"],
.sidebar a[href="/customer/packages"]:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid var(--accent, #26d5c7);
  border-radius: 10px;
  background: rgba(38, 213, 199, .10);
  color: var(--accent, #26d5c7);
  font: inherit;
  font-weight: 800;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}

.sidebar a[href="/customer/packages"]:hover {
  background: var(--accent, #26d5c7);
  color: #081719;
}

.sidebar a[href="/customer/packages"]:focus-visible {
  outline: 2px solid var(--accent, #26d5c7);
  outline-offset: 3px;
}

/* Brisanje mapa */
.folder-heading-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.folder-heading-row > .machine-folder-toggle {
  flex:1;
  min-width:0;
  width:auto;
  margin:0;
}
.folder-delete-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 40px;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel2);
  color:var(--accent);
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.folder-delete-button:hover {
  color:var(--red);
  border-color:var(--red);
  background:rgba(255,133,140,.08);
}
.folder-delete-button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.folder-delete-button:disabled {
  opacity:.5;
  cursor:wait;
}
@media(max-width:720px) {
  .folder-delete-button {
    flex-basis:44px;
    width:44px;
    height:44px;
  }
}


/* Compact customers and machines */
main.content > .customer-card {
  display: inline-block;
  vertical-align: top;
  width: calc(33.333% - 16px);
  max-width: 430px;
  box-sizing: border-box;
  margin: 0 18px 18px 0;
  padding: 0;
}

main.content > .customer-card[open] {
  width: min(100%, 760px);
  max-width: 760px;
}

.customer-summary {
  min-height: 72px;
  padding: 16px 18px;
}

.customer-card-body {
  padding: 0 18px 20px;
}

.customer-summary-main strong {
  font-size: 15px;
}

.customer-summary-meta {
  font-size: 12px;
}

.customer-summary-machines {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-machine-card {
  min-height: 145px;
  padding: 16px;
  border-radius: 12px;
}

.portal-machine-title {
  font-size: 16px;
}

.portal-machine-open {
  font-size: 12px;
  margin-top: 8px;
}

.machine-folder {
  margin-bottom: 16px;
}

.machine-folder-card {
  min-height: 125px;
  padding: 12px;
}

.machine-folder-card .machine-folder-label {
  margin-top: 8px;
}

@media (max-width: 1050px) {
  main.content > .customer-card {
    width: calc(50% - 14px);
  }
}

@media (max-width: 720px) {
  main.content > .customer-card,
  main.content > .customer-card[open] {
    display: block;
    width: 100%;
    max-width: none;
    margin-right: 0;
  }

  .portal-machine-card,
  .machine-folder-card {
    min-height: 112px;
    padding: 13px;
  }
}


/* FORCE compact customer layout */
main.content .customer-card {
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(33.333% - 18px) !important;
  max-width: 390px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 18px 18px 0 !important;
  padding: 0 !important;
}

main.content .customer-card:not([open]) {
  height: 82px !important;
  overflow: hidden !important;
}

main.content .customer-card[open] {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  height: auto !important;
  overflow: visible !important;
}

main.content .customer-summary {
  min-height: 0 !important;
  padding: 14px 16px !important;
}

main.content .customer-card-body {
  padding: 0 16px 18px !important;
}

main.content .portal-machine-card,
main.content .machine-folder-card {
  min-height: 105px !important;
  padding: 12px !important;
}

@media (max-width: 1050px) {
  main.content .customer-card,
  main.content .customer-card[open] {
    width: calc(50% - 14px) !important;
    max-width: 520px !important;
  }
}

@media (max-width: 720px) {
  main.content .customer-card,
  main.content .customer-card[open] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
  }
}

/* Kompaktni popis aparata */
.portal-machine-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.portal-machine-card {
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 12px !important;
}

@media (max-width: 1050px) {
  .portal-machine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .portal-machine-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Kompaktne mape i aparati u Popisu aparata */
.machine-folder-panel {
  max-width: 1100px !important;
}

.machine-folder-groups {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

.machine-folder {
  min-width: 0 !important;
  margin: 0 !important;
}

.machine-folder-toggle {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 0.95rem !important;
}

.machine-folder .portal-machine-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.machine-folder .portal-machine-card {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px !important;
}

@media (max-width: 1050px) {
  .machine-folder-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .machine-folder-groups {
    grid-template-columns: 1fr !important;
  }
}


/* Aparati u mapama: dva po redu */
.machine-folder .portal-machine-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.machine-folder .portal-machine-card {
  padding: 10px !important;
  min-height: 0 !important;
}

@media (max-width: 720px) {
  .machine-folder .portal-machine-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Aparati se pune vodoravno koliko stane */
.machine-folder .portal-machine-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}


/* Završni raspored kartica aparata */
#view .machine-folder .portal-machine-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}

#view .machine-folder .portal-machine-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  #view .machine-folder .portal-machine-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  }
}

@media (max-width: 850px) {
  #view .machine-folder .portal-machine-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #view .machine-folder .portal-machine-grid {
    grid-template-columns: 1fr !important;
  }
}


/* hidden mora uvijek sakriti zatvorene mape */
#view .machine-folder .portal-machine-grid[hidden] {
  display: none !important;
}


/* Mape i kartice ne smiju prelaziti širinu glavnog prozora */
#view .machine-folder-groups {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#view .machine-folder {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#view .machine-folder .portal-machine-grid {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}

#view .machine-folder .portal-machine-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@media (max-width: 1050px) {
  #view .machine-folder-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  #view .machine-folder-groups {
    grid-template-columns: 1fr !important;
  }
}


/* Otvorena mapa zauzima cijeli red */
#view .machine-folder:has(.portal-machine-grid:not([hidden])) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  width: 100% !important;
  gap: 10px !important;
}


/* Fiksna veličina kartica aparata */
#view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 220px) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: 10px !important;
}

#view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-card {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  #view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-grid {
    grid-template-columns: 1fr !important;
  }

  #view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* Dodaj SSH ključ – izgled usklađen s portalom */
.ssh-bootstrap-panel {
  max-width: 520px !important;
}

.ssh-bootstrap-panel form {
  display: grid !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.ssh-bootstrap-panel label {
  margin-top: 4px !important;
  color: var(--muted) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
}

.ssh-bootstrap-panel input {
  width: 100% !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  font: inherit !important;
}

.ssh-bootstrap-panel input:focus {
  outline: 2px solid rgba(38, 213, 199, 0.35) !important;
  border-color: var(--accent) !important;
}

.ssh-bootstrap-panel button {
  width: fit-content !important;
  margin-top: 6px !important;
}

.ssh-bootstrap-panel .ad-result,
.ssh-bootstrap-panel .error {
  margin: 4px 0 0 !important;
}


/* Mape: pet kartica po redu */
#view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

#view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

@media (max-width: 1100px) {
  #view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 650px) {
  #view .machine-folder:has(.portal-machine-grid:not([hidden])) .portal-machine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* Uređene kartice u Informacijama */
.machine-list-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  max-width: 560px !important;
}

.machine-list-row > button:first-child {
  flex: 1 !important;
  min-height: 46px !important;
  padding: 11px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  text-align: left !important;
  font-weight: 600 !important;
  transition: border-color .15s ease, background .15s ease !important;
}

.machine-list-row > button:first-child:hover {
  border-color: var(--accent) !important;
  background: rgba(38, 213, 199, .08) !important;
}

.machine-info-edit {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--panel) !important;
  color: var(--accent) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.machine-info-edit:hover {
  border-color: var(--accent) !important;
  background: rgba(38, 213, 199, .1) !important;
}


/* Kompaktne kartice u Informacijama */
.machine-info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content)) !important;
  gap: 10px !important;
  align-items: start !important;
}

.machine-info-grid .machine-list-row {
  width: 220px !important;
  max-width: 220px !important;
  margin: 0 !important;
  gap: 6px !important;
}

.machine-info-grid .machine-list-row > button:first-child {
  min-width: 0 !important;
  width: 170px !important;
  min-height: 42px !important;
  padding: 9px 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.machine-info-grid .machine-info-edit {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  font-size: 17px !important;
}

@media (max-width: 650px) {
  .machine-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .machine-info-grid .machine-list-row {
    width: 100% !important;
    max-width: none !important;
  }
}


/* Grupna aktivacija aparata */
.batch-activation-row {
  display:grid;
  grid-template-columns:90px repeat(3,minmax(0,1fr));
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.batch-activation-row .reset-label { margin:0; min-width:0; }
.batch-activation-row input {
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-top:7px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel2,#102124);
  color:var(--text,#fff);
  font:inherit;
  font-weight:600;
}
.batch-activation-row input:focus {
  outline:2px solid var(--accent,#26d5c7);
  outline-offset:2px;
}
.batch-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}
.batch-actions[hidden] { display:none !important; }
@media(max-width:720px){
  .batch-activation-row { grid-template-columns:1fr; gap:10px; }
  .batch-actions button { width:100%; }
}


/* Neaktivni aparati nakon isteka pretplate */
body.customer-subscription-expired .portal-machine-card,
body.customer-subscription-expired .machine-folder-card {
  opacity: .42;
  filter: grayscale(1);
  cursor: default !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
}

body.customer-subscription-expired .portal-machine-card:hover,
body.customer-subscription-expired .portal-machine-card:focus,
body.customer-subscription-expired .portal-machine-card:focus-visible,
body.customer-subscription-expired .machine-folder-card:hover,
body.customer-subscription-expired .machine-folder-card:focus,
body.customer-subscription-expired .machine-folder-card:focus-visible {
  outline: none !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.customer-subscription-expired .machine-folder-open {
  pointer-events: none;
  cursor: default !important;
}


/* ==========================================================
   BESKAR SIMPLE ANALYTICS 2026-10-01
   ========================================================== */

.analysis-simple {
  display:grid;
  gap:16px;
}

.analysis-simple-top {
  padding:22px;
}

.analysis-simple-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.analysis-simple-heading h2,
.analysis-simple-machine-header h3,
.analysis-simple-card h2 {
  margin:0 0 5px;
}

.analysis-simple-period {
  display:grid;
  gap:6px;
  min-width:220px;
}

.analysis-simple-period select {
  min-height:42px;
}

.analysis-simple-machine-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:20px;
  margin-bottom:12px;
}

.analysis-simple-count {
  font-size:16px;
  white-space:nowrap;
}

.analysis-simple-machines {
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));
  gap:9px;
}

.analysis-simple-machine {
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
  cursor:pointer;
  background:rgba(255,255,255,.018);
}

.analysis-simple-machine:hover {
  background:rgba(255,255,255,.04);
}

.analysis-simple-machine input {
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.analysis-simple-machine-text {
  display:grid;
  gap:3px;
  min-width:0;
}

.analysis-simple-machine-text strong,
.analysis-simple-machine-text span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.analysis-simple-stats {
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}

.analysis-simple-stat {
  display:grid;
  gap:7px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.analysis-simple-stat strong {
  font-size:24px;
  line-height:1.15;
}

.analysis-simple-card {
  margin-bottom:16px;
}

.analysis-simple-bar-row {
  display:grid;
  gap:6px;
  margin:13px 0;
}

.analysis-simple-bar-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.analysis-simple-bar-track {
  height:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.analysis-simple-bar-fill {
  height:100%;
  border-radius:999px;
  background:var(--accent);
}

.analysis-simple-note {
  margin-top:0;
}

@media(max-width:850px) {
  .analysis-simple-stats {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px) {
  .analysis-simple-heading {
    display:grid;
  }

  .analysis-simple-period {
    width:100%;
  }

  .analysis-simple-machines {
    grid-template-columns:1fr;
  }

  .analysis-simple-stats {
    grid-template-columns:1fr;
  }
}