/* Open Watch Admin Custom Styling */
/* Bloomberg-inspired palette: Grays, Orange, Red, Green */

/* Import Geist fonts from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* CSS Variables matching frontend branding */
:root {
  /* Colors - Dark mode */
  --ow-primary: #1a1a1a; /* Very Dark Gray - navigation bar */
  --ow-primary-foreground: #ffffff; /* White */
  --ow-accent: #ff8c00; /* Orange - highlights, links */
  --ow-accent-foreground: #ffffff; /* White */
  --ow-background: #0d0d0d; /* Very Dark - main content area */
  --ow-foreground: #e5e5e5; /* Light Gray - primary text */
  --ow-card: #1a1a1a; /* Dark Gray - card backgrounds */
  --ow-card-foreground: #e5e5e5; /* Light Gray */
  --ow-secondary: #2d2d2d; /* Medium Dark Gray - secondary surfaces */
  --ow-secondary-foreground: #e5e5e5; /* Light Gray */
  --ow-muted: #2d2d2d; /* Medium Dark Gray */
  --ow-muted-foreground: #a0a0a0; /* Medium Gray - secondary text */
  --ow-border: #404040; /* Dark Gray - borders */
  --ow-destructive: #dc2626; /* Red - errors, losses */
  --ow-success: #16a34a; /* Green - gains, success */

  /* Fonts */
  --ow-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --ow-font-mono: "Source Code Pro", "Courier New", monospace;

  /* Border radius */
  --ow-radius: 0.625rem;
}

/* Apply custom fonts to admin */
body {
  font-family: var(--ow-font-sans) !important;
  background-color: var(--ow-background) !important;
  color: var(--ow-foreground) !important;
}

/* Ensure dark background on all main containers */
body,
#container,
#content-main {
  background-color: var(--ow-background) !important;
}

/* Override any white backgrounds in content area - be specific to avoid breaking functionality */
#content > div:not(.module):not(.actions):not(.object-tools),
#changelist > div:not(.module):not(.actions):not(.object-tools) {
  background-color: var(--ow-background) !important;
}

/* Specifically target common white background classes */
.white-bg,
.bg-white {
  background-color: var(--ow-card) !important;
}

/* Header styling */
#header {
  background-color: var(--ow-primary) !important;
  color: var(--ow-primary-foreground) !important;
  border-bottom: 1px solid var(--ow-border) !important;
}

#header h1,
#header h1 a,
#header h1 a:link,
#header h1 a:visited {
  color: var(--ow-primary-foreground) !important;
  font-weight: 600 !important;
  font-family: var(--ow-font-sans) !important;
}

#header a:link,
#header a:visited {
  color: var(--ow-primary-foreground) !important;
}

#header a:hover {
  color: var(--ow-accent) !important;
}

/* User tools in header */
#user-tools {
  font-family: var(--ow-font-sans) !important;
}

#user-tools a {
  color: var(--ow-primary-foreground) !important;
}

#user-tools a:hover {
  color: var(--ow-accent) !important;
}

/* Breadcrumbs */
.breadcrumbs {
  background-color: var(--ow-card) !important;
  border-bottom: 1px solid var(--ow-border) !important;
  color: var(--ow-foreground) !important;
  font-family: var(--ow-font-sans) !important;
}

.breadcrumbs a {
  color: var(--ow-accent) !important;
}

.breadcrumbs a:hover {
  color: var(--ow-primary) !important;
}

/* Main content area */
#content {
  background-color: var(--ow-background) !important;
}

/* Ensure all main content containers have dark background */
#content-main,
#changelist,
#changelist-form,
.changelist-results,
.results {
  background-color: var(--ow-background) !important;
  color: var(--ow-foreground) !important;
}

/* Dashboard and main content wrapper */
.dashboard,
#main {
  background-color: var(--ow-background) !important;
}

