/* ============================================================
   Gizmos Xtream Plus Panel — Modern UI
   Light / Dark themes via html[data-theme]
   ============================================================ */

:root {
  color-scheme: light;
  --page-bg-1: #f0f4f9;
  --page-bg-2: #e4ecf6;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-strong: #ffffff;
  --sidebar-bg: rgba(255, 255, 255, 0.96);
  --text-main: #152033;
  --text-soft: #5a6b82;
  --heading: #1a3a62;
  --border: rgba(43, 85, 128, 0.16);
  --input-bg: #ffffff;
  --input-text: #152033;
  --link: #1a6bb5;
  --shadow: rgba(31, 55, 86, 0.12);
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --table-heading: #2a4d72;
  --table-text: #1d2a3a;
  --muted-readable: #55677c;
  --alert-info-text: #174b78;
  --alert-success-text: #155b3b;
  --alert-error-text: #8a1f2d;
  --pill-on-text: #0f5b38;
  --pill-off-text: #8a1f2d;
  --nav-hover: rgba(37, 99, 235, 0.08);
  --nav-active-bg: rgba(37, 99, 235, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg-1: #0a1422;
  --page-bg-2: #0f1e32;
  --surface: rgba(18, 36, 62, 0.72);
  --surface-strong: #132840;
  --sidebar-bg: rgba(10, 18, 34, 0.92);
  --text-main: #e8eef6;
  --text-soft: #a8bdd4;
  --heading: #b8d4f0;
  --border: rgba(120, 180, 255, 0.18);
  --input-bg: rgba(10, 22, 42, 0.7);
  --input-text: #e8eef6;
  --link: #6ab0ff;
  --shadow: rgba(0, 0, 0, 0.45);
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --table-heading: #c8e0ff;
  --table-text: #e8f0fa;
  --muted-readable: #b0c4d8;
  --alert-info-text: #c8e0ff;
  --alert-success-text: #b8f0d4;
  --alert-error-text: #ffc0c8;
  --pill-on-text: #a8f0d0;
  --pill-off-text: #ffc0c8;
  --nav-hover: rgba(74, 154, 255, 0.12);
  --nav-active-bg: rgba(74, 154, 255, 0.18);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden;
  font-family: var(--font);
  color: var(--text-main);
  background: linear-gradient(160deg, var(--page-bg-1), var(--page-bg-2));
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}

a { color: var(--link); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-soft);
  font-size: 0.9rem;
}

input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  background: var(--input-bg);
  color: var(--input-text);
  margin-bottom: 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

input::placeholder, textarea::placeholder {
  color: var(--muted-readable);
  opacity: 0.85;
}

select option {
  background: var(--surface-strong);
  color: var(--input-text);
}

/* ---------- Buttons ---------- */
/* Base control chrome — text color set per variant below */
button, .btn, a.btn, .api-link, .secondary, a.secondary, .small, a.small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #ffffff;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  letter-spacing: 0.01em;
}

button:hover, .btn:hover, a.btn:hover, .api-link:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  text-decoration: none;
  color: #ffffff;
}

button:active, .btn:active, a.btn:active { transform: translateY(0); }

/* Filled actions: always white label on colored background (Day + Night) */
.btn-primary, a.btn-primary, button.btn-primary,
.btn:not(.btn-secondary):not(.secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.mobile-menu-toggle):not(.theme-option),
a.btn:not(.btn-secondary):not(.secondary):not(.btn-success):not(.btn-danger):not(.btn-warning),
button.btn:not(.btn-secondary):not(.secondary):not(.mobile-menu-toggle):not(.theme-option),
.api-link {
  background: linear-gradient(145deg, #2563eb, #1d4ed8);
  color: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.35);
  text-decoration: none !important;
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover,
a.btn:not(.btn-secondary):not(.secondary):hover,
.api-link:hover {
  background: linear-gradient(145deg, #3b82f6, #2563eb);
  color: #ffffff !important;
}

.btn-success, a.btn-success, button.btn-success {
  background: linear-gradient(145deg, #16a34a, #15803d);
  color: #ffffff !important;
  border: 1px solid rgba(22, 163, 74, 0.35);
}
.btn-success:hover, a.btn-success:hover, button.btn-success:hover {
  background: linear-gradient(145deg, #22c55e, #16a34a);
  color: #ffffff !important;
}

.btn-danger, a.btn-danger, button.btn-danger, .danger, a.danger, button.danger {
  background: linear-gradient(145deg, #dc2626, #b91c1c);
  color: #ffffff !important;
  border: 1px solid rgba(220, 38, 38, 0.35);
}
.btn-danger:hover, a.btn-danger:hover, button.btn-danger:hover,
.danger:hover, a.danger:hover, button.danger:hover {
  background: linear-gradient(145deg, #ef4444, #dc2626);
  color: #ffffff !important;
}

.btn-warning, a.btn-warning, button.btn-warning {
  background: linear-gradient(145deg, #d97706, #b45309);
  color: #ffffff !important;
  border: 1px solid rgba(217, 119, 6, 0.35);
}
.btn-warning:hover, a.btn-warning:hover, button.btn-warning:hover {
  background: linear-gradient(145deg, #f59e0b, #d97706);
  color: #ffffff !important;
}

/* Light / outline controls: dark text in Day, light text in Night */
.btn-secondary, a.btn-secondary, button.btn-secondary, .secondary, a.secondary {
  background: var(--surface-strong) !important;
  color: var(--heading) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none;
}
.btn-secondary:hover, a.btn-secondary:hover, button.btn-secondary:hover,
.secondary:hover, a.secondary:hover {
  background: var(--nav-hover) !important;
  border-color: var(--primary) !important;
  color: var(--heading) !important;
  box-shadow: none;
}

.small, a.small {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 6px;
}

/* Card link buttons: white on filled colors only */
.card a.btn-primary,
.card a.btn-success,
.card a.btn-danger,
.card a.btn-warning,
.content a.btn-primary,
.content a.btn-success,
.content a.btn-danger,
.content a.btn-warning,
.card a.btn:not(.btn-secondary):not(.secondary),
.content a.btn:not(.btn-secondary):not(.secondary) {
  color: #ffffff !important;
  text-decoration: none !important;
}

.card a.btn-secondary,
.card a.secondary,
.content a.btn-secondary,
.content a.secondary {
  color: var(--heading) !important;
  background: var(--surface-strong) !important;
}

/* ---------- Layout shell ---------- */
.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.sidebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  margin: 0;
  flex-shrink: 0;
}

.brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 40px;
  border-radius: 8px;
}

.brand-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

.brand-subtitle {
  display: none;
  color: var(--text-soft);
  font-size: 0.75rem;
}

.mobile-menu-toggle {
  display: none;
  margin-left: auto;
  background: var(--surface-strong) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}

.mobile-menu-toggle:hover {
  background: var(--nav-hover) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
  transform: none;
}

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  margin-left: auto;
  flex-shrink: 0;
}

.theme-option {
  appearance: none;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--text-soft) !important;
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none !important;
  transform: none !important;
}

.theme-option:hover {
  background: var(--nav-hover) !important;
  color: var(--text-main) !important;
  transform: none !important;
  box-shadow: none !important;
}

.theme-option[aria-pressed="true"] {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.35rem;
  width: 100%;
  margin-top: 0.35rem;
  justify-content: flex-start;
  flex: 1 1 100%;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-soft) !important;
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}

.nav a:hover {
  background: var(--nav-hover);
  color: var(--heading) !important;
}

.nav a.nav-admin {
  border-left: 3px solid var(--primary);
  padding-left: 0.65rem;
  color: var(--success) !important;
  font-weight: 700;
}

.content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.5rem;
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.02em;
}

h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading);
}

