/*
 * layout.css - top bar, page container, brand (panel name), theme switch.
 */
/* leave room for the floating side panel on desktop */
@media (min-width: 821px) { body.panel { padding-left: 96px; } }

.topbar {
  position: sticky; top: 0; z-index: 25;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; min-height: 58px;
  background: var(--glass); border-bottom: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--seg-bg); color: var(--text);
}
.tb-btn:hover { filter: brightness(1.1); }
.who { color: var(--muted); font-weight: 600; padding: 0 4px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The formatted panel name: "Mikrotik" bold gradient, "Voucher Reset" small spaced capitals */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo {
  width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 4px 12px rgba(63, 111, 216, .35);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-1 {
  font-size: 17px; font-weight: 800; letter-spacing: .2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.brand-2 { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.brand-inline { font-size: 17px; }

/* Light | System | Dark switch */
.theme-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--seg-bg); }
.theme-seg button {
  width: 32px; height: 30px; border: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted);
}
/* the active choice is highlighted (theme.js sets data-theme-pref on <html>) */
html[data-theme-pref="light"]  .theme-seg [data-theme-set="light"],
html[data-theme-pref="system"] .theme-seg [data-theme-set="system"],
html[data-theme-pref="dark"]   .theme-seg [data-theme-set="dark"] {
  background: var(--surface-solid); color: var(--primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* page container + page title row */
.page { padding: 18px 16px 40px; max-width: 1280px; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { font-size: 24px; font-weight: 800; }

/* dark overlay behind the phone menu */
#overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 45; }
#overlay.show { display: block; }

@media (max-width: 520px) {
  .brand-2 { display: none; }
  .who { display: none; }
}