/* ============================================================================
   8OM ADMIN THEME — Premium Compact UI
   Glass Morphism · Micro-Animations · Tight Spacing · Modern
   ============================================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --8om-bg-body:       #090C10;
  --8om-bg-card:       #0F1318;
  --8om-bg-input:      #161B22;
  --8om-bg-hover:      rgba(255,255,255,0.04);
  --8om-bg-selected:   rgba(3,204,218,0.08);
  --8om-bg-glass:      rgba(15,19,24,0.82);
  --8om-bg-elevated:   #1A1F27;
  --8om-sidebar-bg:    #0B0E13;

  --8om-border:        #1C2333;
  --8om-border-subtle: rgba(255,255,255,0.04);

  --8om-text-heading:   #F0F4F8;
  --8om-text-primary:   #B8C4D0;
  --8om-text-secondary: #7B8A9A;
  --8om-text-muted:     #4E5D6E;

  --8om-accent:        #03CCDA;
  --8om-accent-hover:  #1AEAF8;
  --8om-accent-light:  rgba(3,204,218,0.10);
  --8om-accent-glow:   rgba(3,204,218,0.28);
  --8om-accent-gradient: linear-gradient(135deg,#03CCDA 0%,#0899D4 100%);

  --8om-success:    #22C55E;
  --8om-success-bg: rgba(34,197,94,0.08);
  --8om-warning:    #F59E0B;
  --8om-warning-bg: rgba(245,158,11,0.08);
  --8om-danger:     #EF4444;
  --8om-danger-bg:  rgba(239,68,68,0.06);
  --8om-info:       #3B82F6;
  --8om-info-bg:    rgba(59,130,246,0.08);

  --8om-topbar-height:      48px;
  --8om-sidebar-width:      236px;
  --8om-sidebar-collapsed:  52px;

  --8om-radius:    6px;
  --8om-radius-lg: 10px;
  --8om-radius-xl: 14px;

  --8om-shadow:     0 1px 2px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.03);
  --8om-shadow-lg:  0 8px 30px rgba(0,0,0,0.50);
  --8om-shadow-glow: 0 0 20px rgba(3,204,218,0.12);

  --8om-transition:       all 0.18s cubic-bezier(0.4,0,0.2,1);
  --8om-transition-fast:  all 0.12s ease;
  --8om-transition-spring: all 0.30s cubic-bezier(0.34,1.56,0.64,1);
}

[data-theme="light"] {
  --8om-bg-body:     #F1F5F9;
  --8om-bg-card:     #FFFFFF;
  --8om-bg-input:    #F8FAFC;
  --8om-bg-hover:    rgba(0,0,0,0.03);
  --8om-bg-selected: rgba(3,204,218,0.06);
  --8om-bg-glass:    rgba(255,255,255,0.85);
  --8om-bg-elevated: #FFFFFF;
  --8om-sidebar-bg:  #FFFFFF;
  --8om-border:      #E2E8F0;
  --8om-border-subtle: rgba(0,0,0,0.04);
  --8om-text-heading:  #0F172A;
  --8om-text-primary:  #334155;
  --8om-text-secondary:#64748B;
  --8om-text-muted:    #94A3B8;
  --8om-shadow:     0 1px 3px rgba(0,0,0,0.06);
  --8om-shadow-lg:  0 8px 30px rgba(0,0,0,0.08);
  --8om-shadow-glow: 0 0 20px rgba(3,204,218,0.06);
}

/* ---------- Keyframes ---------- */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(3,204,218,0); }
  50%     { box-shadow:0 0 12px 2px rgba(3,204,218,0.12); }
}
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}

/* ---------- Global Reset ---------- */
html, body {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  background: var(--8om-bg-body) !important;
  color: var(--8om-text-primary) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  overflow-x: hidden !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Hide Django's built-in theme toggle */
.theme-toggle { display: none !important; }

/* ---------- Links ---------- */
a:link, a:visited {
  color: var(--8om-accent) !important;
  text-decoration: none !important;
  transition: var(--8om-transition-fast) !important;
}
a:hover {
  color: var(--8om-accent-hover) !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER  /  TOP BAR
   ══════════════════════════════════════════════════════════════════════════════ */
#header {
  background: var(--8om-bg-glass) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid var(--8om-border) !important;
  color: var(--8om-text-heading) !important;
  padding: 0 20px !important;
  height: var(--8om-topbar-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: fixed !important;
  top: 0 !important;
  left: var(--8om-sidebar-width) !important;
  right: 0 !important;
  z-index: 1000 !important;
  box-shadow: none !important;
  transition: var(--8om-transition) !important;
}

#header #branding {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#header #branding h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--8om-text-heading) !important;
  letter-spacing: -0.3px !important;
}

#header #branding h1 a:link,
#header #branding h1 a:visited {
  color: var(--8om-text-heading) !important;
}