p { margin: 0.4rem 0 0; color: var(--text-soft); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px var(--shadow);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.2s;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.card:hover {
  box-shadow: 0 12px 36px var(--shadow);
}

.card h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.15rem;
  color: var(--heading);
}

.card label { color: var(--text-soft); }

.card a { color: var(--link); }
.card a:hover { color: var(--primary-hover); }

.narrow { max-width: 560px; }

.grid.two {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1.1rem;
}

.checkline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.checkline input { width: auto; margin: 0; }

.actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- Alerts ---------- */
.alert {
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border: 1px solid;
  backdrop-filter: blur(4px);
}

.alert.success {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.35);
  color: var(--alert-success-text);
}

.alert.error {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
  color: var(--alert-error-text);
}

.alert.info {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--alert-info-text);
}

/* ---------- Tables ---------- */
.table-wrap, .responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  padding: 0.7rem 0.65rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}

th {
  color: var(--table-heading);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

td { color: var(--table-text); }

.right { text-align: right; }

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
}
.action-buttons form { display: inline; margin: 0; }

/* Inline forms inside table cells (credit adjust, etc.) */
.inline-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.inline-controls select,
.inline-controls input[type="number"],
.inline-controls input[type="text"] {
  width: auto;
  margin-bottom: 0;
  min-width: 0;
}

.inline-controls input[type="number"] {
  max-width: 5.5rem;
}

.inline-controls input[type="text"] {
  flex: 1 1 8rem;
  min-width: 6rem;
}

.inline-controls .btn,
.inline-controls button {
  flex: 0 0 auto;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.row-actions form {
  display: inline;
  margin: 0;
}

/* ---------- Pills & code ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.pill.on {
  background: rgba(22, 163, 74, 0.18);
  color: var(--pill-on-text);
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.pill.off {
  background: rgba(220, 38, 38, 0.15);
  color: var(--pill-off-text);
  border: 1px solid rgba(220, 38, 38, 0.25);
}

code {
  background: var(--surface-strong);
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-size: 0.85em;
  border: 1px solid var(--border);
  white-space: nowrap;
  max-width: 100%;
  overflow-x: auto;
  display: inline-block;
}

.empty {
  color: var(--text-soft);
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.muted, .help-text, .hint {
  color: var(--muted-readable);
  font-size: 0.9rem;
}

/* ---------- Submenu back ---------- */
.submenu-navigation-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px var(--shadow);
}

.submenu-navigation-card .submenu-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0.65rem 1rem;
}

/* ---------- Login page ---------- */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: linear-gradient(160deg, var(--page-bg-1), var(--page-bg-2));
}

.login-card, .login-container {
  width: min(100%, 420px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  box-shadow: 0 12px 40px var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
}

.login-card .logo-container,
.login-container .logo-container {
  margin-bottom: 0.75rem;
}

.login-card .logo,
.login-container .logo,
.login-logo {
  display: block;
  width: min(70vw, 140px);
  max-height: 140px;
  object-fit: contain;
  margin: 0 auto 0.5rem;
}

.login-card h1, .login-container h2 {
  margin: 0.4rem 0 1.25rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--heading);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.6rem;
}

.login-card label, .login-container label {
  text-align: left;
  margin-top: 0.65rem;
}

.login-card button, .login-container button {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.7rem;
  font-size: 0.95rem;
}

.login-theme-wrap {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;
}

.hint {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-soft);
}

/* ---------- Images ---------- */
.card img, .content img {
  max-width: 100%;
  height: auto;
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .sidebar {
    flex-direction: column;
    align-items: stretch;
    padding: 0.7rem 0.9rem;
    position: relative;
  }

  .brand {
    width: 100%;
    justify-content: flex-start;
  }

  .brand-logo {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    margin-left: 0;
  }

  .theme-switcher {
    width: 100%;
    justify-content: center;
    margin: 0.35rem 0 0;
  }

  .nav {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.5rem;
  }

  .sidebar.menu-open .nav {
    display: grid;
  }

  .nav a {
    justify-content: center;
    text-align: center;
    white-space: normal;
    border: 1px solid var(--border);
    background: var(--surface);
    min-height: 42px;
    padding: 0.5rem 0.4rem;
  }

  .content {
    padding: 1rem 0.85rem 2rem;
  }

  .card {
    padding: 1.1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
  }

  h1 { font-size: 1.4rem; }

  .grid.two {
    grid-template-columns: 1fr;
  }

  .login-theme-wrap {
    position: static;
    margin: 0 0 1rem;
    display: flex;
    justify-content: center;
  }

  .login-card, .login-container {
    width: 100%;
    padding: 1.35rem;
  }

  .submenu-navigation-card {
    display: block;
  }
  .submenu-navigation-card .submenu-back-button {
    width: 100%;
  }

  /* ---- Mobile card tables (left-to-right, not letter-stacked) ---- */
  .table-wrap {
    overflow-x: visible;
  }

  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap th,
  .table-wrap td,
  .table-wrap tr {
    display: block;
    width: 100%;
  }

  .table-wrap thead {
    display: none;
  }

  .table-wrap tbody tr {
    margin-bottom: 0.9rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-strong);
    box-shadow: 0 4px 14px var(--shadow);
  }

  .table-wrap tbody tr:last-child {
    margin-bottom: 0;
  }

  .table-wrap td {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .table-wrap td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .table-wrap td:first-child {
    padding-top: 0;
  }

  /* Label on the left, value on the right — normal reading order */
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 9rem;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-soft);
    text-align: left;
    line-height: 1.35;
    padding-top: 0.15rem;
  }

  .table-wrap td[data-label] {
    justify-content: flex-start;
  }

  .table-wrap td[data-label] > *:not(.inline-controls):not(.row-actions):not(.action-buttons):not(form) {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
  }

  /* Full-width blocks for forms / action groups inside a cell */
  .table-wrap td[data-label] .inline-controls,
  .table-wrap td[data-label] .row-actions,
  .table-wrap td[data-label] .action-buttons,
  .table-wrap td[data-label] form {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 0.35rem;
    text-align: left;
  }

  /* Text-only value still sits on the right of the label */
  .table-wrap td[data-label]:not(:has(.inline-controls, .row-actions, .action-buttons, form)) {
    justify-content: space-between;
    text-align: right;
  }

  .table-wrap td[data-label]:not(:has(.inline-controls, .row-actions, .action-buttons, form))::before {
    text-align: left;
  }

  .inline-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-controls select,
  .inline-controls input[type="number"],
  .inline-controls input[type="text"],
  .inline-controls .btn,
  .inline-controls button {
    width: 100%;
    max-width: none;
    flex: none;
  }

  .row-actions,
  .action-buttons {
    justify-content: stretch;
  }

  .row-actions .btn,
  .row-actions button,
  .row-actions a.btn,
  .action-buttons .btn,
  .action-buttons button,
  .action-buttons a.btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  /* Create / edit forms: full-width stacked fields */
  .card form > div[style*="display:flex"],
  .form-row-inline {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .card form input[type="text"],
  .card form input[type="password"],
  .card form input[type="number"],
  .card form input[type="url"],
  .card form select,
  .card form textarea {
    width: 100%;
  }

  .card form .btn,
  .card form button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .nav {
    grid-template-columns: 1fr;
  }
  .brand-title { font-size: 0.95rem; }

  .table-wrap tbody tr {
    padding: 0.75rem 0.8rem;
  }

  .table-wrap td {
    padding: 0.5rem 0;
  }
}

