/* Adaptive admin layout layer.
   Keeps the desktop UI usable below 1920px and lets wide screens breathe without
   binding every view to the old 1600px canvas. */
:root {
  --admin-content-max: 1840px;
  --admin-gutter: clamp(16px, 2vw, 34px);
  --admin-gap: clamp(12px, 1.15vw, 18px);
}

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

.shell,
.view,
.panel,
.visual-panel,
.metric,
.resource-row,
.tracked-row,
.workspace-disclosure,
.analytics-details,
.event-stream-console,
.event-tabs-panel,
.event-panel,
.platform-operations-card,
.platform-attention-card,
.api-protection-panel,
.resource-faq,
.table-wrap {
  min-width: 0;
}

.view {
  width: 100%;
  max-width: var(--admin-content-max);
  margin-inline: auto;
  padding: clamp(20px, 2vw, 30px) var(--admin-gutter) clamp(48px, 5vw, 72px);
}

.band {
  margin-bottom: clamp(22px, 2.4vw, 38px);
}

.panel {
  padding: clamp(14px, 1.2vw, 19px);
}

.metric-grid,
.primary-metrics,
.event-summary-grid,
.l7-ddos-metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 188px), 1fr));
  gap: var(--admin-gap);
}

.analytics-dashboard-grid,
.dashboard-list-grid,
.dashboard-security-grid,
.dashboard-security-grid.without-rules,
.settings-grid,
.rules-grid,
.api-settings-groups,
.faq-grid,
.geo-country-grid,
.tenant-settings-grid,
.checks-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--admin-gap);
}

.dashboard-main-grid,
.overview-command-grid,
.overview-grid,
.traffic-insights-grid,
.web-analytics-grid,
.platform-overview-grid,
.session-investigation,
.captcha-grid,
.api-connection-card,
.fp-review-grid,
.explainability-layer-grid {
  gap: var(--admin-gap);
}

.dashboard-main-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
}

.overview-command-grid,
.traffic-insights-grid,
.web-analytics-grid,
.platform-overview-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
}

.overview-grid,
.session-investigation {
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1.55fr);
}

.api-connection-card {
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr) minmax(220px, 0.8fr);
}

.network-override-form,
.log-query-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.resource-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.resource-actions {
  align-self: end;
}

.table-wrap,
.event-panel > .result-panel > .table-wrap,
.system-resources-panel .table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

.table-wrap table,
.event-panel > .result-panel table,
.system-resources-panel table {
  max-width: none;
}

.event-panel > .result-panel > .table-wrap {
  max-height: clamp(340px, 48dvh, 620px);
  min-height: min(360px, 48dvh);
}

.l7-ddos-lists {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

@media (min-width: 2100px) {
  :root {
    --admin-content-max: 2040px;
    --admin-gutter: clamp(30px, 2.1vw, 56px);
  }

  .dashboard-main-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(380px, 0.65fr);
  }
}

@media (min-width: 2500px) {
  :root {
    --admin-content-max: 2240px;
  }
}

@media (max-width: 1700px) and (min-width: 761px) {
  :root {
    --admin-content-max: none;
    --admin-gutter: clamp(16px, 1.7vw, 28px);
  }

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

@media (max-width: 1500px) and (min-width: 761px) {
  .shell {
    --sidebar-width: 248px;
  }

  .topbar {
    padding-inline: 12px;
  }

  .view {
    padding-inline: clamp(14px, 1.5vw, 22px);
  }

  .dashboard-main-grid,
  .overview-command-grid,
  .overview-grid,
  .traffic-insights-grid,
  .web-analytics-grid,
  .platform-overview-grid,
  .session-investigation,
  .api-connection-card {
    grid-template-columns: 1fr;
  }

  .dashboard-trend,
  .dashboard-side-rail {
    min-height: 0;
  }

  .event-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  }

  .event-panel > .result-panel table {
    min-width: 1040px;
  }
}

