/*
 * ServiPhone Dashboard Pro
 * Optional analytics-inspired theme. Activated only with:
 * html[data-theme="dashboard_pro"]
 */

html[data-theme="dashboard_pro"],
html.sp-theme-dashboard-pro {
  color-scheme: dark;
  --sp-bg: #080f20;
  --sp-bg-elevated: #0c1428;
  --sp-bg-soft: #111c35;
  --sp-surface: rgba(18, 29, 55, 0.92);
  --sp-surface-strong: #14213d;
  --sp-surface-muted: rgba(30, 45, 78, 0.78);
  --sp-border: rgba(126, 151, 210, 0.14);
  --sp-border-strong: rgba(126, 151, 210, 0.28);
  --sp-text: #f1f5ff;
  --sp-text-soft: #c9d4ed;
  --sp-text-muted: #8493b5;
  --sp-primary: #4f8cff;
  --sp-primary-strong: #3975ed;
  --sp-primary-soft: rgba(79, 140, 255, 0.16);
  --sp-green: #35d6a2;
  --sp-green-soft: rgba(53, 214, 162, 0.13);
  --sp-amber: #f7b955;
  --sp-amber-soft: rgba(247, 185, 85, 0.13);
  --sp-red: #ff6f91;
  --sp-red-soft: rgba(255, 111, 145, 0.13);
  --sp-violet: #8978ff;
  --sp-violet-soft: rgba(137, 120, 255, 0.15);
  --sp-cyan: #24c8e7;
  --sp-cyan-soft: rgba(36, 200, 231, 0.13);
  --sp-neutral-soft: rgba(132, 147, 181, 0.12);
  --sp-control-bg: rgba(13, 23, 45, 0.92);
  --sp-row-hover: rgba(79, 140, 255, 0.075);
  --sp-chart-grid: rgba(126, 151, 210, 0.1);
  --sp-chart-tooltip: rgba(10, 18, 37, 0.98);
  --sp-shadow-soft:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 18px 48px rgba(2, 7, 20, 0.32);
  --sp-shadow-glow:
    0 0 0 1px rgba(79, 140, 255, 0.14),
    0 24px 64px rgba(6, 17, 48, 0.42);
  --sp-status-received: #8a9abb;
  --sp-status-received-soft: rgba(138, 154, 187, 0.13);
  --sp-status-diagnostic: #a184ff;
  --sp-status-diagnostic-soft: rgba(161, 132, 255, 0.14);
  --sp-status-waiting: #f7b955;
  --sp-status-waiting-soft: rgba(247, 185, 85, 0.13);
  --sp-status-repair: #4f8cff;
  --sp-status-repair-soft: rgba(79, 140, 255, 0.15);
  --sp-status-ready: #35d6a2;
  --sp-status-ready-soft: rgba(53, 214, 162, 0.13);
  --sp-status-delivered: #24c8e7;
  --sp-status-delivered-soft: rgba(36, 200, 231, 0.13);
  --sp-status-cancelled: #ff6f91;
  --sp-status-cancelled-soft: rgba(255, 111, 145, 0.13);
}

html[data-theme="dashboard_pro"] body.sp-dark-shell,
html.sp-theme-dashboard-pro body.sp-dark-shell {
  background:
    linear-gradient(135deg, rgba(79, 140, 255, 0.07), transparent 38%),
    linear-gradient(315deg, rgba(137, 120, 255, 0.055), transparent 34%),
    #080f20;
}

html[data-theme="dashboard_pro"] .sp-sidebar,
html.sp-theme-dashboard-pro .sp-sidebar {
  background:
    linear-gradient(180deg, rgba(9, 16, 34, 0.99), rgba(7, 13, 29, 0.99));
  border-right-color: rgba(126, 151, 210, 0.12);
  box-shadow: 18px 0 48px rgba(2, 6, 18, 0.2);
  backdrop-filter: blur(26px);
}