/* Module (app list) styling */
.module {
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.module h2 {
  background-color: var(--ow-secondary) !important;
  color: var(--ow-foreground) !important;
  border-bottom: 1px solid var(--ow-border) !important;
  font-family: var(--ow-font-sans) !important;
  font-weight: 600 !important;
  padding: 10px 15px !important;
}

.module table {
  background-color: var(--ow-card) !important;
}

/* Links */
a:link,
a:visited {
  color: var(--ow-accent) !important;
}

a:hover {
  color: var(--ow-primary) !important;
}

/* Buttons */
.button,
input[type="submit"],
input[type="button"],
.submit-row input {
  background-color: var(--ow-accent) !important;
  color: var(--ow-accent-foreground) !important;
  border: none !important;
  border-radius: calc(var(--ow-radius) - 2px) !important;
  padding: 10px 20px !important;
  font-family: var(--ow-font-sans) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #e67a00 !important; /* Darker orange on hover */
  color: var(--ow-accent-foreground) !important;
}

.button.default,
input[type="submit"].default,
.submit-row input.default {
  background-color: var(--ow-primary) !important;
  color: var(--ow-primary-foreground) !important;
}

.button.default:hover,
input[type="submit"].default:hover {
  background-color: #2d2d2d !important; /* Darker gray on hover */
}

/* Delete button */
.deletelink,
.deletelink-box a {
  background-color: var(--ow-destructive) !important;
  color: var(--ow-primary-foreground) !important;
}

.deletelink:hover,
.deletelink-box a:hover {
  background-color: #b91c1c !important; /* Darker red on hover */
}

/* Form fields */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select {
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: calc(var(--ow-radius) - 2px) !important;
  color: var(--ow-foreground) !important;
  font-family: var(--ow-font-sans) !important;
  padding: 8px 12px !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--ow-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1) !important;
}

/* Tables */
#result_list {
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius) !important;
}

/* Table containers and wrappers */
#changelist table,
#result_list table,
table thead,
table tbody {
  background-color: var(--ow-card) !important;
  color: var(--ow-foreground) !important;
}

/* Table cells */
#result_list td,
#result_list th,
table td,
table th {
  background-color: transparent !important;
  color: var(--ow-foreground) !important;
  border-color: var(--ow-border) !important;
}

#result_list thead th {
  background-color: var(--ow-secondary) !important;
  color: var(--ow-foreground) !important;
  border-bottom: 2px solid var(--ow-border) !important;
  font-family: var(--ow-font-sans) !important;
  font-weight: 600 !important;
}

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

#result_list tbody tr:hover {
  background-color: var(--ow-secondary) !important;
}

#result_list tbody td {
  color: var(--ow-foreground) !important;
  font-family: var(--ow-font-sans) !important;
}

/* Filters sidebar */
#changelist-filter {
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius) !important;
  color: var(--ow-foreground) !important;
}

#changelist-filter ul {
  background-color: var(--ow-card) !important;
}

#changelist-filter li {
  background-color: transparent !important;
  color: var(--ow-foreground) !important;
}

#changelist-filter li.selected {
  background-color: var(--ow-secondary) !important;
}

#changelist-filter h2 {
  background-color: var(--ow-secondary) !important;
  color: var(--ow-foreground) !important;
  font-family: var(--ow-font-sans) !important;
  font-weight: 600 !important;
}

#changelist-filter h3 {
  color: var(--ow-foreground) !important;
  font-family: var(--ow-font-sans) !important;
  font-weight: 500 !important;
}

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

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

/* Messages */
.messagelist li {
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius) !important;
  color: var(--ow-foreground) !important;
  font-family: var(--ow-font-sans) !important;
}

.messagelist li.success {
  background-color: var(--ow-success) !important;
  color: var(--ow-primary-foreground) !important;
  border-color: var(--ow-success) !important;
}

.messagelist li.error {
  background-color: var(--ow-destructive) !important;
  color: var(--ow-primary-foreground) !important;
  border-color: var(--ow-destructive) !important;
}

.messagelist li.warning {
  background-color: var(--ow-accent) !important;
  color: var(--ow-primary-foreground) !important;
  border-color: var(--ow-accent) !important;
}

