:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-2: #eef5fb;
  --line: #d9e4ef;
  --text: #172033;
  --muted: #66758b;
  --blue: #1677ff;
  --green: #16b884;
  --yellow: #d99b00;
  --red: #e54868;
  --petrol: #0d2f46;
  --magenta: #d9469b;
  --shadow: 0 18px 45px rgba(22, 47, 76, 0.12);
}

body.modo_dia {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-2: #eef5fb;
  --line: #d9e4ef;
  --text: #172033;
  --muted: #66758b;
  --blue: #1677ff;
  --green: #16b884;
  --yellow: #d99b00;
  --red: #e54868;
  --petrol: #0d2f46;
  --magenta: #d9469b;
  --shadow: 0 18px 45px rgba(22, 47, 76, 0.12);
}

body.modo_noche {
  --bg: #050811;
  --panel: #0d1424;
  --panel-2: #111b2e;
  --line: #223452;
  --text: #f7fbff;
  --muted: #91a3bd;
  --blue: #00a8ff;
  --green: #35e0a1;
  --yellow: #ffd166;
  --red: #ff5c7a;
  --petrol: #08111f;
  --magenta: #ff5fbd;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background:
    linear-gradient(180deg, rgba(22, 119, 255, 0.08), transparent 280px),
    var(--bg);
  color: var(--text);
}

button,
input {
  font: inherit;
}

.hidden {
  display: none !important;
}

.app-shell {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-panel {
  width: min(420px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.login-logo-wrap {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 168, 255, 0.35);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(22, 119, 255, 0.14), rgba(22, 184, 132, 0.12));
  box-shadow: 0 18px 40px rgba(22, 119, 255, 0.16);
}

.login-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.login-panel h1,
.topbar h2,
.panel-section h3 {
  margin: 0;
  letter-spacing: 0;
}

.login-panel h1 {
  font-size: 30px;
}

.login-panel p {
  margin: 10px 0 28px;
  color: var(--muted);
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.login-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: #f8fbff;
  color: var(--text);
}

.login-form input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.15);
}

.login-error {
  min-height: 18px;
  margin: -4px 0 0;
  color: var(--red);
  font-size: 13px;
}