html[data-theme="dashboard_pro"] .sp-sidebar-brand,
html.sp-theme-dashboard-pro .sp-sidebar-brand {
  background: rgba(17, 28, 52, 0.7);
  border-color: rgba(126, 151, 210, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

html[data-theme="dashboard_pro"] .sp-brand-mark,
html.sp-theme-dashboard-pro .sp-brand-mark {
  background: linear-gradient(145deg, #4f8cff, #756bff);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(59, 105, 230, 0.28);
  color: #ffffff;
}

html[data-theme="dashboard_pro"] .sp-nav-link,
html[data-theme="dashboard_pro"] .sp-nav-subitem,
html.sp-theme-dashboard-pro .sp-nav-link,
html.sp-theme-dashboard-pro .sp-nav-subitem {
  border-color: transparent;
  color: #8797b9;
}

html[data-theme="dashboard_pro"] .sp-nav-link:hover,
html[data-theme="dashboard_pro"] .sp-nav-subitem:hover,
html.sp-theme-dashboard-pro .sp-nav-link:hover,
html.sp-theme-dashboard-pro .sp-nav-subitem:hover {
  background: rgba(79, 140, 255, 0.08);
  border-color: rgba(79, 140, 255, 0.1);
  color: #dbe7ff;
}

html[data-theme="dashboard_pro"] .sp-nav-link.is-active,
html[data-theme="dashboard_pro"] .sp-nav-subitem.is-active,
html[data-theme="dashboard_pro"] .sp-nav-chip.is-active,
html.sp-theme-dashboard-pro .sp-nav-link.is-active,
html.sp-theme-dashboard-pro .sp-nav-subitem.is-active,
html.sp-theme-dashboard-pro .sp-nav-chip.is-active {
  background:
    linear-gradient(90deg, rgba(79, 140, 255, 0.2), rgba(79, 140, 255, 0.07));
  border-color: rgba(79, 140, 255, 0.2);
  box-shadow:
    inset 3px 0 0 #4f8cff,
    0 8px 24px rgba(5, 14, 38, 0.2);
  color: #dce8ff;
}

html[data-theme="dashboard_pro"] .sp-topbar,
html.sp-theme-dashboard-pro .sp-topbar {
  background:
    linear-gradient(135deg, rgba(20, 34, 65, 0.97), rgba(13, 23, 46, 0.97));
  border-color: rgba(126, 151, 210, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 18px 44px rgba(2, 8, 24, 0.25);
  backdrop-filter: blur(24px);
}

html[data-theme="dashboard_pro"] .sp-card,
html[data-theme="dashboard_pro"] .sp-metric-card,
html[data-theme="dashboard_pro"] .sp-table-wrap,
html[data-theme="dashboard_pro"] .sp-search-card,
html[data-theme="dashboard_pro"] .sp-permissions-panel,
html[data-theme="dashboard_pro"] .sp-detail-item,
html.sp-theme-dashboard-pro .sp-card,
html.sp-theme-dashboard-pro .sp-metric-card,
html.sp-theme-dashboard-pro .sp-table-wrap,
html.sp-theme-dashboard-pro .sp-search-card,
html.sp-theme-dashboard-pro .sp-permissions-panel,
html.sp-theme-dashboard-pro .sp-detail-item {
  background:
    linear-gradient(145deg, rgba(24, 39, 72, 0.9), rgba(15, 27, 53, 0.94));
  border-color: rgba(126, 151, 210, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 20px 52px rgba(2, 8, 25, 0.26);
  backdrop-filter: blur(22px);
}

html[data-theme="dashboard_pro"] .sp-card:hover,
html.sp-theme-dashboard-pro .sp-card:hover {
  border-color: rgba(79, 140, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 24px 58px rgba(2, 8, 25, 0.32);
}

html[data-theme="dashboard_pro"] .sp-page-header,
html.sp-theme-dashboard-pro .sp-page-header {
  border-bottom: 1px solid rgba(126, 151, 210, 0.1);
}

html[data-theme="dashboard_pro"] .sp-eyebrow,
html.sp-theme-dashboard-pro .sp-eyebrow {
  color: #6fa4ff;
}

html[data-theme="dashboard_pro"] .sp-metric-card,
html.sp-theme-dashboard-pro .sp-metric-card {
  min-height: 170px;
  overflow: hidden;
}

html[data-theme="dashboard_pro"] .sp-metric-card::after,
html.sp-theme-dashboard-pro .sp-metric-card::after {
  position: absolute;
  width: 130px;
  height: 130px;
  right: -54px;
  bottom: -68px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--sp-metric-accent) 24%, transparent),
    transparent 68%
  );
  content: "";
  pointer-events: none;
}

html[data-theme="dashboard_pro"] .sp-metric-icon,
html.sp-theme-dashboard-pro .sp-metric-icon {
  box-shadow:
    inset 0 0 0 1px color-mix(
      in srgb,
      var(--sp-metric-accent) 18%,
      transparent
    ),
    0 10px 22px rgba(3, 9, 26, 0.24);
}

html[data-theme="dashboard_pro"] .sp-metric-value,
html.sp-theme-dashboard-pro .sp-metric-value {
  font-size: 2.2rem;
  text-shadow: 0 0 24px color-mix(
    in srgb,
    var(--sp-metric-accent) 28%,
    transparent
  );
}

html[data-theme="dashboard_pro"] .sp-chart-card .sp-card-body,
html.sp-theme-dashboard-pro .sp-chart-card .sp-card-body {
  background:
    linear-gradient(180deg, rgba(79, 140, 255, 0.025), transparent 56%);
}

html[data-theme="dashboard_pro"] .sp-table thead th,
html.sp-theme-dashboard-pro .sp-table thead th {
  background: rgba(9, 18, 38, 0.7);
  border-color: rgba(126, 151, 210, 0.12);
  color: #8191b4;
}

html[data-theme="dashboard_pro"] .sp-table tbody td,
html.sp-theme-dashboard-pro .sp-table tbody td {
  border-color: rgba(126, 151, 210, 0.09);
}

html[data-theme="dashboard_pro"] .sp-table tbody tr:hover,
html.sp-theme-dashboard-pro .sp-table tbody tr:hover {
  background: rgba(79, 140, 255, 0.07);
}

html[data-theme="dashboard_pro"] body.sp-dark-shell .form-control,
html[data-theme="dashboard_pro"] body.sp-dark-shell .form-select,
html[data-theme="dashboard_pro"] body.sp-dark-shell .input-group-text,
html[data-theme="dashboard_pro"] .sp-form-control,
html.sp-theme-dashboard-pro body.sp-dark-shell .form-control,
html.sp-theme-dashboard-pro body.sp-dark-shell .form-select,
html.sp-theme-dashboard-pro body.sp-dark-shell .input-group-text,
html.sp-theme-dashboard-pro .sp-form-control {
  background: rgba(8, 17, 36, 0.88) !important;
  border-color: rgba(126, 151, 210, 0.17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
  color: #edf3ff !important;
}

html[data-theme="dashboard_pro"] body.sp-dark-shell .form-control:focus,
html[data-theme="dashboard_pro"] body.sp-dark-shell .form-select:focus,
html[data-theme="dashboard_pro"] .sp-form-control:focus,
html.sp-theme-dashboard-pro body.sp-dark-shell .form-control:focus,
html.sp-theme-dashboard-pro body.sp-dark-shell .form-select:focus,
html.sp-theme-dashboard-pro .sp-form-control:focus {
  border-color: rgba(79, 140, 255, 0.72);
  box-shadow:
    0 0 0 4px rgba(79, 140, 255, 0.12),
    0 10px 26px rgba(3, 10, 28, 0.22);
}

html[data-theme="dashboard_pro"] .sp-btn-primary,
html.sp-theme-dashboard-pro .sp-btn-primary {
  background: linear-gradient(135deg, #4f8cff, #7166f5);
  border-color: rgba(122, 143, 255, 0.65);
  box-shadow: 0 12px 28px rgba(54, 99, 221, 0.28);
}

html[data-theme="dashboard_pro"] .sp-btn-primary:hover,
html.sp-theme-dashboard-pro .sp-btn-primary:hover {
  background: linear-gradient(135deg, #62a0ff, #8478ff);
  border-color: rgba(155, 174, 255, 0.8);
  color: #ffffff;
}

html[data-theme="dashboard_pro"] .sp-btn-muted,
html.sp-theme-dashboard-pro .sp-btn-muted {
  background: rgba(27, 43, 75, 0.78);
  border-color: rgba(126, 151, 210, 0.17);
  color: #bdc9e2;
}

html[data-theme="dashboard_pro"] .sp-status-pill,
html[data-theme="dashboard_pro"] .sp-count-pill,
html[data-theme="dashboard_pro"] .sp-folio,
html.sp-theme-dashboard-pro .sp-status-pill,
html.sp-theme-dashboard-pro .sp-count-pill,
html.sp-theme-dashboard-pro .sp-folio {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

html[data-theme="dashboard_pro"] .modal-content,
html[data-theme="dashboard_pro"] .dropdown-menu,
html[data-theme="dashboard_pro"] .sp-toast,
html[data-theme="dashboard_pro"] .sp-delivery-dialog-card,
html.sp-theme-dashboard-pro .modal-content,
html.sp-theme-dashboard-pro .dropdown-menu,
html.sp-theme-dashboard-pro .sp-toast,
html.sp-theme-dashboard-pro .sp-delivery-dialog-card {
  background:
    linear-gradient(145deg, rgba(23, 38, 70, 0.98), rgba(11, 21, 43, 0.99));
  border-color: rgba(126, 151, 210, 0.18);
  box-shadow: 0 28px 80px rgba(1, 6, 20, 0.5);
}

html[data-theme="dashboard_pro"] .sp-auth-card,
html[data-theme="dashboard_pro"] .sp-public-repair-card,
html.sp-theme-dashboard-pro .sp-auth-card,
html.sp-theme-dashboard-pro .sp-public-repair-card {
  background:
    linear-gradient(145deg, rgba(24, 39, 72, 0.96), rgba(11, 21, 43, 0.98));
  border-color: rgba(126, 151, 210, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 34px 90px rgba(1, 6, 20, 0.46);
}

html[data-theme="dashboard_pro"] .sp-sidebar-overlay,
html.sp-theme-dashboard-pro .sp-sidebar-overlay {
  background: rgba(3, 7, 19, 0.74);
}

@media (max-width: 767.98px) {
  html[data-theme="dashboard_pro"] .sp-metric-card,
  html.sp-theme-dashboard-pro .sp-metric-card {
    min-height: 150px;
  }
}