/**
 * Moon NFT Admin Custom Styles
 * Pure black/white monochrome branding
 * Colors from landing page: #000000, #ffffff, #E0E0E0, #A6A4A2, #4A4A4A
 */

/* Theme toggle is visible - user can switch between dark/light modes */

:root {
  /* Moon NFT Brand Colors */
  --moon-black: #000000;
  --moon-white: #ffffff;
  --moon-grey-light: #E0E0E0;
  --moon-grey-medium: #A6A4A2;
  --moon-grey-dark: #4A4A4A;
  --moon-success: #28A745;
  --moon-warning: #FFC107;
  --moon-error: #DC3545;
}

/* Force dark theme background to pure black */
.dark body,
.dark,
[class*="dark:bg-base-900"] {
  background-color: var(--moon-black) !important;
}

/* Sidebar pure black */
.dark aside,
.dark nav,
.dark [class*="sidebar"] {
  background-color: var(--moon-black) !important;
}

/* Cards with subtle border */
.dark [class*="bg-base-800"],
.dark .bg-white {
  background-color: #0a0a0a !important;
  border-color: var(--moon-grey-dark) !important;
}

/* Headers and titles - uppercase like landing page */
h1, h2, h3, h4, h5, h6,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
[class*="font-semibold"],
[class*="font-bold"] {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Primary text white */
.dark [class*="text-primary"],
.dark a[class*="text-primary"] {
  color: var(--moon-white) !important;
}

/* Links and interactive elements */
.dark a:hover {
  color: var(--moon-grey-light) !important;
}

/* Buttons - Moon NFT style: white bg, black text, black border */
.dark button[type="submit"],
.dark [class*="btn-primary"],
.dark .bg-primary-500 {
  background-color: var(--moon-white) !important;
  color: var(--moon-black) !important;
  border: 1px solid var(--moon-black) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.dark button[type="submit"]:hover,
.dark [class*="btn-primary"]:hover {
  background-color: var(--moon-black) !important;
  color: var(--moon-white) !important;
  border-color: var(--moon-white) !important;
}

/* Secondary buttons - outline style */
.dark [class*="btn-secondary"],
.dark button[class*="border"] {
  background-color: transparent !important;
  color: var(--moon-white) !important;
  border: 1px solid var(--moon-grey-dark) !important;
}

.dark [class*="btn-secondary"]:hover {
  background-color: var(--moon-white) !important;
  color: var(--moon-black) !important;
}

/* Form inputs */
.dark input,
.dark select,
.dark textarea,
.dark [class*="input"] {
  background-color: #0a0a0a !important;
  border-color: var(--moon-grey-dark) !important;
  color: var(--moon-white) !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: var(--moon-white) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--moon-white) !important;
}

/* Tables */
.dark table {
  border-color: var(--moon-grey-dark) !important;
}

.dark th {
  background-color: #0a0a0a !important;
  color: var(--moon-grey-medium) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

.dark td {
  border-color: var(--moon-grey-dark) !important;
}

.dark tr:hover td {
  background-color: #111111 !important;
}

/* Badges/Tags */
.dark [class*="badge"],
.dark [class*="tag"] {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Success/Warning/Error colors */
.dark [class*="text-green"],
.dark [class*="bg-green"] {
  --tw-text-opacity: 1;
  color: var(--moon-success) !important;
}

.dark [class*="text-yellow"],
.dark [class*="bg-yellow"] {
  --tw-text-opacity: 1;
  color: var(--moon-warning) !important;
}

.dark [class*="text-red"],
.dark [class*="bg-red"] {
  --tw-text-opacity: 1;
  color: var(--moon-error) !important;
}

/* Logo area */
.dark [class*="logo"],
.dark #branding {
  filter: none !important;
}

/* Sidebar navigation items */
.dark [class*="nav-item"],
.dark aside a {
  color: var(--moon-grey-medium) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.dark [class*="nav-item"]:hover,
.dark aside a:hover,
.dark [class*="nav-item"].active,
.dark aside a.active {
  color: var(--moon-white) !important;
  background-color: #111111 !important;
}

/* Material icons color */
.dark .material-symbols-outlined {
  color: var(--moon-grey-medium);
}

.dark a:hover .material-symbols-outlined,
.dark [class*="active"] .material-symbols-outlined {
  color: var(--moon-white);
}

/* Scrollbar styling */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--moon-black);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--moon-grey-dark);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--moon-grey-medium);
}

/* Focus states */
.dark *:focus-visible {
  outline: 1px solid var(--moon-white) !important;
  outline-offset: 2px;
}

/* Dropdown menus */
.dark [class*="dropdown"],
.dark [class*="menu"],
.dark [class*="popover"] {
  background-color: #0a0a0a !important;
  border: 1px solid var(--moon-grey-dark) !important;
}

/* Loading states */
.dark [class*="spinner"],
.dark [class*="loading"] {
  border-color: var(--moon-grey-dark) !important;
  border-top-color: var(--moon-white) !important;
}

/* Admin header */
.dark header,
.dark [class*="header"] {
  background-color: var(--moon-black) !important;
  border-bottom: 1px solid var(--moon-grey-dark) !important;
}

/* Environment badge */
.dark [class*="environment"],
.dark [class*="badge"][class*="info"] {
  background-color: transparent !important;
  border: 1px solid var(--moon-grey-dark) !important;
  color: var(--moon-grey-medium) !important;
}

/* Pagination */
.dark [class*="pagination"] a,
.dark [class*="pagination"] button {
  background-color: transparent !important;
  border: 1px solid var(--moon-grey-dark) !important;
  color: var(--moon-grey-medium) !important;
}

