/*
  TNWind Material Foundation UI Kit.
  Bezplatna, lokalna warstwa komponentow inspirowana Material Design 3.
  Nie wymaga CDN ani procesu npm i dziala rowniez offline.
*/

body.cms-ui-preview {
  --mui-primary: #1976d2;
  --mui-primary-dark: #0d47a1;
  --mui-success: #1b9f5a;
  --mui-warning: #f6b51e;
  --mui-danger: #c83d43;
  --mui-surface: #ffffff;
  --mui-surface-2: #f5f8fc;
  --mui-text: #101828;
  --mui-text-muted: #5f6f85;
  --mui-border: #d8e2ef;
  --mui-radius: 12px;
  --mui-shadow: 0 16px 40px rgba(16, 24, 40, 0.12);
}

body.cms-ui-preview.dark-mode {
  --mui-surface: #111d2b;
  --mui-surface-2: #162438;
  --mui-text: #f5f8fc;
  --mui-text-muted: #b7c4d6;
  --mui-border: #33445f;
  --mui-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

body.cms-ui-preview {
  --md-sys-color-primary: #1677f2;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-surface: var(--surface);
  --md-sys-color-on-surface: var(--ink);
  --md-sys-color-outline: var(--line);
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
}

body.cms-ui-preview :where(button, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

body.cms-ui-preview :where(button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(22, 119, 242, 0.32);
  outline-offset: 2px;
}

body.cms-ui-preview :where(
  .panel,
  .daily-note,
  .history-section,
  .admin-panel,
  .vehicle-panel,
  .summary-card
) {
  border-radius: var(--md-sys-shape-corner-large);
}

body.cms-ui-preview :where(
  .primary-button,
  .secondary-button,
  .danger-button,
  .small-button,
  .boss-dashboard-tab
) {
  min-width: 0;
  border-radius: var(--md-sys-shape-corner-small);
}

body.cms-ui-preview :where(input, select, textarea) {
  width: 100%;
  max-width: 100%;
  border-radius: var(--md-sys-shape-corner-small);
}

body.cms-ui-preview :where(.boss-history-table, .inventory-table) th {
  letter-spacing: 0.035em;
}

body.cms-ui-preview .mui-shell-card,
body.cms-ui-preview .cms-panel {
  background: var(--mui-surface);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius);
  box-shadow: var(--mui-shadow);
  color: var(--mui-text);
}

body.cms-ui-preview .mui-button {
  align-items: center;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
}

body.cms-ui-preview .mui-button-primary {
  background: var(--mui-primary);
  color: #ffffff;
}

body.cms-ui-preview .mui-button-danger {
  background: var(--mui-danger);
  color: #ffffff;
}

body.cms-ui-preview .mui-table {
  border-collapse: collapse;
  color: var(--mui-text);
  width: 100%;
}

body.cms-ui-preview .mui-table th,
body.cms-ui-preview .mui-table td {
  border-bottom: 1px solid var(--mui-border);
  padding: 12px 14px;
  text-align: left;
}

body.cms-ui-preview .mui-table th {
  background: var(--mui-surface-2);
  color: var(--mui-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}