#header #user-tools {
  float: none !important;
  font-size: 12px !important;
  color: var(--8om-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#header #user-tools a {
  color: var(--8om-text-secondary) !important;
  padding: 4px 10px !important;
  border-radius: var(--8om-radius) !important;
  transition: var(--8om-transition) !important;
  font-size: 12px !important;
}

#header #user-tools a:hover {
  background: var(--8om-bg-hover) !important;
  color: var(--8om-accent) !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════════════════════════════════════════ */
#container {
  padding-top: var(--8om-topbar-height) !important;
  padding-left: var(--8om-sidebar-width) !important;
  transition: var(--8om-transition) !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

#content {
  padding: 16px 24px !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  animation: fadeIn 0.25s ease-out !important;
}

/* Page title */
#content > h1,
#content > .content_title > h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--8om-text-heading) !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  letter-spacing: -0.4px !important;
  line-height: 1.3 !important;
}

#content > h2 {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--8om-text-muted) !important;
  margin: 0 0 14px 0 !important;
}

#content-main {
  margin-top: 0 !important;
  float: none !important;
  width: 100% !important;
}

.dashboard #content { width: auto !important; }
.colMS { margin-right: 0 !important; }
.colSM { margin-left: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════════════════════════ */
div.breadcrumbs {
  background: var(--8om-bg-card) !important;
  padding: 8px 24px !important;
  color: var(--8om-text-muted) !important;
  font-size: 12px !important;
  border: none !important;
  border-bottom: 1px solid var(--8om-border) !important;
  position: static !important;
}

div.breadcrumbs a {
  color: var(--8om-text-secondary) !important;
}
div.breadcrumbs a:hover {
  color: var(--8om-accent) !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODULES  /  CARDS
   ══════════════════════════════════════════════════════════════════════════════ */
.module {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius-lg) !important;
  box-shadow: var(--8om-shadow) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  transition: var(--8om-transition) !important;
}

#changelist.module {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.module h2, .module caption {
  background: transparent !important;
  border-bottom: 1px solid var(--8om-border) !important;
  color: var(--8om-text-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD INDEX MODULES
   ══════════════════════════════════════════════════════════════════════════════ */
#content-main .module th {
  background: transparent !important;
  color: var(--8om-text-muted) !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid var(--8om-border) !important;
}

#content-main .module td {
  padding: 6px 12px !important;
  border-bottom: 1px solid var(--8om-border-subtle) !important;
  color: var(--8om-text-primary) !important;
  font-size: 12px !important;
}

#content-main .module td a { font-weight: 500 !important; }

#content-main .module tr {
  transition: var(--8om-transition-fast) !important;
}
#content-main .module tr:hover td {
  background: var(--8om-bg-hover) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHANGELIST HEADER BAR
   ══════════════════════════════════════════════════════════════════════════════ */
.changelist-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

.changelist-header-left {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.changelist-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--8om-text-heading) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.4px !important;
  white-space: nowrap !important;
}

.changelist-count {
  font-size: 11px !important;
  color: var(--8om-text-muted) !important;
  background: var(--8om-bg-input) !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.changelist-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* ── Filter toggle button ── */
.changelist-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--8om-bg-input) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius) !important;
  color: var(--8om-text-secondary) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  transition: var(--8om-transition) !important;
  position: relative !important;
}
.changelist-filter-btn:hover {
  background: var(--8om-bg-hover) !important;
  border-color: var(--8om-accent) !important;
  color: var(--8om-accent) !important;
}
.changelist-filter-btn.active {
  background: var(--8om-accent-light) !important;
  border-color: var(--8om-accent) !important;
  color: var(--8om-accent) !important;
}
.filter-active-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--8om-accent) !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  animation: pulseGlow 2s infinite !important;
}

