/* Administracja: zabezpieczenia układu gęstych formularzy. */
#view-admin :is(
  .admin-layout,
  .admin-users-list,
  .admin-user-list,
  .admin-user-card,
  .admin-user-card-head,
  .admin-user-editor-body,
  .admin-user-editor-section,
  .admin-user-editor-grid,
  .admin-user-security,
  .admin-audit-area
) {
  min-width: 0;
}

#view-admin :is(.admin-policy-grid, .admin-info-grid, .role-preview-grid, .system-grid) > * {
  box-sizing: border-box;
  height: auto;
  min-width: 0;
}

#view-admin :is(.admin-user-card-badges, .admin-user-card-summary) > * {
  max-width: 100%;
  overflow-wrap: anywhere;
}

#view-admin :is(.admin-user-editor-grid, .admin-user-security) :is(input, select, textarea, button) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

#view-admin :is(
  .admin-user-editor > summary,
  .system-maintenance-details > summary,
  .score-help-details > summary,
  .score-simulator > summary,
  .system-technical-details > summary
) {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  #view-admin .panel-head > :is(.actions, .panel-actions, .admin-user-filters) {
    flex-basis: 100%;
    width: 100%;
  }

  #view-admin .panel-head > :is(.actions, .panel-actions, .admin-user-filters) > * {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 430px) {
  #view-admin .admin-users-list > .admin-access-summary,
  #view-admin .audit-area-tabs {
    grid-template-columns: 1fr;
  }

  #view-admin .admin-user-card-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-admin .admin-user-card-summary > span {
    min-height: 62px;
    padding: 9px 10px;
  }
}

/* Krótka instrukcja dopasowana do aktywnej podzakładki. */
#view-admin .admin-workflow-guide { margin-bottom: 14px; }

#view-admin .admin-workflow-guide div {
  min-width: 0;
  height: auto;
}

#view-admin .admin-workflow-guide strong,
#view-admin .admin-workflow-guide span { overflow-wrap: anywhere; }

/* Kafelki audytu są przyciskami, ale nie mogą dziedziczyć kompaktowej wysokości akcji. */
#view-admin .audit-log-quick {
  align-items: stretch;
}

#view-admin .audit-area-tabs {
  order: 0;
}

#view-admin .audit-log-panel .audit-quick-card {
  align-content: start;
  grid-template-rows: auto auto 1fr;
  height: auto;
  min-height: 92px;
  padding: 12px 14px;
}

#view-admin .audit-log-panel .audit-quick-card strong {
  display: block;
  font-size: 24px;
  line-height: 1;
}

#view-admin .audit-log-panel .audit-quick-card small {
  align-self: end;
  line-height: 1.35;
}

@media (max-width: 760px) {
  #view-admin .admin-workflow-guide { grid-template-columns: 1fr; }

  #view-admin .audit-log-quick {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  #view-admin .audit-log-panel .audit-quick-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 74px;
  }

  #view-admin .audit-log-panel .audit-quick-card strong {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / 3;
  }

  #view-admin .audit-log-panel .audit-quick-card small {
    align-self: start;
    grid-column: 1;
  }
}

/* Niezapisany formularz musi być wyraźnie widoczny. */
#view-admin .user-save-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
}

#view-admin .user-save-state.dirty {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  background: color-mix(in srgb, var(--warning) 11%, var(--panel));
  color: color-mix(in srgb, var(--warning) 78%, var(--text));
  font-weight: 800;
}

/* Konfiguracja: szerokie tabele przewijają się wewnątrz panelu i zachowują kontekst wiersza. */
#view-settings .settings-scanner-table :is(th, td):first-child {
  width: 88px;
}

#view-settings .settings-scanner-table th + th {
  border-left: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
}

@media (max-width: 760px) {
  #view-settings .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #view-settings .settings-employee-table {
    min-width: 960px;
  }

  #view-settings .settings-scanner-table {
    min-width: 650px;
  }

  #view-settings .settings-employee-table :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    background: var(--panel);
    box-shadow: 8px 0 14px color-mix(in srgb, #0f172a 10%, transparent);
  }

  #view-settings .settings-employee-table th:first-child {
    z-index: 3;
    background: var(--table-head);
  }

  #view-settings .settings-scanner-table :is(th, td):nth-child(1) { width: 88px; }
  #view-settings .settings-scanner-table :is(th, td):nth-child(2) { width: 180px; }
  #view-settings .settings-scanner-table :is(th, td):nth-child(3) { width: 180px; }
  #view-settings .settings-scanner-table :is(th, td):nth-child(4) { width: 95px; }
  #view-settings .settings-scanner-table :is(th, td):nth-child(5) { width: 120px; }
}

/* Stan systemu: najważniejsze informacje mieszczą się bez ścisku na ekranie telefonu. */
#view-system :is(
  .system-metrics,
  .server-storage-overview,
  .server-storage-main,
  .server-storage-cards,
  .palety-health-grid,
  .system-ops-board,
  .system-control-grid,
  .system-health-cards,
  .system-action-list
) > * {
  min-width: 0;
}

@media (max-width: 760px) {
  #view-system .topbar .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-system .system-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-system .system-metrics .metric {
    min-height: 82px;
    padding: 12px;
  }

  #view-system .system-metrics .metric strong {
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  #view-system .system-ops-board {
    grid-template-columns: 1fr;
  }

  #view-system .server-storage-main {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  #view-system .server-storage-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 12px 12px;
  }

  #view-system .server-storage-cards article {
    padding: 12px;
  }
}

@media (max-width: 430px) {
  #view-system .panel-head {
    align-items: flex-start;
  }

  #view-system :is(.server-storage-status, .palety-health-status) {
    flex: 0 0 auto;
  }

  #view-system .server-storage-cards {
    gap: 8px;
  }

  #view-system .server-storage-cards strong {
    font-size: 16px;
  }
}

/* Readable audit fields without exposing raw JSON as the primary view. */
#view-admin .audit-readable-details { min-width: 220px; max-width: 560px; overflow-wrap: anywhere; white-space: normal; }
#view-admin .audit-readable-details p { margin: 0 0 8px; }
#view-admin .audit-readable-details summary { cursor: pointer; color: var(--accent, #087f79); font-weight: 600; }
#view-admin .audit-readable-details dl { margin: 10px 0; }
#view-admin .audit-readable-details dl > div { padding: 7px 0; border-bottom: 1px solid var(--line, #d8e4e7); }
#view-admin .audit-readable-details dt { font-weight: 700; }
#view-admin .audit-readable-details dd { margin: 4px 0 0; }

@media (max-width: 760px) {
  #view-admin :is(.audit-log-table, .pallet-audit-table) { display: block; width: 100%; min-width: 0; }
  #view-admin :is(.audit-log-table, .pallet-audit-table) thead { display: none; }
  #view-admin :is(.audit-log-table, .pallet-audit-table) tbody { display: grid; gap: 12px; padding: 8px; }
  #view-admin :is(.audit-log-table, .pallet-audit-table) tr { display: block; border: 1px solid var(--line, #d8e4e7); border-radius: 10px; overflow: hidden; }
  #view-admin :is(.audit-log-table, .pallet-audit-table) td { display: block; width: auto; height: auto; min-height: 0; min-width: 0; max-width: none; padding: 10px 12px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  #view-admin :is(.audit-log-table, .pallet-audit-table) td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; margin-bottom: 5px; opacity: .75; }
  #view-admin .audit-readable-details { min-width: 0; max-width: 100%; }
  #view-admin .audit-readable-details :is(dt, dd, p) { text-align: left; }
}