/* Oscope admin theme (light + dark) */

:root {
  --oscope-transition: 180ms ease;
  --oscope-font-stack: "Inter", "Segoe UI", "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

body.theme-oscope {
  --oscope-body-bg: #f5f7fb;
  --oscope-surface: #ffffff;
  --oscope-surface-subtle: #f0f3f9;
  --oscope-border: rgba(12, 30, 79, 0.08);
  --oscope-sidebar-bg: #16223b;
  --oscope-sidebar-muted: rgba(255, 255, 255, 0.55);
  --oscope-sidebar-active: #ffffff;
  --oscope-sidebar-hover: rgba(255, 255, 255, 0.1);
  --oscope-text: #172340;
  --oscope-text-muted: rgba(23, 35, 64, 0.65);
  --oscope-heading: #0a1530;
  --oscope-accent: #20c997;
  --oscope-accent-soft: rgba(32, 201, 151, 0.14);
  --oscope-danger: #f87171;
  --oscope-warning: #f59f00;
  --oscope-success: #20c997;
  --oscope-link: #1292ff;
  --oscope-shadow: 0 10px 30px -20px rgba(15, 23, 42, 0.45);
  --oscope-input-bg: #ffffff;
  --oscope-input-border: rgba(15, 23, 42, 0.1);
  color-scheme: light;
}

body.theme-oscope.theme-oscope--dark {
  --oscope-body-bg: #0f172a;
  --oscope-surface: #131c32;
  --oscope-surface-subtle: #162341;
  --oscope-border: rgba(226, 232, 240, 0.06);
  --oscope-sidebar-bg: #0b1323;
  --oscope-sidebar-muted: rgba(226, 232, 240, 0.55);
  --oscope-sidebar-active: #20c997;
  --oscope-sidebar-hover: rgba(32, 201, 151, 0.18);
  --oscope-text: #e2e8f0;
  --oscope-text-muted: rgba(226, 232, 240, 0.7);
  --oscope-heading: #f8fafc;
  --oscope-accent: #20c997;
  --oscope-accent-soft: rgba(32, 201, 151, 0.18);
  --oscope-danger: #f87171;
  --oscope-warning: #f6ad55;
  --oscope-success: #20c997;
  --oscope-link: #7dd3fc;
  --oscope-shadow: 0 14px 45px -30px rgba(2, 6, 23, 0.9);
  --oscope-input-bg: #162341;
  --oscope-input-border: rgba(226, 232, 240, 0.08);
  color-scheme: dark;
}

body.theme-oscope {
  background-color: var(--oscope-body-bg);
  font-family: var(--oscope-font-stack);
  color: var(--oscope-text);
  transition: background-color var(--oscope-transition), color var(--oscope-transition);
}

body.theme-oscope #header,
body.theme-oscope .sticky #header {
  background: var(--oscope-sidebar-bg);
  border-bottom: 0;
  color: var(--oscope-sidebar-muted);
  box-shadow: var(--oscope-shadow);
}

body.theme-oscope #branding h1 a,
body.theme-oscope #branding h1 a:link,
body.theme-oscope #branding h1 a:visited {
  color: var(--oscope-sidebar-active);
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.theme-oscope #user-tools,
body.theme-oscope #header a:link,
body.theme-oscope #header a:visited {
  color: var(--oscope-sidebar-muted);
}

body.theme-oscope #header a:hover,
body.theme-oscope #header a:focus {
  color: var(--oscope-sidebar-active);
}

body.theme-oscope #nav-sidebar,
body.theme-oscope #nav-sidebar .module,
body.theme-oscope #nav-sidebar .app-oscope {
  background: var(--oscope-sidebar-bg);
}

body.theme-oscope #nav-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

body.theme-oscope #nav-sidebar .module caption {
  color: var(--oscope-sidebar-muted);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.theme-oscope #nav-sidebar .current-model,
body.theme-oscope #nav-sidebar .current-app,
body.theme-oscope #nav-sidebar .model a.current {
  background: var(--oscope-sidebar-hover);
  color: var(--oscope-sidebar-active);
}