/* Hide the default page h1 on changelist — we have our own */
.change-list #content > h1,
.change-list #content > .content_title > h1 {
  display: none !important;
}

/* Hide Django's default object-tools ul on changelist since buttons are in our header */
.change-list .object-tools {
  display: contents !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.change-list .object-tools li {
  display: inline-flex !important;
  float: none !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHANGELIST  /  DATA TABLES
   ══════════════════════════════════════════════════════════════════════════════ */
#changelist {
  background: transparent !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

#changelist .changelist-form-container {
  flex: 1 !important;
  min-width: 0 !important;
  animation: fadeInUp 0.3s ease-out !important;
}

#changelist .results {
  overflow-x: auto !important;
  width: 100% !important;
  border-radius: var(--8om-radius-lg) !important;
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
}

/* ── Table ── */
#changelist table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  overflow: visible !important;
  table-layout: auto !important;
  box-shadow: none !important;
}

/* ── Table Head ── */
#changelist table thead th {
  background: #0D1117 !important;
  color: var(--8om-text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-top: none !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

#changelist table thead th a:link,
#changelist table thead th a:visited {
  color: var(--8om-text-muted) !important;
}
#changelist table thead th a:hover {
  color: var(--8om-accent) !important;
}

#changelist table thead th.sorted {
  background: rgba(3,204,218,0.06) !important;
}
#changelist table thead th.sorted a {
  color: var(--8om-accent) !important;
}

#changelist table thead th .text a { padding: 0 !important; }
#changelist table thead th .sortoptions {
  display: inline-flex !important;
  align-items: center !important;
}
#changelist table thead th .sortoptions a { padding: 1px 3px !important; }

/* ── Table Body ── */
#changelist table tbody td {
  padding: 11px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  border-top: none !important;
  color: var(--8om-text-secondary) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  transition: background 0.15s ease !important;
}

#changelist table tbody tr {
  transition: background 0.15s ease !important;
  cursor: pointer !important;
  background: #0B0F14 !important;
}

/* Alternating darker rows */
#changelist table tbody tr:nth-child(even) {
  background: #10141A !important;
}

#changelist table tbody tr:hover td,
#changelist table tbody tr:hover th {
  background: rgba(3,204,218,0.04) !important;
}

#changelist table tbody tr:nth-child(even):hover td,
#changelist table tbody tr:nth-child(even):hover th {
  background: rgba(3,204,218,0.04) !important;
}

#changelist table tbody tr.selected td,
#changelist table tbody tr.selected th {
  background: rgba(3,204,218,0.08) !important;
}

/* Links — accent cyan */
#changelist table tbody td a:link,
#changelist table tbody td a:visited {
  color: var(--8om-accent) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
#changelist table tbody td a:hover {
  color: var(--8om-accent-hover) !important;
}

/* First column (link column) */
#changelist table tbody th {
  padding: 11px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  border-top: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: inherit !important;
  color: var(--8om-text-secondary) !important;
}
#changelist table tbody th a {
  color: var(--8om-accent) !important;
  text-decoration: none !important;
}
#changelist table tbody th a:hover {
  color: var(--8om-accent-hover) !important;
}

/* ── Checkbox ── */
#changelist table input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  accent-color: var(--8om-accent) !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOOLBAR  /  SEARCH
   ══════════════════════════════════════════════════════════════════════════════ */
#changelist #toolbar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
}

#changelist #toolbar form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
}

#changelist #toolbar form label {
  display: flex !important;
  align-items: center !important;
  color: var(--8om-text-muted) !important;
}
#changelist #toolbar form label img {
  opacity: 0.35 !important;
  filter: brightness(2) !important;
}

#changelist #searchbar {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--8om-radius) !important;
  color: var(--8om-text-primary) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  flex: 1 !important;
  max-width: 360px !important;
  transition: all 0.2s ease !important;
}
#changelist #searchbar:focus {
  border-color: var(--8om-accent) !important;
  box-shadow: 0 0 0 2px rgba(3,204,218,0.12) !important;
  outline: none !important;
  background: rgba(255,255,255,0.06) !important;
}
#changelist #searchbar::placeholder {
  color: var(--8om-text-muted) !important;
}