@media (max-width: 1200px) {
  .domain-verification-record {
    grid-template-columns: minmax(130px, 0.65fr) minmax(0, 1fr) auto;
  }

  .domain-verification-value:last-of-type {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .domain-verification-head,
  .domain-verification-actions,
  .domain-verification-compact {
    align-items: stretch;
    flex-direction: column;
  }

  .domain-verification-compact {
    grid-template-columns: 1fr;
  }

  .domain-verification-head .resource-status {
    align-self: flex-start;
  }

  .domain-verification-record {
    grid-template-columns: 1fr;
  }

  .domain-verification-value:last-of-type {
    grid-column: auto;
  }

  .domain-verification-value code {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .domain-verification-actions .button {
    width: 100%;
  }

  .deployment-connection,
  .deployment-dns-target {
    grid-template-columns: 1fr;
  }

  .deployment-connection .resource-status {
    justify-self: start;
  }

  .deployment-dns-target .button {
    width: 100%;
  }
}

@media (max-width: 1280px) and (min-width: 761px) {
  .shell {
    --sidebar-width: 228px;
  }

  .brand h1 {
    font-size: 17px;
  }

  .brand p,
  .nav-label {
    font-size: 11px;
  }

  .tab {
    gap: 8px;
    min-height: 40px;
    padding-inline: 8px;
  }

  .metric-grid,
  .primary-metrics,
  .l7-ddos-metrics,
  .data-cluster-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-grid,
  .rules-grid,
  .analytics-dashboard-grid,
  .dashboard-list-grid,
  .dashboard-security-grid,
  .api-settings-groups,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .resource-actions {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0;
  }
}

@media (max-width: 900px) {
  .view {
    max-width: none;
  }

  .metric-grid,
  .primary-metrics,
  .event-summary-grid,
  .l7-ddos-metrics,
  .l7-ddos-lists {
    grid-template-columns: 1fr;
  }
}

/* Notebook-friendly dense logs.
   Audit and event stream contain long operational text, so below desktop-wide
   layouts they read better as compact cards instead of squeezed data tables. */
@media (max-width: 1500px) and (min-width: 761px) {
  .table-panel-audit > .table-wrap,
  .table-panel-platform-audit > .table-wrap,
  .table-panel-latest-collector-decisions > .table-wrap,
  .table-panel-latest-browser-sdk-events > .table-wrap {
    max-height: clamp(420px, 62dvh, 720px);
    border: 0;
    overflow: auto;
    background: transparent;
  }

  .table-panel-audit table,
  .table-panel-platform-audit table,
  .table-panel-latest-collector-decisions table,
  .table-panel-latest-browser-sdk-events table {
    display: block;
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .table-panel-audit thead,
  .table-panel-platform-audit thead,
  .table-panel-latest-collector-decisions thead,
  .table-panel-latest-browser-sdk-events thead {
    display: none;
  }

  .table-panel-audit tbody,
  .table-panel-platform-audit tbody,
  .table-panel-latest-collector-decisions tbody,
  .table-panel-latest-browser-sdk-events tbody {
    display: grid;
    gap: 10px;
  }

  .table-panel-audit tr,
  .table-panel-platform-audit tr,
  .table-panel-latest-collector-decisions tr,
  .table-panel-latest-browser-sdk-events tr {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 7px 20px rgba(16, 24, 40, 0.04);
  }

  .table-panel-audit td,
  .table-panel-platform-audit td,
  .table-panel-latest-collector-decisions td,
  .table-panel-latest-browser-sdk-events td {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    border-bottom: 0;
    padding: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .table-panel-audit td::before,
  .table-panel-platform-audit td::before,
  .table-panel-latest-collector-decisions td::before,
  .table-panel-latest-browser-sdk-events td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .table-panel-audit .cell-badge,
  .table-panel-platform-audit .cell-badge,
  .table-panel-latest-collector-decisions .cell-badge,
  .table-panel-latest-browser-sdk-events .cell-badge {
    justify-self: start;
    max-width: 100%;
    height: auto;
    min-height: 24px;
    white-space: normal;
  }

  .table-panel-audit .column-timestamp,
  .table-panel-platform-audit .column-timestamp,
  .table-panel-latest-collector-decisions .column-timestamp,
  .table-panel-latest-browser-sdk-events .column-timestamp {
    grid-column: span 2;
    min-width: 0;
    color: var(--text);
    font-weight: 720;
  }

  .table-panel-audit .column-source-ip,
  .table-panel-platform-audit .column-source-ip,
  .table-panel-latest-collector-decisions .column-ip,
  .table-panel-latest-browser-sdk-events .column-ip {
    grid-column: span 2;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: normal;
  }

  .table-panel-audit .column-summary,
  .table-panel-platform-audit .column-summary,
  .table-panel-audit .column-target,
  .table-panel-platform-audit .column-target {
    grid-column: span 3;
  }

  .table-panel-audit .column-role,
  .table-panel-platform-audit .column-role,
  .table-panel-audit .column-action,
  .table-panel-platform-audit .column-action {
    grid-column: span 2;
  }

  .table-panel-latest-collector-decisions .column-fingerprint,
  .table-panel-latest-collector-decisions .column-session,
  .table-panel-latest-browser-sdk-events .column-fingerprint-id,
  .table-panel-latest-browser-sdk-events .column-session-id {
    grid-column: span 3;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
  }

  .table-panel-latest-collector-decisions .column-path,
  .table-panel-latest-browser-sdk-events .column-path {
    grid-column: span 3;
    min-width: 0;
  }

  .table-panel-latest-collector-decisions .column-reasons,
  .table-panel-latest-browser-sdk-events .column-reasons {
    grid-column: 1 / -1;
    max-width: none;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--muted-strong);
    line-height: 1.5;
  }

  .table-panel-latest-collector-decisions .column-score,
  .table-panel-latest-collector-decisions .column-class,
  .table-panel-latest-collector-decisions .column-action,
  .table-panel-latest-browser-sdk-events .column-score,
  .table-panel-latest-browser-sdk-events .column-class {
    grid-column: span 1;
  }

  .event-panel > .result-panel > .table-wrap {
    max-height: clamp(420px, 58dvh, 700px);
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .table-panel-audit tr,
  .table-panel-platform-audit tr,
  .table-panel-latest-collector-decisions tr,
  .table-panel-latest-browser-sdk-events tr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .table-panel-audit .column-timestamp,
  .table-panel-platform-audit .column-timestamp,
  .table-panel-audit .column-source-ip,
  .table-panel-platform-audit .column-source-ip,
  .table-panel-latest-collector-decisions .column-timestamp,
  .table-panel-latest-collector-decisions .column-ip,
  .table-panel-latest-browser-sdk-events .column-timestamp,
  .table-panel-latest-browser-sdk-events .column-ip,
  .table-panel-latest-collector-decisions .column-path,
  .table-panel-latest-browser-sdk-events .column-path,
  .table-panel-latest-collector-decisions .column-fingerprint,
  .table-panel-latest-collector-decisions .column-session,
  .table-panel-latest-browser-sdk-events .column-fingerprint-id,
  .table-panel-latest-browser-sdk-events .column-session-id,
  .table-panel-audit .column-summary,
  .table-panel-platform-audit .column-summary,
  .table-panel-audit .column-target,
  .table-panel-platform-audit .column-target {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .table-panel-audit > .table-wrap,
  .table-panel-platform-audit > .table-wrap,
  .table-panel-latest-collector-decisions > .table-wrap,
  .table-panel-latest-browser-sdk-events > .table-wrap {
    border: 0;
    overflow: visible;
  }

  .table-panel-audit table,
  .table-panel-platform-audit table,
  .table-panel-latest-collector-decisions table,
  .table-panel-latest-browser-sdk-events table,
  .table-panel-audit tbody,
  .table-panel-platform-audit tbody,
  .table-panel-latest-collector-decisions tbody,
  .table-panel-latest-browser-sdk-events tbody,
  .table-panel-audit tr,
  .table-panel-platform-audit tr,
  .table-panel-latest-collector-decisions tr,
  .table-panel-latest-browser-sdk-events tr,
  .table-panel-audit td,
  .table-panel-platform-audit td,
  .table-panel-latest-collector-decisions td,
  .table-panel-latest-browser-sdk-events td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .table-panel-audit thead,
  .table-panel-platform-audit thead,
  .table-panel-latest-collector-decisions thead,
  .table-panel-latest-browser-sdk-events thead {
    display: none;
  }

  .table-panel-audit tbody,
  .table-panel-platform-audit tbody,
  .table-panel-latest-collector-decisions tbody,
  .table-panel-latest-browser-sdk-events tbody {
    display: grid;
    gap: 10px;
  }

  .table-panel-audit tr,
  .table-panel-platform-audit tr,
  .table-panel-latest-collector-decisions tr,
  .table-panel-latest-browser-sdk-events tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: #fff;
  }

  .table-panel-audit td,
  .table-panel-platform-audit td,
  .table-panel-latest-collector-decisions td,
  .table-panel-latest-browser-sdk-events td {
    border-bottom: 0;
    padding: 7px 0;
  }

  .table-panel-audit td::before,
  .table-panel-platform-audit td::before,
  .table-panel-latest-collector-decisions td::before,
  .table-panel-latest-browser-sdk-events td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* Hard fallback for notebook screens.
   Targets the actual audit/event containers so the compact layout does not rely
   on table title classes or translated headings. */
@media (max-width: 1800px) and (min-width: 761px) {
  #tenant-audit-log .result-panel,
  #system-audit-log .result-panel,
  #recent-decisions .result-panel,
  #recent-browser-telemetry .result-panel {
    padding: 16px;
  }

  #tenant-audit-log .result-panel > .table-wrap,
  #system-audit-log .result-panel > .table-wrap,
  #recent-decisions .result-panel > .table-wrap,
  #recent-browser-telemetry .result-panel > .table-wrap {
    max-height: clamp(420px, 62dvh, 720px);
    border: 0;
    overflow: auto;
    background: transparent;
  }

  #tenant-audit-log table,
  #system-audit-log table,
  #recent-decisions table,
  #recent-browser-telemetry table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  #tenant-audit-log thead,
  #system-audit-log thead,
  #recent-decisions thead,
  #recent-browser-telemetry thead {
    display: none;
  }

  #tenant-audit-log tbody,
  #system-audit-log tbody,
  #recent-decisions tbody,
  #recent-browser-telemetry tbody {
    display: grid;
    gap: 10px;
  }

  #tenant-audit-log tr,
  #system-audit-log tr,
  #recent-decisions tr,
  #recent-browser-telemetry tr {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 7px 20px rgba(16, 24, 40, 0.04);
  }

  #tenant-audit-log td,
  #system-audit-log td,
  #recent-decisions td,
  #recent-browser-telemetry td {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0 !important;
    max-width: none !important;
    border-bottom: 0;
    padding: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
  }

  #tenant-audit-log td::before,
  #system-audit-log td::before,
  #recent-decisions td::before,
  #recent-browser-telemetry td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  #tenant-audit-log .cell-badge,
  #system-audit-log .cell-badge,
  #recent-decisions .cell-badge,
  #recent-browser-telemetry .cell-badge {
    justify-self: start;
    max-width: 100%;
    height: auto;
    min-height: 24px;
    white-space: normal;
  }

  #tenant-audit-log .column-timestamp,
  #system-audit-log .column-timestamp,
  #recent-decisions .column-timestamp,
  #recent-browser-telemetry .column-timestamp,
  #tenant-audit-log .column-source-ip,
  #system-audit-log .column-source-ip,
  #recent-decisions .column-ip,
  #recent-browser-telemetry .column-ip {
    grid-column: span 2;
    color: var(--text);
    font-weight: 720;
  }

  #tenant-audit-log .column-summary,
  #system-audit-log .column-summary,
  #tenant-audit-log .column-target,
  #system-audit-log .column-target,
  #recent-decisions .column-fingerprint,
  #recent-decisions .column-session,
  #recent-decisions .column-path,
  #recent-browser-telemetry .column-fingerprint-id,
  #recent-browser-telemetry .column-session-id,
  #recent-browser-telemetry .column-path {
    grid-column: span 3;
  }

  #recent-decisions .column-reasons,
  #recent-browser-telemetry .column-reasons {
    grid-column: 1 / -1;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--muted-strong);
    line-height: 1.5;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  #tenant-audit-log tr,
  #system-audit-log tr,
  #recent-decisions tr,
  #recent-browser-telemetry tr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #tenant-audit-log .column-summary,
  #system-audit-log .column-summary,
  #tenant-audit-log .column-target,
  #system-audit-log .column-target,
  #recent-decisions .column-fingerprint,
  #recent-decisions .column-session,
  #recent-decisions .column-path,
  #recent-browser-telemetry .column-fingerprint-id,
  #recent-browser-telemetry .column-session-id,
  #recent-browser-telemetry .column-path {
    grid-column: span 2;
  }
}

