/* ============================================================
   dark-mode-override.css
   Forces OpenCart's default theme into dark mode, using the same
   design tokens as the signup form / landing page:
     background:  #0f0f10
     card/panel:  #1a1a1c
     input bg:    #141415
     border:      #2a2a2d
     text:        #e8e8ea (primary), #9a9a9e (muted), #c8c8cc (body)
     accent:      linear-gradient(135deg, #6a5af9, #8a5af9)

   Load this AFTER OpenCart's own theme stylesheet so it overrides
   it. See install notes at the bottom of this file.
   ============================================================ */

:root {
  --bg-page: #0f0f10;
  --bg-card: #1a1a1c;
  --bg-input: #141415;
  --border-color: #2a2a2d;
  --text-primary: #e8e8ea;
  --text-muted: #9a9a9e;
  --text-body: #c8c8cc;
  --accent-start: #6a5af9;
  --accent-end: #8a5af9;
}

body {
  background-color: var(--bg-page) !important;
  color: var(--text-body) !important;
}

/* Header / footer / navigation */
#header, #footer, .navbar, nav {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
#header a, #footer a, .navbar a, nav a {
  color: var(--text-primary) !important;
}

/* Product cards, panels, category boxes */
.product-thumb, .panel, .box, .card, .list-group-item {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-body) !important;
}
.product-thumb h4 a, .product-thumb .caption a {
  color: var(--text-primary) !important;
}

/* Prices - keep some visual pop rather than flat white */
.price, .price-new {
  color: #ffffff !important;
}
.price-old {
  color: var(--text-muted) !important;
}

/* Buttons - match the platform's gradient accent */
.btn-primary, .button-primary, input[type=submit].btn-primary {
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end)) !important;
  border: none !important;
  color: #ffffff !important;
}
.btn-default, .btn-secondary {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-body) !important;
}

/* Forms - checkout, login, product options */
input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=number], textarea, select {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}
label {
  color: var(--text-body) !important;
}

/* Tables - order history, cart contents */
table, .table {
  background-color: var(--bg-card) !important;
  color: var(--text-body) !important;
}
table thead th, .table thead th {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
table td, .table td {
  border-color: var(--border-color) !important;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: transparent !important;
  color: var(--text-muted) !important;
}
.breadcrumb a {
  color: var(--text-body) !important;
}

/* Alerts / messages */
.alert-success {
  background-color: #14251d !important;
  border-color: #1e3a2a !important;
  color: #7ee787 !important;
}
.alert-danger {
  background-color: #2a1414 !important;
  border-color: #3a1e1e !important;
  color: #f87171 !important;
}
.alert-info {
  background-color: #14202a !important;
  border-color: #1e2f3a !important;
  color: #7dd3fc !important;
}

/* Vendor/seller storefront pages (Purpletree) */
.vendor-header, .vendor-info, .seller-page {
  background-color: var(--bg-card) !important;
  color: var(--text-body) !important;
}

/* Modals (quick view, cart popups) */
.modal-content {
  background-color: var(--bg-card) !important;
  color: var(--text-body) !important;
  border-color: var(--border-color) !important;
}
.modal-header, .modal-footer {
  border-color: var(--border-color) !important;
}

/* Pagination */
.pagination > li > a, .pagination > li > span {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-body) !important;
}
.pagination > .active > a {
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end)) !important;
  border: none !important;
}

/* Scrollbar (webkit browsers) - small polish touch */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3d; }

/* ============================================================
   INSTALL NOTES

   Option A (fastest, no theme file editing):
     OpenCart Admin -> Design -> Theme Editor (if using a theme
     that supports custom CSS injection) -> paste this file's
     contents into the "Custom CSS" box.

   Option B (works with any theme):
     1. Save this file as catalog/view/theme/default/stylesheet/
        dark-mode-override.css (adjust "default" to your actual
        theme folder name, e.g. "journal3" if using Journal).
     2. Edit catalog/view/theme/default/template/common/header.twig
        and add, right before </head>:
          <link rel="stylesheet" href="catalog/view/theme/default/stylesheet/dark-mode-override.css">
     3. This loads AFTER the theme's own stylesheet, so the
        !important overrides above take effect.

   Option C (Journal theme specifically):
     Journal has its own theme settings panel with a "Custom CSS"
     field under Journal > Layout > General settings - paste this
     file's contents there instead of editing template files
     directly, since Journal's editor survives theme updates better
     than raw file edits.
   ============================================================ */