/* ============================================
   ResaleTech Dashboard Branding — Grafana v12
   ============================================ */

:root {
  --resaletech-teal: #2d7d8a;
  --resaletech-mint: #3dbfb8;
  --resaletech-dark: #0a0a0f;
  --resaletech-surface: #0c0c14;
  --resaletech-surface2: #12121c;
}

/* ---- Body / Global Background ---- */
body.theme-dark {
  background-color: var(--resaletech-dark) !important;
}

/* ---- Sidebar / Navigation Mega Menu ---- */
[data-testid="data-testid navigation mega-menu"] {
  background-color: var(--resaletech-surface) !important;
  border-right: 1px solid rgba(61, 191, 184, 0.08) !important;
}

/* Nav menu items */
[data-testid="data-testid Nav menu item"] {
  color: #b0b5bf !important;
  transition: all 0.15s ease !important;
}

[data-testid="data-testid Nav menu item"]:hover {
  background-color: rgba(45, 125, 138, 0.15) !important;
  color: #fff !important;
}

/* Active nav item - teal left border accent */
[data-testid="data-testid Nav menu item"][aria-current="page"],
[data-testid="data-testid Nav menu item"].active {
  background-color: rgba(45, 125, 138, 0.2) !important;
  color: var(--resaletech-mint) !important;
}

/* Grafana text is rebranded via JS */
}

/* ---- Logo replacement ---- */
a[href="/"] img {
  content: url("/public/img/resaletech/logo.png") !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

/* ---- Top Header Bar ---- */
header, [role="banner"] {
  background-color: var(--resaletech-surface) !important;
  border-bottom: 1px solid rgba(61, 191, 184, 0.06) !important;
}

/* ---- Search button ---- */
header button:first-of-type {
  border-color: rgba(61, 191, 184, 0.15) !important;
}

/* ---- Main content area ---- */
.main-view {
  background-color: var(--resaletech-dark) !important;
}

.grafana-app {
  background-color: var(--resaletech-dark) !important;
}

/* ---- Buttons — primary teal ---- */
button[class*="primary"],
a[class*="primary"],
.btn-primary {
  background-color: var(--resaletech-teal) !important;
  border-color: var(--resaletech-teal) !important;
  color: #fff !important;
}

button[class*="primary"]:hover,
a[class*="primary"]:hover,
.btn-primary:hover {
  background-color: var(--resaletech-mint) !important;
  border-color: var(--resaletech-mint) !important;
}

/* ---- Links — teal ---- */
a:not([class*="nav"]):not([href="/"]) {
  color: var(--resaletech-mint) !important;
}
a:not([class*="nav"]):not([href="/"]):hover {
  color: #5ce0d8 !important;
}

/* ---- Panel regions / cards ---- */
main > [role="region"],
.react-grid-item > div {
  background-color: var(--resaletech-surface2) !important;
  border: 1px solid rgba(61, 191, 184, 0.06) !important;
  border-radius: 8px !important;
}

/* ---- Panel headers ---- */
[role="region"] h2, [role="region"] h6 {
  color: #e8e9ec !important;
}

/* ---- Scrollbar theming ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--resaletech-dark);
}
::-webkit-scrollbar-thumb {
  background: rgba(45, 125, 138, 0.4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--resaletech-teal);
}

/* ---- Dropdown / Popovers ---- */
[data-popper-placement] {
  background-color: var(--resaletech-surface) !important;
  border: 1px solid rgba(61, 191, 184, 0.1) !important;
}

/* ---- Tabs ---- */
[role="tab"][aria-selected="true"] {
  color: var(--resaletech-mint) !important;
  border-bottom-color: var(--resaletech-teal) !important;
}

/* ---- Table rows ---- */
table tbody tr:hover td {
  background-color: rgba(45, 125, 138, 0.08) !important;
}

/* ---- Selection / focus rings ---- */
*:focus-visible {
  outline-color: var(--resaletech-teal) !important;
}

/* ---- Toggle switches ---- */
input[type="checkbox"]:checked + label,
[role="switch"][aria-checked="true"] {
  background-color: var(--resaletech-teal) !important;
}

/* ---- Alert / Info banners ---- */
[role="alert"] {
  border-left-color: var(--resaletech-teal) !important;
}

/* ---- Login page specific ---- */
body.theme-dark.page-login {
  background: linear-gradient(135deg, #050507 0%, #0c1520 50%, #0a1015 100%) !important;
}

/* Login form container */
body.page-login main > div > div {
  background-color: rgba(12, 12, 20, 0.9) !important;
  border: 1px solid rgba(61, 191, 184, 0.1) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
}

/* Login button */
body.page-login button[type="submit"] {
  background-color: var(--resaletech-teal) !important;
  border-color: var(--resaletech-teal) !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

body.page-login button[type="submit"]:hover {
  background-color: var(--resaletech-mint) !important;
  border-color: var(--resaletech-mint) !important;
}

/* Login logo */
body.page-login img[alt*="Grafana"],
body.page-login img[alt*="grafana"] {
  content: url("/public/img/resaletech/logo.png") !important;
  max-width: 80px !important;
}

/* ---- Remove Grafana-specific branding where possible ---- */
/* Hide "Grafana" references in breadcrumbs/title area */

/* ---- Grafana v12 specific overrides ---- */
/* Variable overrides for Emotion theme tokens */
body.theme-dark {
  --color-primary-border: var(--resaletech-teal) !important;
  --color-primary-border-transparent: rgba(45, 125, 138, 0.25) !important;
  --color-primary-main: var(--resaletech-teal) !important;
  --color-primary-shade: #236571 !important;
  --color-primary-text: var(--resaletech-mint) !important;
  --color-primary-transparent: rgba(45, 125, 138, 0.15) !important;
}