/* Container-query fallback for notebook layouts.
   The available panel width matters more than monitor width when the sidebar is open. */
#tenant-audit-log,
#system-audit-log,
#recent-decisions,
#recent-browser-telemetry {
  container-type: inline-size;
}

@container (max-width: 1280px) {
  #tenant-audit-log .result-panel,
  #system-audit-log .result-panel,
  #recent-decisions .result-panel,
  #recent-browser-telemetry .result-panel {
    padding: 14px;
  }

  #tenant-audit-log .result-panel > .table-wrap,
  #system-audit-log .result-panel > .table-wrap,
  #recent-decisions .result-panel > .table-wrap,
  #recent-browser-telemetry .result-panel > .table-wrap {
    max-height: clamp(420px, 62dvh, 720px);
    border: 0 !important;
    overflow: auto;
    background: transparent;
  }

  #tenant-audit-log table,
  #system-audit-log table,
  #recent-decisions table,
  #recent-browser-telemetry table {
    display: block !important;
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  #tenant-audit-log thead,
  #system-audit-log thead,
  #recent-decisions thead,
  #recent-browser-telemetry thead {
    display: none !important;
  }

  #tenant-audit-log tbody,
  #system-audit-log tbody,
  #recent-decisions tbody,
  #recent-browser-telemetry tbody {
    display: grid !important;
    gap: 10px;
  }

  #tenant-audit-log tr,
  #system-audit-log tr,
  #recent-decisions tr,
  #recent-browser-telemetry tr {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 12px;
    min-height: 0 !important;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7px 20px rgba(16, 24, 40, 0.04);
  }

  #tenant-audit-log td,
  #system-audit-log td,
  #recent-decisions td,
  #recent-browser-telemetry td {
    display: grid !important;
    align-content: start;
    gap: 3px;
    min-width: 0 !important;
    max-width: none !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal !important;
  }

  #tenant-audit-log td::before,
  #system-audit-log td::before,
  #recent-decisions td::before,
  #recent-browser-telemetry td::before {
    display: block;
    color: var(--muted);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  #tenant-audit-log .cell-badge,
  #system-audit-log .cell-badge,
  #recent-decisions .cell-badge,
  #recent-browser-telemetry .cell-badge {
    justify-self: start;
    max-width: 100%;
    height: auto;
    min-height: 24px;
    white-space: normal;
  }

  #tenant-audit-log .column-timestamp,
  #system-audit-log .column-timestamp,
  #recent-decisions .column-timestamp,
  #recent-browser-telemetry .column-timestamp,
  #tenant-audit-log .column-source-ip,
  #system-audit-log .column-source-ip,
  #recent-decisions .column-ip,
  #recent-browser-telemetry .column-ip,
  #tenant-audit-log .column-summary,
  #system-audit-log .column-summary,
  #tenant-audit-log .column-target,
  #system-audit-log .column-target,
  #recent-decisions .column-fingerprint,
  #recent-decisions .column-session,
  #recent-decisions .column-path,
  #recent-browser-telemetry .column-fingerprint-id,
  #recent-browser-telemetry .column-session-id,
  #recent-browser-telemetry .column-path {
    grid-column: span 2 !important;
  }

  #recent-decisions .column-reasons,
  #recent-browser-telemetry .column-reasons {
    grid-column: 1 / -1 !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--line) !important;
    color: var(--muted-strong);
    line-height: 1.5;
  }
}