/* =========================================================
   KEEYNET DEVICE PLAN UX V1
   Same product surface across plans; entitlements gate use.
   ========================================================= */

#manage-device-network[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------
   LOCKED QUICK ACTIONS
   --------------------------------------------------------- */

#manage-device-dialog
button.kc-plan-locked {
  position: relative;

  opacity: .66;
  cursor: not-allowed;
}

#manage-device-dialog
button.kc-plan-locked::after {
  display: inline-flex;

  margin-left: 7px;
  padding: 2px 5px;

  border-radius: 4px;

  background:
    color-mix(
      in srgb,
      var(--accent) 9%,
      transparent
    );

  content:
    attr(data-kc-required-plan);

  font-size: 8px;
  font-weight: 550;
  letter-spacing: .02em;

  color: var(--accent);
}


/* ---------------------------------------------------------
   COMPACT ACCESS / PLAN MATRIX
   --------------------------------------------------------- */

.kc-device-plan-availability {
  width: 100%;

  margin: 12px 0 3px;
  padding: 9px 0 0;

  border-top:
    1px solid
    var(--line);
}

.kc-plan-availability-head,
.kc-plan-feature-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 24px;
  align-items: center;
}

.kc-plan-availability-head {
  padding: 0 0 7px;

  font-size: 10px;
  font-weight: 500;

  color: var(--muted);
}

.kc-plan-feature-row {
  min-height: 30px;

  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--line) 65%,
      transparent
    );

  font-size: 11px;
}

.kc-plan-feature-name {
  font-weight: 400;

  color: var(--text);
}

.kc-plan-feature-state {
  font-size: 10.5px;
  font-weight: 500;

  text-decoration: none;
}

.kc-plan-feature-state.included {
  color: var(--success);
}

.kc-plan-feature-state.upgrade {
  color: var(--accent);
}

.kc-plan-feature-state.upgrade:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   INLINE NETWORK UPGRADE LINKS
   --------------------------------------------------------- */

.kc-inline-upgrade {
  display: inline-block;

  margin-top: 3px;

  font-size: 10.5px;
  font-weight: 500;

  color: var(--accent);

  text-decoration: none;
}

.kc-inline-upgrade:hover {
  text-decoration: underline;
}


/* Keep upgrade treatment restrained, not sales-card style. */

#manage-device-dialog
.kc-inline-upgrade,
#manage-device-dialog
.kc-plan-feature-state.upgrade {
  background: transparent;
  border: 0;
  box-shadow: none;
}