/* Pagination */
.paginator {
  font-family: var(--ow-font-sans) !important;
}

.paginator a {
  color: var(--ow-accent) !important;
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: calc(var(--ow-radius) - 2px) !important;
}

.paginator a:hover {
  background-color: var(--ow-secondary) !important;
  color: var(--ow-primary) !important;
}

.paginator .this-page {
  background-color: var(--ow-accent) !important;
  color: var(--ow-accent-foreground) !important;
  border-color: var(--ow-accent) !important;
}

/* Action bar */
.actions {
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius) !important;
  padding: 10px !important;
}

/* Inline forms */
.inline-group {
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius) !important;
}

.inline-group h2 {
  background-color: var(--ow-secondary) !important;
  color: var(--ow-foreground) !important;
  font-family: var(--ow-font-sans) !important;
  font-weight: 600 !important;
}

/* Help text */
.help {
  color: var(--ow-muted-foreground) !important;
  font-family: var(--ow-font-sans) !important;
}

/* Required field indicator */
.required {
  color: var(--ow-destructive) !important;
}

/* Checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ow-accent) !important;
}

/* Select dropdowns */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23404040' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  padding-right: 30px !important;
}

/* Object tools */
.object-tools {
  font-family: var(--ow-font-sans) !important;
}

.object-tools a {
  background-color: var(--ow-accent) !important;
  color: var(--ow-accent-foreground) !important;
  border-radius: calc(var(--ow-radius) - 2px) !important;
}

.object-tools a:hover {
  background-color: #e67a00 !important;
}

/* Change list actions */
.change-list-actions {
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius) !important;
}

/* Fieldset */
fieldset {
  background-color: var(--ow-card) !important;
  border: 1px solid var(--ow-border) !important;
  border-radius: var(--ow-radius) !important;
}

fieldset legend {
  color: var(--ow-foreground) !important;
  font-family: var(--ow-font-sans) !important;
  font-weight: 600 !important;
}

/* Code/monospace text */
code,
pre {
  font-family: var(--ow-font-mono) !important;
  background-color: var(--ow-secondary) !important;
  color: var(--ow-foreground) !important;
  border-radius: calc(var(--ow-radius) - 4px) !important;
  padding: 2px 6px !important;
}

/* Search and action bars */
#toolbar,
#toolbar form,
#changelist-search,
.searchbar {
  background-color: var(--ow-card) !important;
  color: var(--ow-foreground) !important;
}

#changelist-search input[type="text"],
#changelist-search input[type="search"] {
  background-color: var(--ow-secondary) !important;
  color: var(--ow-foreground) !important;
  border-color: var(--ow-border) !important;
}

/* Action bar and bulk actions */
.actions,
.actions select,
.actions input {
  background-color: var(--ow-card) !important;
  color: var(--ow-foreground) !important;
}

.actions select {
  background-color: var(--ow-secondary) !important;
}

/* Changelist wrapper */
#changelist {
  background-color: var(--ow-background) !important;
}

/* All divs in content area should inherit dark background */
#content > div,
#content-main > div {
  background-color: var(--ow-background) !important;
}

/* Form wrapper */
.form-row,
fieldset.module {
  background-color: var(--ow-card) !important;
  color: var(--ow-foreground) !important;
}

/* Any remaining white backgrounds */
body > #container > #content,
body > #container > #content > * {
  background-color: var(--ow-background) !important;
}

/* Ensure table rows have proper dark styling */
#result_list tbody tr:nth-child(even) {
  background-color: var(--ow-secondary) !important;
}

#result_list tbody tr:nth-child(odd) {
  background-color: var(--ow-card) !important;
}

/* Filter links */
#changelist-filter a:link,
#changelist-filter a:visited {
  color: var(--ow-accent) !important;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
  #header h1 {
    font-size: 18px !important;
  }

  .module {
    margin-bottom: 15px !important;
  }
}