.login-form button,
.ghost-button {
  min-height: 46px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.login-form button {
  margin-top: 8px;
  background: linear-gradient(135deg, #1677ff, #16b884);
  color: #ffffff;
  font-weight: 800;
}

.login-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.dashboard-view {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: clamp(220px, 18vw, 260px) minmax(0, 1fr);
  overflow-x: hidden;
}

.sidebar {
  min-width: 0;
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #0d2f46, #113f5e 58%, #0a2539);
  color: #f7fbff;
}

.sidebar-brand {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  margin-bottom: 18px;
  min-width: 0;
}

.sidebar-brand strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 7px;
  box-shadow: 0 0 18px rgba(0, 168, 255, 0.24);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px rgba(53, 224, 161, 0.85);
}

.nav-menu {
  display: grid;
  gap: 8px;
}

.nav-menu button {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(247, 251, 255, 0.78);
  text-align: left;
  cursor: pointer;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.nav-menu button:hover,
.nav-menu button.active {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.content {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  padding: 22px;
}

.topbar {
  padding: 18px 20px;
  border: 1px solid rgba(22, 119, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, #1677ff, #16b884);
  color: #ffffff;
  box-shadow: var(--shadow);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  min-width: 0;
}

.topbar > div {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.topbar h2 {
  font-size: 28px;
}

.topbar .eyebrow,
.topbar h2 {
  color: #ffffff;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.api-pill {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  white-space: nowrap;
}

.ghost-button {
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 14px;
  min-width: 0;
}

.page-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.dashboard-status {
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.dashboard-status span {
  color: var(--yellow);
  font-weight: 700;
}

.dashboard-status small {
  color: var(--muted);
}

.stat-card,
.panel-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.stat-card {
  min-height: 132px;
  padding: 18px;
  display: grid;
  align-content: space-between;
  overflow-wrap: anywhere;
}

.stats-grid .stat-card:nth-child(4n + 1) {
  border-color: rgba(22, 119, 255, 0.24);
  background: linear-gradient(145deg, #ffffff, #eef5ff);
}

.stats-grid .stat-card:nth-child(4n + 2) {
  border-color: rgba(22, 184, 132, 0.24);
  background: linear-gradient(145deg, #ffffff, #ecfff8);
}

.stats-grid .stat-card:nth-child(4n + 3) {
  border-color: rgba(217, 70, 155, 0.22);
  background: linear-gradient(145deg, #ffffff, #fff0f8);
}

.stats-grid .stat-card:nth-child(4n + 4) {
  border-color: rgba(91, 111, 135, 0.24);
  background: linear-gradient(145deg, #ffffff, #f0f5fa);
}

.stat-card span,
.stat-card small,
.section-heading span,
.system-grid span {
  color: var(--muted);
}

.stat-card strong {
  font-size: clamp(28px, 3vw, 34px);
}

.work-area {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 14px;
  margin-top: 14px;
  min-width: 0;
}

.panel-section {
  padding: 18px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
  flex-wrap: wrap;
}

.activity-list {
  display: grid;
  gap: 10px;
}

.activity-item,
.system-grid div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbff;
}

.activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.activity-item strong {
  display: block;
  margin-bottom: 4px;
}

.activity-item span {
  color: var(--muted);
  font-size: 13px;
}

.badge {
  padding: 7px 9px;
  border-radius: 999px;
  color: #06111d;
  background: var(--green);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.badge.warn {
  background: var(--yellow);
}

.badge.danger {
  background: var(--red);
  color: #fff;
}

.system-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.info-state {
  min-height: 138px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(22, 119, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(22, 119, 255, 0.08), rgba(255, 255, 255, 0.96));
  color: var(--muted);
}

.info-state strong {
  color: var(--text);
  font-size: 16px;
}

.info-state span {
  line-height: 1.5;
}

.info-state .mini-button {
  justify-self: start;
  margin-top: 4px;
}

.system-grid strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.system-health-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.system-health-main {
  padding: 16px;
  border: 1px solid rgba(22, 184, 132, 0.24);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(22, 184, 132, 0.12), rgba(255, 255, 255, 0.96));
}

.system-health-card.warn .system-health-main {
  border-color: rgba(255, 209, 102, 0.32);
  background: linear-gradient(145deg, rgba(255, 209, 102, 0.16), rgba(255, 255, 255, 0.96));
}

.system-health-card.danger .system-health-main {
  border-color: rgba(255, 92, 122, 0.34);
  background: linear-gradient(145deg, rgba(255, 92, 122, 0.13), rgba(255, 255, 255, 0.96));
}

.system-health-main span,
.system-health-main small {
  color: var(--muted);
}

.system-health-main strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--green);
  font-size: 30px;
}

.system-health-card.warn .system-health-main strong {
  color: var(--yellow);
}

.system-health-card.danger .system-health-main strong {
  color: var(--red);
}

.system-health-recommendation {
  grid-column: 1 / -1;
}

.view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  min-width: 0;
  flex-wrap: wrap;
}

.view-toolbar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.license-search {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.license-filters {
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(160px, 0.8fr)) auto;
  align-items: end;
  gap: 12px;
}

.filter-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.filter-actions {
  display: flex;
  align-items: end;
  min-height: 44px;
}

.search-field {
  min-width: 240px;
}

.license-search label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.license-search input,
.license-search select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(34, 52, 82, 0.9);
  border-radius: 6px;
  outline: none;
  background: #f8fbff;
  color: var(--text);
}

.license-search input:focus,
.license-search select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.14);
}

.admin-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(53, 224, 161, 0.3);
  border-radius: 8px;
  background: #ecfff8;
  color: var(--green);
}

.admin-message.error {
  border-color: rgba(255, 92, 122, 0.34);
  background: #fff0f4;
  color: var(--red);
}

.admin-message span {
  color: var(--text);
  overflow-wrap: anywhere;
}

.selection-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(0, 168, 255, 0.24);
  border-radius: 8px;
  background: #eef5ff;
  box-shadow: var(--shadow);
}

.selection-hint strong {
  color: var(--text);
}

.selection-hint span {
  color: var(--muted);
  font-size: 13px;
}

.quick-connect-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  min-width: 0;
}

