:root {
  --bg: #ffffff;
  --text: #222;
  --header-bg: #f6f7f9;
  --border: #d0d0d0;
  --link: #007bff;
  --link-hover: #0056b3;
  --tag-bg: #eee;
}

[data-theme='dark'] {
  --bg: #121212;
  --text: #e6e6e6;
  --header-bg: #1d1d1d;
  --border: #333;
  --link: #7ab0ff;
  --link-hover: #a7c4ff;
  --tag-bg: #2a2a2a;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  transition: background 0.3s, color 0.3s;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
}

h1 {
  font-size: 1.2rem;
  margin: 0;
}

button, select, input[type=text] {
  font-size: 0.95rem;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

button.primary {
  background: var(--link);
  color: #fff;
  border: none;
  cursor: pointer;
}

button.primary:hover {
  background: var(--link-hover);
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { color: var(--link-hover); text-decoration: underline; }

main {
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

.toolbar, .search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.alert {
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 15px;
}
.alert.error {
  background: #ffe6e6;
  border: 1px solid #d33;
  color: #a00;
}

#dataTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
#dataTable th, #dataTable td {
  border: 1px solid var(--border);
  padding: 8px;
  vertical-align: top;
}
#dataTable th {
  background: var(--header-bg);
}
#dataTable td a {
  color: var(--link);
}
#dataTable .tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.8rem;
  margin: 2px 3px 2px 0;
}
.tag[style*='green'] { background: #28a745; }
.tag[style*='blue'] { background: #007bff; }
.tag[style*='orange'] { background: #fd7e14; }
.tag[style*='purple'] { background: #6f42c1; }
.tag[style*='gray'] { background: #6c757d; }

.pagination {
  margin-top: 12px;
  text-align: center;
}
.pagination a, .pagination strong {
  margin: 0 4px;
  color: var(--link);
}
.pagination strong {
  color: var(--text);
}

#themeToggle {
  font-size: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
}

.searchbox {
  width: 100%;
  max-width: 400px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* --- Date picker styling --- */
.date-picker {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

[data-theme='dark'] .date-picker::-webkit-calendar-picker-indicator {
  filter: invert(1);
}