/* ================= Custom Admin Theme (Dashboard Style) ================= */

/* Base colors matching dashboard */
:root {
  --accent: #21e271;
  --ink: #052b15;
  --bg: #f6f9fc;
  --panel: #ffffff;
  --border: #d7dee6;
  --text: #0b1220;
  --sub: #4a5a6b;
  --shadow: 0 8px 24px rgba(3, 27, 78, 0.08);
  --warning-bg: #fff8e1;
  --warning-text: #8b6914;
  --warning-border: #ffc94d;
}

/* Override body background */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Main content area */
#content {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
  margin: 20px !important;
  padding: 24px !important;
}

/* Breadcrumbs */
div.breadcrumbs {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  margin: 20px !important;
  padding: 12px 20px !important;
  color: var(--sub) !important;
}

div.breadcrumbs a {
  color: var(--accent) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

div.breadcrumbs a:hover {
  color: var(--ink) !important;
}

/* Headers */
h1, h2, h3, h4, h5 {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* Links - Better contrast */
a:link, a:visited {
  color: #0d8a3d !important;  /* Darker green for better readability */
  text-decoration: none !important;
  font-weight: 500 !important;
}

a:hover {
  color: var(--ink) !important;
  text-decoration: underline !important;
}

/* Buttons - Green Accent Style */
.submit-row input,
input[type="submit"],
input[type="button"],
.button,
button {
  background: var(--accent) !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.submit-row input:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
button:hover {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid var(--accent) !important;
  transform: translateY(-1px) !important;
}

/* Default button (cancel, etc.) */
.default {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.default:hover {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: #000 !important;
}

/* Delete button */
.deletelink, .deletelink-box {
  background: #ff6b6b !important;
  color: white !important;
}

.deletelink:hover, .deletelink-box:hover {
  background: #ff5252 !important;
  border-color: #ff5252 !important;
}

/* Tables */
table {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

thead th {
  background: var(--bg) !important;
  color: var(--text) !important;  /* Changed from var(--sub) for better contrast */
  border-bottom: 2px solid var(--border) !important;
  font-weight: 700 !important;  /* Bolder */
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  padding: 12px !important;
}

tbody tr {
  border-bottom: 1px solid var(--border) !important;
}

tbody tr:hover {
  background: #f8fafb !important;
}

tbody td {
  padding: 12px !important;
  color: var(--text) !important;
}

/* Form fields */
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  color: var(--text) !important;
  transition: all 0.15s !important;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.25rem rgba(33, 226, 113, 0.35) !important;
  outline: none !important;
}

/* Form labels - Better contrast */
.form-row label {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* Help text */
.help, .form-row p.help {
  color: var(--sub) !important;
  font-size: 0.9rem !important;
}

/* Module (dashboard boxes) */
.module {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 20px !important;
}

.module h2, .module h3 {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 12px 16px !important;
  border-radius: 12px 12px 0 0 !important;
}

.module caption {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-bottom: 2px solid var(--border) !important;
}

/* Dashboard module links */
.app-list .module th {
  background: var(--accent) !important;
  color: #000 !important;
  font-weight: 700 !important;
}

.module ul li a {
  color: var(--text) !important;
}

.module ul li a:hover {
  color: var(--accent) !important;
}

/* Messages - Better contrast */
.messagelist {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.messagelist li {
  padding: 14px 20px !important;
  font-weight: 600 !important;
}

.messagelist .success {
  background: var(--accent) !important;
  color: #000 !important;
  border: 2px solid #1bc75d !important;
}

.messagelist .warning {
  background: var(--warning-bg) !important;
  color: var(--warning-text) !important;
  border: 2px solid var(--warning-border) !important;
}

.messagelist .error {
  background: #ffebee !important;
  color: #c62828 !important;
  border: 2px solid #ff6b6b !important;
}

.messagelist .info {
  background: #e3f2fd !important;
  color: #1565c0 !important;
  border: 2px solid #2196f3 !important;
}

/* Sidebar */
#content-related {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}

#content-related h3 {
  color: var(--text) !important;
}

/* Pagination */
.paginator {
  color: var(--text) !important;  /* Changed from var(--sub) */
}

.paginator a {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin: 0 2px !important;
  color: var(--text) !important;
}

.paginator a:hover {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: #000 !important;
}

.paginator .this-page {
  background: var(--accent) !important;
  color: #000 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
}

/* Search */
#changelist-search input[type="text"] {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  color: var(--text) !important;
}

#changelist-search input[type="submit"] {
  background: var(--accent) !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
}

/* Filters */
#changelist-filter {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}

#changelist-filter h2, #changelist-filter h3 {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-radius: 12px 12px 0 0 !important;
}

#changelist-filter li.selected a {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

#changelist-filter a {
  color: var(--text) !important;
}

#changelist-filter a:hover {
  color: var(--accent) !important;
}

/* Action bar */
.actions {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

.actions label {
  color: var(--text) !important;
  font-weight: 600 !important;
}

.actions select {
  color: var(--text) !important;
}

/* Login page */
#login {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}

#login .form-row input {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

#login h1 {
  color: var(--text) !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
  #content {
    margin: 10px !important;
    padding: 16px !important;
  }
  
  .breadcrumbs {
    margin: 10px !important;
  }
}

/* Object tools (top right buttons) */
.object-tools {
  float: right !important;
}

.object-tools li {
  display: inline-block !important;
  margin-left: 8px !important;
}

.object-tools a {
  background: var(--accent) !important;
  color: #000 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.object-tools a:hover {
  background: #fff !important;
  border: 1px solid var(--accent) !important;
}

/* Change form */
.change-form .submit-row {
  background: var(--bg) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* Error list */
.errorlist {
  background: #ffebee !important;
  border: 2px solid #ff6b6b !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: #c62828 !important;
  font-weight: 600 !important;
}

.errorlist li {
  color: #c62828 !important;
}

/* Field errors */
.form-row.errors {
  background: #fff5f5 !important;
  border: 1px solid #ffcdd2 !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

.form-row.errors input, .form-row.errors select, .form-row.errors textarea {
  border-color: #ff6b6b !important;
}

/* Required fields asterisk */
.required:after {
  color: #ff6b6b !important;
}

/* Dashboard stats */
#content-main .module table td a {
  color: var(--text) !important;
  font-weight: 500 !important;
}

#content-main .module table td a:hover {
  color: var(--accent) !important;
}