/* Search button */
#changelist #toolbar input[type="submit"] {
  background: rgba(255,255,255,0.04) !important;
  color: var(--8om-text-secondary) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--8om-radius) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.3px !important;
}
#changelist #toolbar input[type="submit"]:hover {
  background: rgba(255,255,255,0.08) !important;
  color: var(--8om-text-heading) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FILTERS PANEL (Toggle)
   ══════════════════════════════════════════════════════════════════════════════ */
#changelist-filter {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius-lg) !important;
  box-shadow: var(--8om-shadow-lg) !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: sticky !important;
  top: calc(var(--8om-topbar-height) + 12px) !important;
  max-height: calc(100vh - var(--8om-topbar-height) - 24px) !important;
  overflow-y: auto !important;
  align-self: flex-start !important;
  float: none !important;
  margin: 0 !important;
  transition: opacity 0.2s ease, transform 0.2s ease, max-width 0.25s ease, flex-basis 0.25s ease !important;
  flex: 0 0 220px !important;
  max-width: 220px !important;
}

/* Hidden state — panel slides away */
#changelist-filter.filter-panel-hidden {
  opacity: 0 !important;
  transform: translateX(20px) !important;
  max-width: 0 !important;
  flex-basis: 0 !important;
  border: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* Filter panel header with close button */
.filter-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--8om-bg-elevated) !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--8om-border) !important;
}