.dark [class*="pagination"] a:hover,
.dark [class*="pagination"] a.active {
  background-color: var(--moon-white) !important;
  color: var(--moon-black) !important;
}

/* Breadcrumbs */
.dark [class*="breadcrumb"] {
  color: var(--moon-grey-medium) !important;
}

.dark [class*="breadcrumb"] a {
  color: var(--moon-white) !important;
}

/* Tooltips */
.dark [class*="tooltip"] {
  background-color: var(--moon-white) !important;
  color: var(--moon-black) !important;
}

/* Charts */
.dark [class*="chart"] {
  --chart-color-1: var(--moon-white);
  --chart-color-2: var(--moon-grey-light);
  --chart-color-3: var(--moon-grey-medium);
}

/* ============================================
   LIGHT MODE STYLES - Moon NFT Branding
   ============================================ */

/* Light theme background to pure white */
body,
[class*="bg-base-50"] {
  background-color: var(--moon-white) !important;
}

/* Sidebar white with border */
aside,
nav,
[class*="sidebar"] {
  background-color: var(--moon-white) !important;
  border-right: 1px solid var(--moon-grey-light) !important;
}

/* Override for dark mode sidebar (keep black) */
.dark aside,
.dark nav,
.dark [class*="sidebar"] {
  border-right: 1px solid var(--moon-grey-dark) !important;
}

/* Cards with subtle border - light mode */
[class*="bg-base-100"],
.bg-white {
  background-color: var(--moon-white) !important;
  border-color: var(--moon-grey-light) !important;
}

/* Primary text black in light mode */
[class*="text-primary"],
a[class*="text-primary"] {
  color: var(--moon-black) !important;
}

/* Override for dark mode */
.dark [class*="text-primary"],
.dark a[class*="text-primary"] {
  color: var(--moon-white) !important;
}

/* Links and interactive elements - light mode */
a:hover {
  color: var(--moon-grey-dark) !important;
}

/* Buttons - Moon NFT style: black bg, white text in light mode */
button[type="submit"],
[class*="btn-primary"],
.bg-primary-500 {
  background-color: var(--moon-black) !important;
  color: var(--moon-white) !important;
  border: 1px solid var(--moon-black) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

button[type="submit"]:hover,
[class*="btn-primary"]:hover {
  background-color: var(--moon-white) !important;
  color: var(--moon-black) !important;
  border-color: var(--moon-black) !important;
}

/* Secondary buttons - outline style light mode */
[class*="btn-secondary"],
button[class*="border"] {
  background-color: transparent !important;
  color: var(--moon-black) !important;
  border: 1px solid var(--moon-grey-medium) !important;
}

[class*="btn-secondary"]:hover {
  background-color: var(--moon-black) !important;
  color: var(--moon-white) !important;
}

/* Form inputs - light mode */
input,
select,
textarea,
[class*="input"] {
  background-color: var(--moon-white) !important;
  border-color: var(--moon-grey-light) !important;
  color: var(--moon-black) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--moon-black) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--moon-black) !important;
}

/* Tables - light mode */
table {
  border-color: var(--moon-grey-light) !important;
}

th {
  background-color: #f5f5f5 !important;
  color: var(--moon-grey-dark) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

td {
  border-color: var(--moon-grey-light) !important;
}

tr:hover td {
  background-color: #f9f9f9 !important;
}

/* Sidebar navigation items - light mode */
[class*="nav-item"],
aside a {
  color: var(--moon-grey-dark) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

[class*="nav-item"]:hover,
aside a:hover,
[class*="nav-item"].active,
aside a.active {
  color: var(--moon-black) !important;
  background-color: #f5f5f5 !important;
}

/* Material icons color - light mode */
.material-symbols-outlined {
  color: var(--moon-grey-dark);
}

a:hover .material-symbols-outlined,
[class*="active"] .material-symbols-outlined {
  color: var(--moon-black);
}

/* Scrollbar styling - light mode */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--moon-white);
}

::-webkit-scrollbar-thumb {
  background: var(--moon-grey-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--moon-grey-medium);
}

/* Focus states - light mode */
*:focus-visible {
  outline: 1px solid var(--moon-black) !important;
  outline-offset: 2px;
}

/* Dropdown menus - light mode */
[class*="dropdown"],
[class*="menu"],
[class*="popover"] {
  background-color: var(--moon-white) !important;
  border: 1px solid var(--moon-grey-light) !important;
}

/* Admin header - light mode */
header,
[class*="header"] {
  background-color: var(--moon-white) !important;
  border-bottom: 1px solid var(--moon-grey-light) !important;
}

/* Environment badge - light mode */
[class*="environment"],
[class*="badge"][class*="info"] {
  background-color: transparent !important;
  border: 1px solid var(--moon-grey-medium) !important;
  color: var(--moon-grey-dark) !important;
}

/* Pagination - light mode */
[class*="pagination"] a,
[class*="pagination"] button {
  background-color: transparent !important;
  border: 1px solid var(--moon-grey-light) !important;
  color: var(--moon-grey-dark) !important;
}

[class*="pagination"] a:hover,
[class*="pagination"] a.active {
  background-color: var(--moon-black) !important;
  color: var(--moon-white) !important;
}

/* Breadcrumbs - light mode */
[class*="breadcrumb"] {
  color: var(--moon-grey-dark) !important;
}

[class*="breadcrumb"] a {
  color: var(--moon-black) !important;
}

/* Tooltips - light mode */
[class*="tooltip"] {
  background-color: var(--moon-black) !important;
  color: var(--moon-white) !important;
}

/* Charts - light mode */
[class*="chart"] {
  --chart-color-1: var(--moon-black);
  --chart-color-2: var(--moon-grey-dark);
  --chart-color-3: var(--moon-grey-medium);
}