/* ===== 2026 sidebar/layout repair ===== */
@media (min-width: 761px) {
  .shell { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh; overflow:visible; }
  .sidebar { width:260px; height:100vh; position:sticky; top:0; align-self:start; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:.8rem; padding:1rem; border-right:1px solid var(--border); border-bottom:0; overflow-y:auto; overflow-x:hidden; }
  .brand { padding:.25rem .25rem .65rem; }
  .brand-subtitle { display:block; }
  .theme-switcher { width:100%; margin:0; justify-content:center; }
  .nav { width:100%; display:flex; flex-direction:column; flex-wrap:nowrap; gap:.25rem; margin:0; }
  .nav a { width:100%; min-height:40px; padding:.55rem .7rem; white-space:normal; }
  .nav a.active { background:var(--nav-active-bg); color:var(--heading)!important; font-weight:800; box-shadow:inset 3px 0 0 var(--primary); }
  .content { max-width:none; margin:0; padding:1.5rem clamp(1rem,2.5vw,2.25rem) 2.5rem; overflow:hidden; }
}
@media (max-width:760px) {
  .sidebar { position:sticky; top:0; z-index:1000; }
  .nav a.active { background:var(--nav-active-bg); color:var(--heading)!important; border-color:var(--primary); font-weight:800; }
}
/* Prevent long URLs/values and wide forms from breaking pages. */
.content, .card, .table-wrap, .responsive-table { min-width:0; }
td, .help-text, .hint, .alert { overflow-wrap:anywhere; }
input, select, textarea, button { max-width:100%; }