.filter-panel-header h2 {
  background: transparent !important;
  border: none !important;
  color: var(--8om-text-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.filter-close-btn {
  background: none !important;
  border: none !important;
  color: var(--8om-text-muted) !important;
  cursor: pointer !important;
  padding: 4px !important;
  border-radius: 4px !important;
  transition: var(--8om-transition-fast) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
}
.filter-close-btn:hover {
  color: var(--8om-text-heading) !important;
  background: var(--8om-bg-hover) !important;
}

.filter-clear-row {
  padding: 6px 14px !important;
  border-bottom: 1px solid var(--8om-border-subtle) !important;
}
.filter-clear-row a {
  font-size: 11px !important;
  color: var(--8om-danger) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.filter-clear-row a:hover {
  color: var(--8om-danger) !important;
  text-decoration: underline !important;
}

/* Remove Django's default h2 inside filter (we use .filter-panel-header) */
#changelist-filter > h2 { display: none !important; }
#changelist-filter > h3#changelist-filter-clear { display: none !important; }

#changelist-filter h3 {
  color: var(--8om-text-secondary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 10px 14px 3px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

#changelist-filter ul {
  padding: 2px 6px 6px !important;
  margin: 0 !important;
  list-style: none !important;
}
#changelist-filter li { padding: 0 !important; margin: 0 !important; }

#changelist-filter li a {
  display: block !important;
  padding: 4px 10px !important;
  color: var(--8om-text-secondary) !important;
  font-size: 12px !important;
  border-radius: 5px !important;
  transition: var(--8om-transition-fast) !important;
}
#changelist-filter li a:hover {
  background: var(--8om-bg-hover) !important;
  color: var(--8om-text-primary) !important;
  text-decoration: none !important;
}
#changelist-filter li.selected a {
  background: var(--8om-accent-light) !important;
  color: var(--8om-accent) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════════ */
.paginator {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 0 0 !important;
  color: var(--8om-text-muted) !important;
  font-size: 12px !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.paginator a:link, .paginator a:visited {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 5px !important;
  color: var(--8om-text-secondary) !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 12px !important;
}

.paginator a:hover {
  background: rgba(255,255,255,0.08) !important;
  color: var(--8om-accent) !important;
  border-color: rgba(255,255,255,0.10) !important;
  text-decoration: none !important;
}

.paginator .this-page {
  font-weight: 700 !important;
  color: var(--8om-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════════ */
.button, input[type="submit"], .submit-row input, .submit-row p.deletelink-box a {
  font-family: 'Inter',sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border-radius: var(--8om-radius) !important;
  cursor: pointer !important;
  transition: var(--8om-transition) !important;
  letter-spacing: 0.2px !important;
}

input[type="submit"], .button.default, .submit-row input[type="submit"] {
  background: var(--8om-accent-gradient) !important;
  color: #0A0D10 !important;
  border: none !important;
  padding: 8px 18px !important;
  box-shadow: 0 2px 8px rgba(3,204,218,0.20) !important;
}

input[type="submit"]:hover, .button.default:hover, .submit-row input[type="submit"]:hover {
  background: var(--8om-accent-hover) !important;
  box-shadow: var(--8om-shadow-glow) !important;
  transform: translateY(-1px) !important;
}

input[type="submit"]:active, .button.default:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.button:not(.default), a.button:not(.default) {
  background: var(--8om-bg-input) !important;
  color: var(--8om-text-primary) !important;
  border: 1px solid var(--8om-border) !important;
  padding: 6px 14px !important;
}
.button:not(.default):hover {
  background: var(--8om-bg-hover) !important;
  border-color: var(--8om-accent) !important;
  transform: translateY(-1px) !important;
}

.deletelink, a.deletelink {
  color: var(--8om-danger) !important;
  background: var(--8om-danger-bg) !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
  padding: 6px 14px !important;
}
.deletelink:hover {
  background: var(--8om-danger) !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SUBMIT ROW (Sticky bottom)
   ══════════════════════════════════════════════════════════════════════════════ */
.submit-row {
  background: var(--8om-bg-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius-lg) !important;
  padding: 10px 16px !important;
  margin: 14px 0 !important;
  position: sticky !important;
  bottom: 12px !important;
  z-index: 100 !important;
  box-shadow: var(--8om-shadow-lg) !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FORM HEADER BAR
   ══════════════════════════════════════════════════════════════════════════════ */
.form-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

.form-header-left {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.form-header-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--8om-text-heading) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.4px !important;
}

.form-header-action {
  color: var(--8om-accent) !important;
  font-weight: 600 !important;
}

.form-header-id {
  font-size: 12px !important;
  color: var(--8om-text-muted) !important;
  background: var(--8om-bg-input) !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
}

.form-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Hide default h1 on change form pages since we have our header */
.change-form #content > h1 {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FORMS — Premium Redesign
   ══════════════════════════════════════════════════════════════════════════════ */
fieldset {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius-lg) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  animation: fadeInUp 0.25s ease-out !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

fieldset:hover {
  border-color: rgba(3,204,218,0.15) !important;
}

fieldset h2 {
  background: var(--8om-bg-elevated) !important;
  border-bottom: 1px solid var(--8om-border) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  color: var(--8om-text-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  cursor: pointer !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.15s ease !important;
}

fieldset h2:hover {
  background: var(--8om-bg-hover) !important;
}

fieldset h2::before {
  content: '' !important;
  display: inline-block !important;
  width: 3px !important;
  height: 14px !important;
  background: var(--8om-accent-gradient) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

fieldset .form-row {
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--8om-border-subtle) !important;
  transition: background 0.12s ease !important;
}
fieldset .form-row:last-child { border-bottom: none !important; }

fieldset .form-row:hover {
  background: rgba(255,255,255,0.01) !important;
}

fieldset .form-row label {
  color: var(--8om-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

fieldset .form-row.errors label {
  color: var(--8om-danger) !important;
}

/* Required field indicator */
fieldset .form-row.required label::after,
fieldset .form-row label.required::after {
  content: '*' !important;
  color: var(--8om-accent) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-left: 2px !important;
}

/* Form inputs — premium style */
input[type="text"], input[type="password"], input[type="email"],
input[type="url"], input[type="number"], input[type="tel"],
input[type="date"], input[type="datetime-local"],
textarea, select, .vTextField, .vURLField, .vIntegerField {
  background: var(--8om-bg-input) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius) !important;
  color: var(--8om-text-primary) !important;
  padding: 9px 14px !important;
  font-family: 'Inter',sans-serif !important;
  font-size: 13px !important;
  transition: var(--8om-transition) !important;
  width: auto !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--8om-accent) !important;
  box-shadow: 0 0 0 3px var(--8om-accent-light), 0 0 12px rgba(3,204,218,0.08) !important;
  outline: none !important;
}

input:hover, textarea:hover, select:hover {
  border-color: var(--8om-text-muted) !important;
}

select {
  appearance: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%237B8A9A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 10px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  padding-right: 32px !important;
}

textarea {
  min-height: 80px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

.help, .helptext, p.help {
  color: var(--8om-text-muted) !important;
  font-size: 11px !important;
  margin-top: 4px !important;
  padding-left: 1px !important;
}

.readonly, .form-row .readonly {
  color: var(--8om-text-secondary) !important;
  font-size: 13px !important;
  padding: 9px 0 !important;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--8om-accent) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  transition: var(--8om-transition-fast) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   OBJECT TOOLS (Action buttons)
   ══════════════════════════════════════════════════════════════════════════════ */
.object-tools {
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  display: flex !important;
  gap: 6px !important;
  list-style: none !important;
  float: none !important;
}

.object-tools li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.object-tools a:link, .object-tools a:visited {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius) !important;
  color: var(--8om-text-primary) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: var(--8om-transition) !important;
  white-space: nowrap !important;
}

.object-tools a:hover {
  background: var(--8om-bg-hover) !important;
  color: var(--8om-accent) !important;
  border-color: var(--8om-accent) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

.object-tools a.addlink::before {
  content: '+' !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.object-tools a.addlink:link, .object-tools a.addlink:visited {
  background: var(--8om-accent-gradient) !important;
  color: #0A0D10 !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(3,204,218,0.22) !important;
  padding: 7px 16px !important;
}
.object-tools a.addlink:hover {
  box-shadow: var(--8om-shadow-glow) !important;
  transform: translateY(-1px) !important;
  background: var(--8om-accent-hover) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACTIONS DROPDOWN
   ══════════════════════════════════════════════════════════════════════════════ */
.actions {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
  color: var(--8om-text-muted) !important;
}

.actions select { min-width: 180px !important; }

.actions label {
  color: var(--8om-text-muted) !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.actions .button {
  padding: 6px 12px !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--8om-text-secondary) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.actions .button:hover {
  background: rgba(255,255,255,0.08) !important;
  color: var(--8om-text-heading) !important;
}

.actions .action-counter,
.actions .actions-counter,
.actions .all {
  font-size: 11px !important;
  color: var(--8om-text-muted) !important;
}

.actions .question { font-size: 11px !important; color: var(--8om-text-muted) !important; }
.actions .clear { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   MESSAGES  /  TOASTS
   ══════════════════════════════════════════════════════════════════════════════ */
.messagelist {
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.messagelist li {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  box-shadow: var(--8om-shadow) !important;
  animation: slideInRight 0.3s ease-out !important;
  border-left: 3px solid var(--8om-success) !important;
  color: var(--8om-text-primary) !important;
}
.messagelist li.warning { border-left-color: var(--8om-warning) !important; }
.messagelist li.error   { border-left-color: var(--8om-danger)  !important; }
.messagelist li.info    { border-left-color: var(--8om-info)    !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   INLINE GROUPS
   ══════════════════════════════════════════════════════════════════════════════ */
.inline-group {
  background: transparent !important;
  border: none !important;
}

.inline-group h2 {
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--8om-text-heading) !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--8om-border) !important;
}

.inline-group .tabular td {
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--8om-border-subtle) !important;
  font-size: 12px !important;
}

.inline-related {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius) !important;
  margin-bottom: 8px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MISC UI COMPONENTS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Related lookups */
.related-lookup, .related-widget-wrapper select + a,
.datetimeshortcuts a {
  color: var(--8om-text-secondary) !important;
  margin-left: 4px !important;
}

/* Calendar / Date */
.calendarbox, .clockbox {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius-lg) !important;
  box-shadow: var(--8om-shadow-lg) !important;
}
.calendar caption {
  background: var(--8om-bg-input) !important;
  color: var(--8om-text-heading) !important;
}
.calendar td, .calendar th { color: var(--8om-text-primary) !important; }
.calendar td a:link, .calendar td a:visited { color: var(--8om-accent) !important; }

/* Errors */
.errornote {
  background: var(--8om-danger-bg) !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
  border-radius: var(--8om-radius) !important;
  color: var(--8om-danger) !important;
  padding: 8px 16px !important;
  margin-bottom: 12px !important;
  font-size: 13px !important;
}

ul.errorlist {
  background: transparent !important;
  color: var(--8om-danger) !important;
  margin: 3px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.errorlist li {
  background: var(--8om-danger-bg) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  margin-top: 3px !important;
}
.form-row.errors {
  background: var(--8om-danger-bg) !important;
  border-left: 2px solid var(--8om-danger) !important;
}

/* Hide Django's nav sidebar */
nav.sticky      { display: none !important; }
#nav-sidebar    { display: none !important; }
.theme-toggle   { display: none !important; }

/* Recent Actions */
#recent-actions-module {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius-lg) !important;
}
#recent-actions-module h2 {
  background: transparent !important;
  color: var(--8om-text-heading) !important;
}
#recent-actions-module .actionlist li {
  padding: 6px 12px !important;
  border-bottom: 1px solid var(--8om-border-subtle) !important;
  color: var(--8om-text-primary) !important;
  font-size: 12px !important;
  transition: var(--8om-transition-fast) !important;
}
#recent-actions-module .actionlist li:hover {
  background: var(--8om-bg-hover) !important;
}

/* Delete confirmation */
.delete-confirmation {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius-lg) !important;
  padding: 20px !important;
}

/* Collapsed fieldsets */
fieldset.collapsed {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
}
fieldset.collapsed h2 { color: var(--8om-text-secondary) !important; }

/* Tabular inline tables */
.tabular .module table { background: var(--8om-bg-card) !important; }

/* History */
#change-history table {
  width: 100% !important;
  background: var(--8om-bg-card) !important;
  border-radius: var(--8om-radius-lg) !important;
  border: 1px solid var(--8om-border) !important;
}
#change-history table th {
  background: var(--8om-bg-input) !important;
  color: var(--8om-text-secondary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 8px 12px !important;
}
#change-history table td {
  color: var(--8om-text-primary) !important;
  border-bottom: 1px solid var(--8om-border-subtle) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* Boolean icons */
img[src*="icon-yes"], img[src*="icon-no"], img[src*="icon-unknown"] {
  width: 14px !important;
  height: 14px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #header { left: 0 !important; }
  #container { padding-left: 0 !important; }
  div.breadcrumbs { padding-left: 24px !important; }
  .messagelist { padding-left: 24px !important; }
}

@media (max-width: 767px) {
  #content { padding: 12px !important; }
  #changelist table { font-size: 11px !important; }
  .submit-row  { flex-wrap: wrap !important; }
  .actions      { flex-wrap: wrap !important; }
  #changelist #toolbar { flex-wrap: wrap !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--8om-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--8om-text-muted); }

/* ══════════════════════════════════════════════════════════════════════════════
   SELECTION
   ══════════════════════════════════════════════════════════════════════════════ */
::selection {
  background: var(--8om-accent);
  color: #0A0D10;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHANGE FORM
   ══════════════════════════════════════════════════════════════════════════════ */
#content.colM { max-width: 100% !important; }

.change-form #content-main { max-width: 900px !important; }

.change-form .form-row .vTextField,
.change-form .form-row input[type="text"],
.change-form .form-row input[type="url"],
.change-form .form-row input[type="email"] {
  width: 100% !important;
  max-width: 560px !important;
  box-sizing: border-box !important;
}
.change-form .form-row textarea {
  width: 100% !important;
  max-width: 720px !important;
  box-sizing: border-box !important;
}

/* Form row layout */
fieldset .form-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
fieldset .form-row > label {
  min-width: 140px !important;
  padding-top: 8px !important;
}
fieldset .form-row > div,
fieldset .form-row > input,
fieldset .form-row > select,
fieldset .form-row > textarea {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Related widget wrapper */
.related-widget-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.related-widget-wrapper select { flex: 1 !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   AUTOCOMPLETE
   ══════════════════════════════════════════════════════════════════════════════ */
.select2-container--admin-autocomplete .select2-selection {
  background: var(--8om-bg-input) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius) !important;
  color: var(--8om-text-primary) !important;
  min-height: 32px !important;
}

.select2-dropdown {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius) !important;
  box-shadow: var(--8om-shadow-lg) !important;
}
.select2-results__option {
  color: var(--8om-text-primary) !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}
.select2-results__option--highlighted {
  background: var(--8om-accent-light) !important;
  color: var(--8om-accent) !important;
}

/* Collapse toggle */
fieldset.collapse .collapse-toggle { color: var(--8om-accent) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   BADGE & STAT UTILITIES
   ══════════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.badge-success { background: var(--8om-success-bg); color: var(--8om-success); }
.badge-warning { background: var(--8om-warning-bg); color: var(--8om-warning); }
.badge-danger  { background: var(--8om-danger-bg);  color: var(--8om-danger);  }
.badge-info    { background: var(--8om-info-bg);    color: var(--8om-info);    }
.badge-accent  { background: var(--8om-accent-light); color: var(--8om-accent); }

.stat-card {
  background: var(--8om-bg-card);
  border: 1px solid var(--8om-border);
  border-radius: var(--8om-radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: var(--8om-transition);
}
.stat-card:hover {
  border-color: var(--8om-accent-light);
  box-shadow: var(--8om-shadow-glow);
  transform: translateY(-2px);
}
.stat-card .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--8om-text-heading);
  line-height: 1;
}
.stat-card .stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--8om-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.stat-card .stat-change { font-size: 11px; font-weight: 600; }
.stat-card .stat-change.up   { color: var(--8om-success); }
.stat-card .stat-change.down { color: var(--8om-danger);  }

/* ══════════════════════════════════════════════════════════════════════════════
   ENHANCED PAGE LAYOUTS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Action checkbox */
#changelist table .action-checkbox-column {
  width: 36px !important;
  text-align: center !important;
}
#changelist table th.action-checkbox-column .text span {
  display: flex !important;
  justify-content: center !important;
}

#changelist .xfull { text-decoration: none !important; }

/* Hide changelist module captions */
#changelist .module h2,
#changelist .module caption { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   LOGIN / POPUP
   ══════════════════════════════════════════════════════════════════════════════ */
body.login #container  { padding: 0 !important; }
body.login #header     { position: static !important; }

body.popup #container  { padding-left: 0 !important; padding-top: 0 !important; }
body.popup #header     { position: static !important; left: 0 !important; }

/* Boolean field icons in tables */
td img[src*="icon-yes"]     { filter: hue-rotate(120deg) brightness(1.5) !important; }
td img[src*="icon-no"]      { filter: brightness(1.5) !important; }
td img[src*="icon-unknown"] { filter: brightness(1.5) !important; }

/* Tabular inline improvements */
.inline-group .tabular { overflow-x: auto !important; }
.inline-group .tabular table {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}
.inline-group .tabular thead th {
  background: var(--8om-bg-input) !important;
  color: var(--8om-text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--8om-border) !important;
}

/* Date shortcuts */
.datetimeshortcuts { display: flex !important; gap: 6px !important; align-items: center !important; }
.datetimeshortcuts a { font-size: 11px !important; }
div.help { font-size: 11px !important; color: var(--8om-text-muted) !important; margin-top: 3px !important; }

/* Changelist form */
#changelist #changelist-form { float: none !important; width: auto !important; }

/* Empty list */
#changelist .paginator + p,
#changelist-form > p {
  color: var(--8om-text-muted) !important;
  font-size: 13px !important;
  padding: 24px !important;
  text-align: center !important;
}

/* Date hierarchy */
.xfull {
  background: var(--8om-bg-card) !important;
  border: 1px solid var(--8om-border) !important;
  border-radius: var(--8om-radius) !important;
  padding: 6px 10px !important;
  margin-bottom: 8px !important;
}
.xfull a { font-size: 12px !important; }

/* Responsive for enhanced */
@media (max-width: 1200px) {
  #changelist { flex-direction: column !important; }
  #changelist-filter {
    flex: none !important;
    position: static !important;
    max-height: none !important;
    width: 100% !important;
    order: -1 !important;
  }
}

@media (max-width: 767px) {
  fieldset .form-row { flex-direction: column !important; }
  fieldset .form-row > label { min-width: auto !important; padding-top: 0 !important; }
  .change-form #content-main { max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MICRO-INTERACTION ENHANCEMENTS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Row hover accent bar */
#changelist table tbody tr {
  position: relative !important;
}
#changelist table tbody tr::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background: var(--8om-accent-gradient) !important;
  transition: width 0.2s ease !important;
  pointer-events: none !important;
}
#changelist table tbody tr:hover::after {
  width: 2px !important;
}

/* Module hover lift */
.module:not(#changelist) {
  transition: var(--8om-transition), box-shadow 0.25s ease !important;
}
.module:not(#changelist):hover {
  box-shadow: var(--8om-shadow-lg) !important;
}

/* Focus-visible ring for accessibility */
*:focus-visible {
  outline: 2px solid var(--8om-accent) !important;
  outline-offset: 2px !important;
}

/* Smooth page load */
#content-main {
  animation: fadeInUp 0.3s ease-out !important;
}

/* Table header sort indicator glow */
#changelist table thead th.sorted::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--8om-accent-gradient) !important;
}