/* Device Details visual refresh only. Scoped to the Device Details page root. */
.device-details-modern {
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  margin-inline: auto;
  min-height: calc(100vh - 96px);
  background:
    radial-gradient(circle at top left, rgba(70, 95, 255, .10), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, #f5f7fb 34%);
  border-radius: 8px;
}

.device-details-modern > * {
  order: 10;
}

.dark .device-details-modern {
  background:
    radial-gradient(circle at top left, rgba(70, 95, 255, .16), transparent 34rem),
    linear-gradient(180deg, #101828 0%, #0f172a 38%);
}

.device-details-modern .ddm-header {
  align-items: flex-start;
  margin-bottom: 18px;
  order: 0;
}

.device-details-modern .ddm-title-wrap::after {
  content: "Modern monitoring view for device health, WAN, SSID, LAN, and faults.";
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 14px;
  font-weight: 400;
}

.dark .device-details-modern .ddm-title-wrap::after {
  color: #98a2b3;
}

.device-details-modern .ddm-title {
  font-size: 28px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #101828 !important;
}

.dark .device-details-modern .ddm-title {
  color: #fff !important;
}

.device-details-modern .ddm-btn-primary,
.device-details-modern .ddm-btn-secondary,
.device-details-modern .ddm-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 700 !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.device-details-modern .ddm-btn-primary:hover,
.device-details-modern .ddm-btn-secondary:hover,
.device-details-modern .ddm-btn-success:hover {
  transform: translateY(-1px);
}

.device-details-modern .ddm-btn-primary {
  background: linear-gradient(135deg, #465fff, #3046d8) !important;
  box-shadow: 0 12px 28px rgba(70, 95, 255, .24) !important;
}

.device-details-modern .ddm-btn-success {
  background: linear-gradient(135deg, #039855, #027a48) !important;
  box-shadow: 0 12px 28px rgba(3, 152, 85, .18) !important;
}

.device-details-modern .ddm-btn-secondary {
  background: rgba(255, 255, 255, .88) !important;
  color: #344054 !important;
  border: 1px solid #e4e7ec !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}

.dark .device-details-modern .ddm-btn-secondary {
  background: rgba(29, 41, 57, .88) !important;
  color: #e4e7ec !important;
  border-color: #344054 !important;
}

.device-details-modern > .rounded-2xl,
.device-details-modern .ddm-network-panel,
.device-details-modern .ddm-section {
  overflow: hidden;
  border-radius: 8px !important;
  border-color: #e4e7ec !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 40px rgba(16, 24, 40, .07) !important;
}

.device-details-modern .ddm-device-info-panel {
  order: 1;
  border-color: rgba(70, 95, 255, .15) !important;
  background:
    linear-gradient(135deg, rgba(70, 95, 255, .10), transparent 42%),
    linear-gradient(180deg, #ffffff, #fbfcff) !important;
  position: relative;
}

.device-details-modern .ddm-device-info-panel::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(70, 95, 255, .14), rgba(11, 165, 236, .10)),
    #eef4ff;
  box-shadow: inset 0 0 0 1px rgba(70, 95, 255, .14);
  pointer-events: none;
}

.device-details-modern .ddm-device-info-panel::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 33px;
  width: 22px;
  height: 22px;
  border: 2px solid #465fff;
  border-radius: 6px;
  box-shadow: 6px 6px 0 -4px #465fff, -6px 6px 0 -4px #465fff;
  pointer-events: none;
}

.device-details-modern .ddm-metrics-grid {
  order: 2;
}

.device-details-modern .ddm-device-tags-panel {
  order: 3;
}

.device-details-modern .ddm-device-info-panel + .ddm-device-tags-panel {
  margin-top: 0 !important;
}

.device-details-modern .ddm-device-info-panel > div:first-child {
  border-bottom-color: transparent !important;
  background: transparent !important;
  padding-bottom: 8px !important;
  padding-left: 84px !important;
}

.device-details-modern .ddm-device-info-panel > div:nth-child(2) {
  border-top: 0 !important;
  padding-top: 10px !important;
  padding-left: 84px !important;
}

.device-details-modern .ddm-device-info-panel > div:first-child h3 {
  font-size: 20px !important;
  line-height: 1.2 !important;
}

.device-details-modern .ddm-device-info-panel > div:first-child h3::after {
  content: "Online device identity and ACS parameter reference.";
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

.dark .device-details-modern .ddm-device-info-panel > div:first-child h3::after {
  color: #98a2b3;
}

.device-details-modern .ddm-device-info-panel [class*="grid grid-cols-1 md:grid-cols-3"] {
  gap: 14px !important;
}

.device-details-modern .ddm-device-info-panel [class*="bg-gradient-to-br from-white to-gray-50"] {
  min-height: 86px;
}

.device-details-modern .ddm-device-info-panel [class*="bg-gradient-to-br from-white to-gray-50"] > div:first-child {
  height: 3px !important;
}

.device-details-modern .ddm-device-info-panel [class*="bg-gradient-to-br from-white to-gray-50"] [class*="p-5"] {
  padding: 14px !important;
}

.device-details-modern .ddm-device-info-panel [class*="p-3 rounded-xl"] {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0 !important;
}

.device-details-modern .ddm-device-tags-panel > div:nth-child(2) {
  min-height: 74px !important;
  padding-top: 14px !important;
  padding-bottom: 16px !important;
}

.device-details-modern .ddm-device-tags-panel > div:first-child {
  min-height: 54px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.device-details-modern .ddm-device-tags-panel [class*="p-4"] {
  padding: 0 !important;
}

.device-details-modern .ddm-device-tags-panel [class*="justify-center"] {
  justify-content: flex-start !important;
}

.device-details-modern .ddm-device-tags-panel [class*="items-center"] {
  align-items: flex-start !important;
}

.device-details-modern .ddm-device-tags-panel [class*="min-h"] {
  min-height: auto !important;
}

.device-details-modern .ddm-device-tags-panel [class*="space-y-6"] {
  min-height: 0 !important;
}

.device-details-modern .ddm-device-tags-panel [class*="relative overflow-hidden"] {
  max-width: 420px;
  min-height: 66px !important;
  margin-inline: auto;
}

.device-details-modern .ddm-device-tags-panel [class*="relative overflow-hidden"] [class*="p-5"],
.device-details-modern .ddm-device-tags-panel [class*="relative overflow-hidden"] [class*="p-4"] {
  padding: 12px 14px !important;
}

.device-details-modern .ddm-device-tags-panel input {
  min-height: 34px;
  border-radius: 8px !important;
}

.device-details-modern .ddm-metrics-grid [class*="bg-gradient-to-br from-white to-gray-50"] {
  min-height: 132px;
}

.dark .device-details-modern > .rounded-2xl,
.dark .device-details-modern .ddm-network-panel,
.dark .device-details-modern .ddm-section {
  border-color: #344054 !important;
  background: rgba(29, 41, 57, .82) !important;
}

.device-details-modern > .rounded-2xl > div:first-child {
  min-height: 62px;
  padding: 15px 16px !important;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border-bottom: 1px solid #e4e7ec;
}

.dark .device-details-modern > .rounded-2xl > div:first-child {
  background: linear-gradient(180deg, rgba(29, 41, 57, .94), rgba(16, 24, 40, .9));
  border-bottom-color: #344054;
}

.device-details-modern > .rounded-2xl > div:first-child h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #101828 !important;
}

.dark .device-details-modern > .rounded-2xl > div:first-child h3 {
  color: #fff !important;
}

.device-details-modern .ddm-info-tile,
.device-details-modern .ddm-metric-tile {
  border-radius: 8px !important;
  border-color: #e4e7ec !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px rgba(16, 24, 40, .06) !important;
}

.device-details-modern [class*="bg-gradient-to-br from-white to-gray-50"] {
  border-radius: 8px !important;
  border-color: #e4e7ec !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px rgba(16, 24, 40, .06) !important;
}

.dark .device-details-modern [class*="dark:from-gray-800"] {
  border-color: #344054 !important;
  background: rgba(16, 24, 40, .64) !important;
}

.device-details-modern [class*="rounded-xl"] {
  border-radius: 8px !important;
}

.device-details-modern [class*="bg-gradient-to-br from-blue-50"],
.device-details-modern [class*="bg-gradient-to-br from-purple-50"],
.device-details-modern [class*="bg-gradient-to-br from-green-50"],
.device-details-modern [class*="bg-gradient-to-br from-orange-50"],
.device-details-modern [class*="bg-gradient-to-br from-yellow-50"],
.device-details-modern [class*="bg-gradient-to-br from-red-50"] {
  border-radius: 8px !important;
  background: #eff4ff !important;
  box-shadow: inset 0 0 0 1px rgba(70, 95, 255, .12) !important;
}

.device-details-modern > div[class*="grid grid-cols-2"] > div {
  min-height: 132px;
}

.dark .device-details-modern .ddm-info-tile,
.dark .device-details-modern .ddm-metric-tile {
  border-color: #344054 !important;
  background: rgba(16, 24, 40, .64) !important;
}

.device-details-modern .ddm-metric-tile {
  min-height: 132px;
}

.device-details-modern .ddm-network-panel {
  border: 1px solid #e4e7ec;
}

.device-details-modern .ddm-network-panel > div:first-child {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.device-details-modern .ddm-network-panel nav {
  justify-content: flex-start !important;
  gap: 8px;
  padding: 12px;
}

.device-details-modern .ddm-network-panel nav button {
  border: 1px solid #e4e7ec !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  background: #fff;
}

.device-details-modern .ddm-network-panel nav button[class*="border-blue-600"] {
  color: #fff !important;
  background: linear-gradient(135deg, #465fff, #3046d8) !important;
  border-color: #465fff !important;
}

.device-details-modern .ddm-wan-card {
  border-radius: 8px !important;
  border-color: #e4e7ec !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px rgba(16, 24, 40, .06) !important;
}

.dark .device-details-modern .ddm-wan-card {
  border-color: #344054 !important;
  background: rgba(16, 24, 40, .64) !important;
}

.device-details-modern .ddm-network-panel h2,
.device-details-modern .ddm-network-panel h3 {
  font-weight: 800 !important;
}

@media (max-width: 720px) {
  .device-details-modern {
    border-radius: 0;
  }

  .device-details-modern .ddm-device-info-panel::before,
  .device-details-modern .ddm-device-info-panel::after {
    display: none;
  }

  .device-details-modern .ddm-device-info-panel > div:first-child,
  .device-details-modern .ddm-device-info-panel > div:nth-child(2) {
    padding-left: 16px !important;
  }

  .device-details-modern .ddm-header {
    gap: 14px;
  }

  .device-details-modern .ddm-header > button,
  .device-details-modern .ddm-header .ddm-btn-primary {
    width: 100%;
  }
}

/* Final polish: keep the Device Information title readable and uncluttered. */
.device-details-modern .ddm-device-info-panel::before,
.device-details-modern .ddm-device-info-panel::after {
  display: none !important;
}

.device-details-modern .ddm-device-info-panel > div:first-child,
.device-details-modern .ddm-device-info-panel > div:nth-child(2) {
  padding-left: 16px !important;
}

.device-details-modern .ddm-device-info-panel > div:first-child h3::after {
  content: "Device identity and ACS parameter reference.";
}