/* ===== Mobile sidebar final override ===== */
@media (max-width: 760px) {
  .shell { display:block !important; min-height:100vh; overflow-x:hidden; }
  .sidebar {
    position:sticky !important; top:0; z-index:1000;
    width:100% !important; height:auto !important;
    display:grid !important; grid-template-columns:minmax(0,1fr) auto;
    align-items:center !important; gap:.55rem .7rem !important;
    padding:.65rem .8rem !important;
    border-right:0 !important; border-bottom:1px solid var(--border) !important;
    overflow:visible !important;
  }
  .brand { width:auto !important; min-width:0; padding:0 !important; }
  .brand-logo { width:34px !important; height:34px !important; flex-basis:34px !important; }
  .brand-subtitle { display:none !important; }
  .mobile-menu-toggle { display:inline-flex !important; margin:0 !important; justify-self:end; min-width:88px; }
  .theme-switcher { grid-column:1 / -1; width:auto !important; justify-self:start; margin:0 !important; }
  .nav {
    grid-column:1 / -1;
    display:none !important;
    width:100% !important; max-height:70vh; overflow-y:auto;
    grid-template-columns:1fr !important; gap:.35rem !important;
    margin:.15rem 0 0 !important; padding:.25rem 0 .15rem;
  }
  .sidebar.menu-open .nav { display:grid !important; }
  .nav a {
    width:100% !important; justify-content:flex-start !important; text-align:left !important;
    min-height:42px; padding:.6rem .75rem !important;
    border:1px solid var(--border); background:var(--surface); white-space:normal !important;
  }
  .nav a.active { box-shadow:inset 3px 0 0 var(--primary); }
  .content { width:100% !important; padding:1rem .85rem 2rem !important; }
}
/* ===== ONEKEEPER premium interface ===== */
:root,html[data-theme="dark"]{--page-bg-1:#03101e;--page-bg-2:#071a2d;--surface:#071c30;--surface-strong:#0a2239;--sidebar-bg:#041425;--text-main:#eaf4ff;--text-soft:#91a9c2;--heading:#fff;--border:#123a5d;--input-bg:#071a2c;--input-text:#eaf4ff;--link:#55b9ff;--primary:#0788ff;--primary-hover:#22a2ff;--nav-hover:#0a2946;--nav-active-bg:#086bd4;--shadow:rgba(0,0,0,.35)}
body{background:radial-gradient(circle at 80% 0,rgba(0,118,255,.16),transparent 28%),linear-gradient(145deg,#020b14,#07192b 55%,#03111f);background-attachment:fixed}
@media(min-width:761px){.shell{grid-template-columns:282px minmax(0,1fr)}.sidebar{width:282px;background:linear-gradient(180deg,#06182a,#03111f);border-right:1px solid #103553;padding:18px 14px}.content{padding:0!important}.page-inner{padding:22px 28px 40px}.brand{padding:2px 8px 15px}.brand-logo{width:58px;height:58px;flex-basis:58px}.brand-title{font-size:1.25rem;color:#2cb7ff;letter-spacing:.02em}.brand-subtitle{display:block;color:#d9eaff}.nav{gap:2px}.nav>a,.app-menu summary{min-height:42px;border-radius:8px;padding:9px 11px;color:#d9eaff;display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}.nav>a:hover,.app-menu summary:hover{background:#0a2946;text-decoration:none;color:#fff}.nav>a.active{background:linear-gradient(90deg,#0788ff,#0665d4);color:#fff!important;box-shadow:none}.nav-icon{width:24px;text-align:center;color:#65c5ff;font-size:18px}.nav-section{font-size:11px;color:#45baff;letter-spacing:.08em;padding:15px 10px 6px}.app-menu{border:1px solid transparent;border-radius:9px;overflow:hidden}.app-menu[open]{background:#061a2d;border-color:#0b4e82}.app-menu summary{list-style:none}.app-menu summary::-webkit-details-marker{display:none}.app-menu .chev{margin-left:auto;font-size:20px;transition:.2s}.app-menu[open] .chev{transform:rotate(90deg)}.app-submenu{padding:2px 8px 9px 46px}.app-submenu a{display:block;color:#b9d1e7;padding:6px 2px;font-size:13px}.app-submenu a:hover{color:#49bdff;text-decoration:none}.logout-link{color:#ff4b57!important;margin-top:8px;border-top:1px solid #12314b;border-radius:0!important;padding-top:16px!important}}
.ok-topbar{height:68px;border-bottom:1px solid #12314b;background:rgba(3,15,27,.92);display:flex;align-items:center;padding:0 28px;gap:20px;position:sticky;top:0;z-index:90;backdrop-filter:blur(14px)}.desktop-collapse{width:42px;height:42px;padding:0;background:#0b2740;border:1px solid #17486f}.top-search{width:min(340px,38vw);background:#0a2238;border:1px solid #17405f;color:#7595b1;padding:10px 14px;border-radius:8px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px;font-weight:600}.admin-chip{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#168cf2}.welcome{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.welcome h1{font-size:2rem;margin:0;color:#fff}.welcome h1 em{font-style:italic;color:#20aefb}.welcome p{margin:2px 0;color:#a8bfd4}.date-card{border:1px solid #164b75;background:#071e34;border-radius:9px;padding:10px 15px;text-align:right;color:#a9c4dd;font-size:13px}.ok-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.ok-stat{min-height:110px;border-radius:12px;border:1px solid;display:flex;align-items:center;padding:17px;gap:14px;box-shadow:inset 0 0 30px rgba(0,0,0,.12)}.ok-stat.blue{background:linear-gradient(135deg,#073f7d,#082c54);border-color:#0788ff}.ok-stat.green{background:linear-gradient(135deg,#075b40,#073825);border-color:#12bd78}.ok-stat.purple{background:linear-gradient(135deg,#4a168c,#291153);border-color:#a13cff}.ok-stat.orange{background:linear-gradient(135deg,#805100,#4c3100);border-color:#f3a500}.stat-icon{font-size:30px;width:52px;height:52px;border-radius:10px;background:rgba(255,255,255,.09);display:grid;place-items:center}.ok-stat div{display:flex;flex-direction:column}.ok-stat small{font-weight:700;font-size:15px}.ok-stat strong{font-size:28px;line-height:1.15}.ok-stat div span{font-size:12px;color:#c0d3e4}.ok-panel{background:linear-gradient(145deg,rgba(7,29,49,.96),rgba(5,22,38,.96));border:1px solid #123e61;border-radius:12px;padding:15px 18px;margin-bottom:16px}.ok-panel h2{margin:0;color:#fff;font-size:18px}.ok-panel>p{margin:0 0 13px;color:#9db5ca;font-size:13px}.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.quick-grid a{min-height:82px;border:1px solid #174667;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:24px;color:#55bdff;background:#092139}.quick-grid a b{font-size:12px;color:#e9f5ff}.quick-grid a:hover{text-decoration:none;background:#0d2b49}.dash-two{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}.fake-chart{height:220px;border-left:1px solid #1c4666;border-bottom:1px solid #1c4666;display:flex;align-items:flex-end;justify-content:space-around;padding:15px 10px 0;background:repeating-linear-gradient(to top,transparent 0,transparent 43px,rgba(70,130,170,.12) 44px)}.fake-chart i{width:8%;background:linear-gradient(#17a7ff,#0864c8);border-radius:6px 6px 0 0;box-shadow:0 0 16px rgba(0,140,255,.25)}.control-list a{display:flex;justify-content:space-between;padding:13px;border-bottom:1px solid #153b59;color:#e9f5ff}.control-list a:hover{text-decoration:none;background:#0b2945}.content .card{background:linear-gradient(145deg,rgba(7,29,49,.96),rgba(5,22,38,.96));border:1px solid #123e61;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,rgba(0,134,255,.28),transparent 30%),radial-gradient(circle at 50% 100%,#0b4d86,transparent 45%),linear-gradient(#020914,#04192c)}.login-page:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 85%,transparent 0 22%,rgba(0,128,255,.12) 23% 24%,transparent 25%);pointer-events:none}.login-card{width:min(410px,calc(100vw - 30px));background:rgba(3,16,29,.88)!important;border:1px solid #17659b!important;border-radius:18px!important;padding:30px!important;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 50px rgba(0,128,255,.12)!important;backdrop-filter:blur(18px)}.login-card h1{color:#fff!important;text-align:center;margin:8px 0 4px}.login-card h1:after{content:"Streaming Control Panel";display:block;font-size:12px;color:#7dbce7;font-weight:500;margin-top:3px}.login-logo{width:96px!important;height:96px!important}.login-card button[type=submit]{width:100%;background:linear-gradient(90deg,#0788ff,#00a8ff);min-height:44px}.login-theme-wrap{display:none!important}
@media(max-width:1100px){.ok-stats{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(3,1fr)}.dash-two{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{background:#041425!important}.page-inner{padding:15px 12px 30px}.ok-topbar{height:58px;padding:0 12px}.desktop-collapse,.top-search{display:none}.top-actions>span:first-child{display:none}.welcome{align-items:flex-start}.welcome h1{font-size:1.45rem}.date-card{display:none}.ok-stats{grid-template-columns:repeat(2,1fr);gap:9px}.ok-stat{min-height:92px;padding:11px;gap:9px}.stat-icon{width:40px;height:40px;font-size:21px}.ok-stat strong{font-size:22px}.quick-grid{grid-template-columns:repeat(2,1fr)}.app-menu summary{padding:10px;border:1px solid #123e61}.app-submenu{padding-left:35px}.nav-section{grid-column:1/-1}.nav .app-menu{width:100%}.brand-title{color:#2cb7ff}.theme-switcher{display:none!important}}

/* ===== ONEKEEPER responsive / overlap repair v2 ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
.shell,.content,.page-inner,.card,.ok-panel,.table-wrap{min-width:0;max-width:100%}
.content{min-width:0!important}
.page-inner{width:100%;max-width:1600px;margin:0 auto}
.brand{min-width:0}.brand>div{min-width:0}.brand-title,.brand-subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav>a,.app-menu summary{min-width:0}.nav>a>span:not(.nav-icon):not(.chev),.app-menu summary>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-submenu a{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.ok-topbar{min-width:0}.top-actions{min-width:0}.top-actions span{white-space:nowrap}.top-search{min-width:0}
.ok-stat{min-width:0}.ok-stat div{min-width:0}.ok-stat small,.ok-stat span{overflow-wrap:anywhere}
.quick-grid a{min-width:0;text-align:center}.quick-grid a b{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
input,select,textarea,button{max-width:100%;font:inherit}
table{max-width:100%}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
td,th{overflow-wrap:anywhere}

@media (max-width:1280px) and (min-width:761px){
 .shell{grid-template-columns:240px minmax(0,1fr)}.sidebar{width:240px;padding:14px 10px}.brand-title{font-size:1.05rem}.brand-subtitle{font-size:.72rem}.brand-logo{width:48px;height:48px;flex-basis:48px}.nav>a,.app-menu summary{font-size:13px;padding:8px}.app-submenu{padding-left:36px}.page-inner{padding:18px}.ok-topbar{padding:0 18px}.ok-stats{gap:10px}.ok-stat{padding:13px}.stat-icon{width:44px;height:44px}.ok-stat strong{font-size:24px}
}
@media (max-width:900px) and (min-width:761px){
 .shell{grid-template-columns:210px minmax(0,1fr)}.sidebar{width:210px}.brand-subtitle{display:none}.nav-icon{width:19px;font-size:15px}.nav>a,.app-menu summary{font-size:12px}.app-submenu{padding-left:29px}.ok-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.top-actions>span:first-child{display:none}
}
@media (max-width:760px){
 .shell{display:block!important}.sidebar{width:100%!important;height:auto!important;max-height:none!important;position:sticky!important;top:0!important;padding:10px 12px!important;border-right:0!important;border-bottom:1px solid #103553!important;overflow:visible!important}.brand{padding:0!important;min-height:48px}.brand-logo{width:42px!important;height:42px!important;flex-basis:42px!important}.brand-title{font-size:1rem!important}.brand-subtitle{font-size:.68rem!important}.mobile-menu-toggle{display:block!important;width:100%;margin-top:8px;min-height:40px}.nav{display:none!important;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 70px);overflow-y:auto;overflow-x:hidden;background:#041425;padding:10px 12px 18px;box-shadow:0 18px 35px rgba(0,0,0,.45)}.sidebar.menu-open .nav{display:block!important}.nav>a,.app-menu summary{width:100%!important;min-height:44px!important;margin:3px 0!important;padding:10px 11px!important;font-size:14px!important}.app-menu{width:100%!important;margin:3px 0}.app-submenu{padding:3px 8px 9px 39px!important}.app-submenu a{font-size:13px!important;padding:7px 2px!important}.nav-section{padding:13px 8px 5px!important}.content{padding:0!important;width:100%!important}.page-inner{padding:14px 10px 28px!important}.ok-topbar{position:relative!important;height:54px!important;padding:0 10px!important;gap:8px!important}.top-actions{margin-left:auto;gap:7px;font-size:12px}.admin-chip{width:32px;height:32px}.welcome{display:block!important;margin-bottom:13px}.welcome h1{font-size:1.35rem!important;line-height:1.15}.welcome p{font-size:.85rem}.ok-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.ok-stat{min-height:86px!important;padding:10px!important;gap:8px!important}.stat-icon{width:36px!important;height:36px!important;font-size:18px!important;flex:0 0 36px}.ok-stat small{font-size:12px!important}.ok-stat strong{font-size:20px!important}.ok-stat div span{font-size:10px!important}.ok-panel{padding:12px!important}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.quick-grid a{min-height:72px!important;font-size:20px!important;padding:7px}.dash-two{grid-template-columns:minmax(0,1fr)!important}.fake-chart{height:180px;overflow:hidden}.card{padding:12px}.row,.form-row{max-width:100%}
}
@media (max-width:420px){
 .page-inner{padding-left:8px!important;padding-right:8px!important}.ok-stats{grid-template-columns:1fr!important}.ok-stat{min-height:78px!important}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.top-actions>span:not(.admin-chip):not(:last-child){display:none}.ok-panel h2{font-size:16px}.login-card{width:calc(100vw - 20px)!important;padding:20px 16px!important}.login-logo{width:76px!important;height:76px!important}
}

/* ===== ONEKEEPER settings accordion workspace v3 ===== */
.settings-accordion-page .settings-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:12px 14px;background:linear-gradient(145deg,#071d31,#051626);border:1px solid #123e61;border-radius:12px}.settings-toolbar strong{color:#fff;font-size:15px}.settings-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}.settings-toolbar button{border:1px solid #17659b;background:#092b49;color:#dff3ff;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:700}.settings-toolbar button:hover{background:#0c3b63}.settings-accordion-page section.card.ok-accordion{padding:0!important;overflow:hidden;margin-bottom:10px}.ok-accordion-head{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;background:linear-gradient(90deg,rgba(8,39,65,.98),rgba(6,28,48,.98));border:0;color:#fff;text-align:left;cursor:pointer}.ok-accordion-head:hover{background:linear-gradient(90deg,#0a3457,#082945)}.ok-accordion-icon{width:38px;height:38px;flex:0 0 38px;border-radius:9px;display:grid;place-items:center;background:#0b79df;color:#fff;font-size:18px}.ok-accordion-title{min-width:0;flex:1}.ok-accordion-title b{display:block;font-size:16px;line-height:1.25;overflow-wrap:anywhere}.ok-accordion-title small{display:block;margin-top:2px;color:#8fb1ca;font-size:11px}.ok-accordion-chevron{font-size:18px;transition:transform .2s ease;color:#64c5ff}.ok-accordion.open>.ok-accordion-head .ok-accordion-chevron{transform:rotate(180deg)}.ok-accordion-body{display:none;padding:16px;border-top:1px solid #123e61;min-width:0}.ok-accordion.open>.ok-accordion-body{display:block}.ok-accordion-body>h2:first-child{display:none}.ok-accordion-body input:not([type=checkbox]):not([type=radio]),.ok-accordion-body select,.ok-accordion-body textarea{width:100%;min-width:0}.ok-accordion-body .grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}.ok-accordion-body form{min-width:0}.ok-accordion-body code{white-space:normal;overflow-wrap:anywhere}.ok-accordion-body .table-wrap{width:100%;overflow-x:auto}
@media(max-width:760px){.settings-accordion-page .settings-toolbar{position:sticky;top:58px;z-index:20;padding:9px 10px}.settings-toolbar strong{font-size:13px}.settings-toolbar-actions button{padding:7px 9px;font-size:12px}.ok-accordion-head{padding:12px 11px;gap:9px}.ok-accordion-icon{width:34px;height:34px;flex-basis:34px;font-size:16px}.ok-accordion-title b{font-size:14px}.ok-accordion-title small{font-size:10px}.ok-accordion-body{padding:12px 10px}.ok-accordion-body .grid{grid-template-columns:1fr!important}.ok-accordion-body .btn,.ok-accordion-body button{max-width:100%;white-space:normal}.ok-accordion-body [style*="min-width"]{min-width:0!important}.ok-accordion-body [style*="display:flex"]{flex-wrap:wrap!important}}
@media(max-width:420px){.settings-toolbar{align-items:flex-start!important;flex-direction:column}.settings-toolbar-actions{width:100%}.settings-toolbar-actions button{flex:1}.ok-accordion-title small{display:none}}
.app-submenu a[aria-current="location"]{background:#0c416c;color:#fff!important;border-left:3px solid #40bdff;border-radius:4px;padding-left:8px;font-weight:700}
.content h2,.content h3,.content section[id],.ok-accordion-head{scroll-margin-top:86px}
@media(max-width:760px){.content h2,.content h3,.content section[id],.ok-accordion-head{scroll-margin-top:130px}}
.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:16px 0}.permission-tile{display:flex!important;align-items:center;gap:10px;padding:12px 14px;border:1px solid #16476d;border-radius:10px;background:#071f33;min-height:48px}.permission-tile input{width:18px!important;height:18px!important;flex:0 0 auto}.permission-tile span{font-weight:600}.api-key-box{display:inline-block;padding:12px 18px;margin:8px 0 14px;border:1px solid #1688ff;border-radius:10px;background:#071f33;letter-spacing:2px;font-size:1.15rem;color:#6fc0ff}@media(max-width:600px){.permission-grid{grid-template-columns:1fr}.permission-tile{width:100%}}
.short-api-list{display:grid;gap:7px;margin:8px 0 16px}.short-api-list code{display:block;max-width:100%;overflow-wrap:anywhere;white-space:normal;padding:9px 11px;border-radius:7px;background:#061827;border:1px solid #153c5a}


/* ===== MAC Address page full responsive polish v4 ===== */
.mac-address-page{width:100%;min-width:0;padding:22px 28px 40px!important}
.mac-address-page>h1{margin:0 0 5px;font-size:clamp(1.55rem,2.3vw,2rem);line-height:1.15;color:#fff}
.mac-address-page>p.muted{margin:0 0 18px;max-width:900px;line-height:1.55}
.mac-address-page .card{width:100%;min-width:0;margin:0 0 16px;padding:18px;border-radius:14px;overflow:hidden}
.mac-address-page .card h2{margin:0 0 6px;font-size:1.15rem;color:#fff}
.mac-address-page .card>p.muted{margin:0 0 16px;line-height:1.5;max-width:1050px}
.mac-address-page .grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 16px!important;align-items:end}
.mac-address-page label{display:flex!important;flex-direction:column;gap:7px;min-width:0;color:#dcecff;font-size:.86rem;font-weight:700;line-height:1.3}
.mac-address-page input,.mac-address-page select{width:100%!important;min-width:0!important;height:44px!important;padding:0 12px!important;border:1px solid #17486f!important;border-radius:9px!important;background:#061a2c!important;color:#eef8ff!important;outline:none!important}
.mac-address-page input:focus,.mac-address-page select:focus{border-color:#169cff!important;box-shadow:0 0 0 3px rgba(22,156,255,.12)!important}
.mac-address-page select option{background:#071a2c;color:#eef8ff}
.mac-address-page .btn-primary{min-height:44px;margin-top:15px;padding:10px 18px;border-radius:9px;font-weight:800;white-space:normal}
.mac-address-page .alert{width:100%;margin:0 0 14px;border-radius:10px;overflow-wrap:anywhere}
.mac-address-page .table-wrap{width:100%;max-width:100%;overflow-x:auto;border:1px solid #123e61;border-radius:10px;background:#061827;-webkit-overflow-scrolling:touch}
.mac-address-page table{width:100%;min-width:880px;border-collapse:collapse;margin:0!important}
.mac-address-page th{position:sticky;top:0;background:#09243c;color:#9ec7e5;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.mac-address-page th,.mac-address-page td{padding:11px 12px!important;border-bottom:1px solid #12354f;text-align:left;vertical-align:middle}
.mac-address-page tbody tr:last-child td{border-bottom:0}
.mac-address-page tbody tr:hover{background:rgba(20,121,205,.08)}
.mac-address-page td{font-size:.86rem;color:#dbeaf7}
.mac-address-page td strong{color:#fff;white-space:nowrap}
.mac-address-page td a{display:inline-block;margin-top:3px;color:#55b9ff;font-weight:700;white-space:nowrap}
@media(max-width:1050px){.mac-address-page{padding:18px!important}.mac-address-page .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){.mac-address-page{padding:14px 10px 28px!important}.mac-address-page .card{padding:13px!important;border-radius:11px}.mac-address-page .grid{grid-template-columns:1fr!important;gap:11px!important}.mac-address-page input,.mac-address-page select{height:46px!important;font-size:16px!important}.mac-address-page .btn-primary{width:100%;margin-top:12px}.mac-address-page .table-wrap{border-radius:8px}.mac-address-page table{min-width:760px}.mac-address-page th,.mac-address-page td{padding:10px!important;font-size:.78rem}}
@media(max-width:420px){.mac-address-page{padding-left:8px!important;padding-right:8px!important}.mac-address-page .card{padding:11px!important}.mac-address-page>h1{font-size:1.45rem}.mac-address-page .card h2{font-size:1.05rem}.mac-address-page .card>p.muted{font-size:.8rem}.mac-address-page label{font-size:.8rem}}

/* MAC assignment field consistency v5 */
.mac-address-page #provider-user-wrap,.mac-address-page #provider-pass-wrap{width:100%!important;min-width:0!important}
.mac-address-page #assignment-username,.mac-address-page #assignment-password{display:block!important;width:100%!important;max-width:none!important;box-sizing:border-box!important;margin:0!important;height:44px!important;padding:0 12px!important;border:1px solid #17486f!important;border-radius:9px!important;background:#061a2c!important;color:#eef8ff!important}
.mac-address-page #m3u-wrap{grid-column:1/-1}
.mac-address-page #assignment-portal{width:100%!important;max-width:none!important}
@media(max-width:760px){.mac-address-page #assignment-username,.mac-address-page #assignment-password{height:46px!important;font-size:16px!important}}

/* ===== ONEKEEPER sidebar icon refresh v6 ===== */
.sidebar .nav-icon{width:28px!important;height:28px;flex:0 0 28px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(145deg,#087cff,#0d5fc5);border:1px solid rgba(110,203,255,.24);box-shadow:0 3px 10px rgba(0,91,190,.20);color:#fff!important;font-size:13px!important;font-weight:900;line-height:1;letter-spacing:-.03em;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.sidebar .nav>a:hover .nav-icon,.sidebar .app-menu summary:hover .nav-icon{transform:translateY(-1px);filter:brightness(1.12)}
.sidebar .nav>a.active .nav-icon{background:#fff;color:#0879e8!important;border-color:#fff;box-shadow:0 3px 12px rgba(255,255,255,.18)}
.sidebar .nav-icon-dashboard{background:linear-gradient(145deg,#168cff,#1768db)}
.sidebar .nav-icon-resellers,.sidebar .nav-icon-users{background:linear-gradient(145deg,#1aa8ff,#0874d9)}
.sidebar .nav-icon-dns{background:linear-gradient(145deg,#00bcd4,#0874d9)}
.sidebar .nav-icon-mac{background:linear-gradient(145deg,#536dfe,#168cff)}
.sidebar .nav-icon-qr{background:linear-gradient(145deg,#7c4dff,#4c6fff)}
.sidebar .nav-icon-xtream{background:linear-gradient(145deg,#00b8a9,#0874d9)}
.sidebar .nav-icon-code{background:linear-gradient(145deg,#ffb12b,#ff7b00)}
.sidebar .nav-icon-apk{background:linear-gradient(145deg,#00c9a7,#008cff)}
.sidebar .nav-icon-api{background:linear-gradient(145deg,#168cff,#6c4cff)}
.sidebar .nav-icon-credit{background:linear-gradient(145deg,#ffc72c,#d99800)}
.sidebar .nav-icon-branding{background:linear-gradient(145deg,#8d5cff,#e143ff)}
.sidebar .nav-icon-account{background:linear-gradient(145deg,#168cff,#0e65c8)}
.sidebar .nav-icon-logout{background:linear-gradient(145deg,#ff4d65,#d92e45)}
.sidebar .app-menu:nth-of-type(1) .nav-icon{background:linear-gradient(145deg,#ff8a25,#ef5b21)}
.sidebar .app-menu:nth-of-type(2) .nav-icon{background:linear-gradient(145deg,#ff3d71,#a93cff)}
.sidebar .app-menu:nth-of-type(3) .nav-icon{background:linear-gradient(145deg,#365cff,#173bc4)}
.sidebar .app-menu:nth-of-type(4) .nav-icon{background:linear-gradient(145deg,#3d536e,#182b42)}
.sidebar .app-menu:nth-of-type(5) .nav-icon{background:linear-gradient(145deg,#9b36ff,#5420e8)}
.sidebar .app-menu:nth-of-type(6) .nav-icon{background:linear-gradient(145deg,#00c4dc,#007eb9)}
.sidebar .app-menu:nth-of-type(7) .nav-icon{background:linear-gradient(145deg,#315cd8,#173ca3)}
.sidebar .app-menu:nth-of-type(8) .nav-icon{background:linear-gradient(145deg,#168cff,#065bb5)}
.sidebar .app-menu:nth-of-type(9) .nav-icon{background:linear-gradient(145deg,#ed2871,#a90052)}
.sidebar .app-menu:nth-of-type(10) .nav-icon{background:linear-gradient(145deg,#188bff,#0055d9)}
.sidebar .app-menu:nth-of-type(11) .nav-icon{background:linear-gradient(145deg,#16d883,#07965a)}
.sidebar .app-menu:nth-of-type(12) .nav-icon{background:linear-gradient(145deg,#7658ff,#3e23cb)}
.sidebar .app-menu:nth-of-type(13) .nav-icon{background:linear-gradient(145deg,#ff355d,#bd1535)}
.sidebar .app-menu:nth-of-type(14) .nav-icon{background:linear-gradient(145deg,#ff4d68,#cb1639)}
.sidebar .app-menu:nth-of-type(15) .nav-icon{background:linear-gradient(145deg,#ff9f2f,#e86d00)}
.sidebar .app-menu:nth-of-type(16) .nav-icon{background:linear-gradient(145deg,#348bff,#174bd2)}
.sidebar .app-menu:nth-of-type(17) .nav-icon{background:linear-gradient(145deg,#5f6f86,#26384f);font-size:10px!important}
.sidebar .app-menu:nth-of-type(18) .nav-icon{background:linear-gradient(145deg,#8e50ff,#5325d7)}
.sidebar .app-menu:nth-of-type(19) .nav-icon{background:linear-gradient(145deg,#00cdbf,#008f91);font-size:9px!important}
.sidebar .nav>a,.sidebar .app-menu summary{gap:11px!important}
@media(max-width:760px){.sidebar .nav-icon{width:30px!important;height:30px;flex-basis:30px}.sidebar .nav>a,.sidebar .app-menu summary{min-height:48px!important}}


/* ===== ONEKEEPER distinct streaming app icons v7 ===== */
.sidebar .app-menu .app-icon{font-family:Arial,"Segoe UI Symbol",sans-serif!important;font-size:16px!important;font-weight:800!important;letter-spacing:0!important;overflow:hidden;white-space:nowrap}
.sidebar .app-icon-clipbox{background:linear-gradient(145deg,#ff8a25,#ef5b21)!important}
.sidebar .app-icon-flixvision{background:linear-gradient(145deg,#ff3d71,#9b38ef)!important}
.sidebar .app-icon-nuvio{background:linear-gradient(145deg,#365cff,#173bc4)!important}
.sidebar .app-icon-tivimate{background:linear-gradient(145deg,#52657d,#22344a)!important}
.sidebar .app-icon-xciptv{background:linear-gradient(145deg,#9b36ff,#5420e8)!important}
.sidebar .app-icon-ibo-glass{background:linear-gradient(145deg,#00c4dc,#007eb9)!important}
.sidebar .app-icon-smarters{background:linear-gradient(145deg,#315cd8,#173ca3)!important}
.sidebar .app-icon-ott-navigator{background:linear-gradient(145deg,#168cff,#065bb5)!important}
.sidebar .app-icon-janky{background:linear-gradient(145deg,#ed2871,#a90052)!important}
.sidebar .app-icon-waveo{background:linear-gradient(145deg,#188bff,#0055d9)!important}
.sidebar .app-icon-vivo{background:linear-gradient(145deg,#16d883,#07965a)!important}
.sidebar .app-icon-sparkle{background:linear-gradient(145deg,#7658ff,#3e23cb)!important}
.sidebar .app-icon-cinema-hq{background:linear-gradient(145deg,#8b5cf6,#5b21b6)!important}
.sidebar .app-icon-moviehub{background:linear-gradient(145deg,#ff355d,#bd1535)!important}
.sidebar .app-icon-arvio{background:linear-gradient(145deg,#ff9f2f,#e86d00)!important}
.sidebar .app-icon-lunova-player{background:linear-gradient(145deg,#348bff,#174bd2)!important}
.sidebar .app-icon-stream-vault{background:linear-gradient(145deg,#5f6f86,#26384f)!important}
.sidebar .app-icon-stream-flix-reborn{background:linear-gradient(145deg,#8e50ff,#5325d7)!important}
.sidebar .app-icon-ipvanish{background:linear-gradient(145deg,#00cdbf,#008f91)!important}
.sidebar .app-menu summary>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar .app-icon-ipvanish,.sidebar .app-icon-stream-vault{font-size:15px!important}

/* Lunova / Cannonball responsive API integration */
#apk-integration .lunova-test-status{display:inline-block;min-width:88px;line-height:1.3}
#apk-integration .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#apk-integration table code{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word;color:inherit}
@media (max-width:700px){
  #apk-integration{overflow:hidden}
  #apk-integration label>div{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  #apk-integration label>div input{grid-column:1/-1;min-width:0!important;width:100%}
  #apk-integration label>div .lunova-test-status{grid-column:1/-1}
  #apk-integration .table-wrap{overflow:visible}
  #apk-integration table,#apk-integration thead,#apk-integration tbody,#apk-integration tr,#apk-integration th,#apk-integration td{display:block;width:100%}
  #apk-integration thead{display:none}
  #apk-integration tbody tr{margin:0 0 12px;padding:12px;border:1px solid rgba(148,163,184,.18);border-radius:10px;background:rgba(2,18,33,.32)}
  #apk-integration tbody td{border:0!important;padding:5px 0!important;white-space:normal!important;min-width:0}
  #apk-integration tbody td:first-child{padding-top:0!important;font-size:14px}
  #apk-integration tbody td:nth-child(2) code{padding:9px 10px;border-radius:7px;background:rgba(2,18,33,.55);font-size:11px;line-height:1.45}
  #apk-integration tbody td:nth-child(3){display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:8px!important}
  #apk-integration tbody td:nth-child(3) .btn{width:100%;margin:0}
  #apk-integration tbody td:nth-child(4){padding-top:8px!important}
  #apk-integration .lunova-test-status{min-width:0;font-size:12px}
}

/* ===== ONEKEEPER PANEL-WIDE CONTRAST + RESPONSIVE FIX V7 ===== */
html[data-theme="dark"] body,
html[data-theme="dark"] .content,
html[data-theme="dark"] main { color:#eaf2ff !important; }
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,
html[data-theme="dark"] .card strong,html[data-theme="dark"] .topbar strong {color:#f8fbff !important;opacity:1!important}
html[data-theme="dark"] p,html[data-theme="dark"] small,html[data-theme="dark"] .muted,
html[data-theme="dark"] .card label,html[data-theme="dark"] .help,html[data-theme="dark"] .hint {color:#c6d6e8 !important;opacity:1!important}
html[data-theme="dark"] table,html[data-theme="dark"] thead,html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,html[data-theme="dark"] th,html[data-theme="dark"] td {opacity:1!important}
html[data-theme="dark"] th {color:#d9e9fb!important}
html[data-theme="dark"] td {color:#eef5ff!important}
html[data-theme="dark"] td strong,html[data-theme="dark"] td b {color:#fff!important}
html[data-theme="dark"] code,html[data-theme="dark"] pre {color:#e5f0ff!important;opacity:1!important}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea {
 color:#f4f8ff!important;-webkit-text-fill-color:#f4f8ff!important;opacity:1!important;
 background-color:#0c2138!important;border-color:rgba(128,184,255,.34)!important;
}
html[data-theme="dark"] input[readonly],html[data-theme="dark"] textarea[readonly] {
 color:#eaf2ff!important;-webkit-text-fill-color:#eaf2ff!important;opacity:1!important;background:#0b2037!important;
}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder {color:#9fb6cd!important;-webkit-text-fill-color:#9fb6cd!important;opacity:1!important}
html[data-theme="dark"] select option {background:#10253d!important;color:#f4f8ff!important}
html[data-theme="dark"] .card {color:#eaf2ff!important}
html[data-theme="dark"] .alert {opacity:1!important}
html[data-theme="dark"] .sidebar,html[data-theme="dark"] .sidebar a,html[data-theme="dark"] .sidebar summary {opacity:1!important}
html[data-theme="dark"] .sidebar a,html[data-theme="dark"] .sidebar summary {color:#dbe9f8!important}
html[data-theme="dark"] .sidebar .active,html[data-theme="dark"] .sidebar a:hover,html[data-theme="dark"] .sidebar summary:hover {color:#fff!important}

/* Lunova API integration: never inherit dim text */
#apk-integration,#apk-integration * {opacity:1}
#apk-integration h2,#apk-integration h3,#apk-integration strong,#apk-integration th {color:#f4f8ff!important}
#apk-integration p,#apk-integration small,#apk-integration label {color:#c9d9ea!important}
#apk-integration td,#apk-integration tbody td:first-child {color:#f3f7fc!important;font-weight:600}
#apk-integration table code,#apk-integration code {color:#e8f2ff!important;-webkit-text-fill-color:#e8f2ff!important;background:#0b223a!important;border:1px solid rgba(110,174,255,.25)!important}
#apk-integration .lunova-test-status {color:#d8e6f5!important;-webkit-text-fill-color:#d8e6f5!important;font-weight:600!important}
#apk-integration input {color:#f7fbff!important;-webkit-text-fill-color:#f7fbff!important}

/* Keep controls readable and prevent overlap throughout the panel */
.card,.grid,.table-wrap,.responsive-table,label {min-width:0}
.card input,.card select,.card textarea {max-width:100%}
.btn,button,input[type="submit"],input[type="button"] {white-space:normal;line-height:1.25;min-height:38px}
code {overflow-wrap:anywhere;word-break:break-word}
@media(max-width:700px){
 .topbar{gap:10px;align-items:flex-start}
 .topbar h1{font-size:1.25rem;line-height:1.25}
 .card{padding:14px!important;border-radius:12px!important}
 .grid{grid-template-columns:1fr!important;gap:10px!important}
 .card label{width:100%;min-width:0}
 .card input,.card select,.card textarea{width:100%;min-width:0}
 .action-buttons,.row-actions,.inline-controls{justify-content:flex-start!important;max-width:100%}
 .btn,button{max-width:100%}
}

/* ===== V8 FORCE TEXT VISIBILITY — independent of theme attribute ===== */
body,.content,main,.card,.card label,.card p,.card small,.card span,.card div,.table-wrap,table,thead,tbody,tr,th,td{opacity:1!important}
.card h1,.card h2,.card h3,.card h4,.topbar h1,.topbar h2{color:#f8fbff!important}
.card,.card label,.card td,.card strong,.card b{color:#eef6ff!important}
.card p,.card small,.card .muted,.topbar p{color:#cbd9e8!important}
.card th{color:#e4effb!important}
.card code,.card pre{color:#e8f3ff!important;-webkit-text-fill-color:#e8f3ff!important}
.card input,.card textarea,.card select{color:#f7fbff!important;-webkit-text-fill-color:#f7fbff!important;opacity:1!important}
.card input[readonly],.card textarea[readonly]{color:#f7fbff!important;-webkit-text-fill-color:#f7fbff!important;opacity:1!important}

/* Exact Lunova/Cannonball endpoint table — fixes the dark text seen on Android Chrome */
#apk-integration .lunova-endpoints,
#apk-integration .lunova-endpoints table,
#apk-integration .lunova-endpoints tbody,
#apk-integration .lunova-endpoints tr,
#apk-integration .lunova-endpoints td,
#apk-integration .lunova-endpoints th,
#apk-integration .lunova-endpoints strong,
#apk-integration .lunova-endpoints span,
#apk-integration .lunova-endpoints code{opacity:1!important;filter:none!important;text-shadow:none!important}
#apk-integration .lunova-endpoints th{color:#eaf3ff!important;-webkit-text-fill-color:#eaf3ff!important}
#apk-integration .lunova-endpoints td,
#apk-integration .lunova-endpoints td:first-child,
#apk-integration .lunova-endpoints strong{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
#apk-integration .lunova-endpoints code{color:#eaf4ff!important;-webkit-text-fill-color:#eaf4ff!important;background:#0a2139!important}
#apk-integration .lunova-endpoints .lunova-test-status{color:#dbe9f7!important;-webkit-text-fill-color:#dbe9f7!important}
#apk-integration>label,#apk-integration>p,#apk-integration .muted{color:#d5e3f2!important;-webkit-text-fill-color:#d5e3f2!important;opacity:1!important}
#apk-integration input#lunova-api-base{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important}