/* VU THEME TOKENS — V1 (ERPNext v15 safe)
   Scope: Desk + Login + Web (soft overrides only)
   Brand: Black / Red / White
   NOTE: Keep CSS valid + avoid blank CSS vars (charts warn on "")
*/

/* =========================================================
   1) TOKENS (Single source of truth)
========================================================= */
:root {
  /* Brand */
  --vu-black: #0a0a0a;
  --vu-black-2: #0f0f10;
  --vu-surface: #111214;
  --vu-surface-2: #141519;
  --vu-border: rgba(255, 255, 255, 0.10);

  --vu-white: #ffffff;
  --vu-text: rgba(255, 255, 255, 0.88);
  --vu-text-muted: rgba(255, 255, 255, 0.65);

  --vu-red: #e50914;
  --vu-red-2: #ff1a24;

  --vu-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --vu-radius: 14px;

  /* Chart palette (must NEVER be empty) */
  --chart-color-1: #ef4444; /* red */
  --chart-color-2: #ffffff; /* white */
  --chart-color-3: #9ca3af; /* gray */
  --chart-color-4: #22c55e; /* green */
  --chart-color-5: #3b82f6; /* blue */
}

/* Absolute safety guard (prevents "" color warnings) */
html, :root {
  --chart-color-1: #ef4444 !important;
  --chart-color-2: #ffffff !important;
  --chart-color-3: #9ca3af !important;
  --chart-color-4: #22c55e !important;
  --chart-color-5: #3b82f6 !important;
}

/* =========================================================
   2) GLOBAL (gentle; don’t break layouts)
========================================================= */
body,
.page-body,
.layout-main-section {
  color: var(--vu-text);
}

/* Soft dark background for desk & login */
body[data-route^="app"],
body[data-route^="Form"],
body[data-route^="List"],
body[data-route^="query-report"],
body[data-route^="print"],
body[data-route^="login"] {
  background: var(--vu-black);
}

/* Fallback (only if nothing else sets bg) */
body {
  background: var(--vu-black);
}

/* =========================================================
   3) CARDS / WIDGETS (surface)
========================================================= */
.card,
.widget,
.widget-container,
.form-section,
.section-body,
.list-row-container,
.list-row,
.report-wrapper,
.report-card {
  background: var(--vu-surface);
  border: 1px solid var(--vu-border);
  border-radius: var(--vu-radius);
  box-shadow: none;
}

/* =========================================================
   4) SIDEBAR (Desk)
========================================================= */
.desk-sidebar,
.desk-sidebar .standard-sidebar {
  background: var(--vu-black-2) !important;
  border-right: 1px solid var(--vu-border);
}

.desk-sidebar .sidebar-item,
.standard-sidebar .sidebar-item {
  color: var(--vu-text-muted) !important;
  border-radius: 10px;
}

.desk-sidebar .sidebar-item:hover,
.standard-sidebar .sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--vu-text) !important;
}

.desk-sidebar .sidebar-item.selected,
.standard-sidebar .sidebar-item.selected {
  background: rgba(229, 9, 20, 0.14) !important;
  color: var(--vu-white) !important;
  border: 1px solid rgba(229, 9, 20, 0.35) !important;
}

/* =========================================================
   5) TOP NAVBAR
========================================================= */
.navbar,
#navbar-breadcrumbs,
.navbar .navbar-nav {
  background: var(--vu-black-2) !important;
  border-bottom: 1px solid var(--vu-border);
}

.navbar a,
.navbar .nav-link {
  color: var(--vu-text) !important;
}

/* =========================================================
   6) LINKS
========================================================= */
a {
  color: rgba(255, 255, 255, 0.88);
}
a:hover {
  color: var(--vu-white);
}

/* =========================================================
   7) BUTTONS
========================================================= */
.btn,
.btn-default {
  border-radius: 12px;
}

.btn-primary {
  background: var(--vu-red) !important;
  border-color: rgba(229, 9, 20, 0.55) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--vu-red-2) !important;
  border-color: rgba(255, 26, 36, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18) !important;
}

/* =========================================================
   8) INPUTS
========================================================= */
.form-control,
.input-with-feedback,
.control-input,
input,
select,
textarea {
  background: var(--vu-surface-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--vu-text) !important;
  border-radius: 12px !important;
}

.form-control:focus,
.input-with-feedback:focus,
.control-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(229, 9, 20, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.16) !important;
}

/* =========================================================
   9) DROPDOWNS / MODALS
========================================================= */
.modal-content,
.dropdown-menu,
.awesomplete ul {
  background: var(--vu-surface) !important;
  border: 1px solid var(--vu-border) !important;
  border-radius: var(--vu-radius) !important;
  color: var(--vu-text) !important;
}

.dropdown-menu a,
.dropdown-item {
  color: var(--vu-text) !important;
}
.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* =========================================================
   10) TABLES / GRIDS
========================================================= */
.grid-body .rows,
.grid-body .row,
.table,
.table-bordered,
.table-striped {
  color: var(--vu-text) !important;
}

.table thead th {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--vu-border) !important;
}

.table td,
.table th {
  border-color: var(--vu-border) !important;
}

/* =========================================================
   11) LOGIN PAGE (stable soft override)
========================================================= */
body[data-route="login"] .page-card {
  background: var(--vu-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: var(--vu-shadow) !important;
}

body[data-route="login"] .page-card-head .indicator {
  background: rgba(229, 9, 20, 0.14) !important;
  border: 1px solid rgba(229, 9, 20, 0.35) !important;
  color: var(--vu-white) !important;
}

body[data-route="login"] .login-content,
body[data-route="login"] .page-card-body {
  color: var(--vu-text) !important;
}

body[data-route="login"] .btn-login,
body[data-route="login"] .btn-primary {
  background: var(--vu-red) !important;
  border-color: rgba(229, 9, 20, 0.55) !important;
}

/* =========================================================
   12) PHASE 2 POLISH (remove whites / improve contrast)
========================================================= */
.bg-white,
.bg-light,
.page-card,
.widget.onboarding-widget-box,
.dashboard-widget-box {
  background: var(--vu-surface) !important;
}

/* Page container (desk) */
body[data-route^="app"] .layout-main-section,
body[data-route^="app"] .page-container,
body[data-route^="app"] .page-body,
body[data-route^="app"] .page-content {
  background: transparent !important;
}

/* Desk list headers / filter bar */
body[data-route^="app"] .listview-controls,
body[data-route^="app"] .list-row-head,
body[data-route^="app"] .listview-controls .filter-section {
  background: rgba(17, 18, 20, 0.88) !important;
  border: 1px solid var(--vu-border) !important;
  border-radius: var(--vu-radius) !important;
}

/* List rows hover */
.list-row:hover,
.list-row-container:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Form section headings */
.section-head,
.form-section .section-head,
.form-section .section-head .section-title {
  color: var(--vu-white) !important;
}

/* Timeline / comments */
.timeline-item,
.comment-box,
.timeline-items,
.timeline {
  background: transparent !important;
}