/* 888 LOTTO Admin v3.10.58 — refined black/red/gold blend, layout collision fixes, readable text */
:root {
  --rg-black: #050607;
  --rg-charcoal: #0b0e12;
  --rg-charcoal-2: #12161c;
  --rg-red-950: #240006;
  --rg-red-900: #3b0009;
  --rg-red-800: #65000f;
  --rg-red-700: #8f0b1d;
  --rg-gold-500: #d7a82d;
  --rg-gold-300: #f8d86e;
  --rg-cream: #fff5d7;
  --rg-muted: #cdbb91;
  --rg-ease: cubic-bezier(.22,.61,.36,1);
  --bg: var(--rg-black) !important;
  --surface: var(--rg-charcoal) !important;
  --surface-2: #13070a !important;
  --surface-3: #1d090d !important;
  --panel: #0d0f13 !important;
  --panel-2: #16070b !important;
  --card: #0d0f13 !important;
  --ink: var(--rg-cream) !important;
  --text: var(--rg-cream) !important;
  --muted: var(--rg-muted) !important;
  --gold: var(--rg-gold-500) !important;
  --gold-2: var(--rg-gold-300) !important;
  --accent: var(--rg-red-700) !important;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  background-color: var(--rg-black) !important;
  background-image:
    linear-gradient(128deg, transparent 0 15%, rgba(145,0,21,.16) 15.2% 27%, transparent 27.3% 48%, rgba(215,168,45,.05) 48.2% 48.7%, transparent 49%),
    linear-gradient(52deg, transparent 0 62%, rgba(120,0,18,.12) 62.2% 75%, transparent 75.2%),
    radial-gradient(circle at 90% 2%, rgba(158,0,24,.23), transparent 30%),
    linear-gradient(180deg, #08090b 0%, #050607 100%) !important;
  background-attachment: fixed !important;
  color: var(--rg-cream) !important;
}
body::before {
  opacity: .14 !important;
  background-image:
    linear-gradient(30deg, rgba(215,168,45,.04) 12%, transparent 12.5%, transparent 87%, rgba(215,168,45,.04) 87.5%),
    linear-gradient(150deg, rgba(215,168,45,.03) 12%, transparent 12.5%, transparent 87%, rgba(215,168,45,.03) 87.5%) !important;
  background-size: 42px 72px !important;
  pointer-events: none !important;
}
.topbar, .admin-header, header, aside, .sidebar {
  background: linear-gradient(112deg, rgba(5,6,7,.99) 0 38%, rgba(82,0,13,.96) 72%, rgba(19,1,4,.99) 100%) !important;
  border-color: rgba(215,168,45,.42) !important;
}
/* Make every content child shrink correctly instead of colliding with neighbours. */
main, .content, .page, .page-content, .dashboard, .dashboard-grid, .grid, .row,
.card-grid, .metric-grid, .stat-grid, .accounting-grid, .settings-grid, .form-grid,
.table-wrap, .panel, .card, .section-card, .stat-card, .metric-card, .dashboard-card,
.modal-card, .accounting-card, [class*="grid"], [class*="card"], [class*="panel"] {
  min-width: 0 !important;
  max-width: 100%;
}
.dashboard-grid, .card-grid, .metric-grid, .stat-grid, .accounting-grid, .settings-grid, .form-grid {
  gap: clamp(12px, 1.35vw, 22px) !important;
}
.dashboard-grid, .card-grid, .metric-grid, .stat-grid, .accounting-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}
.card, .panel, .section-card, .stat-card, .metric-card, .dashboard-card, .table-wrap,
.modal-card, .accounting-card, [class*="card"], [class*="panel"] {
  color: var(--rg-cream) !important;
  border-color: rgba(215,168,45,.3) !important;
  overflow-wrap: anywhere;
}
.card, .panel, .section-card, .stat-card, .metric-card, .dashboard-card, .table-wrap, .modal-card, .accounting-card {
  background: linear-gradient(145deg, rgba(18,22,28,.98) 0 58%, rgba(72,0,12,.84) 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.27) !important;
}
/* Explicit text contrast: fixes inherited black text on dark panels. */
main, .content, .page, .page-content,
.card, .panel, .section-card, .stat-card, .metric-card, .dashboard-card, .table-wrap,
.modal, .modal-card, .accounting-card, label, legend, p, li, dt, dd, span:not(.status-dot), strong, small {
  color: var(--rg-cream);
}
.muted, .subtext, .description, .hint, .helper, small, .meta { color: var(--rg-muted) !important; }
a { color: #f4cb63; }
button, .btn, .button, [role="button"] {
  color: var(--rg-cream);
  transition: transform 220ms var(--rg-ease), box-shadow 260ms var(--rg-ease), background-color 240ms var(--rg-ease), border-color 240ms var(--rg-ease), color 180ms ease !important;
}
button:hover, .btn:hover, .button:hover, [role="button"]:hover { transform: translateY(-1px); }
button:active, .btn:active, .button:active, [role="button"]:active { transform: translateY(0) scale(.985); }
.btn-primary, .primary, button.primary, .button-primary, .tab.active, .active-tab {
  background: linear-gradient(180deg, #ffe284 0%, #d8a92f 48%, #a96e12 100%) !important;
  color: #160905 !important;
  border-color: #ffe69a !important;
  text-shadow: 0 1px rgba(255,255,255,.24) !important;
}
.btn-primary *, .primary *, button.primary *, .button-primary *, .tab.active *, .active-tab * { color: #160905 !important; }
.btn-secondary, .secondary, button.secondary, .button-secondary {
  background: linear-gradient(180deg, #9d1529 0%, #680818 55%, #3a020a 100%) !important;
  color: #fff2cf !important;
  border-color: rgba(248,216,110,.58) !important;
}
input, select, textarea {
  min-width: 0 !important;
  max-width: 100% !important;
  background: #08090c !important;
  color: var(--rg-cream) !important;
  border-color: rgba(215,168,45,.34) !important;
}
option { background: #0b0d11 !important; color: var(--rg-cream) !important; }
::placeholder { color: #a28e68 !important; opacity: 1 !important; }
table { width: 100% !important; color: var(--rg-cream) !important; }
thead th {
  background: linear-gradient(180deg, #31050c, #190307) !important;
  color: #ffe59a !important;
  white-space: normal !important;
}
tbody td { color: #fff1cf !important; }
tbody tr:nth-child(even) { background: rgba(255,255,255,.018) !important; }
tbody tr:hover { background: rgba(145,0,21,.14) !important; }
.table-wrap { overflow-x: auto !important; overscroll-behavior-inline: contain; }
.sidebar a.active, .nav-item.active, .menu-item.active {
  color: #ffe58c !important;
  background: linear-gradient(110deg, rgba(128,5,25,.68), rgba(34,2,8,.72)) !important;
  border-color: rgba(248,216,110,.5) !important;
}
/* Prevent overlapping action bars and controls. */
.actions, .card-actions, .toolbar-actions, .button-row, .form-actions, .filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px !important;
  align-items: center;
}
.actions > *, .card-actions > *, .toolbar-actions > *, .button-row > *, .form-actions > *, .filter-actions > * {
  min-width: 0;
  flex: 0 1 auto;
}
/* Smooth, deliberate transitions without forcing loaders or functional animations. */
:where(.modal, .modal-card, .drawer, .sidebar, .toast, .notification, .dropdown, .menu, .tab-panel, .page-view) {
  animation-duration: 420ms !important;
  animation-timing-function: var(--rg-ease) !important;
}
:where(.card, .panel, .stat-card, .metric-card, .dashboard-card, .nav-item, .tab, input, select, textarea) {
  transition-duration: 220ms !important;
  transition-timing-function: var(--rg-ease) !important;
}
:where(.shine, .shimmer, .glow-loop, .floating, .pulse:not(.loading):not(.spinner), .ambient-orb) {
  animation-duration: 5.5s !important;
  animation-timing-function: ease-in-out !important;
}
@media (max-width: 980px) {
  .dashboard-grid, .card-grid, .metric-grid, .stat-grid, .accounting-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important; }
}
@media (max-width: 640px) {
  .dashboard-grid, .card-grid, .metric-grid, .stat-grid, .accounting-grid, .settings-grid, .form-grid { grid-template-columns: 1fr !important; }
  .card, .panel, .section-card, .stat-card, .metric-card, .dashboard-card { padding-inline: clamp(14px, 4vw, 20px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}