.quick-connect-summary article {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(22, 119, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #eef5ff);
}

.quick-connect-summary article:nth-child(3n + 2) {
  border-color: rgba(22, 184, 132, 0.18);
  background: linear-gradient(145deg, #ffffff, #ecfff8);
}

.quick-connect-summary article:nth-child(3n + 3) {
  border-color: rgba(217, 70, 155, 0.18);
  background: linear-gradient(145deg, #ffffff, #fff0f8);
}

.quick-connect-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.quick-connect-summary strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

.noc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  min-width: 0;
}

.noc-card-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.noc-card {
  position: relative;
  min-width: 0;
  min-height: 116px;
  padding: 16px;
  border: 1px solid rgba(22, 184, 132, 0.22);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #effdf7);
  overflow: hidden;
}

.noc-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #16b884;
}

.noc-card.warn {
  border-color: rgba(247, 181, 0, 0.28);
  background: linear-gradient(145deg, #ffffff, #fff8e8);
}

.noc-card.warn::before {
  background: #f7b500;
}

.noc-card.danger {
  border-color: rgba(224, 62, 82, 0.28);
  background: linear-gradient(145deg, #ffffff, #fff0f2);
}

.noc-card.danger::before {
  background: #e03e52;
}

.noc-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.noc-card strong {
  display: block;
  margin-top: 10px;
  font-size: 24px;
  overflow-wrap: anywhere;
}

.noc-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.noc-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.noc-chart {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.noc-chart header,
.noc-chart footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.noc-chart header strong {
  color: var(--text);
  font-size: 14px;
}

.noc-bars {
  height: 150px;
  margin: 14px 0 8px;
  padding-top: 8px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: end;
  gap: 4px;
  min-width: 0;
}

.noc-bar {
  flex: 1 1 4px;
  min-width: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #1677ff, #16b884);
  position: relative;
}

.noc-bar i {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  display: none;
  font-size: 10px;
  color: var(--text);
  font-style: normal;
}

.noc-bar:hover i {
  display: block;
}

.noc-system-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(420px, 3fr);
  gap: 24px;
  align-items: start;
  min-width: 0;
  margin-top: 14px;
}

.noc-system-layout > .panel-section,
.noc-traffic-layout > article {
  min-width: 320px;
}

.noc-system-layout .panel-section {
  min-width: 0;
}

.noc-traffic-layout {
  display: grid;
  grid-template-columns: minmax(700px, 4fr) minmax(420px, 1fr);
  gap: 24px;
  align-items: start;
  min-width: 0;
  margin-top: 14px;
}

.noc-traffic-layout .panel-section {
  min-width: 0;
  height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.noc-traffic-layout .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
}

.noc-traffic-layout .data-table {
  min-width: 100%;
  table-layout: auto;
}

.noc-events-panel .data-table {
  min-width: 700px;
}

.noc-ips-panel .data-table {
  min-width: 420px;
}

.noc-traffic-layout .data-table th,
.noc-traffic-layout .data-table td {
  white-space: nowrap;
  vertical-align: top;
}

.noc-events-panel .data-table th:nth-child(2),
.noc-events-panel .data-table td:nth-child(2) {
  min-width: 220px;
  white-space: nowrap;
}

.noc-events-panel .data-table th:nth-child(3),
.noc-events-panel .data-table td:nth-child(3) {
  min-width: 150px;
}

.noc-ips-panel .data-table th,
.noc-ips-panel .data-table td {
  font-size: 12px;
}

.noc-ips-panel .data-table th:first-child,
.noc-ips-panel .data-table td:first-child {
  min-width: 132px;
  white-space: nowrap;
}

.noc-ips-panel .data-table th:nth-child(3),
.noc-ips-panel .data-table td:nth-child(3) {
  min-width: 150px;
}

.noc-traffic-layout .section-heading {
  flex: 0 0 auto;
}

@media (max-width: 1100px) {
  .noc-system-layout,
  .noc-traffic-layout {
    grid-template-columns: 1fr;
  }

  .noc-traffic-layout .panel-section {
    height: 480px;
  }
}

.toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.primary-button,
.mini-button {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
}

.primary-button {
  min-height: 40px;
  padding: 0 14px;
  background: linear-gradient(135deg, #1677ff, #16b884);
  color: #ffffff;
}

.mini-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
}

.mini-button:disabled,
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.warn-action {
  border-color: rgba(255, 209, 102, 0.36);
  color: var(--yellow);
}

.success-action {
  border-color: rgba(53, 224, 161, 0.34);
  color: var(--green);
}

.row-action-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(0, 168, 255, 0.32);
  border-radius: 999px;
  background: #eef5ff;
  color: var(--blue);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.row-action-muted {
  border-color: rgba(146, 164, 190, 0.24);
  background: rgba(146, 164, 190, 0.08);
  color: var(--muted);
}

.row-action-selected {
  border-color: rgba(53, 224, 161, 0.42);
  background: rgba(53, 224, 161, 0.14);
  color: var(--green);
}

.row-action-danger {
  border-color: rgba(255, 92, 122, 0.34);
  background: rgba(255, 92, 122, 0.1);
  color: var(--red);
}

.seller-clients-table {
  min-width: 1520px;
  font-size: 13px;
  table-layout: auto;
}

.seller-clients-scroll-zone {
  display: grid;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.seller-clients-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: min(68vh, 720px);
  overflow: auto;
  background: #ffffff;
}

.table-scroll-top {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(22, 119, 255, 0.22);
  border-radius: 8px;
  background: #f8fbff;
}

.table-scroll-top.is-hidden {
  display: none;
}

.table-scroll-spacer {
  height: 14px;
}

.seller-clients-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.seller-clients-table th,
.seller-clients-table td {
  padding: 6px 9px;
  font-size: 13px;
  line-height: 1.2;
  vertical-align: middle;
}

.seller-clients-table th {
  font-size: 11px;
}

.seller-clients-table td:nth-child(2) {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
}

.seller-clients-table td:nth-child(3),
.seller-clients-table td:nth-child(4),
.seller-clients-table td:nth-child(8),
.seller-clients-table td:nth-child(9),
.seller-clients-table td:nth-child(10) {
  font-size: 12.5px;
}

.seller-clients-table .status {
  min-height: 20px;
  padding: 0 6px;
  font-size: 10.5px;
}

.seller-clients-table td:nth-child(1),
.seller-clients-table td:nth-child(3),
.seller-clients-table td:nth-child(5),
.seller-clients-table td:nth-child(6),
.seller-clients-table td:nth-child(7),
.seller-clients-table td:nth-child(8),
.seller-clients-table td:nth-child(9),
.seller-clients-table td:nth-child(10) {
  white-space: nowrap;
}

.seller-demos-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: min(58vh, 620px);
  overflow: auto;
  background: #ffffff;
}

.seller-demos-table {
  min-width: 1120px;
  table-layout: fixed;
}

.seller-demos-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.seller-demos-table .demo-code-column {
  width: 96px;
}

.seller-demos-table .demo-client-column {
  width: 220px;
}

.seller-demos-table .demo-vendor-column {
  width: 120px;
}

.seller-demos-table .demo-type-column {
  width: 160px;
}

.seller-demos-table .demo-small-column {
  width: 104px;
  text-align: center;
}

.seller-demos-table .demo-status-column {
  width: 120px;
}

.seller-demos-table .demo-date-column {
  width: 190px;
  min-width: 190px;
  white-space: nowrap;
}

.seller-demos-table .demo-action-column {
  width: 116px;
}

.demo-client-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted-cell {
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

.client-cell {
  display: grid;
  gap: 1px;
  min-width: 0;
  max-width: 250px;
  line-height: 1.15;
}

.client-cell strong,
.client-name {
  color: var(--text);
  display: block;
  max-width: 250px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-cell span,
.client-note {
  color: var(--muted);
  display: block;
  max-width: 250px;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devices-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(22, 119, 255, 0.24);
  border-radius: 999px;
  background: #eef5ff;
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 900;
}

.seller-client-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 590px;
  max-width: none;
  white-space: nowrap;
}

.seller-client-actions .row-action-button {
  min-height: 22px;
  padding: 0 6px;
  font-size: 10.5px;
  line-height: 1;
}

.row-action-button.action-blue {
  border-color: rgba(22, 119, 255, 0.34);
  background: #eef5ff;
  color: var(--blue);
}

.row-action-button.action-green {
  border-color: rgba(22, 184, 132, 0.34);
  background: #ecfff8;
  color: var(--green);
}

.row-action-button.action-red {
  border-color: rgba(255, 92, 122, 0.34);
  background: #fff0f4;
  color: var(--red);
}

.row-action-button.action-yellow {
  border-color: rgba(255, 209, 102, 0.44);
  background: #fff9e6;
  color: #946200;
}

.row-action-button.action-gray {
  border-color: rgba(146, 164, 190, 0.28);
  background: #f3f6fb;
  color: #526176;
}

.seller-client-actions .row-action-button:hover,
.seller-client-actions .row-action-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(22, 119, 255, 0.12);
}

.device-row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 5, 12, 0.74);
  backdrop-filter: blur(8px);
}

