/*
 * DataNoble theme layer — deeper colours with a subtle 135° gradient, matching the side nav.
 * Overrides colour only (no layout). Selectors are prefixed with `html` so they beat Material
 * even when a view re-links material-dashboard.css after this file (survey_preview).
 * Standalone documents that load Material themselves link this file too: dashboard_charts
 * (iframed into the dashboard) and errors/layout.
 *
 * Each colour is a pair (light → deep) plus its RGB for tinted shadows; the light end sits
 * about halfway to the deep one, so the gradient reads as a gentle sheen rather than a sweep.
 * The deep end is roughly the old Material colour darkened ~20%.
 */

:root {
  --dn-primary-1: #2468ea; --dn-primary-2: #1a56d6; --dn-primary-rgb: 30, 100, 255;
  --dn-info-1:    #0f94b8; --dn-info-2:    #0a7fa3; --dn-info-rgb:    10, 140, 180;
  --dn-success-1: #299550; --dn-success-2: #1e7d42; --dn-success-rgb: 30, 140, 70;
  --dn-warning-1: #e88e15; --dn-warning-2: #d9760a; --dn-warning-rgb: 230, 130, 10;
  --dn-danger-1:  #d93b3c; --dn-danger-2:  #c42a2d; --dn-danger-rgb:  210, 45, 45;
  --dn-rose-1:    #cc2768; --dn-rose-2:    #b51a55; --dn-rose-rgb:    200, 30, 95;
  --dn-default-1: #727f94; --dn-default-2: #5d6a80; --dn-default-rgb: 70, 85, 110;
  --dn-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ── Per-colour tokens ───────────────────────────── */
html .btn-primary, html .card-header-primary, html .badge-primary, html .alert-primary { --g1: var(--dn-primary-1); --g2: var(--dn-primary-2); --rgb: var(--dn-primary-rgb); }
html .btn-info,    html .card-header-info,    html .badge-info,    html .alert-info { --g1: var(--dn-info-1);    --g2: var(--dn-info-2);    --rgb: var(--dn-info-rgb); }
html .btn-success, html .card-header-success, html .badge-success, html .alert-success { --g1: var(--dn-success-1); --g2: var(--dn-success-2); --rgb: var(--dn-success-rgb); }
html .btn-warning, html .card-header-warning, html .badge-warning, html .alert-warning { --g1: var(--dn-warning-1); --g2: var(--dn-warning-2); --rgb: var(--dn-warning-rgb); }
html .btn-danger,  html .card-header-danger,  html .badge-danger,  html .alert-danger { --g1: var(--dn-danger-1);  --g2: var(--dn-danger-2);  --rgb: var(--dn-danger-rgb); }
html .btn-rose,    html .card-header-rose,    html .badge-rose,    html .alert-rose { --g1: var(--dn-rose-1);    --g2: var(--dn-rose-2);    --rgb: var(--dn-rose-rgb); }
html .btn-default,                       html .badge-default { --g1: var(--dn-default-1); --g2: var(--dn-default-2); --rgb: var(--dn-default-rgb); }

/* ── Buttons (link-style buttons keep their transparent look) ── */
html .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-rose, .btn-default):not(.btn-link) {
  color: #fff;
  background-color: var(--g2);
  background-image: linear-gradient(135deg, var(--g1), var(--g2));
  border-color: var(--g2);
  box-shadow: 0 3px 10px rgba(var(--rgb), 0.22), var(--dn-sheen);
  transition: box-shadow 0.2s, filter 0.15s, transform 0.15s;
}
html .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-rose, .btn-default):not(.btn-link):is(:hover, :focus, .focus) {
  color: #fff;
  background-color: var(--g2);
  border-color: var(--g2);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(var(--rgb), 0.3), var(--dn-sheen);
}
html .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-rose, .btn-default):not(.btn-link):is(:active, .active) {
  color: #fff;
  background-color: var(--g2);
  background-image: linear-gradient(135deg, var(--g2), var(--g2));
  filter: none;
  box-shadow: 0 2px 6px rgba(var(--rgb), 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
html .btn:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-rose, .btn-default):is(.disabled, :disabled) {
  filter: saturate(0.6);
  box-shadow: none;
}
html .btn.btn-link:is(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-rose) { color: var(--g2); }

/* ── Card icon tiles and coloured card headers ───── */
html .card :is(.card-header-primary, .card-header-info, .card-header-success, .card-header-warning, .card-header-danger, .card-header-rose) :is(.card-icon, .card-text),
html .card :is(.card-header-primary, .card-header-info, .card-header-success, .card-header-warning, .card-header-danger, .card-header-rose):not(.card-header-icon):not(.card-header-text) {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 8px 18px -6px rgba(var(--rgb), 0.42), var(--dn-sheen);
}

/* ── Pills / tabs ────────────────────────────────── */
/* doubled class outranks Material's .nav-pills.nav-pills-{colour} variants: every active pill uses the brand blue */
html .nav-pills.nav-pills .nav-item .nav-link.active,
html .nav-pills.nav-pills .nav-item .nav-link.active:is(:hover, :focus) {
  color: #fff;
  background-color: var(--dn-primary-2);
  background-image: linear-gradient(135deg, var(--dn-primary-1), var(--dn-primary-2));
  box-shadow: 0 5px 14px rgba(var(--dn-primary-rgb), 0.28), var(--dn-sheen);
}

/* ── Badges and alerts ───────────────────────────── */
html .badge:is(.badge-primary, .badge-info, .badge-success, .badge-warning, .badge-danger, .badge-rose, .badge-default) {
  color: #fff;
  background-color: var(--g2);
  background-image: linear-gradient(135deg, var(--g1), var(--g2));
}
html .alert:is(.alert-primary, .alert-info, .alert-success, .alert-warning, .alert-danger, .alert-rose) {
  color: #fff;
  background-color: var(--g2);
  background-image: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 6px 18px -6px rgba(var(--rgb), 0.5);
}

/* ── Text accents (deep end, for contrast on white) ── */
html .text-primary { color: var(--dn-primary-2) !important; }
html .text-info { color: var(--dn-info-2) !important; }
html .text-success { color: var(--dn-success-2) !important; }
html .text-warning { color: var(--dn-warning-2) !important; }
html .text-danger { color: var(--dn-danger-2) !important; }

/* ── Full-screen navy pages (login, password reset…) ──
   On the navy artwork the standard primary header glows too brightly; use a deeper
   take on the same blue so the card sits in the scene rather than on top of it. */
html .page-header.dn-guest-bg .card .card-header-primary:not(.card-header-icon):not(.card-header-text) {
  background: linear-gradient(135deg, #1e5ad0, #143e9a);
  box-shadow: 0 10px 24px -8px rgba(0, 10, 40, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}