body.theme-oscope #nav-sidebar .model a {
  color: var(--oscope-sidebar-muted);
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  transition: background var(--oscope-transition), color var(--oscope-transition);
}

body.theme-oscope #nav-sidebar .model a:hover,
body.theme-oscope #nav-sidebar .model a:focus {
  background: var(--oscope-sidebar-hover);
  color: var(--oscope-sidebar-active);
}

body.theme-oscope #content,
body.theme-oscope .module,
body.theme-oscope .inline-group {
  background: transparent;
}

body.theme-oscope #content-main,
body.theme-oscope #changelist-form,
body.theme-oscope .module,
body.theme-oscope .inline-group,
body.theme-oscope .selector .selector-available,
body.theme-oscope .selector .selector-chosen {
  background: var(--oscope-surface);
  border: 1px solid var(--oscope-border);
  border-radius: 16px;
  box-shadow: var(--oscope-shadow);
  margin-bottom: 1.5rem;
}

body.theme-oscope .module table {
  border-radius: 16px;
  overflow: hidden;
}

body.theme-oscope table thead tr {
  background: var(--oscope-surface-subtle);
  color: var(--oscope-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

body.theme-oscope table th,
body.theme-oscope table td {
  border-color: var(--oscope-border);
}

body.theme-oscope table tbody tr:hover {
  background: rgba(32, 201, 151, 0.05);
}

body.theme-oscope .breadcrumbs {
  background: transparent;
  color: var(--oscope-text-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

body.theme-oscope .breadcrumbs a {
  color: var(--oscope-link);
}

body.theme-oscope h1, body.theme-oscope h2, body.theme-oscope h3,
body.theme-oscope h4, body.theme-oscope h5, body.theme-oscope h6 {
  color: var(--oscope-heading);
  letter-spacing: -0.01em;
}

body.theme-oscope .object-tools {
  margin-top: -0.5rem;
}

body.theme-oscope .object-tools li a,
body.theme-oscope .object-tools li.separator,
body.theme-oscope .button,
body.theme-oscope input[type="submit"],
body.theme-oscope input[type="button"],
body.theme-oscope .submit-row input,
body.theme-oscope .submit-row a.button {
  background: var(--oscope-accent);
  border-color: transparent;
  color: #ffffff;
  border-radius: 999px;
  padding: 0.55rem 1.35rem;
  font-weight: 600;
  box-shadow: 0 10px 18px -12px rgba(32, 201, 151, 0.85);
  transition: transform var(--oscope-transition), box-shadow var(--oscope-transition), filter var(--oscope-transition);
}

body.theme-oscope .button.default:disabled,
body.theme-oscope .submit-row input:disabled {
  filter: grayscale(0.2);
  opacity: 0.6;
  cursor: not-allowed;
}

body.theme-oscope .object-tools li a:hover,
body.theme-oscope .button:hover,
body.theme-oscope input[type="submit"]:hover,
body.theme-oscope input[type="button"]:hover,
body.theme-oscope .submit-row input:hover,
body.theme-oscope .submit-row a.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -20px rgba(32, 201, 151, 0.85);
}

body.theme-oscope input,
body.theme-oscope select,
body.theme-oscope textarea {
  background: var(--oscope-input-bg);
  border-color: var(--oscope-input-border);
  border-radius: 12px;
  padding: 0.55rem 0.75rem;
  transition: border-color var(--oscope-transition), box-shadow var(--oscope-transition);
  color: var(--oscope-text);
}

body.theme-oscope input:focus,
body.theme-oscope select:focus,
body.theme-oscope textarea:focus {
  border-color: var(--oscope-accent);
  box-shadow: 0 0 0 3px var(--oscope-accent-soft);
}

body.theme-oscope .selector .selector-filter input {
  border-radius: 999px;
}

body.theme-oscope .inline-related h2 {
  background: var(--oscope-surface-subtle);
  border-bottom: 1px solid var(--oscope-border);
  padding: 1rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
}

body.theme-oscope .inline-group .tabular td.original p {
  color: var(--oscope-text-muted);
}

body.theme-oscope .aligned label {
  color: var(--oscope-text-muted);
  font-weight: 500;
}

body.theme-oscope .submit-row {
  background: transparent;
  border-top: none;
  padding: 1.5rem 1.5rem 1.1rem;
}

body.theme-oscope .submit-row input.default,
body.theme-oscope .submit-row input[type="submit"] {
  background: linear-gradient(145deg, var(--oscope-accent), #1ab58a);
}

body.theme-oscope .errornote,
body.theme-oscope .errors,
body.theme-oscope .errorlist li {
  background: rgba(248, 113, 113, 0.12);
  color: var(--oscope-danger);
  border-color: rgba(248, 113, 113, 0.35);
}

body.theme-oscope .success {
  background: rgba(32, 201, 151, 0.1);
  border-color: rgba(32, 201, 151, 0.35);
  color: var(--oscope-success);
}

body.theme-oscope .warning {
  background: rgba(245, 159, 0, 0.15);
  border-color: rgba(245, 159, 0, 0.35);
  color: #b7791f;
}

body.theme-oscope.theme-oscope--dark .warning {
  color: #f6ad55;
}

body.theme-oscope .paginator,
body.theme-oscope .paginators {
  background: transparent;
}

body.theme-oscope .paginator a,
body.theme-oscope .paginator span,
body.theme-oscope .paginators a,
body.theme-oscope .paginators span {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.25rem 0.75rem;
  color: var(--oscope-text-muted);
}

body.theme-oscope .paginator a:hover,
body.theme-oscope .paginators a:hover {
  border-color: var(--oscope-accent);
  color: var(--oscope-accent);
}

body.theme-oscope .paginator span.this-page,
body.theme-oscope .paginators span.this-page {
  background: var(--oscope-accent);
  color: #ffffff;
}

body.theme-oscope .change-list .actions {
  background: var(--oscope-surface);
  border: 1px solid var(--oscope-border);
  border-radius: 14px;
  padding: 1rem;
}

body.theme-oscope .selector-chosen h2,
body.theme-oscope .selector-available h2 {
  background: transparent;
  color: var(--oscope-text-muted);
  border-bottom: 1px solid var(--oscope-border);
}

/* Theme switcher */

.oscope-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.25rem;
  margin-left: 1rem;
  backdrop-filter: blur(8px);
}

#header .oscope-theme-switcher {
  margin-left: 1.25rem;
}

#header #user-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

body.theme-oscope .oscope-theme-switcher {
  background: rgba(15, 23, 42, 0.15);
}

.oscope-theme-switcher button {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--oscope-transition), color var(--oscope-transition);
}

.oscope-theme-switcher button.is-active {
  background: var(--oscope-accent);
  color: #ffffff;
}

body:not(.theme-oscope) .oscope-theme-switcher button[data-theme="classic"],
body.theme-oscope .oscope-theme-switcher button[data-theme="oscope"] {
  background: var(--oscope-accent);
  color: #ffffff;
}

.oscope-theme-switcher button[data-mode] {
  display: none;
}

body.theme-oscope .oscope-theme-switcher button[data-mode] {
  display: inline-flex;
}

body.theme-oscope.theme-oscope--dark .oscope-theme-switcher button[data-mode="dark"],
body.theme-oscope:not(.theme-oscope--dark) .oscope-theme-switcher button[data-mode="light"] {
  background: var(--oscope-accent);
  color: #ffffff;
}

/* Sticky header spacing */
body.theme-oscope #content {
  padding-top: 1.75rem;
}

body.theme-oscope .dashboard #content-main .module {
  padding: 1.25rem;
}

body.theme-oscope .dashboard .module h2 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 1024px) {
  body.theme-oscope #nav-sidebar {
    background: var(--oscope-sidebar-bg);
  }
  .oscope-theme-switcher {
    margin-top: 0.75rem;
    margin-left: 0;
  }
}