.license-modal {
  width: min(880px, 100%);
  max-height: min(86vh, 860px);
  overflow-y: auto;
  border: 1px solid rgba(22, 119, 255, 0.2);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(22, 47, 76, 0.24);
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.modal-actions {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}

.modal-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #f8fbff;
  color: var(--text);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.modal-notice {
  margin: 0;
  padding: 14px 18px;
  color: var(--muted);
  background: #eef5ff;
}

.device-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.device-detail-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.device-detail-item span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.device-detail-item strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
}

.license-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.license-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.license-form input,
.license-form textarea,
.license-form select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(34, 52, 82, 0.9);
  border-radius: 6px;
  outline: none;
  background: #f8fbff;
  color: var(--text);
  text-transform: none;
}

.license-form textarea {
  min-height: 92px;
  padding: 12px;
  resize: vertical;
}

.license-form input:focus,
.license-form textarea:focus,
.license-form select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.14);
}

.compact-value {
  font-size: 16px !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.form-wide {
  grid-column: 1 / -1;
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: #ffffff;
}

.data-table th,
.data-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.data-table th {
  background: #f0f5fa;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.data-table td {
  color: var(--text);
  font-size: 14px;
}

.data-table tr.is-selected td {
  background: #eef5ff;
  box-shadow: inset 3px 0 0 var(--blue);
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #e8fff5;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.status.warn {
  background: #fff6db;
  color: var(--yellow);
}

.status.danger {
  background: #fff0f4;
  color: var(--red);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.setting-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.setting-item span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.setting-item strong {
  display: block;
  overflow-wrap: anywhere;
}

.security-actions {
  margin-top: 14px;
}

@media (max-width: 1180px) {
  .work-area {
    grid-template-columns: 1fr;
  }

  .license-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-actions {
    min-height: 0;
  }
}

@media (max-width: 960px) {
  .dashboard-view {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px;
  }

  .nav-menu {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .nav-menu button {
    text-align: center;
    padding: 10px 8px;
  }

  .stats-grid,
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .login-view {
    padding: 16px;
  }

  .login-panel {
    padding: 24px;
  }

  .content {
    padding: 14px;
  }

  .topbar,
  .activity-item,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar h2 {
    font-size: 24px;
  }

  .topbar-actions,
  .stats-grid,
  .work-area,
  .nav-menu,
  .settings-grid,
  .quick-connect-summary,
  .license-filters {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .search-field {
    min-width: 0;
  }

  .api-pill,
  .ghost-button,
  .toolbar-actions,
  .primary-button,
  .mini-button {
    width: 100%;
  }

  .view-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .license-modal {
    max-height: 90vh;
  }

  .license-form {
    grid-template-columns: 1fr;
  }

  .device-detail-grid {
    grid-template-columns: 1fr;
  }

  .modal-header,
  .modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-message {
    align-items: flex-start;
    flex-direction: column;
  }

  .selection-hint {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-section,
  .stat-card {
    padding: 16px;
  }

  .data-table {
    min-width: 560px;
  }
}