:root {
  /* Map host variables to local variables */
  --bg-color: var(--bg);
  --text-color: var(--text-color);
  --primary-color: var(--c-primary);

  /* Map host variables to Pico CSS variables */
  --pico-background-color: var(--bg);
  --pico-color: var(--text-color);
  --pico-primary: var(--c-primary);
  --pico-primary-background: var(--c-primary);
  --pico-primary-hover: var(--c-accent);
  --pico-primary-focus: var(--c-accent);
  --pico-card-background-color: var(--card-bg);
  --pico-border-color: var(--divider-color);
  /* Tighten default control padding to avoid oversized buttons */
  --pico-form-element-spacing-vertical: 0.35rem;
  --pico-form-element-spacing-horizontal: 0.75rem;

  /* Additional Pico overrides for better integration */
  --pico-form-element-background-color: var(--bg-darker);
  --pico-form-element-border-color: var(--divider-color);
  --pico-form-element-color: var(--text-color);
}

html,
body {
  background-color: transparent;
}

/* Force primary button color */
button:not(.outline):not(.secondary):not(.contrast):not(.close-btn) {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* Primary outline buttons */
button.outline:not(.secondary):not(.contrast),
button.outline.secondary {
  background-color: transparent !important;
  color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
button.outline:not(.secondary):not(.contrast):hover,
button.outline.secondary:hover {
  background-color: var(--c-primary) !important;
  color: #fff !important;
}

/* Make secondary outlines look like primary outlines for cancel buttons */
/* Force warn color for delete buttons (using contrast class) */
button.contrast {
  background-color: var(--c-warn);
  border-color: var(--c-warn);
  color: #fff;
}
button.outline.contrast {
  background-color: transparent !important;
  border-color: var(--c-warn) !important;
  color: var(--c-warn) !important;
}

/* Checkboxes */
input[type='checkbox']:checked {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

body {
  margin: 0;
  padding: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
  background-color: transparent;
  color: var(--text-color);
}

/* Custom styles to supplement Pico CSS */

/* Override container width */
main.container {
  max-width: 960px !important;
}

/* Reduce button height globally */
button,
[role='button'],
input[type='submit'],
input[type='button'],
input[type='reset'] {
  min-height: auto;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}

/* Dialog styles */
dialog article {
  max-width: 600px;
  width: 100%;
}

dialog article header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Table styles */
table {
  width: 100%;
}

.app {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

[data-theme='dark'] .app-header {
  border-bottom-color: #444;
}

/* Warning box styles */
.warning-box {
  background-color: #fff3cd;
  color: #856404;
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: var(--pico-border-radius);
  border: 1px solid #ffeeba;
}

[data-theme='dark'] .warning-box {
  background-color: rgba(255, 193, 7, 0.15);
  color: #ffca28;
  border-color: rgba(255, 193, 7, 0.3);
}
